Mobile Fix, Marketing Header Verbesserung

gfi-ihk-2024/stories/components/artwork/Artwork.stories.js

@@ -9,7 +9,7 @@ export default {
     type: {
       name: 'Artwork-Typ',
       control: {type: 'select'},
-      options: ['artwork', 'artwork-image', 'artwork-background-image'],
+      options: ['artwork', 'artwork-image', 'artwork-background-image', 'artwork-both-sides'],
       defaultValue: 'artwork',
     },
     image: {
@@ -38,4 +38,9 @@ ImageArtwork.args = {
 export const BackgroundImageArtwork = Template.bind({});
 BackgroundImageArtwork.args = {
   type: 'artwork-background-image',
+};
+
+export const BothSides = Template.bind({});
+BothSides.args = {
+  type: 'artwork-both-sides',
 };

gfi-ihk-2024/stories/components/artwork/ArtworkComponent.js

@@ -9,8 +9,11 @@ export const createArtwork =
     let imageId, imageWidth, imageHeight;
     const artworkWrapper = createElement('div', ['artwork-wrapper'], null);
     artworkWrapper.dataset.type = type;
+    if (type === 'artwork-both-sides' ){
+      createElement('div', ['artwork-left'], '<span class="background"></span><span class="foreground"></span>', artworkWrapper);
+    }
     createElement('div', ['artwork'], '<span class="background"></span><span class="foreground"></span>', artworkWrapper);
-
+ 
     if (image === 'Hamburg') {
       imageId = 'qpemSW6_1Z0';
     } else if (image === 'Berlin') {
@@ -33,5 +36,7 @@ export const createArtwork =
       createImage('https://source.unsplash.com/' + imageId + '/' + imageWidth + 'x' + imageHeight, imageWidth, imageHeight, 'Artwork Image', [], picture);
     }
 
+
+
     return artworkWrapper;
   }

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

@@ -85,8 +85,71 @@ section .artwork-wrapper {
       background: linear-gradient(-10deg, var(--theme-color-gradient-01) 10%, var(--theme-color-gradient-02) 55%, var(--theme-color-gradient-03) 90%);
     }
   }
+  
 }
