Feature: Marketingheader

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

@@ -59,4 +59,11 @@ export const MarketingHeaderSingleSlide = Template.bind({});
 MarketingHeaderSingleSlide.args = {slides: singleSlideData};
 
 export const MarketingHeaderStage = Template.bind({});
-MarketingHeaderStage.args = {type:'hero-fullwidth'};
+MarketingHeaderStage.args = {type:'hero-fullwidth'};
+
+export const MarketingHeaderStageSingle = Template.bind({});
+MarketingHeaderStageSingle.args = {
+  type: 'hero-fullwidth',
+  slides: singleSlideData,
+  searchAllButton: true
+};

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

@@ -37,6 +37,7 @@ export const createMarketingHeader =
     progress = 60,
     backgroundImage = null,
     isFirstElement = false,
+    searchAllButton = false,
     slides = sliderData,
     teasers = teaserData,
     maxItems = 3,
@@ -44,6 +45,9 @@ export const createMarketingHeader =
   }) => {
     const section = createElement('section', ['marketingheader', type], null);
     const search = createElement('div', ['search'], null, section);
+    if (searchAllButton) {
+      search.classList.add('has-button-wrapper');
+    }
     if (backgroundImage && backgroundImage.length > 0) {
       search.style = 'background-image: url(' + backgroundImage + ');';
       search.classList.add('background-image');
@@ -72,7 +76,11 @@ export const createMarketingHeader =
       const div = createElement('div', ['tile'], null, tilesContainer);
       const a = createElement('a', [], tile.title, div);
       a.href = tile.link;
-    })
+    });
+    if (searchAllButton) {
+      const allButtonWrapper = createElement('span', ['all-button-wrapper'], null, col);
+      const searchAllBtn = createElement('div', ['btn', 'has-icon', 'icon-small-arrow-right-simple'], 'Alle Suchergebnisse', allButtonWrapper);
+    }
 
     if (api) {
       new IHKSearchTypeahead($(form).find('input.typeahead'));
@@ -90,6 +98,7 @@ export const createMarketingHeader =
     const row2 = createElement('div', ['row'], null, container2);
     const colslider = createElement('div', ['col', 'slidercontainer', 'rotation'], null, row2);
     const sliderComponent = createElement('div', ['slider', 'btnanimation'], null, colslider);
+
     slides.map((slideData, index) => {
       const slide = createElement('div', ['slide'], null, sliderComponent);
       const outer = createElement('outer', ['outer'], null, slide);
@@ -99,6 +108,7 @@ export const createMarketingHeader =
       if (slideData.imageSrc && slideData.imageSrc.length > 0) {
         const imageBox = createElement('div', ['image-box'], null, outer);
         createImage(slideData.imageSrc, 900, 600, 'Slide ' + index, [], imageBox);
+        createElement('span', ['copyright'], 'Copyright-Angabe', imageBox);
         if (contextBoxContentImg) {
           const contentBoxImg = createElement('div', ['context-box', 'context-box--image'], null, imageBox);
           createImage(contextBoxContentImg, 200, 50, '', [], contentBoxImg);
@@ -137,7 +147,7 @@ export const createMarketingHeader =
           }
         }
       }
-    })
+    });
 
     new IHKMHSlider($(sliderComponent));
 

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

