From c96d2da618947c3237586f8b30bb1eb93a8742f6 Mon Sep 17 00:00:00 2001 From: Lukas Zimmer Date: Sun, 3 Mar 2024 18:12:57 +0100 Subject: [PATCH] Pfeile Event Teaser Large Slider, Icons einsetzen Event Overview Stage --- .../pages/event-overview/EventOverviewPage.js | 14 +- .../eventteaserlargeslider.scss | 11 +- .../EventTeasersLarge.stories.js | 16 +- .../EventTeasersLargeComponent.js | 2 +- .../EventTeasersLargeData.js | 139 +++++++++++++++++- .../EventOverviewStage.stories.js | 4 +- .../EventOverviewStageData.js | 8 +- 7 files changed, 167 insertions(+), 27 deletions(-) diff --git a/gfi-ihk-2024/stories/pages/event-overview/EventOverviewPage.js b/gfi-ihk-2024/stories/pages/event-overview/EventOverviewPage.js index c105942..860871f 100644 --- a/gfi-ihk-2024/stories/pages/event-overview/EventOverviewPage.js +++ b/gfi-ihk-2024/stories/pages/event-overview/EventOverviewPage.js @@ -1,18 +1,14 @@ import {createElement} from "../../_global/scripts/helpers"; import {createHeader} from "../../components/header/HeaderComponent"; -import {createTeasersSection} from "../../sections/teasers/TeasersComponent"; import {createFooter} from "../../components/footer/FooterComponent"; -import {createTopicTeasersSection} from "../../sections/topic-teasers/TopicTeasersComponent"; -import {createLinkCollection} from "../../components/link-collection/LinkCollectionComponent"; -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"; import {createEventTeasersLarge} from "../../sections/event-teasers-large/EventTeasersLargeComponent"; import {createSlider} from "../../sections/slider/SliderComponent"; +import {EventTeasersLargeSixData} from "../../sections/event-teasers-large/EventTeasersLargeData"; export const createEventOverviewPage = ({ }) => { @@ -41,15 +37,9 @@ export const createEventOverviewPage = ({ smallheadline: true, })); wrapper.appendChild(createEventTeasersLarge({})); - //wrapper.appendChild(createTeasersSection({type: 'hero', maxItems: 2})); - //wrapper.appendChild(createLinkCollection({headline: 'Meistgeklickt', addContainer: true, buttonText: null})); - //wrapper.appendChild(createTopicTeasersSection({type: 'topic-linklist'})); - //wrapper.appendChild(createTeasersSection({})); wrapper.appendChild(createEventsSection({})); wrapper.appendChild(createEventTeasersLarge({})); - wrapper.appendChild(createEventTeasersLarge({})); - //wrapper.appendChild(createFeature({icon: null})); - //wrapper.appendChild(createContact({headline: 'Ich helfe Ihnen gerne weiter', contactCount: 1, addContainer: true})) + wrapper.appendChild(createEventTeasersLarge({events: EventTeasersLargeSixData})); wrapper.appendChild(createSlider({})); page.appendChild(createFooter({})); 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 8b4d411..d67e418 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 @@ -11,7 +11,11 @@ padding-right:0; } } - +.slider-tabs{ + width: calc(var(--container-width) - 2 * var(--container-padding)); + left: 0 !important; + transform: none !important; +} .eventteaserlargeslider { opacity: 0; transition: opacity 0.4s linear; @@ -187,7 +191,7 @@ right:auto; border-radius: 24px; background: var(--theme-color-primary-dimmed-04); - @media(max-width: 1580px) { + @media(max-width: 1470px) { left:auto; right: var(--container-padding); } @@ -205,13 +209,14 @@ @include icon-small-arrow-right-simple; font-family: "Icons", sans-serif; font-size: 30px; + content: "\e825"; } } .prev { left: calc(var(--container-width) - 2 * var(--container-padding) - 140px); transform: rotate(180deg); - @media(max-width: 1580px) { + @media(max-width: 1470px) { left:auto; right:calc(var(--container-padding) + 80px); } 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 index 027f267..4e530e4 100644 --- a/gfi-ihk-2024/stories/sections/event-teasers-large/EventTeasersLarge.stories.js +++ b/gfi-ihk-2024/stories/sections/event-teasers-large/EventTeasersLarge.stories.js @@ -1,4 +1,4 @@ -import {EventTeasersLargeData} from "./EventTeasersLargeData"; +import {EventTeasersLargeData, EventTeasersLargeImageData, EventTeasersLargeSixData} from "./EventTeasersLargeData"; import {createEventTeasersLarge} from "./EventTeasersLargeComponent"; export default { @@ -10,7 +10,7 @@ export default { headline: 'Gründung und Nachfolge', subheadline: 'Egal, ob Startup oder Unternehmensnachfolge – mit unseren Ressourcen legen Sie den Grundstein für eine erfolgreiche Unternehmenszukunft.', count: 9, - items: EventTeasersLargeData, + events: EventTeasersLargeData, buttonLabel: 'Mehr Veranstaltungen zu Gründung und Nachfolge', }, argTypes: { @@ -34,4 +34,14 @@ const Template = ({...args}) => { }; export const EventTeasersLarge = Template.bind({}); -EventTeasersLarge.args = {}; \ No newline at end of file +EventTeasersLarge.args = {}; + +export const EventTeasersLargeImage = Template.bind({}); +EventTeasersLargeImage.args = { + events: EventTeasersLargeImageData, +}; + +export const EventTeasersLargeSix = Template.bind({}); +EventTeasersLargeSix.args = { + events: EventTeasersLargeSixData, +}; diff --git a/gfi-ihk-2024/stories/sections/event-teasers-large/EventTeasersLargeComponent.js b/gfi-ihk-2024/stories/sections/event-teasers-large/EventTeasersLargeComponent.js index 5dc4011..6a8d182 100644 --- a/gfi-ihk-2024/stories/sections/event-teasers-large/EventTeasersLargeComponent.js +++ b/gfi-ihk-2024/stories/sections/event-teasers-large/EventTeasersLargeComponent.js @@ -22,7 +22,7 @@ export const createEventTeasersLarge = ({ events.map((event, index) => { - if (index < 3 && index < count) { + if (index < 6 && index < count) { const col = createElement('div', ['col'], null, row); const teaser = createEventTeaserLarge({ event: event, widemode : widemode, diff --git a/gfi-ihk-2024/stories/sections/event-teasers-large/EventTeasersLargeData.js b/gfi-ihk-2024/stories/sections/event-teasers-large/EventTeasersLargeData.js index 3485084..28c4689 100644 --- a/gfi-ihk-2024/stories/sections/event-teasers-large/EventTeasersLargeData.js +++ b/gfi-ihk-2024/stories/sections/event-teasers-large/EventTeasersLargeData.js @@ -4,9 +4,23 @@ 'NBank-Beratungssprechtag in Göttingen', 'Aktuelle Änderungen im Zoll- und Aussenwirtschaftsrecht zum Jahreswechsel 2022/2023', 'Social Media Manager/-in (IHK) - Webinar', + 'NBank-Beratungssprechtag in Göttingen', + 'Basisseminar – Besser informiert in die Selbstständigkeit', ] export const EventTeaserLargeStatus = [ + { + type: 'reserved', + label: 'Anmeldefrist abgelaufen', + }, + { + type: 'waiting-list', + label: 'Warteliste', + }, + { + type: 'open', + label: 'Freie Plätze vorhanden', + }, { type: 'reserved', label: 'Anmeldefrist abgelaufen', @@ -34,6 +48,48 @@ 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: 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: null, + } + ] + + export const EventTeasersLargeImageData = [ + { + 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)], @@ -61,5 +117,84 @@ bgimage: 'https://source.unsplash.com/2vCqH34PqWs/1080x648', } ] - - \ No newline at end of file + + export const EventTeasersLargeSixData = [ + { + 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: 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: 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: 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: 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: null, + } + ] \ No newline at end of file diff --git a/gfi-ihk-2024/stories/sections/eventoverview-stage/EventOverviewStage.stories.js b/gfi-ihk-2024/stories/sections/eventoverview-stage/EventOverviewStage.stories.js index 829c66f..1108402 100644 --- a/gfi-ihk-2024/stories/sections/eventoverview-stage/EventOverviewStage.stories.js +++ b/gfi-ihk-2024/stories/sections/eventoverview-stage/EventOverviewStage.stories.js @@ -7,8 +7,8 @@ export default { }, args: { backgroundImage: null, - kicker: 'Noch 7 Tage offen', - headline: 'Jetzt und digital mitreden', + kicker: 'Das Veranstaltungsportal der IHK Musterstadt', + headline: 'Veranstaltungsportal', }, argTypes: { kicker: { diff --git a/gfi-ihk-2024/stories/sections/eventoverview-stage/EventOverviewStageData.js b/gfi-ihk-2024/stories/sections/eventoverview-stage/EventOverviewStageData.js index 1d2f1d8..1b1f16a 100644 --- a/gfi-ihk-2024/stories/sections/eventoverview-stage/EventOverviewStageData.js +++ b/gfi-ihk-2024/stories/sections/eventoverview-stage/EventOverviewStageData.js @@ -1,11 +1,11 @@ export const eventOverviewStageData = [ { title: 'Alles für Gründer', - icon: 'Foundation', + icon: 'Person', }, { title: 'Alles Wichtige zum Brexit', - icon: 'Brexit', + icon: 'Stadt', }, { title: 'Schwerpunkt­thema Digitalisierung', @@ -13,7 +13,7 @@ export const eventOverviewStageData = [ }, { title: 'Schwerpunkt­thema Nachfolge', - icon: 'Uebergabe', + icon: 'Treppe', }, { title: 'Alle wichtigen Infos zum Corona-Virus', @@ -21,6 +21,6 @@ export const eventOverviewStageData = [ }, { title: 'Alles für Auszubildende', - icon: 'Wissen', + icon: 'Waage', }, ]