From 635a7a6939f78dfadc859d711a60c6f8aaffc914 Mon Sep 17 00:00:00 2001
From: Lukas Zimmer <l.zimmer@spawntree.de>
Date: Fri, 15 Mar 2024 14:29:40 +0100
Subject: [PATCH 1/2] =?UTF-8?q?Button=20wird=20nicht=20mehr=20ausgeblendet?=
 =?UTF-8?q?.=20Aufger=C3=A4umt.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../MarketingHeaderComponent.js               | 57 ++-----------------
 .../marketingheader/marketingheader.scss      | 54 ++++++++++++++++--
 2 files changed, 54 insertions(+), 57 deletions(-)

diff --git a/gfi-ihk-2024/stories/sections/marketingheader/MarketingHeaderComponent.js b/gfi-ihk-2024/stories/sections/marketingheader/MarketingHeaderComponent.js
index e929e96..311326e 100644
--- a/gfi-ihk-2024/stories/sections/marketingheader/MarketingHeaderComponent.js
+++ b/gfi-ihk-2024/stories/sections/marketingheader/MarketingHeaderComponent.js
@@ -147,13 +147,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 +162,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;   
   
   }
\ No newline at end of file
diff --git a/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss b/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss
index 623762b..e762738 100644
--- a/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss
+++ b/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;
@@ -690,6 +703,38 @@ section.marketingheader{
       li:first-child:last-child{
         display:none;
       }
+      li.active{
+        button.btn::before{
+          animation: fillgrey 7s;
+        }
+        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:-1;
+          height:100%;
+          position:absolute;
+          top:0;
+          bottom:0;
+          right:0;
+          left:0;
+          right:0;
+          //border-radius: var(--border-radius-lg);
+          display:block;
+          background-blend-mode: multiply;
+        }
+      }
     }
     .slide.text-only.current{
       background: none;
@@ -705,7 +750,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 +791,6 @@ section.marketingheader{
         .text-box:not(:first-child)::before{
           display: none;
         }
-        .text-box .btn{
-          display:none;
-        }
         .image-box{
           order: 0;
           height:auto;
@@ -819,3 +861,7 @@ section.marketingheader{
     }
   }
 }
+@keyframes fillgrey {
+  0%{width:0;}
+  100%{width:100%}
+}
\ No newline at end of file

From db3e6a51c68482629839639a8286a8f8ba2f3910 Mon Sep 17 00:00:00 2001
From: Lukas Zimmer <l.zimmer@spawntree.de>
Date: Fri, 15 Mar 2024 15:07:44 +0100
Subject: [PATCH 2/2] Buttonanimation

---
 .../MarketingHeaderComponent.js               |  5 +----
 .../marketingheader/marketingheader.scss      | 19 +++++++++++++------
 .../stories/sections/slider/slider.js         |  9 +++++++--
 .../stories/sections/slider/slider.scss       |  5 ++++-
 4 files changed, 25 insertions(+), 13 deletions(-)

diff --git a/gfi-ihk-2024/stories/sections/marketingheader/MarketingHeaderComponent.js b/gfi-ihk-2024/stories/sections/marketingheader/MarketingHeaderComponent.js
index 311326e..79c110a 100644
--- a/gfi-ihk-2024/stories/sections/marketingheader/MarketingHeaderComponent.js
+++ b/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);
diff --git a/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss b/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss
index e762738..ab9a3a5 100644
--- a/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss
+++ b/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss
@@ -698,15 +698,23 @@ 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::before{
-          animation: fillgrey 7s;
-        }
         button.btn{
           background-blend-mode: overlay;
         }
@@ -722,7 +730,7 @@ section.marketingheader{
           width:0;
           background-color:var(--theme-grey-light);
           content: "";
-          z-index:-1;
+          z-index:0;
           height:100%;
           position:absolute;
           top:0;
@@ -730,7 +738,6 @@ section.marketingheader{
           right:0;
           left:0;
           right:0;
-          //border-radius: var(--border-radius-lg);
           display:block;
           background-blend-mode: multiply;
         }
diff --git a/gfi-ihk-2024/stories/sections/slider/slider.js b/gfi-ihk-2024/stories/sections/slider/slider.js
index 29143e3..8b327bb 100644
--- a/gfi-ihk-2024/stories/sections/slider/slider.js
+++ b/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();
diff --git a/gfi-ihk-2024/stories/sections/slider/slider.scss b/gfi-ihk-2024/stories/sections/slider/slider.scss
index 1f67237..5906235 100644
--- a/gfi-ihk-2024/stories/sections/slider/slider.scss
+++ b/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;
       }