diff --git a/gfi-ihk-2024/stories/components/event-teaser-large/EventTeaserLargeData.js b/gfi-ihk-2024/stories/components/event-teaser-large/EventTeaserLargeData.js index 3d0316d..b57a8d0 100644 --- a/gfi-ihk-2024/stories/components/event-teaser-large/EventTeaserLargeData.js +++ b/gfi-ihk-2024/stories/components/event-teaser-large/EventTeaserLargeData.js @@ -1,7 +1,7 @@ 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', + 'Vertiefungsseminar zur Existenzgründung', + 'Erfolgreiche Unternehmensgründung: Strategien und Fallstudien', + 'Nachhaltige Firmenübergabe', 'Social Media Manager/-in (IHK) - Webinar', ] diff --git a/gfi-ihk-2024/stories/components/event-teaser-large/event-teaser-large.scss b/gfi-ihk-2024/stories/components/event-teaser-large/event-teaser-large.scss index f6e1ae1..2afc30e 100644 --- a/gfi-ihk-2024/stories/components/event-teaser-large/event-teaser-large.scss +++ b/gfi-ihk-2024/stories/components/event-teaser-large/event-teaser-large.scss @@ -9,8 +9,16 @@ transition: 0.3s ease; text-decoration: none; min-height:400px; - //max-width:800px; + flex-wrap: wrap; + &:not(.widemode){ + flex-wrap: wrap; + align-content: baseline; + flex-flow: column; + justify-content: flex-start; + background-color: var(--theme-grey-light); + + } @include focus-visible; &:hover { 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 b3dba67..e6dc6d1 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,5 +1,5 @@ import {createETLSlider} from "./EventTeaserLargeSliderComponent"; -import {sliderData} from "./EventTeaserLargeSliderData"; +import {sliderData,sliderImageData} from "./EventTeaserLargeSliderData"; export default { title: 'Sections/EventTeaserLargeSlider', @@ -21,3 +21,6 @@ const Template = ({...args}) => { export const Slider = Template.bind({}); Slider.args = {}; + +export const SliderWithImage = Template.bind({}); +SliderWithImage.args = {slides: sliderImageData}; diff --git a/gfi-ihk-2024/stories/sections/event-teaser-large-slider/EventTeaserLargeSliderData.js b/gfi-ihk-2024/stories/sections/event-teaser-large-slider/EventTeaserLargeSliderData.js index 866cf2a..033d2f9 100644 --- a/gfi-ihk-2024/stories/sections/event-teaser-large-slider/EventTeaserLargeSliderData.js +++ b/gfi-ihk-2024/stories/sections/event-teaser-large-slider/EventTeaserLargeSliderData.js @@ -1,7 +1,7 @@ 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', + 'Vertiefungsseminar zur Existenzgründung', + 'Erfolgreiche Unternehmensgründung: Strategien und Fallstudien', + 'Nachhaltige Firmenübergabe', 'Social Media Manager/-in (IHK) - Webinar', ] @@ -26,7 +26,7 @@ export const sliderData = [ desc: 'Entfesseln Sie das volle Potenzial der generativen KI und beherrschen Sie die Kunst des Prompt-Engineerings!', link: '#', details: { - date: '20.09.2022', + date: '20.09.2024', status: EventTeaserLargeStatus[Math.floor(Math.random() * EventTeaserLargeStatus.length)], }, icon: 'Roboter', @@ -39,11 +39,40 @@ export const sliderData = [ desc: 'Entfesseln Sie das volle Potenzial der generativen KI und beherrschen Sie die Kunst des Prompt-Engineerings!', link: '#', details: { - date: '20.09.2022', + date: '20.09.2024', status: EventTeaserLargeStatus[Math.floor(Math.random() * EventTeaserLargeStatus.length)], }, icon: 'Roboter', - category: 'Gründung und Nachfolge', + category: 'Innovation und Umwelt', + 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.2024', + status: EventTeaserLargeStatus[Math.floor(Math.random() * EventTeaserLargeStatus.length)], + }, + icon: 'Roboter', + category: 'Aus- und Weiterbildung', + bgimage: null, + } +] + +export const sliderImageData = [ + { + 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.2024', + status: EventTeaserLargeStatus[Math.floor(Math.random() * EventTeaserLargeStatus.length)], + }, + icon: 'Roboter', + category: 'Aus- und Weiterbildung', bgimage: 'https://source.unsplash.com/2vCqH34PqWs/1080x648', }, { @@ -52,12 +81,24 @@ export const sliderData = [ desc: 'Entfesseln Sie das volle Potenzial der generativen KI und beherrschen Sie die Kunst des Prompt-Engineerings!', link: '#', details: { - date: '20.09.2022', + date: '20.09.2024', 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.2024', + status: EventTeaserLargeStatus[Math.floor(Math.random() * EventTeaserLargeStatus.length)], + }, + icon: 'Roboter', + category: 'Innovation und Umwelt', + bgimage: 'https://source.unsplash.com/2vCqH34PqWs/1080x648', } ] - 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 d67e418..d6a2664 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,17 +11,18 @@ 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; &.initiated { opacity: 1; } + .slider-tabs{ + width: calc(var(--container-width) - 2 * var(--container-padding)); + left: 0 !important; + transform: none !important; +} &.single-slide { .controls { 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 28c4689..2abf976 100644 --- a/gfi-ihk-2024/stories/sections/event-teasers-large/EventTeasersLargeData.js +++ b/gfi-ihk-2024/stories/sections/event-teasers-large/EventTeasersLargeData.js @@ -1,8 +1,8 @@ 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', + 'Vertiefungsseminar zur Existenzgründung', + 'Erfolgreiche Unternehmensgründung: Strategien und Fallstudien', + 'Nachhaltige Firmenübergabe', 'Social Media Manager/-in (IHK) - Webinar', 'NBank-Beratungssprechtag in Göttingen', 'Basisseminar – Besser informiert in die Selbstständigkeit', diff --git a/gfi-ihk-2024/stories/sections/eventoverview-stage/EventOverviewStageComponent.js b/gfi-ihk-2024/stories/sections/eventoverview-stage/EventOverviewStageComponent.js index b177197..b547d04 100644 --- a/gfi-ihk-2024/stories/sections/eventoverview-stage/EventOverviewStageComponent.js +++ b/gfi-ihk-2024/stories/sections/eventoverview-stage/EventOverviewStageComponent.js @@ -11,8 +11,8 @@ import IHKEventOverviewTiles from "./eventoverview"; export const createEventOverviewStage = ({ backgroundImage = null, - kicker = 'Noch 7 Tage offen', - headline = 'Jetzt und digital mitreden', + kicker = 'Das Veranstaltungsportal der IHK Musterstadt', + headline = 'Veranstaltungsportal', maxItems = 6, placeholder = 'Veranstaltungssuche, z.B. „Existenzgründung”', api = 'services/search/{SEARCHTERM}.json', diff --git a/gfi-ihk-2024/stories/sections/eventoverview-stage/EventOverviewStageData.js b/gfi-ihk-2024/stories/sections/eventoverview-stage/EventOverviewStageData.js index 1b1f16a..8668561 100644 --- a/gfi-ihk-2024/stories/sections/eventoverview-stage/EventOverviewStageData.js +++ b/gfi-ihk-2024/stories/sections/eventoverview-stage/EventOverviewStageData.js @@ -1,26 +1,26 @@ export const eventOverviewStageData = [ { - title: 'Alles für Gründer', + title: 'Aus- und Weiterbildung', icon: 'Person', }, { - title: 'Alles Wichtige zum Brexit', + title: 'Alles für Gründer', icon: 'Stadt', }, { - title: 'Schwerpunkt­thema Digitalisierung', + title: 'Innovation und Umwelt', icon: 'Roboter', }, { - title: 'Schwerpunkt­thema Nachfolge', + title: 'International', icon: 'Treppe', }, { - title: 'Alle wichtigen Infos zum Corona-Virus', + title: 'Recht und Steuern', icon: 'Virus', }, { - title: 'Alles für Auszubildende', + title: 'Fachveranstaltungen und Branchen- veranstaltungen', icon: 'Waage', }, ] diff --git a/gfi-ihk-2024/stories/sections/eventoverview-stage/eventoverview-stage.scss b/gfi-ihk-2024/stories/sections/eventoverview-stage/eventoverview-stage.scss index 96fff17..aefc55f 100644 --- a/gfi-ihk-2024/stories/sections/eventoverview-stage/eventoverview-stage.scss +++ b/gfi-ihk-2024/stories/sections/eventoverview-stage/eventoverview-stage.scss @@ -205,17 +205,16 @@ background: linear-gradient(0deg, 0%, 100%), linear-gradient(88deg, #003366 0%, flex: 1 1 16.6666666667%; max-width: 16.6666666667%; padding: 10px; - @media(max-width: 1080px) { + @media(max-width: 1480px) { flex: 1 1 33.3333333333%; max-width: 33.3333333333%; } @media(max-width: 767px) { padding: 6px; - } - @media(max-width: 567px) { flex: 1 1 50%; max-width: 50%; } + .topic-teaser{ --topic-tile-padding: 10px;