Marketingheader V1.

gfi-ihk-2024/stories/components/artwork/artwork.scss

@@ -92,42 +92,45 @@ section .artwork-wrapper {
   left: 0;
   top: 0;
   height: 100%;
-  width: calc(50vw - (var(--container-width) / 2));
+  width: calc(23vw - 160px);
   + .artwork{
-    width: calc(50vw - (var(--container-width) / 2));
-    .foreground, .background {
+    width: calc(23vw - 160px);
+    .background{
+      margin-top:0 !important;
+      height:100%;
+    }
+    @media(max-width: 1199px) {
+      margin: 0;
+    }
+    @media(max-width: 767px) {
+      display:none;
+    }
+    .foreground {      
+      height: 437px;
+      transform: rotate(0) !important;
+    }
+    .background{
       height: 437px;
-      transform-origin: center center;
       transform: rotate(0) !important;
     }
   }
- /* @media(max-width: 1199px) {
-    width: 50vw;
-    margin: 1% -18%;
-    max-height: 90vw;
-  }*/
-
-  @media(max-width: 767px) {
-    margin: 3% -24%;
-    height: 94%;
+  @media(max-width: 1199px) {
+    margin: 0;
   }
 
-  @media(max-width: 567px) {
-    margin: 5% -32%;
-    height: 90%;
+  @media(max-width: 767px) {
+    display:none;
   }
-
   .foreground, .background {
     position: absolute;
     left: 0;
     right: 0;
     top: 0;
-    transform-origin: center center;
+    transform-origin: left bottom;
     height: 437px;
-    //transform: rotate(-3.762deg);
-    transform: rotate(0);
+    transform: rotate(-3.762deg);
     overflow: hidden;
-
+    margin-top: 7%;
     &:before {
       content: "";
       @include full-size;
@@ -139,20 +142,13 @@ section .artwork-wrapper {
   }
 
   .background {
-    //transform: rotate(-11.38deg);
-    transform: rotate(0);
-    left: -482px;
-    margin-right: -60px;
-
+    transform: rotate(-3.762deg);
+    margin-right: -100px;
+    margin-top: 0;
     @media(max-width: 999px) {
-      margin-right: -45px;
-      margin-top: 5px;
+      margin-right: -70px;
+      //margin-top: 0px;
     }
-    @media(max-width: 567px) {
-      margin-right: -30px;
-      margin-top: 10px;
-    }
-
     &:before {
       background: linear-gradient(-10deg, var(--theme-color-gradient-03) 10%, var(--theme-color-gradient-02) 55%, var(--theme-color-gradient-01) 90%);
     }

gfi-ihk-2024/stories/components/mini-teaser/miniteaser.scss

@@ -6,7 +6,7 @@
   background-color: white;
   overflow: hidden;
   width: 100%;
-  max-width: 420px;
+  //max-width: 420px;
   border-radius: 4px;
   padding: 16px 12px;
   transition: 0.25s ease;

gfi-ihk-2024/stories/sections/marketingheader/MarketingHeaderComponent.js

@@ -11,6 +11,7 @@ import {createButton} from "../../atoms/button/ButtonComponent";
 import IHKMHSlider from "./marketingheaderslider";
 import {searchData, teaserData, sliderData} from "./MarketingHeaderData";
 import {createMiniTeaser} from "../../components/mini-teaser/MiniTeaserComponent";
+import IHKSearchAccordion from "./searchAccordion";
 
 
 export const createMarketingHeader =
@@ -19,7 +20,6 @@ export const createMarketingHeader =
     placeholder = 'Hier Ihr Thema finden',
     api = 'services/search/{SEARCHTERM}.json',
     tiles = searchData,
-    imageSrc = 'https://source.unsplash.com/2vCqH34PqWs/1080x648',
     kicker = 'Noch 7 Tage offen',
     headline = 'Jetzt und digital mitreden',
     copy = 'Mit der digitalen Beteiligung erhalten Mitgliedsunternehmen die Möglichkeit, sich einfach und schnell über laufende Verfahren und Abstimmungen zu informieren und sich aktiv daran zu beteiligen.',
@@ -51,8 +51,9 @@ export const createMarketingHeader =
     const artwork = createArtwork({type: artworkStyle});
     search.appendChild(artwork);
     search.dataset.type = artworkStyle;
-
+    
     const container = createElement('div', ['container', 'small'], null, search);
+    
     const row = createElement('div', ['row'], null, container);
     const col = createElement('div', ['col'], null, row);
 
@@ -76,7 +77,13 @@ export const createMarketingHeader =
     if (api) {
       new IHKSearchTypeahead($(form).find('input.typeahead'));
     }
-
+    
+    /* Accordion */
+    const sc = createElement('div', ['container','sc'], null, search);
+    $(document).ready(() => {
+      new IHKSearchAccordion($(search));
+    })
+    createElement('button', ['close-search'], '', sc);
     /* SLIDER */
    
     const container2 = createElement('div', ['container', 'mainstage'], null, section);

gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss

@@ -28,9 +28,72 @@ section.marketingheader{
     overflow: hidden;
     margin: 0;
     background-color: var(--theme-color-primary-dimmed-04);
+    .sc.container{
+      position: absolute;
+      top: 0;
+      @media (max-width:767px){
+        position: relative;
+        .close-search{
+          position: relative !important;
+          right:0 !important;
+          top:0 !important; 
+          float: right;
+          margin-bottom:15px;
+        }
+      }
+      .close-search{
+        display:none;
+        position: absolute;
+        right:30px;
+        top:33px;
+        left:auto;
+          cursor: pointer;
+          transition: 0.3s ease;
+          border: 2px solid var(--theme-color-primary-dimmed-04);
+          border-radius: 10px;
+          height:34px;
+          width:34px;
+          background-color: var(--theme-color-primary);
+          @include focus-visible;
+          z-index: 2;
+          &:before, &:after {
+            content: "";
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            width: 17px;
+            height: 1.5px;
+            border-radius: 2px;
+            background-color: var(--theme-color-white);
+            transform: translate(-50%,-50%) rotate(45deg);
+            transition: 0.3s ease;
+
+          }
+      
+          &:after {
+            transform: translate(-50%,-50%) rotate(-45deg);
+          }
+      }
+    }
     @media(max-width: 767px) {
-      padding: calc(1.5vw + 15px) 0 0;
-      margin-bottom: -10px;
+      //padding: calc(1.5vw + 15px) 0 0;
+      //margin-bottom: -10px;
+    }
+    
+    &.open{
+      .close-search{
+        display:block !important;
+      }
+      .tiles{
+        //display:flex !important;
+        height:auto;
+        opacity: 1;
+        transition:none;
+        transition:height 0.25s ease;
+      }
+      form{
+        max-width: 580px;
+      }
     }
     form{
       border-radius: 24px;
@@ -39,6 +102,10 @@ section.marketingheader{
       font-size: 22px;
       max-width: 360px;
       margin: 20px auto !important;
+      transition: 0.25s ease;
+      @media(max-width: 767px) {
+        font-size: 18px;
+      }
     }
     + section, + #toclist > section:first-child {
       @media(min-width: 768px) {
@@ -51,6 +118,10 @@ section.marketingheader{
       border-top-left-radius: 24px;
       border-bottom-left-radius: 24px;
       font-size: 22px;
+      @media(max-width: 767px) {
+        font-size: 18px;
+        height: 48px;
+      }
       &::placeholder{
         color:var(--theme-color-primary) !important;
       }
@@ -66,11 +137,20 @@ section.marketingheader{
       height: 60px;
       width:60px;
       font-size: 22px;
+      @media(max-width: 767px) {
+        font-size: 18px;
+        height: 48px;
+        width:48px;
+      }
       &:before{
         width:30px;
         height:30px;
         font-size:30px;
-        //border-radius: 24px;
+        @media(max-width: 767px) {
+          width:24px;
+          height:24px;
+          font-size:24px;
+        }
       }
     }
     .container {
@@ -83,7 +163,7 @@ section.marketingheader{
        > .col{
         margin-top:0;
         padding-top:0;
-        padding-bottom:9px;
+        padding-bottom:0;
        }
      }
     }
@@ -121,10 +201,15 @@ section.marketingheader{
 
     .tiles {
       margin: 0 -8px;
+      //display:none;
       display: flex;
       flex-wrap: wrap;
       font-family: "Korb", sans-serif;
-
+      height:0;
+      opacity: 0;
+      transition: all 1s ease-in;
+      padding-bottom:9px;
+      transition:height 0.25s ease;
       @media(max-width: 567px) {
         margin: 0 -6px;
       }
@@ -347,6 +432,18 @@ section.marketingheader{
       }
     }
     &.background-image{
+      &:after{
+        position:absolute;
+        top:0;
+        left:0;
+        bottom:0;
+        right:0;
+        z-index: 0;
+        content:"";
+        opacity: 0.6;
+        background: linear-gradient(87deg, #036 12.55%, rgba(1, 40, 81, 0.86) 56.52%, rgba(0, 51, 102, 0.00) 94.05%);
+        background-blend-mode: overlay;
+      }
       .artwork-wrapper{
         display:none;
       }
@@ -356,25 +453,64 @@ section.marketingheader{
     max-height:427px;
     outer{
       max-height:427px;
+      height:427px;
+      @media(max-width: 999px) {
+        max-height:none;
+        height:auto;
+      }
+    }
+    .rotation {
+      @media screen and (max-width:900px){
+         .slider .text-box:first-child::after {
+          display: none;
+        }
+        padding:0;
+      }
+      .text-box{
+        min-height: 0;
+      }
+    }
+    .image-box{
+      max-height:427px;
+      min-height: 0;
+      height:427px;
       img{
         max-height:427px;
+        height:427px;
       }
     }
     .mainstage{
+      @media screen and (max-width:900px){
+        padding:0;
+      }
       .row{
-        margin:30px -8px 0;
+        margin:16px 0;
+        @media screen and (min-width:901px){
+          margin:30px -8px 0;
+        }
         .col{
-          flex: 1 1 calc(100% - 322px);
-          max-width: calc(100% - 322px);
-          padding:0 8px;
+          flex: 1 1 100%;
+            max-width: 100%;
+          
+          @media screen and (min-width:901px){
+            padding:0 8px;
+            flex: 1 1 calc(100% - 322px);
+            max-width: calc(100% - 322px);
+          }
           + .col{
-            flex: 1 1 322px;
-            max-width: 322px;
+            flex: 1 1 100%;
+            max-width: 100%;
             display: flex;
             flex-flow: column;
             justify-content: space-between;
-            margin: -8px 0;
-            padding:0 8px;
+            margin: 0;
+            padding: 0 var(--container-padding);
+            @media screen and (min-width:901px){
+              flex: 1 1 322px;
+              max-width: 322px;
+              padding:0 8px;
+              margin: -8px 0;
+            }
             .mt{
               height: 100%;
               padding: 8px 0;
@@ -486,5 +622,53 @@ section.marketingheader{
   }
   .rotation{
     margin:0;
+    @media screen and (max-width:900px){
+      .slider{
+        background-color: transparent;
+        .slider-tabs{
+          top:0;
+          height: auto;
+          bottom: auto;
+        }
+        .text-box{
+          padding: var(--container-padding);
+        }
+        .text-box:not(:first-child)::before{
+          display: none;
+        }
+        .image-box{
+          order: 0;
+          &:before{
+            display: none;
+          }
+          img{
+            position: static;
+            height:300px;
+          }
+        }
+      }
+    }
+    @media screen and (max-width:767px){
+      .slider{
+        .image-box{
+          img{
+            height:250px;
+          }
+        }
+      }
+    }
+    @media screen and (max-width:567px) {
+      .slider {
+        margin: 0;
+        .image-box{
+          img{
+            height:177px;
+          }
+        }
+      }
+    }
+    .context-box{
+      display:none !important;
+    }
   }
 }

gfi-ihk-2024/stories/sections/marketingheader/searchAccordion.js

@@ -0,0 +1,67 @@
+import {getUrlVars} from "../../_global/scripts/helpers";
+const $ = global.$;
+
+class IHKSearchAccordion {
+  constructor(section) {
+    this.section = section.addClass('initiated');
+    this.section.find('#search-term').attr('aria-label', 'Klappmenü geschlossen');
+
+    this.section.find('#search-term').off('click').on('click', (e) => {
+      e.preventDefault();
+      section.addClass('open');
+      if(section.hasClass('open')){
+        section.attr('aria-label', 'Klappmenü geöffnet');
+      }
+      else{
+        section.attr('aria-label', 'Klappmenü geschlossen');
+      }
+      if (this.section.data('single-open') !== false) {
+        section.siblings('.open').removeClass('open').find('.tiles').slideUp(300, 'easeOutQuad');
+      }
+    });
+    /* CLOSE */
+    this.section.find('.close-search').off('click').on('click', (e) => {
+      e.preventDefault();
+      section.removeClass('open');
+      if(section.hasClass('open')){
+        section.attr('aria-label', 'Klappmenü geschlossen');
+      }
+      else{
+        section.attr('aria-label', 'Klappmenü geöffnet');
+      }
+      if (this.section.data('single-open') !== false) {
+        section.siblings('.open').removeClass('open').find('.tiles').slideUp(300, 'easeOutQuad');
+      }
+    });
+
+    if (section.attr('data-type') === 'event') {
+      this.initEvent();
+    }
+  }
+
+  initEvent() {
+    this.openEvent();
+    this.section.find('.tiles').hide();
+  };
+
+  openEvent() {
+    const t = this;
+    const vars = getUrlVars();
+    const $events = t.section.find('.tiles');
+    const $queryParamEvent = $('#js-event-' + vars['terminId']);
+
+    if ($queryParamEvent.length) {
+      $queryParamEvent.show().closest('li').addClass('open');
+    } else {
+      $events.first().show().closest('li').addClass('open');
+    }
+  }
+}
+
+export default IHKSearchAccordion;
+
+$('body').on('ihk-init dynamic-component-loaded gfi-dynamic-init', function () {
+  $('form:not(.initiated)').each(function(i) {
+    new IHKSearchAccordion($(this));
+  });
+});