From 9c814d145d256f3d9426a13e1ec767bec8526ef9 Mon Sep 17 00:00:00 2001
From: Sandro Ducceschi <ducceschi@ditoy.com>
Date: Wed, 1 Nov 2023 20:49:05 +0100
Subject: [PATCH] MODIFIED: minor improvements

- add padding if initial section is a textteaser
- improved navgatiion behaviour when switching themes and hiding
- PageFactory is now default if no page component is defined, available
---
 src/assets/scss/mixins.scss          |   1 +
 src/components/Header.vue            | 208 ++++++++++++++-------------
 src/components/blocks/TextTeaser.vue |  18 ++-
 src/router/index.js                  |  19 +--
 src/store/index.js                   |  14 --
 src/views/CountryPageFactory.vue     |  13 --
 src/views/PageFactory.vue            |  14 +-
 7 files changed, 126 insertions(+), 161 deletions(-)

diff --git a/src/assets/scss/mixins.scss b/src/assets/scss/mixins.scss
index 60540c9..50c6b8f 100644
--- a/src/assets/scss/mixins.scss
+++ b/src/assets/scss/mixins.scss
@@ -41,6 +41,7 @@ $breakpoints: (
   'sm': 768px,
   'm': 1024px,
   'mx': 1180px,
+  'spl': 1241px,
   'l': 1280px,
   'xl': 1680px,
 );
diff --git a/src/components/Header.vue b/src/components/Header.vue
index 30ddc98..9f0cb5c 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -1,6 +1,8 @@
 <template>
-  <header class="header"
-          :class="`overlap-state-${isOverlapping} navbar-state-${showNavigation} theme-${themeState}`">
+  <header
+    class="header"
+    :class="`overlap-state-${overlapState} navbar-state-${showNavigation} theme-${themeState}`"
+  >
     <div class="container -long">
       <SVGLogo class="logo" @click="goHome()"/>
       <nav v-if="!hideNavigation">
@@ -95,10 +97,16 @@ export default {
   data() {
     return {
       hideNavigation: false,
+
+      pageThemeState: null,
       showNavigation: true,
-      lastScrollPosition: 0,
-      isOverlapping: true,
-      timeoutId: null,
+      themeState: 'light',
+      overlapState: true,
+      scroll: {
+        top: 0,
+        value: 0,
+        offset: 80,
+      },
     };
   },
   //---------------------------------------------------
@@ -130,12 +138,6 @@ export default {
       }
       return navigation;
     },
-    themeState() {
-      return this.$store.getters.navigationTintState;
-    },
-    heroHasBgColor() {
-      return this.$store.getters.heroHasBgColor || false;
-    },
   },
   //---------------------------------------------------
   //
@@ -143,33 +145,15 @@ export default {
   //
   //---------------------------------------------------
   watch: {
-    isOverlapping(newVal) {
-      if (newVal && this.heroHasBgColor) {
-        this.$store.commit('changeNavigationTintState', 'light');
-      } else {
-        this.$store.commit('changeNavigationTintState', 'dark');
-      }
-    },
     $route() {
       const navButton = document.querySelector('.nav-button');
       if (navButton && navButton.classList.contains('open')) {
         this.toggleNavigation();
       }
 
-      this.testForCountryPage();
-
-      clearTimeout(this.timeoutId);
-      this.timeoutId = setTimeout(() => {
-        if (document.querySelector('.hero') && document.documentElement.scrollTop < 100) {
-          this.isOverlapping = this.elementsOverlap();
-        } else if (document.querySelector('.hero') && document.documentElement.scrollTop > 100) {
-          this.isOverlapping = false;
-          this.$store.commit('changeNavigationTintState', 'dark');
-        } else {
-          this.isOverlapping = false;
-        }
-      }, 50);
+      this.updateTheme();
 
+      this.testForCountryPage();
       this.showNavigation = true;
     },
   },
@@ -200,7 +184,7 @@ export default {
   // beforeMount() {},
   // render(h) { return h(); },
   mounted() {
-    window.addEventListener('scroll', this.onScroll);
+    window.addEventListener('scroll', this.handleScroll);
     this.testForCountryPage();
   },
   // beforeUpdate() {},
@@ -208,7 +192,7 @@ export default {
 
   }, */
   beforeDestroy() {
-    // window.removeEventListener('scroll', this.onScroll);
+    window.removeEventListener('scroll', this.handleScroll);
   },
   // destroyed() {},
   methods: {
@@ -223,14 +207,16 @@ export default {
       }
     },
     toggleChildren(evt) {
-      const els = this.$el.querySelectorAll('.nav-item.hover');
-      els.forEach((el) => {
-        if (el !== evt.currentTarget.parentNode.parentNode) {
-          el.classList.remove('hover');
-        }
-      });
-      evt.currentTarget.parentNode.parentNode.classList.toggle('hover');
-      evt.currentTarget.parentNode.classList.toggle('hover');
+      if (this.$d.clientWidth <= 1241) {
+        const els = this.$el.querySelectorAll('.nav-item.hover');
+        els.forEach((el) => {
+          if (el !== evt.currentTarget.parentNode.parentNode) {
+            el.classList.remove('hover');
+          }
+        });
+        evt.currentTarget.parentNode.parentNode.classList.toggle('hover');
+        evt.currentTarget.parentNode.classList.toggle('hover');
+      }
     },
 
     toggleNavigation() {
@@ -242,31 +228,18 @@ export default {
         });
       }
 
-      const body = document.querySelector('body').classList;
-      const header = document.querySelector('header').classList;
-
       document.querySelector('.nav-button').classList.toggle('open');
       document.querySelector('header nav').classList.toggle('open');
-      body.toggle('no-scroll');
-
-      if (body.contains('no-scroll')) {
-        header.remove('overlap-state-true');
-        header.remove('theme-light');
-        header.add('overlap-state-false');
-        header.add('theme-dark');
-      } else if (document.querySelector('.hero')) {
-        /*
-        header.remove('overlap-state-false');
-        header.remove('theme-dark');
-        header.add('overlap-state-true');
-        header.add('theme-light');
-        console.log('case 1');
-        */
-        // WHAT THE FUCK IS THIS SHIT!?
-      } else {
-        header.add('overlap-state-false');
-        header.add('theme-light');
-      }
+      document.querySelector('body').classList.toggle('no-scroll');
+    },
+
+    updateTheme() {
+      this.$nextTick(() => {
+        const div = document.querySelector('main > section > div');
+        const bgColor = div?.style.backgroundColor || 'transparent';
+        this.pageThemeState = (bgColor === 'transparent') ? 'dark' : 'light';
+        this.themeState = this.pageThemeState;
+      });
     },
 
     handleSpecialNavigation(evt) {
@@ -285,43 +258,30 @@ export default {
       }
     },
 
