Verbesserung Artwort both-sides Variante

und Einbindung Slider in Marketingheader

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

@@ -92,13 +92,20 @@ section .artwork-wrapper {
   left: 0;
   top: 0;
   height: 100%;
-  width: calc(43vw - 160px);
-
-  @media(max-width: 1199px) {
+  width: calc(50vw - (var(--container-width) / 2));
+  + .artwork{
+    width: calc(50vw - (var(--container-width) / 2));
+    .foreground, .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%;
@@ -112,12 +119,13 @@ section .artwork-wrapper {
 
   .foreground, .background {
     position: absolute;
-    left: -324px;
+    left: 0;
     right: 0;
     top: 0;
-    transform-origin: left top;
-    height: 100%;
-    transform: rotate(-3.762deg);
+    transform-origin: center center;
+    height: 437px;
+    //transform: rotate(-3.762deg);
+    transform: rotate(0);
     overflow: hidden;
 
     &:before {
@@ -131,7 +139,8 @@ section .artwork-wrapper {
   }
 
   .background {
-    transform: rotate(-11.38deg);
+    //transform: rotate(-11.38deg);
+    transform: rotate(0);
     left: -482px;
     margin-right: -60px;
 

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

@@ -1,14 +1,15 @@
 import './marketingheader.scss';
 import '../../components/artwork/artwork.scss';
+import '../slider/slider.scss';
 import $ from 'jquery';
 import {createElement, createImage} from "../../_global/scripts/helpers";
-import {searchData, teaserData, sliderData} from "./MarketingHeaderData";
 import {createArtwork} from "../../components/artwork/ArtworkComponent";
 import {createSearchInput} from "../../atoms/search-input/SearchInputComponent";
 import {createSearchButton} from "../../atoms/search-button/SearchButtonComponent";
 import IHKSearchTypeahead from "./marketingheader-typeahead";
 import {createButton} from "../../atoms/button/ButtonComponent";
 import IHKMHSlider from "./marketingheaderslider";
+import {searchData, teaserData, sliderData} from "./MarketingHeaderData";
 
 
 export const createMarketingHeader =
@@ -36,6 +37,7 @@ export const createMarketingHeader =
     backgroundImage = null,
     isFirstElement = false,
     slides = sliderData,
+    teasers = teaserData,
   }) => {
     const section = createElement('section', ['marketingheader'], null);
     const search = createElement('div', ['search'], null, section);
@@ -69,8 +71,8 @@ export const createMarketingHeader =
     }
 
     /* SLIDER */
-    const section2 = createElement('section', ['marketingheader'], null);
-    const container2 = createElement('div', ['container', 'small'], null, section2);
+   
+    const container2 = createElement('div', ['container', 'slidercontainer', 'rotation'], null, section);
     const sliderComponent = createElement('div', ['slider'], null, container2);
     slides.map((slideData, index) => {
       const slide = createElement('div', ['slide'], null, sliderComponent);
@@ -120,6 +122,8 @@ export const createMarketingHeader =
         }
       }
     })
+    new IHKMHSlider($(sliderComponent));
+
     /*
     const hasImage = imageSrc && imageSrc.length > 0;
     const stage = createElement('div', ['participation', 'participation-stage'], null, section);

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

@@ -32,7 +32,6 @@ export const teaserData = [
     desc: 'Neugierig auf Musterstadt 2024? Digitalisierung verändert unsere Stadt. Klicken Sie, um zu erfahren, wie Sie Teil dieser Entwicklung werden können!',
     link: '#',
     icon: 'Person',
-    bgimage: null,
   },
   {
     category: 'IHK Mitgliedschaft',
@@ -40,7 +39,6 @@ export const teaserData = [
     desc: 'Entfesseln Sie das volle Potenzial der generativen KI  und beherrschen Sie die Kunst des Prompt-Engineerings!',
     link: '#',
     icon: 'Person',
-    bgimage: null,
   },
   {
     category: 'IHK Mitgliedschaft',
@@ -48,7 +46,6 @@ export const teaserData = [
     desc: 'Entfesseln Sie das volle Potenzial der generativen KI  und beherrschen Sie die Kunst des Prompt-Engineerings!',
     link: '#',
     icon: 'Person',
-    bgimage: null,
   }
 ]
 

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

@@ -1,290 +1,293 @@
 @import '../../_global/styles/mixins';
 @import '../../_global/styles/vars';
-
-section.marketingheader .search {
-  position: relative;
-  padding: calc(0.4vw + 20px) 0 calc(1vw + 40px);
-  min-height: calc(24vw + 220px);
-  margin: 0;
-
-  @media(max-width: 767px) {
-    padding: calc(1.5vw + 15px) 0 0;
-    margin-bottom: -10px;
-  }
-
-  + section, + #toclist > section:first-child {
-    @media(min-width: 768px) {
-      margin-top: 0;
-    }
-  }
-
-  .container {
+section.marketingheader{
+  margin-top:0;
+  .search {
     position: relative;
-    z-index: 1;
-  }
-
-  .row {
-    min-height: 620px;
-
-    @media(max-width: 567px) {
-      min-height: 0;
+    //padding: calc(0.4vw + 20px) 0 calc(1vw + 40px);
+    //min-height: calc(24vw + 220px);
+    overflow: hidden;
+    margin: 0;
+    background-color: var(--theme-color-primary-dimmed-04);
+    @media(max-width: 767px) {
+      padding: calc(1.5vw + 15px) 0 0;
+      margin-bottom: -10px;
     }
-  }
 
-  .artwork {
-    @media(max-width: 420px) {
-      top: 30px;
-      right: -20px;
-    }
-    @media(max-width: 340px) {
-      top: 40px;
-      right: -30px;
+    + section, + #toclist > section:first-child {
+      @media(min-width: 768px) {
+        margin-top: 0;
+      }
     }
-  }
-
-  form {
-    position: relative;
-    margin: 32px 0 16px;
-    box-shadow: 0 3px 20px -5px rgba(#000, 0.3);
-    border-radius: var(--border-radius-md) var(--border-radius-xl) var(--border-radius-xl) var(--border-radius-md);
 
-    @media(max-width: 567px) {
-      margin-top: 20px;
+    .container {
+      position: relative;
+      z-index: 1;
     }
-  }
 
-  h1 {
-    margin-left: 0;
-    margin-top: 0;
+    .row {
+ 
 
-    @media(max-width: 567px) {
-      font-size: 24px;
-      margin: 0;
+      @media(max-width: 567px) {
+        min-height: 0;
+      }
     }
-  }
-
-  .tiles {
-    margin: 0 -8px;
-    display: flex;
-    flex-wrap: wrap;
-    font-family: "Korb", sans-serif;
 
-    @media(max-width: 567px) {
-      margin: 0 -6px;
+    .artwork {
+      @media(max-width: 420px) {
+        top: 30px;
+        right: -20px;
+      }
+      @media(max-width: 340px) {
+        top: 40px;
+        right: -30px;
+      }
     }
 
-    .tile {
+    form {
       position: relative;
-      display: flex;
-      padding: 8px;
-      flex: 1 1 33.3333%;
-      max-width: 33.3333%;
-
-      &::before {
-        position: absolute;
-        top: 8px;
-        right: 8px;
-        margin: 10px 8px;
-        font-family: Icons, sans-serif;
-        font-size: 18px;
-        line-height: 1;
-        text-align: center;
-        pointer-events: none;
-        z-index: 1;
-      }
+      margin: 0 0 16px;
+      box-shadow: 0 3px 20px -5px rgba(#000, 0.3);
+      border-radius: var(--border-radius-md) var(--border-radius-xl) var(--border-radius-xl) var(--border-radius-md);
 
-      &[data-type="download"]::before {
-        @include icon-small-download;
-      }
-      &[data-type="external"]::before {
-        @include icon-small-link-external;
+      @media(max-width: 567px) {
+        margin-top: 20px;
       }
+    }
+
+    h1 {
+      margin-left: 0;
+      margin-top: 0;
 
       @media(max-width: 567px) {
-        flex: 1 1 50%;
-        max-width: 50%;
-        padding: 6px;
+        font-size: 24px;
+        margin: 0;
       }
+    }
 
-      &:nth-child(3) ~ .tile {
-        z-index: 1;
+    .tiles {
+      margin: 0 -8px;
+      display: flex;
+      flex-wrap: wrap;
+      font-family: "Korb", sans-serif;
+
+      @media(max-width: 567px) {
+        margin: 0 -6px;
       }
 
-      &.downloads, &.a-z, &.events {
-        order: 1;
-        background-color: transparent;
+      .tile {
+        position: relative;
+        display: flex;
+        padding: 8px;
+        flex: 1 1 33.3333%;
+        max-width: 33.3333%;
 
         &::before {
-          font-family: "Icons", sans-serif;
           position: absolute;
-          font-size: 24px;
+          top: 8px;
+          right: 8px;
+          margin: 10px 8px;
+          font-family: Icons, sans-serif;
+          font-size: 18px;
           line-height: 1;
-          right: 0;
-          top: 0;
-          margin: 11px 10px;
+          text-align: center;
+          pointer-events: none;
           z-index: 1;
-          background-color: white;
-          padding: 7px 6px 5px;
-          border-top-right-radius: 8px;
-          border-bottom-left-radius: 8px;
+        }
 
-          @media(max-width: 767px) {
-            margin: 18px;
-            font-size: 24px;
-          }
+        &[data-type="download"]::before {
+          @include icon-small-download;
+        }
+        &[data-type="external"]::before {
+          @include icon-small-link-external;
         }
 
-        .outer {
-          background-color: var(--theme-color-primary-dimmed-04);
+        @media(max-width: 567px) {
+          flex: 1 1 50%;
+          max-width: 50%;
+          padding: 6px;
         }
 
-        p {
-          margin-bottom: 0.4em;
+        &:nth-child(3) ~ .tile {
+          z-index: 1;
         }
-      }
 
-      &.downloads::before {
-        @include icon-suche-datei;
-      }
-      &.a-z::before {
-        @include icon-suche-az;
-      }
-      &.events::before {
-        @include icon-suche-veranstaltung;
-      }
-    }
+        &.downloads, &.a-z, &.events {
+          order: 1;
+          background-color: transparent;
 
-    .tile > a, .outer {
-      position: relative;
-      display: flex;
-      align-items: flex-end;
-      width: 100%;
-      min-height: 108px;
-      padding: 18px 24px 24px;
-      border-radius: var(--border-radius-md);
-      box-shadow: 0 4px 20px -5px rgba(#000, 0.25);
-      transition: 0.25s ease;
-      line-height: 1.2;
-      background-color: var(--theme-color-background);
-      overflow: hidden;
-      @include focus-visible();
-
-      @media(max-width: 767px) {
-        font-size: 16px;
-        padding: 10px 10px 15px;
-        min-height: 84px;
-      }
+          &::before {
+            font-family: "Icons", sans-serif;
+            position: absolute;
+            font-size: 24px;
+            line-height: 1;
+            right: 0;
+            top: 0;
+            margin: 11px 10px;
+            z-index: 1;
+            background-color: white;
+            padding: 7px 6px 5px;
+            border-top-right-radius: 8px;
+            border-bottom-left-radius: 8px;
+
+            @media(max-width: 767px) {
+              margin: 18px;
+              font-size: 24px;
+            }
+          }
 
-      &:before {
-        content: "";
-        position: absolute;
-        display: block;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        height: var(--border-width);
-        background-color: var(--theme-color-secondary);
-        transition: 0.25s $easeOutQuad;
-      }
+          .outer {
+            background-color: var(--theme-color-primary-dimmed-04);
+          }
 
-      &:hover {
-        color: var(--theme-color-secondary-intensed);
+          p {
+            margin-bottom: 0.4em;
+          }
+        }
 
-        &:before {
-          height: var(--border-width-hover);
+        &.downloads::before {
+          @include icon-suche-datei;
+        }
+        &.a-z::before {
+          @include icon-suche-az;
+        }
+        &.events::before {
+          @include icon-suche-veranstaltung;
         }
       }
-    }
 
-    .tile > a {
-      .item-title {
-        text-decoration: underline;
-      }
-    }
+      .tile > a, .outer {
+        position: relative;
+        display: flex;
+        align-items: flex-end;
+        width: 100%;
+        min-height: 108px;
+        padding: 18px 24px 24px;
+        border-radius: var(--border-radius-md);
+        box-shadow: 0 4px 20px -5px rgba(#000, 0.25);
+        transition: 0.25s ease;
+        line-height: 1.2;
+        background-color: var(--theme-color-background);
+        overflow: hidden;
+        @include focus-visible();
 
-    .outer {
-      background-color: var(--theme-primary-light-04);
-      padding: 14px 20px 18px;
-      border: 4px solid white;
+        @media(max-width: 767px) {
+          font-size: 16px;
+          padding: 10px 10px 15px;
+          min-height: 84px;
+        }
 
-      &::after, &::before {
-        display: none;
-      }
-    }
+        &:before {
+          content: "";
+          position: absolute;
+          display: block;
+          bottom: 0;
+          left: 0;
+          right: 0;
+          height: var(--border-width);
+          background-color: var(--theme-color-secondary);
+          transition: 0.25s $easeOutQuad;
+        }
 
-    .inner {
-      display: block;
-      max-width: 100%;
-    }
+        &:hover {
+          color: var(--theme-color-secondary-intensed);
 
-    .kicker {
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      overflow: hidden;
-      max-width: 100%;
-      display: block;
-      text-decoration: none;
-    }
+          &:before {
+            height: var(--border-width-hover);
+          }
+        }
+      }
 
-    ul {
-      list-style: none;
-      padding: 0;
-      font-size: 16px;
-      max-width: 100%;
-      margin: 0;
+      .tile > a {
+        .item-title {
+          text-decoration: underline;
+        }
+      }
 
-      li {
-        margin-top: 5px;
+      .outer {
+        background-color: var(--theme-primary-light-04);
+        padding: 14px 20px 18px;
+        border: 4px solid white;
+
+        &::after, &::before {
+          display: none;
+        }
       }
 
-      a {
+      .inner {
         display: block;
+        max-width: 100%;
+      }
+
+      .kicker {
         white-space: nowrap;
-        overflow: hidden;
         text-overflow: ellipsis;
-        transition: 0.2s ease;
-        font-weight: 500;
+        overflow: hidden;
+        max-width: 100%;
+        display: block;
+        text-decoration: none;
+      }
 
-        &:hover {
-          color: var(--color-secondary-dark);
+      ul {
+        list-style: none;
+        padding: 0;
+        font-size: 16px;
+        max-width: 100%;
+        margin: 0;
+
+        li {
+          margin-top: 5px;
         }
-      }
-    }
 
-    .proposals {
-      flex: 1 1 100%;
-      padding: 10px 12px 0;
-      order: 2;
+        a {
+          display: block;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          transition: 0.2s ease;
+          font-weight: 500;
 
-      a {
-        margin: 0 0.3em 0 0.1em;
+          &:hover {
+            color: var(--color-secondary-dark);
+          }
+        }
       }
 
-      p {
-        margin-bottom: 0;
+      .proposals {
+        flex: 1 1 100%;
+        padding: 10px 12px 0;
+        order: 2;
+
+        a {
+          margin: 0 0.3em 0 0.1em;
+        }
+
+        p {
+          margin-bottom: 0;
+        }
       }
-    }
 
-    .all-button-wrapper {
-      padding: 16px 8px;
-      display: block;
-      flex: 1 1 100%;
-      order: 3;
+      .all-button-wrapper {
+        padding: 16px 8px;
+        display: block;
+        flex: 1 1 100%;
+        order: 3;
 
-      .btn {
-        transition: 0.2s ease;
+        .btn {
+          transition: 0.2s ease;
 
-        .count {
-          margin-left: 0.3em;
+          .count {
+            margin-left: 0.3em;
 
-          &::before {
-            content: '(';
-          }
-          &::after {
-            content: ')';
+            &::before {
+              content: '(';
+            }
+            &::after {
+              content: ')';
+            }
           }
         }
       }
     }
   }
-}
+}

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

@@ -6,7 +6,7 @@ class IHKMHSlider {
   constructor(section) {
     this.section = section.addClass('initiated');
     this.slides = section.children();
-    this.slider = new Slider(section.find('.eventteaserlargeslider'));
+    this.slider = new Slider(section);
     this.stringLength = 0;
 
     this.slider.section.on('in-viewport slide-change', () => {
@@ -21,7 +21,7 @@ class IHKMHSlider {
 export default IHKMHSlider;
 
 $('body').on('ihk-init dynamic-component-loaded gfi-dynamic-init', function () {
-  $('.rotationslider:not(.initiated)').each(function() {
+  $('.slider:not(.initiated)').each(function() {
     new IHKMHSlider($(this));
   });
 });