@@ -98,7 +98,7 @@ export const sliderData = [
 export const singleSlideData = [
   {
     kicker: 'Lorem Ipsum dolor',
-    headline: 'Möglichkeiten der Integration',
+    headline: 'Nur ein Slide',
     copy: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.',
     imageSrc: './dummy/placeholder-3-2.svg',
     cta: 'Mehr erfahren',

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

@@ -15,11 +15,25 @@ section.marketingheader{
       color:white;
     }
   }
-  .rotation .slider .outer {
-    max-height: 427px;
-    @media(max-width: 999px) {
-      max-height:none;
-      height:auto;
+  .rotation {
+    .slider {
+      .outer {
+        max-height: 427px;
+        @media(max-width: 999px) {
+          max-height:none;
+          height:auto;
+        }
+      }
+      .copyright {
+        @media screen and (max-width: 900px) {
+          left: calc(100% - 14px);
+        }
+      }
+    }
+  }
+  .text-box{
+    .btn.has-icon.icon-small-arrow-right-simple {
+      bottom: auto;
     }
   }
   .search {
@@ -27,12 +41,20 @@ section.marketingheader{
     overflow: hidden;
     margin: 0;
     background-color: var(--theme-color-primary-dimmed-04);
-    max-height: 100px;
-    transition: all .5s ease-in;
+    //max-height: 100px;
+    height: 100px;
+    transition: all .3s ease-in;
     background-size:cover;
     @media (max-width:767px){
       max-height: 78px;
     }
+    .artwork-left .foreground,
+    .artwork-left .background,
+    .artwork-left + .artwork .foreground,
+    .artwork-left + .artwork .background {
+      height: 100%;
+      min-height: 437px;
+    }
     .sc.container{
       position: absolute;
       top: 0;
@@ -41,7 +63,8 @@ section.marketingheader{
       width: 100%;
       max-width: 100%;
       @media (max-width:767px){
-        position: relative;
+        top: auto;
+        bottom: 0;
         .close-search{
           position: relative !important;
           right:0 !important;
@@ -84,9 +107,29 @@ section.marketingheader{
       }
     }
     
-    &.open{
-      max-height: 9999px;
-      transition: all .1s cubic-bezier(1,0,1,0);
+    &.open {
+      height: 390px;
+      @media (max-width:767px){
+        height: 385px;
+        max-height: 385px;
+      }
+      @media (max-width:567px){
+        height: 509px;
+        max-height: 509px;
+      }
+      //max-height: 9999px;
+      //transition: all .1s cubic-bezier(1,0,1,0);
+      &.has-button-wrapper {
+        height: 460px;
+        @media (max-width:767px){
+          height: 395px;
+          max-height: 395px;
+        }
+        @media (max-width:567px){
+          height: 519px;
+          max-height: 519px;
+        }
+      }
       .close-search{
         display:block !important;
       }
@@ -97,6 +140,9 @@ section.marketingheader{
           padding-bottom:0;
         }
       }
+      .all-button-wrapper {
+        top: 0;
+      }
       form{
         max-width: 580px;
       }
@@ -108,7 +154,7 @@ section.marketingheader{
       font-size: 22px;
       max-width: 360px;
       margin: 20px auto !important;
-      transition: 0.25s ease;
+      transition: 0.3s ease;
       @media(max-width: 767px) {
         font-size: 18px;
         margin: 15px auto !important;
@@ -184,6 +230,7 @@ section.marketingheader{
         top: 40px;
         right: -30px;
       }
+
     }
     form {
       position: relative;
@@ -213,7 +260,7 @@ section.marketingheader{
       display: flex;
       flex-wrap: wrap;
       font-family: "Korb", sans-serif;
-      transition: all 0.4s ease-in;
+      transition: all 0.3s ease-in;
       padding-bottom: 0;
 
       .tile {
@@ -305,8 +352,9 @@ section.marketingheader{
         display: flex;
         align-items: flex-end;
         width: 100%;
-        min-height: 108px;
-        padding: 18px 24px 24px;
+        height: 108px;
+        max-height: 108px;
+        padding: 10px 24px 18px 24px;
         border-radius: var(--border-radius-md);
         box-shadow: 0 4px 20px -5px rgba(#000, 0.25);
         transition: 0.25s ease;
@@ -450,6 +498,13 @@ section.marketingheader{
         display:none;
       }
     }
+    .all-button-wrapper {
+      display: block;
+      padding-top: 10px;
+      position: relative;
+      top: 100px;
+      transition: all 0.3s ease-in;
+    }
   }
   &.infoteaser{
     border-radius: 4px;
@@ -467,14 +522,14 @@ section.marketingheader{
     .rotation {
       padding:0;
       @media screen and (max-width: 1000px) {
-        .slide:not(.text-only) .text-box{
+        .slide:not(.text-only) .text-box {
           padding: 16px 0;
         }
-        .slide .image-box img{
+        .slide .image-box img {
           position: static;
           height:300px;
         }
-        .slider-tabs{
+        .slider-tabs {
           top:0;
           height: auto;
           bottom: auto;
@@ -567,7 +622,7 @@ section.marketingheader{
   }
   &.hero-fullwidth{
     .mainstage.container{
-      max-width: 1920px;
+      /*max-width: 1920px;*/
       width:100%;
       padding:0;
       > .row{
@@ -587,6 +642,12 @@ section.marketingheader{
           max-height:566px;
         }
       }
+      .copyright {
+        bottom: 0;
+        @media screen and (min-width:901px) {
+          padding-bottom: 26px;
+        }
+      }
       .slider{
         background-color: transparent;
         .image-box img {
@@ -676,6 +737,9 @@ section.marketingheader{
       max-width: 100%;
       margin: 0 auto;
       position: relative;
+      .slider-tabs {
+        right: 30px;
+      }
       @media screen and (max-width:900px){
         position: absolute !important;
         top: 0;
@@ -718,14 +782,13 @@ section.marketingheader{
       li.active{
         button.btn{
           background-blend-mode: overlay;
+          overflow: hidden;
         }
       }
       li{
         button.btn{
           position: relative;
           border-radius: var(--border-radius-lg);
-          overflow:hidden;
-          
         }
         button.btn::before{
           width:0;

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

@@ -29,7 +29,7 @@ class IHKSearchAccordion {
       }
       var style = document.createElement('style');
       style.id = 'dynamic-style';
-      style.innerHTML = `section.marketingheader .search.open {max-height: ${heightOffset}px !important;}`;
+      //style.innerHTML = `section.marketingheader .search.open {max-height: ${heightOffset}px !important;}`;
       document.body.appendChild(style);
 
       setTimeout(() => {