-    onScroll() {
-      const currentScrollPosition = window.pageYOffset || document.documentElement.scrollTop;
-      if (currentScrollPosition <= 10) {
-        return;
-      }
-
-      this.showNavigation = currentScrollPosition < this.lastScrollPosition;
-      this.lastScrollPosition = currentScrollPosition;
-
-      if (document.querySelector('.hero')) {
-        this.isOverlapping = this.elementsOverlap();
-        this.isOverlapping = currentScrollPosition <= document.querySelector('.intro-content')
-          .getBoundingClientRect().top;
-      } else {
-        this.isOverlapping = false;
-      }
+    handleScroll() {
+      const { top, offset } = this.scroll;
+      const doc = document.documentElement;
+      const { scrollTop } = doc;
+      if (scrollTop >= 0 && scrollTop + window.innerHeight < doc.scrollHeight) {
+        this.scroll.top = scrollTop;
+        let value = this.scroll.value + (scrollTop - top);
+        if (value >= offset) {
+          this.overlapState = false;
+          this.themeState = 'dark';
+          this.showNavigation = false;
+          value = offset;
+        } else if (value <= 0) {
+          value = 0;
+          this.showNavigation = true;
+        }
 
-      if (document.querySelector('.article-nav-bar') && document.querySelector('.article-nav-bar')
-        .getBoundingClientRect().y === 0) {
-        this.showNavigation = false;
+        if (scrollTop < offset) {
+          this.overlapState = true;
+          this.themeState = this.pageThemeState;
+        }
+        this.scroll.value = value;
       }
     },
-
-    elementsOverlap() {
-      const el1 = document.querySelector('.header');
-      const el2 = document.querySelector('.hero');
-
-      const domRect1 = el1.getBoundingClientRect();
-      const domRect2 = el2.getBoundingClientRect();
-
-      return !(
-        domRect1.top > domRect2.bottom
-        || domRect1.right < domRect2.left
-        || domRect1.bottom < domRect2.top
-        || domRect1.left > domRect2.right
-      );
-    },
   },
 };
 </script>
