Merge pull request #796 from alpheios-project/i780-navigation-14

Small optimization for mobile

build/config-output.mjs

@@ -35,15 +35,6 @@ const webpack = {
     ],
     module: {
       rules: [
-        {
-          test: /\.(jpg|png)$/,
-          use: [{
-            loader: 'url-loader',
-            options: {
-              limit: 1500
-            }
-          }]
-        }
       ]
     }
   },

build/config-pages.mjs

@@ -27,15 +27,6 @@ const webpack = {
     ],
     module: {
       rules: [
-        {
-          test: /\.(jpg|png)$/,
-          use: [{
-            loader: 'url-loader',
-            options: {
-              limit: 1500
-            }
-          }]
-        }
       ]
     }
   },

src/_pages/video-tutorials/vue/app.vue

@@ -3,17 +3,17 @@
       <div class="alpheios-alignment-editor__intro">
         <div class="alpheios-alignment-editor__page-container">
           <div class="alpheios-alignment-editor__page-header">
+            <div class="alpheios-header-logo">
+              <a href="/">
+                <img src="images/alpheios-logo-black-2.png" class="alpheios-logo">
+              </a>
+            </div>
             <div class="alpheios-alignment-editor__page-header-title">
               <span class="alpheios-alignment-editor-big-icon">
                 <videos-icon />
               </span>
               <h2 class="alpheios-alignment-editor__page-title">Quick Start Videos</h2>
             </div>
-            <div class="alpheios-header-logo">
-              <a href="/">
-                <img src="images/alpheios-logo-black-2.png" class="alpheios-logo">
-              </a>
-            </div>
           </div><!-- alpheios-alignment-editor__page-header -->
 
           <div class="alpheios-alignment-editor__page-content">
@@ -63,16 +63,23 @@ export default {
 
   .alpheios-alignment-editor__page-header {
     background: #f1fafc;
-    padding: 20px;
-    display: flex;
-    justify-content: space-between;
+    padding: 0 20px;
+
+    @media screen and (max-width: 500px) {
+      display: block;
+    }
 
     .alpheios-alignment-editor-big-icon {
       display: inline-block;
       width: 170px;
       height: 170px;
       vertical-align: middle;
 
+      @media screen and (max-width: 500px) {
+        width: 100px;
+        height: 100px;
+      }
+
       svg {
         display: block;
         width: 100%;
@@ -87,6 +94,14 @@ export default {
       text-align: right;
       vertical-align: middle;
       line-height: 1;
+      margin: 0;
+
+      @media screen and (max-width: 500px) {
+        padding: 10px 0 10px 10px;
+        font-size: 26px;
+        width: calc(100% - 120px);
+        text-align: left;
+      }
     }
   }
   .alpheios-alignment-editor__page-container {
@@ -109,12 +124,14 @@ export default {
 
   .alpheios-alignment-editor__page-content {
     text-align: center;
+    padding: 20px;
 
     .alpheios-alignment-editor__page-content-item {
       display: inline-block;
       vertical-align: top;
-      width: 500px;
-      padding: 20px;
+      max-width: 500px;
+      width: 100%;
+      margin-bottom: 20px;
     }    
   } 
 }

src/_pages/whats-new/vue/app.vue

@@ -193,6 +193,14 @@ export default {
       margin-left: 80px;
       color: #90a959;
     }
+
+    @media screen and (max-width: 500px) {
+      padding: 20px 0;
+      h2 {
+        font-size: 150%;
+        margin-left: 0;
+      }
+    }
   }
 
   .alpheios-alignment-editor__content-slider {
@@ -239,6 +247,10 @@ export default {
         margin: 0 0 40px;
         font-size: 200%;
         text-align: center;
+        @media screen and (max-width: 500px) {
+          font-size: 110%;
+          margin: 0 0 20px;
+        }
       }
 
       p {

src/styles/_animated_text.scss

@@ -6,7 +6,9 @@
     text-shadow: 2px 2px 3px rgb(0 0 0 / 60%);
     font-family: "Source Serif Pro", serif;
     text-align: center;
-
+    @media screen and (max-width: 500px) {
+        display: none;
+    }
     span {
         display: inline-block;
     }

src/vue/initial-screen.vue

@@ -169,19 +169,14 @@ export default {
     text-shadow: 2px 2px 3px rgb(0 0 0 / 60%);
     font-family: "Source Serif Pro", serif;
     text-align: center;
-}
-
-.alpheios-alignment-editor-initial-screen__video {
 
-    text-align: center;
-    iframe {
-        margin: 0;
-        border: 0; 
-        width: 800px;
-        height: 500px;
+    @media screen and (max-width: 500px) {
+      font-size: 32px;
+      display: block;
     }
 }
 
+
 .alpheios-header-logo {
     text-align: center;
     padding-top: 20px;
@@ -195,15 +190,20 @@ export default {
 
 .alpheios-alignment-editor-initial-screen__buttons {
 
-    width: 1000px;
+    max-width: 1000px;
+    width: 90%;
     margin: 0 auto;
     text-align: center;
 
     .alpheios-alignment-editor-initial-screen__button {
         width: 49%;
         display: inline-block;
         vertical-align: top;
-        
+     
+        @media screen and (max-width: 500px) {
+          margin-bottom: 20px;
+          width: 100%;
+        }
 
         .alpheios-actions-menu-main-button {
             font-weight: normal;

src/vue/page-links.vue

@@ -58,7 +58,12 @@ export default {
 .alpheios-alignment-editor-initial-screen__additional {
     margin: 100px auto;
     text-align: center;
-    width: 800px;
+    max-width: 800px;
+    width: 90%;
+
+    @media screen and (max-width: 500px) {
+        margin: 20px auto;
+    }
 
     .alpheios-alignment-editor-router-link {
         display: inline-block;
@@ -70,6 +75,12 @@ export default {
             text-decoration: none;
             display: inline-block;
         }
+
+        @media screen and (max-width: 500px) {
+          width: 100%;
+          padding: 20px 40px;
+          display: block;
+        }
     }
 
     .alpheios-alignment-router-link-icon {