diff --git a/gfi-ihk-2024/stories/components/artwork/Artwork.stories.js b/gfi-ihk-2024/stories/components/artwork/Artwork.stories.js index 609002d..4a38259 100644 --- a/gfi-ihk-2024/stories/components/artwork/Artwork.stories.js +++ b/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', }; \ No newline at end of file diff --git a/gfi-ihk-2024/stories/components/artwork/ArtworkComponent.js b/gfi-ihk-2024/stories/components/artwork/ArtworkComponent.js index ea480ca..c940ff1 100644 --- a/gfi-ihk-2024/stories/components/artwork/ArtworkComponent.js +++ b/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'], '', artworkWrapper); + } createElement('div', ['artwork'], '', 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; } \ No newline at end of file diff --git a/gfi-ihk-2024/stories/components/artwork/artwork.scss b/gfi-ihk-2024/stories/components/artwork/artwork.scss index 4edbc6b..c2dab3b 100644 --- a/gfi-ihk-2024/stories/components/artwork/artwork.scss +++ b/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; /* diff --git a/gfi-ihk-2024/stories/pages/event-overview/EventOverviewPage.js b/gfi-ihk-2024/stories/pages/event-overview/EventOverviewPage.js index 2214d3b..b01ce8c 100644 --- a/gfi-ihk-2024/stories/pages/event-overview/EventOverviewPage.js +++ b/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 ({ diff --git a/gfi-ihk-2024/stories/pages/event-overview/eventoverview.scss b/gfi-ihk-2024/stories/pages/event-overview/eventoverview.scss index e10c071..87afedb 100644 --- a/gfi-ihk-2024/stories/pages/event-overview/eventoverview.scss +++ b/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%; } } } \ No newline at end of file diff --git a/gfi-ihk-2024/stories/sections/event-teaser-large-slider/eventteaserlargeslider.scss b/gfi-ihk-2024/stories/sections/event-teaser-large-slider/eventteaserlargeslider.scss index d6a2664..149eea1 100644 --- a/gfi-ihk-2024/stories/sections/event-teaser-large-slider/eventteaserlargeslider.scss +++ b/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{ diff --git a/gfi-ihk-2024/stories/sections/marketingheader/MarketingHeader.stories.js b/gfi-ihk-2024/stories/sections/marketingheader/MarketingHeader.stories.js index b1cc0d7..2d493ed 100644 --- a/gfi-ihk-2024/stories/sections/marketingheader/MarketingHeader.stories.js +++ b/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 = {}; \ No newline at end of file +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 = {}; \ No newline at end of file diff --git a/gfi-ihk-2024/stories/sections/marketingheader/MarketingHeaderComponent.js b/gfi-ihk-2024/stories/sections/marketingheader/MarketingHeaderComponent.js index 84b70e8..d33bd69 100644 --- a/gfi-ihk-2024/stories/sections/marketingheader/MarketingHeaderComponent.js +++ b/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 + '
' + 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; } \ No newline at end of file diff --git a/gfi-ihk-2024/stories/sections/marketingheader/MarketingHeaderData.js b/gfi-ihk-2024/stories/sections/marketingheader/MarketingHeaderData.js index 0f68e64..af0404c 100644 --- a/gfi-ihk-2024/stories/sections/marketingheader/MarketingHeaderData.js +++ b/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: '#', + } ] \ No newline at end of file diff --git a/gfi-ihk-2024/stories/sections/marketingheader/marketingheaderslider.js b/gfi-ihk-2024/stories/sections/marketingheader/marketingheaderslider.js new file mode 100644 index 0000000..62981a6 --- /dev/null +++ b/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)); + }); +}); + +