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

younginnovations · Aug 4, 2023 · ac49ab9 · ac49ab9
2 parents b43e035 + 2c9b58e
commit ac49ab9
Show file tree

Hide file tree

Showing 10 changed files with 1,313 additions and 1,110 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/js/vendor.js b/public/js/vendor.js
diff --git a/public/mix-manifest.json b/public/mix-manifest.json
@@ -1,10 +1,10 @@
 {
-    "/js/app.js": "/js/app.js?id=c8dc1d6a399da72125356dd461dafbf7",
+    "/js/app.js": "/js/app.js?id=56b694e09cdd9e4cb7cdae396555e2d8",
     "/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=aa832b12de3c0518169d6dd46f72dec7",
-    "/css/app.css": "/css/app.css?id=33ff2a1ef0bdf667fcc098e19bc50d54",
-    "/js/vendor.js": "/js/vendor.js?id=f9ea589d654a205711a655b5c2811269"
+    "/css/webportal-app.css": "/css/webportal-app.css?id=6dd6055acaae23cf5b4526a41154453f",
+    "/css/app.css": "/css/app.css?id=c49d62ad014a4150440a838babcfa0c3",
+    "/js/vendor.js": "/js/vendor.js?id=8ce54f5753dc05b7d5fa20519b778476"
 }
