Merge branch 'bugfix/marketinghero' of ssh://gitea.spawntree.de:1122/spawntree/ihk24 into bugfix/marketinghero

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

@@ -89,10 +89,7 @@ export const createMarketingHeader =
     const container2 = createElement('div', ['container', 'mainstage'], null, section);
     const row2 = createElement('div', ['row'], null, container2);
     const colslider = createElement('div', ['col', 'slidercontainer', 'rotation'], null, row2);
-
-    
-    //const col2 = createElement('div', ['col'], null, row2);
-    const sliderComponent = createElement('div', ['slider'], null, colslider);
+    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);
@@ -147,13 +144,13 @@ export const createMarketingHeader =
     if (type === 'infoteaser') {
       const col3 = createElement('div', ['col'], null, row2);
 
-      //const teasers = createMiniTeaser({teasers.type: 'standard'});
-      //col3.appendChild(teasers);
-
       teasers.map((t, i) => {
         if (i < maxItems) {
           var typ = 'standard'; 
-          if (i == 0 && t.type == 'infoteaser') typ = 'infoteaser';
+          if (i == 0 && t.type == 'infoteaser'){
+           typ = 'infoteaser';
+           section.classList.add('miniinfoteaser');
+          }
           const col4 = createElement('div', ['mt'], null, col3);
           const tea = createMiniTeaser({
             type : typ,
@@ -162,55 +159,6 @@ export const createMarketingHeader =
         }
       })
     }
-    /*
-    const hasImage = imageSrc && imageSrc.length > 0;
-    const stage = createElement('div', ['participation', 'participation-stage'], null, section);
-    const container2 = createElement('div', ['container'], null, stage);
-    const row2 = createElement('div', ['row'], null, container2);
-    const col2 = createElement('div', ['col'], null, row2);
-    const tb2 = createElement('div', ['text-box'], null, col2);
-  
-    if (backgroundImage && backgroundImage.length > 0) {
-      //section.content('style=background: red;');
-      stage.style = 'background-image: url(' + backgroundImage + ');';
-      stage.classList.add('background-image');
-    }
-  
-    if (isFirstElement) {
-      stage.classList.add('first-element');
-    }
-  
-    if (kicker && kicker.length > 0) {
-      createElement('p', ['kicker'], kicker, tb2);
-    }
-    if (showProgress) {
-      tb2.appendChild(createProgressBar({progress}));
-    }
-    createElement('h1', ['like-h2'], headline, tb2);
-    createElement('p', [], copy, tb2);
-    if (moreCta) {
-      const more = createElement('a', [], moreCta.label, tb2);
-      more.href = moreCta.link;
-      more.target = moreCta.target;
-    }
-    if (buttonCta) {
-      const button2 = createButton({
-        elementType: 'a',
-        link: buttonCta.link,
-        color: 'white',
-        label: buttonCta.label,
-        iconPosition: 'icon-right',
-        icon: 'small-arrow-right-simple',
-      });
-      tb2.appendChild(button2);
-    }
- 
-    if (hasImage) {
-      stage.classList.add('image-stage');
-      const ib2 = createElement('div', ['image-box'], null, col2);
-      createImage(imageSrc, 1080, 648, 'Beteiligung', [], ib2);
-    }
-     */
     return section;   
   
   }

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

@@ -2,6 +2,19 @@
 @import '../../_global/styles/vars';
 section.marketingheader{
   margin-top:0;
+  &.miniinfoteaser{
+    .kicker{
+      color:var(--theme-color-secondary);
+    }
+    .mini-teaser{
+      .category{
+        color:var(--theme-color-secondary);
+      }
+    }
+    .text-only .kicker{
+      color:white;
+    }
+  }
   .search {
     position: relative;
     overflow: hidden;
@@ -685,11 +698,50 @@ section.marketingheader{
     .btn{
       margin-top:0.4em;
     }
-    
+    &.ishovered .slider-tabs li.active button.btn::before{
+      animation-play-state: paused;
+    }
+    &.btnanimation{
+      .slider-tabs{
+        li.active{
+          button.btn::before{
+            animation: fillgrey 7s linear forwards;
+          }
+        }
+      }
+    }
     .slider-tabs{
       li:first-child:last-child{
         display:none;
       }
+      li.active{
+        button.btn{
+          background-blend-mode: overlay;
+        }
+      }
+      li{
+        button.btn{
+          position: relative;
+          border-radius: var(--border-radius-lg);
+          overflow:hidden;
+          
+        }
+        button.btn::before{
+          width:0;
+          background-color:var(--theme-grey-light);
+          content: "";
+          z-index:0;
+          height:100%;
+          position:absolute;
+          top:0;
+          bottom:0;
+          right:0;
+          left:0;
+          right:0;
+          display:block;
+          background-blend-mode: multiply;
+        }
+      }
     }
     .slide.text-only.current{
       background: none;
@@ -705,7 +757,7 @@ section.marketingheader{
         padding: 30px 36px 24px 36px;
         display: flex;
         flex-flow: column;
-        justify-content: end;
+        justify-content: center;
         min-width: 324px;
         &:not(:first-child)::before {
           background-color: var(--theme-color-primary-dimmed-04);
@@ -746,9 +798,6 @@ section.marketingheader{
         .text-box:not(:first-child)::before{
           display: none;
         }
-        .text-box .btn{
-          display:none;
-        }
         .image-box{
           order: 0;
           height:auto;
@@ -819,3 +868,7 @@ section.marketingheader{
     }
   }
 }
+@keyframes fillgrey {
+  0%{width:0;}
+  100%{width:100%}
+}

gfi-ihk-2024/stories/sections/slider/slider.js

@@ -114,8 +114,11 @@ class IHKSlider {
     this.slides.each(function (i) {
       const s = $(this);
       const li = $('<li/>').appendTo(tabsWrapper);
-
-      $('<button />').addClass('btn').appendTo(li).text(s.data('title') ? s.data('title') : i + 1);
+      
+      var button = $('<button />').addClass('btn').appendTo(li);
+      const span = $('<span/>').appendTo(button);
+      
+      span.text(s.data('title') ? s.data('title') : i + 1);
     });
 
     this.tabs = tabsWrapper.children();
@@ -269,10 +272,12 @@ class IHKSlider {
     this.section.on('mouseenter', () => {
       this.isHovered = true;
       clearTimeout(this.autoplayTimeout);
+      this.section.removeClass("btnanimation");
     })
     this.section.on('mouseleave', () => {
       this.isHovered = false;
       this.handleAutoplay();
+      this.section.addClass("btnanimation");
     })
 
     this.initScrollCheck();

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

@@ -342,7 +342,10 @@
       --button-hover-shadow-opacity: 0.4;
       margin: 5px;
       font-size: var(--font-size-h4);
-
+      span{
+        position:relative;
+        z-index:2;
+      }
       @media(max-width: 767px) {
         margin: 4px;
       }