fix(examples): update for mobile

steven.roulleau · steven.roulleau · commit c9a491bc9177 · 2018-12-12T09:35:17.000+01:00
diff --git a/build/docs/src/demo-app/examples/non-version-specific/customize_style.html b/build/docs/src/demo-app/examples/non-version-specific/customize_style.html
@@ -29,7 +29,6 @@
         }
 
         #prompter-css {
-            height: 110px;
             width: 70%;
             margin-left: 36px;
             padding: 24px;
@@ -38,25 +37,48 @@
             z-index: 30;
             border-radius: 6px;
             background: rgba(240, 240, 240, 0.9);
+            opacity: 1;
+            transition: opacity .2s ease-out;
+        }
+
+        #prompter-css.hide {
+            opacity: 0;
         }
 
         .hidden {
             display: none;
         }
 
         myscript-math-web {
-            height: calc(100% - 60px);
+            height: calc(100% - 64px);
         }
 
-        @media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
-            myscript-math-web {
-                height: calc(100vh - 200px);
-            }
+        .toggle-opt {
+            display: none;
+        }
 
+        .show {
+            color: #90A4AE;
+            cursor: pointer;
+            position: absolute;
+            right: 1vh;
+            top: 1vw;
+        }
+
+        @media only screen and (min-width: 320px) and (max-width: 820px){
             #prompter-css {
                 position: fixed;
                 bottom: 12px;
             }
+            .toggle-opt {
+                display: flex;
+                justify-content: center;
+            }
+            .nav-style {
+                overflow: hidden;
+                max-height: 0;
+                transition: max-height .2s ease-out;
+            }
         }
     </style>
 
@@ -65,8 +87,11 @@
     <script type="module" src="../../../../node_modules/@polymer/paper-toggle-button/paper-toggle-button.js"></script>
     <script type="module" src="../../../../node_modules/@polymer/paper-swatch-picker/paper-swatch-picker.js"></script>
     <script type="module" src="../../../../node_modules/@polymer/paper-slider/paper-slider.js"></script>
+    <script type="module" src="../../../../node_modules/@polymer/iron-icon/iron-icon.js"></script>
+    <script type="module" src="../../../../node_modules/@polymer/iron-icons/iron-icons.js"></script>
     <script type="module" src="../../../../myscript-math-web.js"></script>
 
+
     </head><custom-style>
         <style>
             myscript-math-web {
@@ -91,6 +116,9 @@
 
 
 
+<div class="toggle-opt">
+    <iron-icon class="show" icon="icons:settings"></iron-icon>
+</div>
 <nav class="nav-style">
     <paper-toggle-button class="flex-item" id="penstyleclasses" checked="">Apply pen style classes (greenThickPen)
     </paper-toggle-button>
@@ -139,9 +167,14 @@
 const penColor = document.querySelector('#pencolor');
 const penWidth = document.querySelector('#penwidth');
 const penStyleClasses = document.querySelector('#penstyleclasses');
+const prompterCss = document.getElementById('prompter-css');
 const prompterText = document.getElementById('prompter-css-text');
 
 function updatePrompter(values) {
+  if (prompterCss.classList.contains('hide')) {
+    prompterCss.classList.toggle('hide');
+  }
+
   prompterText.innerText = '';
   values.forEach(function (value) {
     prompterText.innerText += `${value[0]} = ${JSON.stringify(value[1])} \n`;
@@ -187,6 +220,20 @@
     component.penstyleclasses = '';
     updatePrompter([['component.penstyleclasses', '']]);
   }
+});
+document.querySelector('.show').addEventListener('click', () => {
+  const content = document.querySelector('.nav-style');
+
+  if (content.style.maxHeight) {
+    content.style.maxHeight = null;
+  } else {
+    content.style.maxHeight = content.scrollHeight + "px";
+  }
+});
+window.addEventListener('load', () => {
+  setTimeout(() => {
+    prompterCss.classList.toggle('hide');
+  }, 1500);
 });</script>
 
 
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -22,6 +22,7 @@
   "license": "Apache-2.0",
   "homepage": "https://myscript.github.io/myscript-math-web/components/myscript-math-web/",
   "dependencies": {
+    "@polymer/iron-icons": "^3.0.1",
     "@polymer/polymer": "^3.1.0",
     "@webcomponents/webcomponentsjs": "^2.2.1",
     "katex": "^0.8.3",
diff --git a/src/demo-app/examples/non-version-specific/customize_style.html b/src/demo-app/examples/non-version-specific/customize_style.html
@@ -32,7 +32,6 @@
         }
 
         #prompter-css {
-            height: 110px;
             width: 70%;
             margin-left: 36px;
             padding: 24px;
@@ -41,25 +40,48 @@
             z-index: 30;
             border-radius: 6px;
             background: rgba(240, 240, 240, 0.9);
+            opacity: 1;
+            transition: opacity .2s ease-out;
+        }
+
+        #prompter-css.hide {
+            opacity: 0;
         }
 
         .hidden {
             display: none;
         }
 
         myscript-math-web {
-            height: calc(100% - 60px);
+            height: calc(100% - 64px);
         }
 
