From dfd3869af8a36fde1293da0cfdea8b505a3e8403 Mon Sep 17 00:00:00 2001 From: Lukas Zimmer Date: Thu, 29 Feb 2024 17:38:30 +0100 Subject: [PATCH] Event Teaser Large Slider Finalisierung + Neue Section Event Teasers Large --- .../image-text/ImageTextComponent.js | 36 +++++---- .../components/image-text/image-text.scss | 16 ++++ .../pages/event-overview/EventOverviewPage.js | 26 +++++-- .../EventTeaserLargeSlider.stories.js | 4 +- .../EventTeaserLargeSliderComponent.js | 2 +- .../eventteaserlargeslider.scss | 57 +++++++++----- .../EventTeasersLarge.stories.js | 36 +++++++++ .../EventTeasersLargeComponent.js | 39 ++++++++++ .../EventTeasersLargeData.js | 65 ++++++++++++++++ .../event-teasers-large.scss | 75 +++++++++++++++++++ 10 files changed, 315 insertions(+), 41 deletions(-) create mode 100644 gfi-ihk-2024/stories/sections/event-teasers-large/EventTeasersLarge.stories.js create mode 100644 gfi-ihk-2024/stories/sections/event-teasers-large/EventTeasersLargeComponent.js create mode 100644 gfi-ihk-2024/stories/sections/event-teasers-large/EventTeasersLargeData.js create mode 100644 gfi-ihk-2024/stories/sections/event-teasers-large/event-teasers-large.scss diff --git a/gfi-ihk-2024/stories/components/image-text/ImageTextComponent.js b/gfi-ihk-2024/stories/components/image-text/ImageTextComponent.js index 436a93d..c010e78 100644 --- a/gfi-ihk-2024/stories/components/image-text/ImageTextComponent.js +++ b/gfi-ihk-2024/stories/components/image-text/ImageTextComponent.js @@ -8,28 +8,38 @@ export const createImageText = switched = 'normal', listItems: listItems = imageTextData, headline = 'Warum wählen?', + smallheadline = false, text = 'Sie können mitbestimmen, wer Sie und Ihre die Interessen Ihres Unternehmens vertritt.', image = './dummy/why-elect.jpg', - link = '', + link = '#', linkname = 'Mehr erfahren', }) => { const div = createElement('div', ['image-text', colored, switched], null); const div2 = createElement('div', ['image-text--image'], null, div); const div3 = createElement('div', ['image-text--text'], null, div); createImage(image, 400, 400, '', [], div2); - createElement('h2', [], headline, div3); + if (smallheadline){ + createElement('h3', [], headline, div3); + } + else{ + createElement('h2', [], headline, div3); + } createElement('p', [], text, div3); const ul = createElement('ul', [], null, div3); - listItems.map((item) => { - const li = createElement('li', [], null, ul); - if (item.headline && item.headline.length > 0) { - createElement('h3', [], item.headline, li); - } - if (item.text && item.text.length > 0) { - createElement('p', [], item.text, li); - } - }); - const a = createElement('a', ['btn', 'secondary', 'has-icon', 'icon-small-arrow-right-simple'], linkname, div3); - a.href = link; + if (listItems){ + listItems.map((item) => { + const li = createElement('li', [], null, ul); + if (item.headline && item.headline.length > 0) { + createElement('h3', [], item.headline, li); + } + if (item.text && item.text.length > 0) { + createElement('p', [], item.text, li); + } + }); + } + if (link) { + const a = createElement('a', ['btn', 'secondary', 'has-icon', 'icon-small-arrow-right-simple'], linkname, div3); + a.href = link; + } return div; } \ No newline at end of file diff --git a/gfi-ihk-2024/stories/components/image-text/image-text.scss b/gfi-ihk-2024/stories/components/image-text/image-text.scss index 7d80352..95a401e 100644 --- a/gfi-ihk-2024/stories/components/image-text/image-text.scss +++ b/gfi-ihk-2024/stories/components/image-text/image-text.scss @@ -12,6 +12,22 @@ @media(max-width: 767px) { display: block; } + h3{ + font-size: 28px; + line-height: 120%; /* 50.4px */ + @media(min-width: 768px) { + font-size: 36px; + } + @media(min-width: 1110px) { + font-size: 42px; + } + + p { + font-size: 18px; + @media(min-width: 768px) { + font-size: 22px; + } + } + } &.colored { &:before { diff --git a/gfi-ihk-2024/stories/pages/event-overview/EventOverviewPage.js b/gfi-ihk-2024/stories/pages/event-overview/EventOverviewPage.js index 9cb2ea4..44813cf 100644 --- a/gfi-ihk-2024/stories/pages/event-overview/EventOverviewPage.js +++ b/gfi-ihk-2024/stories/pages/event-overview/EventOverviewPage.js @@ -1,7 +1,5 @@ import {createElement} from "../../_global/scripts/helpers"; import {createHeader} from "../../components/header/HeaderComponent"; -import {createPageDetails} from "../../components/page-details/PageDetailsComponent"; -import {createIntro} from "../../sections/intro/IntroComponent"; import {createTeasersSection} from "../../sections/teasers/TeasersComponent"; import {createFooter} from "../../components/footer/FooterComponent"; import {createTopicTeasersSection} from "../../sections/topic-teasers/TopicTeasersComponent"; @@ -10,8 +8,9 @@ import {createContact} from "../../components/contact/ContactComponent"; import {createEventsSection} from "../../sections/events/EventsComponent"; import {createFeature} from "../../sections/feature/FeatureComponent"; import {createImageText} from "../../components/image-text/ImageTextComponent"; - +import {createETLSlider} from "../../sections/event-teaser-large-slider/EventTeaserLargeSliderComponent"; import {createEventOverviewStage} from "../../sections/eventoverview-stage/EventOverviewStageComponent"; +import {sliderData} from "../../sections/event-teaser-large-slider/EventTeaserLargeSliderData"; export const createEventOverviewPage = ({ @@ -20,12 +19,25 @@ export const createEventOverviewPage = ({ page.appendChild(createHeader({})); const wrapper = createElement('div', ['page-wrapper'], null, page); - //wrapper.appendChild(createPageDetails({})); wrapper.appendChild(createEventOverviewStage({})); - wrapper.appendChild(createImageText({ - headline: 'Beratung und Service', - text: 'Wir beraten Unternehmen!', + wrapper.appendChild(createETLSlider ({ + slides : sliderData, + widemode: true, + moreCta : { + label: 'Mehr erfahren', + target: '_self', + }, + headline : 'Premium Seminare', + + })); + const container1 = createElement('div', ['container'], null, wrapper); + container1.appendChild(createImageText({ + text: '— Karsten Meinert, Unternehmensgründer aus Musterstadt', + headline: '„Die praxisorientierten Lehrinhalte und das Engagement der Dozenten haben den Unterricht nicht nur lehrreich, sondern auch äußerst spannend gemacht.”', + link: null, + listItems : null, + smallheadline: true, })); wrapper.appendChild(createTopicTeasersSection({maxItems: 3})); wrapper.appendChild(createTeasersSection({type: 'hero', maxItems: 2})); diff --git a/gfi-ihk-2024/stories/sections/event-teaser-large-slider/EventTeaserLargeSlider.stories.js b/gfi-ihk-2024/stories/sections/event-teaser-large-slider/EventTeaserLargeSlider.stories.js index 09355c3..b3dba67 100644 --- a/gfi-ihk-2024/stories/sections/event-teaser-large-slider/EventTeaserLargeSlider.stories.js +++ b/gfi-ihk-2024/stories/sections/event-teaser-large-slider/EventTeaserLargeSlider.stories.js @@ -1,4 +1,4 @@ -import {createSlider} from "./EventTeaserLargeSliderComponent"; +import {createETLSlider} from "./EventTeaserLargeSliderComponent"; import {sliderData} from "./EventTeaserLargeSliderData"; export default { @@ -16,7 +16,7 @@ export default { } const Template = ({...args}) => { - return createSlider({...args}); + return createETLSlider({...args}); }; export const Slider = Template.bind({}); diff --git a/gfi-ihk-2024/stories/sections/event-teaser-large-slider/EventTeaserLargeSliderComponent.js b/gfi-ihk-2024/stories/sections/event-teaser-large-slider/EventTeaserLargeSliderComponent.js index 8c734ce..cd583a6 100644 --- a/gfi-ihk-2024/stories/sections/event-teaser-large-slider/EventTeaserLargeSliderComponent.js +++ b/gfi-ihk-2024/stories/sections/event-teaser-large-slider/EventTeaserLargeSliderComponent.js @@ -5,7 +5,7 @@ import {createButton} from "../../atoms/button/ButtonComponent"; import IHKETLSlider from "./eventteaserlargeslider"; import {sliderData} from "./EventTeaserLargeSliderData"; -export const createSlider = +export const createETLSlider = ({ slides = sliderData, widemode = true, 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 78a4310..8853cf6 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,16 +3,17 @@ @import '../../components/event-teaser-large/event-teaser-large.scss'; .right-open-container{ - width: calc((var(--container-width) / 2) + 50vw - 20px); - margin-left:auto; - margin-right:0; - padding-right:0; + @media (min-width: 1000px) { + width: calc((var(--container-width) / 2) + 50vw - 20px); + margin-left:auto; + margin-right:0; + padding-right:0; + } } .eventteaserlargeslider { opacity: 0; transition: opacity 0.4s linear; - &.initiated { opacity: 1; } @@ -44,6 +45,10 @@ width: 80000px; contain: layout; margin:0 -15px; + @media(max-width: 999px) { + width: 10000%; + margin:0; + } &.no-transition { -webkit-user-select: none; -moz-user-select: none; @@ -69,13 +74,14 @@ .slide { position: relative; - //width: 100% !important; width:1%; max-width:1%; min-width:1%; - //max-width: 800px !important; min-height:400px; - padding:0 15px; + + @media(min-width: 1000px) { + padding:0 15px; + } } .prev-clone, @@ -92,6 +98,11 @@ } } +.rotation h1{ + max-width: 50%; + display: inline-block; +} + .rotation .eventteaserlargeslider { margin-bottom:2rem; position: relative; @@ -116,11 +127,6 @@ font-size: 0; line-height: 0; margin: 0; - - @media(max-width: 567px) { - margin-bottom: 12px; - } - li { display: inline-block; vertical-align: top; @@ -166,22 +172,30 @@ .prev, .next { position: absolute; - top: -100px; + top: -94px; width: 60px; height: 60px; text-align: center; line-height: 60px; left: calc(var(--container-width) - 2 * var(--container-padding) - 60px); - //margin: -25px 10px; color: var(--theme-color-primary); right:auto; border-radius: 24px; - background: var(--theme-color-primary-dimmed-04); + @media(max-width: 1580px) { + left:auto; + right: var(--container-padding); + } + @media(max-width: 1339px) { + top: -90px; + } + @media(max-width: 999px) { + right:0px; + top: -80px; + } @media(max-width: 767px) { - display: none; + } - &:before { @include icon-small-arrow-right-simple; font-family: "Icons", sans-serif; @@ -192,6 +206,13 @@ .prev { left: calc(var(--container-width) - 2 * var(--container-padding) - 140px); transform: rotate(180deg); + @media(max-width: 1580px) { + left:auto; + right:calc(var(--container-padding) + 80px); + } + @media(max-width: 999px) { + right:80px; + } } .count{ display:none; diff --git a/gfi-ihk-2024/stories/sections/event-teasers-large/EventTeasersLarge.stories.js b/gfi-ihk-2024/stories/sections/event-teasers-large/EventTeasersLarge.stories.js new file mode 100644 index 0000000..31d2b2a --- /dev/null +++ b/gfi-ihk-2024/stories/sections/event-teasers-large/EventTeasersLarge.stories.js @@ -0,0 +1,36 @@ +import {EventTeasersLargeData} from "./EventTeasersLargeData"; +import {createEventTeasersLarge} from "./EventTeasersLargeComponent"; + +export default { + title: 'Sections/Event Teasers Large', + parameters: { + layout: 'fullscreen', + }, + args: { + headline: 'Gründung und Nachfolge', + count: 9, + items: EventTeasersLargeData, + buttonLabel: 'Mehr Veranstaltungen zu Gründung und Nachfolge', + }, + argTypes: { + headline: { + name: 'Überschrift', + }, + count: { + name: 'Anzahl aller Beteiligungen', + }, + items: { + name: 'Teaser', + }, + buttonLabel: { + name: 'Button Label', + } + }, +} + +const Template = ({...args}) => { + return createEventTeasersLarge({...args}); +}; + +export const EventTeasersLarge = Template.bind({}); +EventTeasersLarge.args = {}; \ No newline at end of file diff --git a/gfi-ihk-2024/stories/sections/event-teasers-large/EventTeasersLargeComponent.js b/gfi-ihk-2024/stories/sections/event-teasers-large/EventTeasersLargeComponent.js new file mode 100644 index 0000000..30f065e --- /dev/null +++ b/gfi-ihk-2024/stories/sections/event-teasers-large/EventTeasersLargeComponent.js @@ -0,0 +1,39 @@ +import './event-teasers-large.scss'; +import {EventTeasersLargeData} from "./EventTeasersLargeData"; +import {createElement} from "../../_global/scripts/helpers"; +import {createButton} from "../../atoms/button/ButtonComponent"; +import {createEventTeaserLarge} from "../../components/event-teaser-large/EventTeaserLargeComponent"; + +export const createEventTeasersLarge = ({ + headline = 'Gründung und Nachfolge', + count = 9, + widemode = false, + events = EventTeasersLargeData, + buttonLabel = 'Alle aktuellen Beteiligungen', +}) => { + const section = createElement('section', ['event-teasers-large']); + const hlContainer = createElement('div', ['container'], null, section); + const hl = createElement('h2', [], headline, hlContainer); + const wrapper = createElement('div', ['overflow-wrapper'], null, section); + const container = createElement('div', ['container'], null, wrapper); + const row = createElement('div', ['row'], null, container); + + + events.map((event, index) => { + if (index < 3 && index < count) { + const col = createElement('div', ['col'], null, row); + const teaser = createEventTeaserLarge({ + ...event, widemode : widemode, + }) + col.appendChild(teaser); + } + }) + + if (count > 3) { + const all = createElement('div', ['all-participations'], null, section); + const btn = createButton({label:buttonLabel}); + all.appendChild(btn); + } + + return section; +} \ No newline at end of file diff --git a/gfi-ihk-2024/stories/sections/event-teasers-large/EventTeasersLargeData.js b/gfi-ihk-2024/stories/sections/event-teasers-large/EventTeasersLargeData.js new file mode 100644 index 0000000..3485084 --- /dev/null +++ b/gfi-ihk-2024/stories/sections/event-teasers-large/EventTeasersLargeData.js @@ -0,0 +1,65 @@ + + export const EventTeaserLargeTitles = [ + 'Basisseminar – Besser informiert in die Selbstständigkeit', + 'NBank-Beratungssprechtag in Göttingen', + 'Aktuelle Änderungen im Zoll- und Aussenwirtschaftsrecht zum Jahreswechsel 2022/2023', + 'Social Media Manager/-in (IHK) - Webinar', + ] + + export const EventTeaserLargeStatus = [ + { + type: 'reserved', + label: 'Anmeldefrist abgelaufen', + }, + { + type: 'waiting-list', + label: 'Warteliste', + }, + { + type: 'open', + label: 'Freie Plätze vorhanden', + } + ] + export const EventTeasersLargeData = [ + { + date: { weekday: 'Mo.', day: '20', month: 'Sep. 2022' }, + title: EventTeaserLargeTitles[Math.floor(Math.random() * EventTeaserLargeTitles.length)], + desc: 'Entfesseln Sie das volle Potenzial der generativen KI und beherrschen Sie die Kunst des Prompt-Engineerings!', + link: '#', + details: { + date: '20.09.2022', + status: EventTeaserLargeStatus[Math.floor(Math.random() * EventTeaserLargeStatus.length)], + }, + icon: 'Roboter', + category: 'Gründung und Nachfolge', + bgimage: null, + }, + { + date: { weekday: 'Mo.', day: '20', month: 'Sep. 2022' }, + title: EventTeaserLargeTitles[Math.floor(Math.random() * EventTeaserLargeTitles.length)], + desc: 'Entfesseln Sie das volle Potenzial der generativen KI und beherrschen Sie die Kunst des Prompt-Engineerings!', + link: '#', + details: { + date: '20.09.2022', + status: EventTeaserLargeStatus[Math.floor(Math.random() * EventTeaserLargeStatus.length)], + }, + icon: 'Roboter', + category: 'Gründung und Nachfolge', + bgimage: 'https://source.unsplash.com/2vCqH34PqWs/1080x648', + }, + { + date: { weekday: 'Mo.', day: '20', month: 'Sep. 2022' }, + title: EventTeaserLargeTitles[Math.floor(Math.random() * EventTeaserLargeTitles.length)], + desc: 'Entfesseln Sie das volle Potenzial der generativen KI und beherrschen Sie die Kunst des Prompt-Engineerings!', + link: '#', + details: { + date: '20.09.2022', + status: EventTeaserLargeStatus[Math.floor(Math.random() * EventTeaserLargeStatus.length)], + }, + icon: 'Roboter', + category: 'Gründung und Nachfolge', + bgimage: 'https://source.unsplash.com/2vCqH34PqWs/1080x648', + } + ] + + \ No newline at end of file diff --git a/gfi-ihk-2024/stories/sections/event-teasers-large/event-teasers-large.scss b/gfi-ihk-2024/stories/sections/event-teasers-large/event-teasers-large.scss new file mode 100644 index 0000000..aa32a4a --- /dev/null +++ b/gfi-ihk-2024/stories/sections/event-teasers-large/event-teasers-large.scss @@ -0,0 +1,75 @@ +@import '../../_global/styles/mixins'; +@import '../../_global/styles/vars'; + +.event-teasers-large { + position: relative; + display: block; + padding: var(--section-padding) 0; + margin: 0; + background-color: var(--theme-color-primary-dimmed-04); + + @media(max-width: 767px) { + margin-top: 24px; + } + + h2, .like-h2 { + margin-top: var(--section-headline-margin); + } + + .row { + flex-wrap: nowrap; + margin: calc(var(--col-padding) * -1); + padding-top: 0.3em; + + @media(max-width: 999px) { + &::after { + content: ''; + position: relative; + display: block; + min-width: 50px; + } + } + @media(max-width: 767px) { + margin-left: -6px; + margin-right: -6px; + } + } + + .col { + position: relative; + display: flex; + flex: 1 1 33.3333%; + max-width: 33.3333%; + + &:first-child { + margin-left: auto; + } + + &:last-child { + margin-right: auto; + } + + @media(max-width: 999px) { + flex: 1 1 50%; + max-width: 50%; + min-width: 44vw; + } + @media(max-width: 767px) { + padding: 6px; + min-width: calc(50vw - 30px); + } + @media(max-width: 567px) { + flex: 1 1 100%; + max-width: 100%; + min-width: 320px; + } + @media(max-width: 359px) { + min-width: 300px; + } + } + + .all-participations { + text-align: center; + margin: calc(var(--col-padding) + 1.5em) 0 0; + } +} \ No newline at end of file