Merge branch '885-multiple-language-support' into develop

younginnovations · Aug 4, 2023 · 671af9c · 671af9c
2 parents 761c9b6 + abee5f3
commit 671af9c
Show file tree

Hide file tree

Showing 6 changed files with 123 additions and 107 deletions.
diff --git a/public/css/app.css b/public/css/app.css
diff --git a/public/css/webportal-app.css b/public/css/webportal-app.css
diff --git a/public/js/app.js b/public/js/app.js
diff --git a/public/mix-manifest.json b/public/mix-manifest.json
@@ -1,10 +1,10 @@
 {
-    "/js/app.js": "/js/app.js?id=56b694e09cdd9e4cb7cdae396555e2d8",
+    "/js/app.js": "/js/app.js?id=8f76924c87c37ed1ed38da3dff74462b",
     "/js/script.js": "/js/script.js?id=7f914fe05784c5aaab0b7ec73b6f89ff",
     "/js/webportal-script.js": "/js/webportal-script.js?id=95dd39e93e91393c8e5f993fd1605ad4",
     "/js/formbuilder.js": "/js/formbuilder.js?id=96f1b9dd5890b8ff09e613117dd94592",
     "/manifest.js": "/manifest.js?id=3ed1124c8f4dcb98acc36de67cb80349",
-    "/css/webportal-app.css": "/css/webportal-app.css?id=6dd6055acaae23cf5b4526a41154453f",
-    "/css/app.css": "/css/app.css?id=c49d62ad014a4150440a838babcfa0c3",
+    "/css/webportal-app.css": "/css/webportal-app.css?id=c61e4d2067508fb477659c96519e22b2",
+    "/css/app.css": "/css/app.css?id=c8917b1ba2064e4ca20fcbdb4e0c5687",
     "/js/vendor.js": "/js/vendor.js?id=8ce54f5753dc05b7d5fa20519b778476"
 }
diff --git a/resources/assets/js/views/web/partials/WebHeader.vue b/resources/assets/js/views/web/partials/WebHeader.vue
@@ -11,21 +11,22 @@
           <div class="basis-4/6">
             <ul
               id="nav-list"
-              class="nav__list flex justify-between pt-10 uppercase leading-5 1xl:flex-row-reverse"
+              class="nav__list reverse-on-large-screen flex justify-between pt-10 uppercase leading-5"
             >
               <span
                 id="hamburger-cross"
-                class="absolute top-3 left-8 cursor-pointer 1xl:hidden"
+                class="hide-on-lagre-screen absolute top-3 left-8 cursor-pointer"
               >
                 <svg-vue
                   class="text-3xl text-white"
                   icon="hamburger-cross"
                 ></svg-vue>
               </span>
               <li
-                class="border-bottom mb-4 flex border-b pb-4 1xl:mb-0 1xl:border-b-transparent 1xl:pb-0"
+                class="border-bottom space-bottom-large-screen flex border-b 1xl:border-b-transparent"
               >
-                <span class="mr-2 hidden pt-5 pb-5 uppercase 1xl:block 1xl:pt-0"
+                <span
+                  class="hide-on-small-screen mr-2 pt-5 pb-5 uppercase 1xl:pt-0"
                   >{{ translate.webText('language') }}:</span
                 >
                 <ul class="flex items-center justify-center">
@@ -66,7 +67,7 @@
               </li>
 
               <li>
-                <ul class="flex flex-col items-start 1xl:flex-row">
+                <ul class="row-on-large-screen flex flex-col items-start">
                   <li class="nav__links active dropdown">
                     <a href="/about">{{ translate.webText('about') }}</a>
                     <NavDropdown
@@ -119,7 +120,7 @@
           <div id="menu-overlay"></div>
           <div
             id="hamburger"
-            class="hamburger home-burger-menu mb-4 scale-90 1xl:hidden 1xl:outline"
+            class="hamburger home-burger-menu hide-on-lagre-screen mb-4 scale-90"
           >
             <span class="bg-bluecoral" />
             <span class="bg-bluecoral" />
@@ -184,4 +185,38 @@ export default defineComponent({
 .border-bottom {
   border-color: rgba(255, 255, 255, 0.24);
 }
+.hide-on-lagre-screen {
+  visibility: hidden;
+  @media (max-width: 1415px) {
+    visibility: visible;
+  }
+}
+
+.hide-on-small-screen {
+  display: block;
+  @media (max-width: 1415px) {
+    display: none;
+  }
+}
+.reverse-on-large-screen {
+  flex-direction: row-reverse;
+  @media (max-width: 1415px) {
+    flex-direction: column;
+  }
+}
+.row-on-large-screen {
+  flex-direction: row;
+  @media (max-width: 1415px) {
+    flex-direction: column;
+  }
+}
+
+.space-bottom-large-screen {
+  margin-bottom: 0px;
+  padding-bottom: 0px;
+  @media (max-width: 1415px) {
+    margin-bottom: 16px;
+    padding-bottom: 16px;
+  }
+}
 </style>
diff --git a/resources/assets/sass/layouts/_header.scss b/resources/assets/sass/layouts/_header.scss
@@ -38,9 +38,16 @@
   font-style: normal;
   white-space: pre-wrap;
   display: block;
+  a {
+    @apply text-n-50;
+    font-size: 12px;
+  }
 
   a:hover {
     @apply text-n-50;
+    @media screen and (max-width: 1415px) {
+      @apply text-white;
+    }
   }
 
   .read__more {
@@ -54,19 +61,17 @@
   }
 
   a {
-    @apply text-white;
+    @apply text-n-50;
     padding-bottom: 24px;
+    @media screen and (max-width: 1415px) {
+      @apply text-white;
+    }
   }
 }
 @media screen and (min-width: 1415px) {
   .nav__links {
     padding: 0px 8px 20px;
 
-    a {
-      @apply text-n-50;
-      font-size: 12px;
-    }
-
     &::after {
       position: absolute;
       bottom: 0;
@@ -153,7 +158,11 @@
 }
 
 #menu-overlay {
-  @apply 1xl:hidden;
+  @apply hidden;
+
+  @media screen and (max-width: 1415px) {
+    @apply block;
+  }
 }
 
 #activity-menu-overlay {