+.artwork-left {
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 100%;
+  width: calc(43vw - 160px);
+
+  @media(max-width: 1199px) {
+    width: 50vw;
+    margin: 1% -18%;
+    max-height: 90vw;
+  }
+
+  @media(max-width: 767px) {
+    margin: 3% -24%;
+    height: 94%;
+  }
+
+  @media(max-width: 567px) {
+    margin: 5% -32%;
+    height: 90%;
+  }
 
+  .foreground, .background {
+    position: absolute;
+    left: -324px;
+    right: 0;
+    top: 0;
+    transform-origin: left top;
+    height: 100%;
+    transform: rotate(-3.762deg);
+    overflow: hidden;
+
+    &:before {
+      content: "";
+      @include full-size;
+      background-color: var(--theme-color-primary);
+      margin: -16% 0;
+      border-top-right-radius: 26% 50%;
+      border-bottom-right-radius: 26% 50%;
+    }
+  }
+
+  .background {
+    transform: rotate(-11.38deg);
+    left: -482px;
+    margin-right: -60px;
+
+    @media(max-width: 999px) {
+      margin-right: -45px;
+      margin-top: 5px;
+    }
+    @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%);
+    }
+  }
+  
+}
 [data-type="artwork-background-image"] {
   color: white;
   /*

gfi-ihk-2024/stories/pages/event-overview/EventOverviewPage.js

@@ -13,10 +13,10 @@ import './eventoverview.scss';
 export const createEventOverviewPage = ({
 
 }) => {
-  const page = createElement('div', ['page']);
+  const page = createElement('div', ['page', 'event-overview-page']);
   page.appendChild(createHeader({}));
 
-  const wrapper = createElement('div', ['page-wrapper', 'event-overview-page'], null, page);
+  const wrapper = createElement('div', ['page-wrapper'], null, page);
   wrapper.appendChild(createEventOverviewStage({}));
 
   wrapper.appendChild(createETLSlider ({

gfi-ihk-2024/stories/pages/event-overview/eventoverview.scss

@@ -1,7 +1,8 @@
 .event-overview-page{
   .event-teasers-large, .events{
     .container{
-      max-width:1220px;
+      width:1220px;
+      max-width: 100%;
     }
   }
 }

gfi-ihk-2024/stories/sections/event-teaser-large-slider/eventteaserlargeslider.scss

@@ -3,9 +3,8 @@
 @import '../../components/event-teaser-large/event-teaser-large.scss';
 
 .right-open-container{
-  
   @media (min-width: 1000px) {
-    width: calc((var(--container-width) / 2) + 50vw);
+    width: calc((var(--container-width) / 2) + 50vw - 8px);
     margin-left:auto;
     margin-right:0;
     padding-right:0;
@@ -106,6 +105,7 @@
 
 .rotationslider{
   margin-bottom:calc(var(--section-margin) + 2rem) !important;
+  overflow: hidden;
 }
 
 .rotationslider h1{

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

@@ -1,5 +1,5 @@
 import {createMarketingHeader} from "./MarketingHeaderComponent";
-import {marketingHeaderData} from "./MarketingHeaderData";
+import {searchData, teaserData, sliderData} from "./MarketingHeaderData";
 
 export default {
   title: 'Sections/MarketingHeader',
@@ -31,7 +31,7 @@ export default {
     tiles: {
       name: 'Kacheln',
       control: {type: 'object'},
-      defaultValue: marketingHeaderData,
+      defaultValue: searchData,
     }
   }
 }
@@ -41,4 +41,16 @@ const Template = ({...args}) => {
 };
 
 export const MarketingHeader = Template.bind({});
-MarketingHeader.args = {};
+MarketingHeader.args = {};
+
+export const MarketingHeaderSearchBackground = Template.bind({});
+MarketingHeaderSearchBackground.args = {};
+
+export const MarketingHeaderInfoBanner = Template.bind({});
+MarketingHeaderInfoBanner.args = {};
+
+export const MarketingHeaderSlider = Template.bind({});
+MarketingHeaderSlider.args = {};
+
+export const MarketingHeaderStage = Template.bind({});
+MarketingHeaderStage.args = {};

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

@@ -2,22 +2,21 @@ import './marketingheader.scss';
 import '../../components/artwork/artwork.scss';
 import $ from 'jquery';
 import {createElement, createImage} from "../../_global/scripts/helpers";
-import {marketingHeaderData} from "./MarketingHeaderData";
+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 {createProgressBar} from "../../atoms/progress-bar/ProgressBarComponent";
 import {createButton} from "../../atoms/button/ButtonComponent";
+import IHKMHSlider from "./marketingheaderslider";
+
 
 export const createMarketingHeader =
   ({
-    artworkStyle = 'artwork',
-    headline1 = 'Willkommen bei Ihrer IHK.',
-    headline2 = 'Wie können wir Ihnen helfen?',
-    placeholder = 'Tippe "Taxischein" für Autocomplete',
+    artworkStyle = 'artwork-both-sides',
+    placeholder = 'Hier Ihr Thema finden',
     api = 'services/search/{SEARCHTERM}.json',
-    tiles = marketingHeaderData,
+    tiles = searchData,
     imageSrc = 'https://source.unsplash.com/2vCqH34PqWs/1080x648',
     kicker = 'Noch 7 Tage offen',
     headline = 'Jetzt und digital mitreden',
@@ -36,6 +35,7 @@ export const createMarketingHeader =
     progress = 60,
     backgroundImage = null,
     isFirstElement = false,
+    slides = sliderData,
   }) => {
     const section = createElement('section', ['marketingheader'], null);
     const search = createElement('div', ['search'], null, section);
@@ -47,9 +47,7 @@ export const createMarketingHeader =
     const row = createElement('div', ['row'], null, container);
     const col = createElement('div', ['col'], null, row);
 
-    createElement('h1', ['like-h2'], headline1 + '<br>' + headline2, col);
-
-    const form = createElement('form', [], null, col);
+      const form = createElement('form', [], null, col);
 
     const label = createElement('label', ['visually-hidden'], 'IHK durchsuchen', form);
     label.for = 'search-term';
@@ -70,6 +68,59 @@ export const createMarketingHeader =
       new IHKSearchTypeahead($(form).find('input.typeahead'));
     }
 
+    /* SLIDER */
+    const section2 = createElement('section', ['marketingheader'], null);
+    const container2 = createElement('div', ['container', 'small'], null, section2);
+    const sliderComponent = createElement('div', ['slider'], null, container2);
+    slides.map((slideData, index) => {
+      const slide = createElement('div', ['slide'], null, sliderComponent);
+      const outer = createElement('outer', ['outer'], null, slide);
+      const contextBoxContent = slideData.context ? slideData.context : '';
+      const contextBoxContentImg = slideData.contextImg ? slideData.contextImg : '';
+
+      if (slideData.imageSrc && slideData.imageSrc.length > 0) {
+        const imageBox = createElement('div', ['image-box'], null, outer);
+        createImage(slideData.imageSrc, 900, 600, 'Slide ' + index, [], imageBox);
+        if (contextBoxContentImg) {
+          const contentBoxImg = createElement('div', ['context-box', 'context-box--image'], null, imageBox);
+          createImage(contextBoxContentImg, 200, 50, '', [], contentBoxImg);
+        } else if (contextBoxContent) {
+          createElement('div', ['context-box'], contextBoxContent, imageBox);
+        }
+      }
+
+      const textBox = createElement('div', ['text-box'], null, outer);
+
+      if (slideData.kicker && slideData.kicker.length > 0) {
+        createElement('span', ['kicker'], slideData.kicker, textBox);
+      }
+      if (slideData.headline && slideData.headline.length > 0) {
+        createElement('h3', ['like-h2'], slideData.headline, textBox);
+      }
+      if (slideData.kicker && slideData.kicker.length > 0) {
+        createElement('p', [], slideData.copy, textBox);
+      }
+      if (slideData.cta && slideData.link) {
+        const buttonP = createElement('p', [], '', textBox);
+        const btn = createButton({
+          color: 'white', icon: 'pfeil-simple-rechts', iconPosition: 'icon-right', label: slideData.cta
+        });
+        buttonP.appendChild(btn);
+      }
+
+      if (!slideData.imageSrc || slideData.imageSrc.length <= 0) {
+        if (contextBoxContent) {
+          textBox.classList.add('context');
+          if (contextBoxContentImg) {
+            const contentBox = createElement('div', ['context-box', 'context-box--image'], null, textBox);
+            createImage(contextBoxContentImg, 200, 50, '', [], contentBox);
+          } else if (contextBoxContent) {
+            createElement('div', ['context-box'], contextBoxContent, textBox);
+          }
+        }
+      }
+    })
+    /*
     const hasImage = imageSrc && imageSrc.length > 0;
     const stage = createElement('div', ['participation', 'participation-stage'], null, section);
     const container2 = createElement('div', ['container'], null, stage);
@@ -111,12 +162,13 @@ export const createMarketingHeader =
       });
       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/MarketingHeaderData.js

@@ -1,4 +1,4 @@
-export const marketingHeaderData = [
+export const searchData = [
   {
     title: 'Beratung und Service',
     link: '#',
@@ -23,4 +23,60 @@ export const marketingHeaderData = [
     title: 'Veranstaltungen',
     link: '#',
   }
+]
+
+export const teaserData = [
+  {
+    category: 'Wachstum durch Innovation',
+    title: 'Jetzt Teil der Digitalisierungswelle werden.',
+    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',
+    title: 'Exklusive Einblicke und Branchen-Trends:',
+    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',
+    title: 'Exklusive Einblicke und Branchen-Trends:',
+    desc: 'Entfesseln Sie das volle Potenzial der generativen KI  und beherrschen Sie die Kunst des Prompt-Engineerings!',
+    link: '#',
+    icon: 'Person',
+    bgimage: null,
+  }
+]
+
+export const sliderData = [
+  {
+    kicker: 'Lorem Ipsum dolor',
+    headline: 'Möglichkeiten der Integration',
+    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: 'https://source.unsplash.com/9_bDrvW7bA8/900x600',
+    cta: 'Mehr erfahren',
+    link: '#',
+    contextImg: './logos/wirtschaftsdialoge.svg',
+  },
+  {
+    kicker: 'Lorem Ipsum dolor 2',
+    headline: 'Möglichkeiten der Integration',
+    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: null,
+    cta: 'Mehr erfahren',
+    link: '#',
+    context: 'Wirtschaftsmagazin',
+  },
+  {
+    kicker: 'Lorem Ipsum dolor 2',
+    headline: 'Möglichkeiten der Integration',
+    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: 'https://source.unsplash.com/Ff2oZ_xbKL0/900x600',
+    cta: 'Mehr erfahren',
+    link: '#',
+  }
 ]

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

@@ -0,0 +1,29 @@
+import $ from 'jquery';
+import 'jquery.easing';
+import Slider from "../slider/slider";
+
+class IHKMHSlider {
+  constructor(section) {
+    this.section = section.addClass('initiated');
+    this.slides = section.children();
+    this.slider = new Slider(section.find('.eventteaserlargeslider'));
+    this.stringLength = 0;
+
+    this.slider.section.on('in-viewport slide-change', () => {
+      const curr = this.slider.currentSlide;
+      if (this.slides[curr].hasCounter) {
+        this.startCounter(curr);
+      }
+    })
+  }
+}
+
+export default IHKMHSlider;
+
+$('body').on('ihk-init dynamic-component-loaded gfi-dynamic-init', function () {
+  $('.rotationslider:not(.initiated)').each(function() {
+    new IHKMHSlider($(this));
+  });
+});
+
+