@@ -380,7 +340,11 @@ header {
       white-space: nowrap;
       color: var(--color-lighthouse);
 
-      div {
+      @include breakpoint('spl') {
+        color: var(--color-sky-dancer);
+      }
+
+     > div {
         display: flex;
         width: 100%;
         align-items: center;
@@ -401,10 +365,44 @@ header {
         letter-spacing: 0.3px;
       }
 
+      @media (max-width: 1241px) {
+        flex-direction: column;
+
+        > div {
+          display: flex;
+          width: 100%;
+          align-items: center;
+          justify-content: space-between;
+        }
+
+        ul {
+          height: 0;
+          overflow: hidden;
+        }
+      }
+
+      &.hover {
+        @media (max-width: 1241px) {
+          ul {
+            height: auto;
+          }
+        }
+      }
+
       @media (hover) {
         :hover {
           > a {
             color: rgba(255, 255, 255, 0.8);
+
+            @include breakpoint('spl') {
+              color: var(--color-sky-dancer);
+            }
+          }
+
+          @media (max-width: 1241px) {
+            ul {
+              height: auto;
+            }
           }
 
           svg {
@@ -455,6 +453,10 @@ header {
         padding: 0;
         width: 100%;
 
+        @include breakpoint('spl') {
+          color: var(--color-sky-dancer);
+        }
+
         a {
           padding: 13px 26px 13px 0;
         }
@@ -605,6 +607,9 @@ header {
           }
 
           @media (max-width: 1241px) {
+            > a {
+              color: var(--color-sky-dancer);
+            }
             ul {
               height: auto;
             }
@@ -870,12 +875,13 @@ header {
       }
     }
 
-    @include breakpoint(1241) {
+    @include breakpoint('spl') {
       transition: right 0.35s ease-in-out;
       position: fixed;
       width: 100%;
       top: var(--headerHeight);
       right: -100vw;
+      bottom: 0;
 
       ul {
         display: flex;
@@ -888,7 +894,7 @@ header {
           background: white;
           border-top: 1px solid var(--color-grey-light);
           border-bottom: 1px solid var(--color-grey-light);
-          color: black !important;
+          color: var(--color-sky-dancer);
           margin-right: 0;
           padding: 0 16px;
           justify-content: space-between;
diff --git a/src/components/blocks/TextTeaser.vue b/src/components/blocks/TextTeaser.vue
index 288b5f6..686da8d 100644
--- a/src/components/blocks/TextTeaser.vue
+++ b/src/components/blocks/TextTeaser.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="text-component" :class="{ margined: setAsH1, reversed: variation === 'text-right' }" :style="computedStyles">
+  <div class="text-component" :class="{ margined: setAsH1, reversed: variation === 'text-right', 'is-first': isFirst }" :style="computedStyles">
     <div class="container">
       <div>
         <h1 v-if="setAsH1" class="h1" v-html="boxTitle" :data-slug="slugged" />
@@ -73,12 +73,16 @@ export default {
     },
     media: {
       type: Array,
-      defualt: null,
+      default: null,
     },
     variation: {
       type: String,
       default: 'text-left',
     },
+    isFirst: {
+      type: Boolean,
+      default: false,
+    },
   },
   //---------------------------------------------------
   //
@@ -274,6 +278,16 @@ export default {
     }
   }
 
+  &.is-first {
+    & > div {
+      padding-top: 200px;
+
+      @include breakpoint('s') {
+        padding-top: 150px;
+      }
+    }
+  }
+
   &.white {
     color: var(--color-white);
   }
diff --git a/src/router/index.js b/src/router/index.js
index 1341ffb..7b6fc56 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -28,26 +28,10 @@ const { api } = directus;
 const { LANGUAGES, API_URL } = config;
 
 const VIEW_MAPPING = {
-  lp_home: PageFactory,
-  lp_protocol: PageFactory,
-  lp_protocol_roadmap: PageFactory,
   lp_news: NewsIndex,
-  lp_team:PageFactory,
-  lp_case_studies: PageFactory,
-  lp_community: PageFactory,
-  lp_pressmedia: PageFactory,
-  lp_terms_of_use: PageFactory,
-  lp_privacy: PageFactory,
-  lp_documentation: PageFactory,
   lp_ecosystem: EcoSystem,
   lp_newsletter: Newsletter,
   lp_contact: Contact,
-  lp_about_us_universe: PageFactory,
-  lp_about_us_vision: PageFactory,
-  lp_about_us_career: PageFactory,
-  lp_get_started: PageFactory,
-  lp_get_started_dev: PageFactory,
-  lp_get_started_reg: PageFactory,
   casestudies: CaseStudiesDetail,
   // applications: EcoSystemDetail,
   news: NewsDetail,
@@ -55,7 +39,6 @@ const VIEW_MAPPING = {
   lp_ecosystem_filtered: EcoSystemFiltered,
   lp_news_filtered: NewsFiltered,
   articles: NewsDetail,
-  landingpages: PageFactory,
 };
 
 // eslint-disable-next-line import/prefer-default-export
@@ -66,7 +49,7 @@ export function getRouter() {
       let routes = await response.json() || [];
       routes = routes.map(r => ({
         ...r,
-        component: VIEW_MAPPING[r.meta.page || r.meta.details || r.meta.filtered],
+        component: VIEW_MAPPING[r.meta.page || r.meta.details || r.meta.filtered] || PageFactory,
       }));
       routes = routes.concat([
         {
diff --git a/src/store/index.js b/src/store/index.js
index 8f3d802..fd558ba 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -6,8 +6,6 @@ Vue.use(Vuex);
 export default new Vuex.Store({
   state: {
     canonical: null,
-    navigationTintState: 'dark', // dark or light (inversion)
-    heroHasBgColor: false,
     isMobileNavigationOpen: false,
     navigations: null,
   },
@@ -15,26 +13,14 @@ export default new Vuex.Store({
     canonical(state) {
       return state.canonical;
     },
-    navigationTintState(state) {
-      return state.navigationTintState;
-    },
-    heroHasBgColor(state) {
-      return state.heroHasBgColor;
-    },
     navigations(state) {
       return state.navigations;
     },
   },
   mutations: {
-    changeNavigationTintState(state, payload) {
-      state.navigationTintState = payload;
-    },
     canonical(state, payload) {
       state.canonical = payload;
     },
-    heroHasBgColor(state, payload) {
-      state.heroHasBgColor = payload;
-    },
     navigations(state, payload) {
       state.navigations = payload;
     },
diff --git a/src/views/CountryPageFactory.vue b/src/views/CountryPageFactory.vue
index 1ab39be..60cbe22 100644
--- a/src/views/CountryPageFactory.vue
+++ b/src/views/CountryPageFactory.vue
@@ -284,7 +284,6 @@ export default {
   // beforeMount() {},
   // render(h) { return h(); },
   mounted() {
-    this.checkTint();
     if (this.dummyData[this.dummyData.length - 1].blocktype === 'startnow' || (this.dummyData[this.dummyData.length - 1].blocktype === 'imgteaser' && this.dummyData[this.dummyData.length - 1].variation === 'full')) {
       document.querySelector('main')
         .classList
@@ -313,7 +312,6 @@ export default {
   },
   // beforeUpdate() {},
   updated() {
-    this.checkTint();
     if (this.dummyData[this.dummyData.length - 1].blocktype === 'startnow' || (this.dummyData[this.dummyData.length - 1].blocktype === 'imgteaser' && this.dummyData[this.dummyData.length - 1].variation === 'full')) {
       document.querySelector('main')
         .classList
@@ -351,17 +349,6 @@ export default {
   //
   //---------------------------------------------------
   methods: {
-    checkTint() {
-      const data = (this.dummyData || [])[0] || null;
-      const hasColor = data?.bgcolor !== null && data?.bgcolor !== undefined;
-      if (data && data.blocktype === 'hero' && hasColor) {
-        this.$store.commit('heroHasBgColor', true);
-        this.$store.commit('changeNavigationTintState', 'light');
-      } else {
-        this.$store.commit('heroHasBgColor', false);
-        this.$store.commit('changeNavigationTintState', 'dark');
-      }
-    },
     //----------------------------------
     // Event Handlers
     //----------------------------------
diff --git a/src/views/PageFactory.vue b/src/views/PageFactory.vue
index d69edb8..a994ad7 100644
--- a/src/views/PageFactory.vue
+++ b/src/views/PageFactory.vue
@@ -17,6 +17,7 @@
         :file="block.file"
       />
       <TextTeaser
+        :is-first="blockIndex === 0"
         v-if="block.blocktype === 'section'"
         :box-title="block.title"
         :box-content="block.content"
@@ -284,7 +285,6 @@ export default {
   // beforeMount() {},
   // render(h) { return h(); },
   mounted() {
-    this.checkTint();
     if (this.dummyData[this.dummyData.length - 1].blocktype === 'startnow' || (this.dummyData[this.dummyData.length - 1].blocktype === 'imgteaser' && this.dummyData[this.dummyData.length - 1].variation === 'full')) {
       document.querySelector('main')
         .classList
@@ -313,7 +313,6 @@ export default {
   },
   // beforeUpdate() {},
   updated() {
-    this.checkTint();
     if (this.dummyData[this.dummyData.length - 1].blocktype === 'startnow' || (this.dummyData[this.dummyData.length - 1].blocktype === 'imgteaser' && this.dummyData[this.dummyData.length - 1].variation === 'full')) {
       document.querySelector('main')
         .classList
@@ -351,17 +350,6 @@ export default {
   //
   //---------------------------------------------------
   methods: {
-    checkTint() {
-      const data = (this.dummyData || [])[0] || null;
-      const hasColor = data?.bgcolor !== null && data?.bgcolor !== undefined;
-      if (data && data.blocktype === 'hero' && hasColor) {
-        this.$store.commit('heroHasBgColor', true);
-        this.$store.commit('changeNavigationTintState', 'light');
-      } else {
-        this.$store.commit('heroHasBgColor', false);
-        this.$store.commit('changeNavigationTintState', 'dark');
-      }
-    },
     //----------------------------------
     // Event Handlers
     //----------------------------------