Merge remote-tracking branch 'origin/main' into feat/lennart

Signed-off-by: lennartrommeiss <lennart.rommeiss@deutschebahn.com>
fipguide · Jan 27, 2025 · 27415a4 · 27415a4
2 parents 896ead5 + ae8aad8
commit 27415a4
Show file tree

Hide file tree

Showing 13 changed files with 207 additions and 81 deletions.
diff --git a/themes/fiptheme/assets/js/countrySelector.js b/themes/fiptheme/assets/js/countrySelector.js
@@ -0,0 +1,24 @@
+function initCountrySelector() {
+
+  const expandButton = document.querySelector('.o-header__expand-button');
+  const countryContainer = document.querySelector('.o-header__item-countries');
+
+  expandButton.addEventListener('click', () => {
+    countryContainer.classList.toggle("o-header__item-countries--open");
+
+    if (expandButton.getAttribute("aria-expanded") === 'false') {
+      expandButton.setAttribute("aria-expanded", "true");
+    } else {
+      expandButton.setAttribute("aria-expanded", "false");
+    }
+  });
+}
+
+if (document.readyState === "interactive") {
+  initCountrySelector();
+} else {
+  window.addEventListener("DOMContentLoaded", () => {
+    initCountrySelector();
+  });
+}
+
diff --git a/themes/fiptheme/assets/js/main.js b/themes/fiptheme/assets/js/main.js
@@ -1,2 +1,4 @@
 import './mobileMenu.js';
+import './countrySelector.js';
+import './resizeObserver.js';
 import './mediaqueries.js';
diff --git a/themes/fiptheme/assets/js/mediaqueries.js b/themes/fiptheme/assets/js/mediaqueries.js
@@ -1,3 +1,14 @@
+/**
+ * Usage:
+ * import * as mq from '../helpers/mediaqueries';
+ *==================================================
+ */
+export const maxXS  = '(max-width: 575px)';
+export const maxSM  = '(max-width: 751px)';
+export const maxMD  = '(max-width: 967px)';
+export const maxLG  = '(max-width: 1182px)';
+export const maxXL  = '(max-width: 1463px)';
+
 export const minSM  = '(min-width: 576px)';
 export const minMD  = '(min-width: 752px)';
 export const minLG  = '(min-width: 968px)';

diff --git a/themes/fiptheme/assets/js/mobileMenu.js b/themes/fiptheme/assets/js/mobileMenu.js
@@ -1,42 +1,46 @@
 import * as mq from './mediaqueries';
 
 function initMobileMenu() {
-  console.log('huhu2');
 
   const menuButton = document.querySelector('.o-nav__menu-button');
   const closeButton = document.querySelector('.o-nav__close-button');
-  const navContainer = document.querySelector('.o-header__nav');
 
   menuButton.addEventListener('click', () => {
-    console.log('CLICKED');
-    navContainer.classList.add("o-header__nav--open");
+    openMobileMenu()
   });
 
   closeButton.addEventListener('click', () => {
-    console.log('CLICKED');
-    navContainer.classList.remove("o-header__nav--open");
+    closeMobileMenu()
   });
-}
 
-function resizeObserver() {
-  window.addEventListener("resize", () => {
-    const navContainer = document.querySelector('.o-header__nav');
-    if (window.matchMedia(mq.minMD).matches) {
-      navContainer.classList.remove("o-header__nav--open");
-      console.log('resized');
+  window.onclick = e => {
+    if (e.target.classList.contains('o-header__curtain')) {
+      closeMobileMenu();
     }
-  });
+  }
+}
+
+function openMobileMenu() {
+  const navContainer = document.querySelector('.o-header__nav');
+  const menuButton = document.querySelector('.o-nav__menu-button');
+
+  navContainer.classList.add("o-header__nav--open");
+  menuButton.setAttribute('aria-expanded', true);
+}
+
+function closeMobileMenu() {
+  const navContainer = document.querySelector('.o-header__nav');
+  const menuButton = document.querySelector('.o-nav__menu-button');
+
+  navContainer.classList.remove("o-header__nav--open");
+  menuButton.setAttribute('aria-expanded', false);
 }
 
 if (document.readyState === "interactive") {
-  console.log('DOM ready');
   initMobileMenu();
-  resizeObserver();
 } else {
   window.addEventListener("DOMContentLoaded", () => {
-    console.log('DOM ready');
     initMobileMenu();
-    resizeObserver();
   });
 }
 
diff --git a/themes/fiptheme/assets/js/resizeObserver.js b/themes/fiptheme/assets/js/resizeObserver.js
@@ -0,0 +1,30 @@
+import * as mq from './mediaqueries';
+
+function resizeObserver() {
+  const navContainer = document.querySelector('.o-header__nav');
+  const menuButton = document.querySelector('.o-nav__menu-button');
+  const countryContainer = document.querySelector('.o-header__item-countries');
+
+  window.addEventListener("resize", () => {
+
+    //close mobile menu on viewports >= md
+    if (window.matchMedia(mq.minMD).matches) {
+      navContainer.classList.remove("o-header__nav--open");
+      menuButton.setAttribute('aria-expanded', false);
+    }
+
+    //close country selector on viewports < md
+    if (window.matchMedia(mq.maxSM).matches) {
+      countryContainer.classList.remove("o-header__item-countries--open");
+    }
+  });
+}
+
+if (document.readyState === "interactive") {
+  resizeObserver();
+} else {
+  window.addEventListener("DOMContentLoaded", () => {
+    resizeObserver();
+  });
+}
+
diff --git a/themes/fiptheme/assets/sass/navigation.scss b/themes/fiptheme/assets/sass/navigation.scss
@@ -44,6 +44,7 @@
 .o-header__logo {
   display: flex;
   padding: 1rem;
+  margin: .3rem;
 }
 
 .o-header__nav menu {
@@ -60,6 +61,9 @@
   padding: 1rem;
   margin: .3rem;
   pointer-events: none;
+  background-color: gainsboro;
+  border-radius: .4rem;
+  color: black;
 
   &:focus {
     opacity: 1;
@@ -88,6 +92,14 @@
   border: none;
   background: none;
   width: fit-content;
+  text-align: right;
+  color: black;
+  font-weight: 700;
+
+  &:hover,
+  &:focus {
+    color: red;
+  }
 }
 
 .o-header__expand-button img,
@@ -99,28 +111,27 @@
   height: auto;
 }
 
-.o-header__item menu {
-  visibility: unset;
+.o-header__expand-button:has(~ .o-header__item-countries--open) img {
+  transform: rotate(180deg);
+}
+
+.o-header__item .o-header__item-countries {
+  display: flex;
 
   @include media-breakpoint-up(md) {
-    visibility: hidden;
+    display: none;
     z-index: 2;
     position: absolute;
     padding: 1rem;
     flex-direction: column;
     background-color: white;
     box-shadow: 0 .4rem 1rem 0 rgba(0,0,0,.1);
     border-radius: .4rem;
-
-    &:before {
-      content: "";
-      position: absolute;
-    }
   }
-}
 
-.o-header__expand-button:is(:hover, :focus-visible) ~ menu {
-  visibility: visible;
+  &.o-header__item-countries--open {
+    display: flex;
+  }
 }
 
 .o-nav__close-button,
@@ -150,11 +161,15 @@
     right: 0;
     width: 60%;
     height: 100%;
-    z-index: 2;
+    z-index: 3;
     background-color: white;
     padding: 0 1rem;
     overflow-y: scroll;
 
+    > menu {
+      margin-top: 5rem;
+    }
+
     ul,
     menu {
       flex-direction: column;
@@ -166,13 +181,16 @@
     }
 
     > menu > li {
-      margin-bottom: 3rem;
+      margin-bottom: 5rem;
     }
 
     h2 {
-      padding: 1rem;
+      padding-right: 1rem;
       text-align: right;
       margin-bottom: 0;
+      font-size: 1.4rem;
+      text-transform: uppercase;
+      font-weight: 300;
     }
   }
 }