diff --git a/resources/assets/js/views/web/IatiRegisterPage.vue b/resources/assets/js/views/web/IatiRegisterPage.vue
@@ -978,14 +978,14 @@ export default defineComponent({
 
 .section {
   &__container {
-    @media screen and (min-width: 1280px) {
+    @media screen and (min-width: 1415px) {
       max-width: 1206px;
     }
     max-width: 865px;
     margin: auto;
 
     .feedback {
-      @media screen and (min-width: 1280px) {
+      @media screen and (min-width: 1415px) {
         width: 702px;
       }
 

diff --git a/resources/assets/js/views/web/RegisterPage.vue b/resources/assets/js/views/web/RegisterPage.vue
@@ -684,14 +684,14 @@ export default defineComponent({
 
 .section {
   &__container {
-    @media screen and (min-width: 1280px) {
+    @media screen and (min-width: 1415px) {
       max-width: 1206px;
     }
     max-width: 865px;
     margin: auto;
 
     .feedback {
-      @media screen and (min-width: 1280px) {
+      @media screen and (min-width: 1415px) {
         width: 702px;
       }
 

diff --git a/resources/assets/js/views/web/partials/WebHeader.vue b/resources/assets/js/views/web/partials/WebHeader.vue
@@ -11,21 +11,21 @@
           <div class="basis-4/6">
             <ul
               id="nav-list"
-              class="nav__list flex justify-between pt-10 uppercase leading-5 xl:flex-row-reverse"
+              class="nav__list flex justify-between pt-10 uppercase leading-5 1xl:flex-row-reverse"
             >
               <span
                 id="hamburger-cross"
-                class="absolute top-3 left-8 cursor-pointer xl:hidden"
+                class="absolute top-3 left-8 cursor-pointer 1xl:hidden"
               >
                 <svg-vue
                   class="text-3xl text-white"
                   icon="hamburger-cross"
                 ></svg-vue>
               </span>
               <li
-                class="border-bottom mb-4 flex border-b pb-4 xl:mb-0 xl:border-b-transparent xl:pb-0"
+                class="border-bottom mb-4 flex border-b pb-4 1xl:mb-0 1xl:border-b-transparent 1xl:pb-0"
               >
-                <span class="mr-2 hidden pt-5 pb-5 uppercase xl:block xl:pt-0"
+                <span class="mr-2 hidden pt-5 pb-5 uppercase 1xl:block 1xl:pt-0"
                   >{{ translate.webText('language') }}:</span
                 >
                 <ul class="flex items-center justify-center">
@@ -66,7 +66,7 @@
               </li>
 
               <li>
-                <ul class="flex flex-col items-start xl:flex-row">
+                <ul class="flex flex-col items-start 1xl:flex-row">
                   <li class="nav__links active dropdown">
                     <a href="/about">{{ translate.webText('about') }}</a>
                     <NavDropdown
@@ -77,9 +77,9 @@
                     />
                   </li>
                   <li class="nav__links active dropdown">
-                    <a href="/publishing-checklist">{{
-                      translate.webText('publishing_checklist')
-                    }}</a>
+                    <a class="-mb-8 inline-block" href="/publishing-checklist">
+                      {{ translate.webText('publishing_checklist') }}
+                    </a>
                     <NavDropdown
                       :name="translate.webText('publishing_checklist')"
                       :text="
@@ -119,19 +119,17 @@
           <div id="menu-overlay"></div>
           <div
             id="hamburger"
-            class="hamburger home-burger-menu mb-4 scale-90 xl:hidden"
+            class="hamburger home-burger-menu mb-4 scale-90 1xl:hidden 1xl:outline"
           >
             <span class="bg-bluecoral" />
             <span class="bg-bluecoral" />
             <span class="bg-bluecoral" />
           </div>
         </nav>
         <div
-          class="header__title flex flex-wrap items-center justify-between gap-2 border-l-4 border-l-turquoise py-2 px-4 sm:py-5 sm:px-6 xl:mt-6"
+          class="header__title mt-4 flex flex-wrap items-center justify-between gap-2 border-l-4 border-l-turquoise py-2 px-4 sm:py-5 sm:px-6 xl:mt-6"
         >
-          <h1
-            class="text-xl font-bold normal-case text-white sm:text-4xl sm:text-heading-2"
-          >
+          <h1 class="text-xl font-bold normal-case text-white sm:text-4xl">
             {{ title }}
           </h1>
           <a

diff --git a/resources/assets/sass/layouts/_header.scss b/resources/assets/sass/layouts/_header.scss
@@ -14,7 +14,7 @@
   }
 }
 .header {
-  max-width: 1166px;
+  max-width: 1400px;
   margin: auto;
 }
 .nav__active::after {
@@ -34,7 +34,10 @@
   position: relative;
   padding: 20px 8px;
   font-weight: normal;
+  text-align: left;
   font-style: normal;
+  white-space: pre-wrap;
+  display: block;
 
   a:hover {
     @apply text-n-50;
@@ -55,7 +58,7 @@
     padding-bottom: 24px;
   }
 }
-@media screen and (min-width: 1280px) {
+@media screen and (min-width: 1415px) {
   .nav__links {
     padding: 0px 8px 20px;
 
@@ -81,7 +84,7 @@
   }
 }
 .dropdown__content {
-  @apply invisible absolute right-0 top-7 hidden h-56 bg-white py-7 px-8 opacity-0 duration-300 xl:block;
+  @apply invisible absolute right-0 top-7 hidden h-56 bg-white py-7 px-8 opacity-0 duration-300 1xl:block;
   width: 424px;
   height: auto;
   line-height: 22px;
@@ -95,7 +98,7 @@
   }
 }
 .nav__list {
-  @media screen and (max-width: 1280px) {
+  @media screen and (max-width: 1415px) {
     position: fixed;
     top: 0;
     left: 0;
@@ -150,7 +153,7 @@
 }
 
 #menu-overlay {
-  @apply xl:hidden;
+  @apply 1xl:hidden;
 }
 
 #activity-menu-overlay {
@@ -308,7 +311,7 @@
   }
 }
 
-@media screen and (max-width: 1280px) {
+@media screen and (max-width: 1415px) {
   .web-header {
     .nav__links {
       padding: 8px;

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -18,6 +18,24 @@ module.exports = {
     './app/**/*.php',
   ],
   theme: {
+    screens: {
+      sm: '640px',
+      // => @media (min-width: 640px) { ... }
+
+      md: '768px',
+      // => @media (min-width: 768px) { ... }
+
+      lg: '1024px',
+      // => @media (min-width: 1024px) { ... }
+
+      xl: '1280px',
+      // => @media (min-width: 1280px) { ... }
+      '1xl': '1415px',
+      // => @media (min-width: 1415px) { ... }
+
+      '2xl': '1536px',
+      // => @media (min-width: 1536px) { ... }
+    },
     fontFamily: {
       sans: ['Arial', 'sans-serif'],
     },
@@ -116,5 +134,6 @@ module.exports = {
       },
     },
   },
+
   plugins: [],
 };