-        @media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
-            myscript-math-web {
-                height: calc(100vh - 200px);
-            }
+        .toggle-opt {
+            display: none;
+        }
 
+        .show {
+            color: #90A4AE;
+            cursor: pointer;
+            position: absolute;
+            right: 1vh;
+            top: 1vw;
+        }
+
+        @media only screen and (min-width: 320px) and (max-width: 820px){
             #prompter-css {
                 position: fixed;
                 bottom: 12px;
             }
+            .toggle-opt {
+                display: flex;
+                justify-content: center;
+            }
+            .nav-style {
+                overflow: hidden;
+                max-height: 0;
+                transition: max-height .2s ease-out;
+            }
         }
     </style>
 
@@ -68,8 +90,11 @@
     <script type="module" src="../../../../node_modules/@polymer/paper-toggle-button/paper-toggle-button.js"></script>
     <script type="module" src="../../../../node_modules/@polymer/paper-swatch-picker/paper-swatch-picker.js"></script>
     <script type="module" src="../../../../node_modules/@polymer/paper-slider/paper-slider.js"></script>
+    <script type="module" src="../../../../node_modules/@polymer/iron-icon/iron-icon.js"></script>
+    <script type="module" src="../../../../node_modules/@polymer/iron-icons/iron-icons.js"></script>
     <script type="module" src="../../../../myscript-math-web.js"></script>
 
+
     <custom-style>
         <style>
             myscript-math-web {
@@ -94,6 +119,9 @@
 </head>
 
 <body>
+<div class="toggle-opt">
+    <iron-icon class="show" icon="icons:settings"></iron-icon>
+</div>
 <nav class="nav-style">
     <paper-toggle-button class="flex-item" id="penstyleclasses" checked>Apply pen style classes (greenThickPen)
     </paper-toggle-button>
@@ -153,9 +181,13 @@
     const penColor = document.querySelector('#pencolor');
     const penWidth = document.querySelector('#penwidth');
     const penStyleClasses = document.querySelector('#penstyleclasses');
+    const prompterCss = document.getElementById('prompter-css');
     const prompterText = document.getElementById('prompter-css-text');
 
     function updatePrompter(values) {
+        if(prompterCss.classList.contains('hide')) {
+            prompterCss.classList.toggle('hide');
+        }
         prompterText.innerText = '';
         values.forEach(function (value) {
             prompterText.innerText += `${value[0]} = ${JSON.stringify(value[1])} \n`;
@@ -205,6 +237,21 @@
             updatePrompter([['component.penstyleclasses', '']]);
         }
     });
+
+    document.querySelector('.show').addEventListener('click', () => {
+        const content = document.querySelector('.nav-style');
+        if (content.style.maxHeight){
+            content.style.maxHeight = null;
+        } else {
+            content.style.maxHeight = content.scrollHeight + "px";
+        }
+    });
+
+    window.addEventListener('load', () => {
+       setTimeout(() => {
+           prompterCss.classList.toggle('hide');
+       }, 1500);
+    });
 </script>
 </body>
 