diff --git a/themes/fiptheme/assets/sass/stage.scss b/themes/fiptheme/assets/sass/stage.scss
@@ -2,7 +2,7 @@
     margin-bottom: 4rem;
 }
 
-.o-stage img {
+.o-stage > img {
     width: 100%;
     aspect-ratio: 4/1;
     max-width: 1320px;
@@ -15,23 +15,43 @@
     align-items: center;
 }
 
-.o-stage__search-container {
+.o-stage__search {
     position: absolute;
-    width: 60%;
+    width: 80%;
+    height: 6rem;
     left: 50%;
     transform: translate(-50%);
     display: flex;
-}
+    z-index: 2;
 
-.o-stage__search-field {
-    width: 100%;
-    height: 6rem;
-    padding-left: 1rem;
-    padding-right: 1rem;
-    background-color: white;
-    border-radius: 1rem 0 0 1rem;
+    @include media-breakpoint-up(md) {
+        width: 60%;
+    }
+
+    .pagefind-ui__suppressed {
+        display: none;
+    }
+
+    .pagefind-ui__drawer {
+        background-color: white;
+        padding: 0 1rem;
+        overscroll-behavior: contain;
+        height: 35rem;
+        overflow-y: scroll;
+        position: relative;
+        top: -.7rem;
+        border-left: var(--pagefind-ui-border-width) solid var(--pagefind-ui-border);
+        border-right: var(--pagefind-ui-border-width) solid var(--pagefind-ui-border);
+        border-bottom: var(--pagefind-ui-border-width) solid var(--pagefind-ui-border);
+        border-bottom-left-radius: var(--pagefind-ui-border-radius);
+        border-bottom-right-radius: var(--pagefind-ui-border-radius);
+    }
 }
 
-.o-stage__button {
-    border-radius: 0 1rem 1rem 0;
+.curtain:has(~ .o-stage .o-stage__search:focus-within)  {
+    background-color: rgba(0, 0, 0, .8);
+    inset: 0;
+    position: fixed;
+    z-index: 2;
+    transition: .3s ease;
 }
diff --git a/themes/fiptheme/assets/sass/styles.scss b/themes/fiptheme/assets/sass/styles.scss
@@ -4,15 +4,34 @@ html {
 }
 
 body {
-  background-color: $gray-300;
+  background-color: $gray-200;
   font-size: 1.8rem;
+  overflow-x: hidden;
+  font-family: Arial,Helvetica,sans-serif;
+}
+
+header {
+  z-index: 3;
+  position: relative;
 }
 
 a {
   color: #ec0016;
 
-  &:hover {
-    color: green;
+  &:hover,
+  &:focus {
+    color: #c50014;
+  }
+}
+
+.o-footer__link {
+  text-decoration: underline;
+  color: black;
+  font-weight: 700;
+
+  &:hover,
+  &:focus {
+    color: red;
   }
 }
 

diff --git a/themes/fiptheme/layouts/_default/baseof.html b/themes/fiptheme/layouts/_default/baseof.html
@@ -6,9 +6,9 @@
   <head>
     {{ partial "head.html" . }}
   </head>
-  <body class="bg-light">
+  <body>
     <header>{{ partial "header.html" . }}</header>
-    <main id="content "data-pagefind-body>{{ block "main" . }}{{ end }}</main>
+    <main id="content" data-pagefind-body>{{ block "main" . }}{{ end }}</main>
     <footer>{{ partial "footer.html" . }}</footer>
   </body>
 </html>