diff --git a/gfi-ihk-2024/stories/pages/event-overview/EventOverviewPage.js b/gfi-ihk-2024/stories/pages/event-overview/EventOverviewPage.js index 44813cf..c105942 100644 --- a/gfi-ihk-2024/stories/pages/event-overview/EventOverviewPage.js +++ b/gfi-ihk-2024/stories/pages/event-overview/EventOverviewPage.js @@ -11,7 +11,8 @@ 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"; export const createEventOverviewPage = ({ }) => { @@ -39,15 +40,17 @@ export const createEventOverviewPage = ({ listItems : null, smallheadline: true, })); - wrapper.appendChild(createTopicTeasersSection({maxItems: 3})); - 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(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(createFeature({icon: null})); - wrapper.appendChild(createContact({headline: 'Ich helfe Ihnen gerne weiter', contactCount: 1, addContainer: true})) - + 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(createSlider({})); page.appendChild(createFooter({})); return page; 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 cd583a6..507375b 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 @@ -16,7 +16,7 @@ export const createETLSlider = headline = 'Premium Seminare', }) => { - const section = createElement('section', ['rotation'], null); + const section = createElement('section', ['rotationslider'], null); const hcontainer = createElement('div', ['container'], null, section); const container = createElement('div', ['container', 'right-open-container'], null, section); if (headline && headline.length > 0) { diff --git a/gfi-ihk-2024/stories/sections/event-teaser-large-slider/eventteaserlargeslider.js b/gfi-ihk-2024/stories/sections/event-teaser-large-slider/eventteaserlargeslider.js index 3b1fbcc..eadcef8 100644 --- a/gfi-ihk-2024/stories/sections/event-teaser-large-slider/eventteaserlargeslider.js +++ b/gfi-ihk-2024/stories/sections/event-teaser-large-slider/eventteaserlargeslider.js @@ -21,7 +21,7 @@ class IHKETLSlider { export default IHKETLSlider; $('body').on('ihk-init dynamic-component-loaded gfi-dynamic-init', function () { - $('.rotation:not(.initiated)').each(function() { + $('.rotationslider:not(.initiated)').each(function() { new IHKETLSlider($(this)); }); }); 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 8853cf6..a2126cc 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,8 +3,9 @@ @import '../../components/event-teaser-large/event-teaser-large.scss'; .right-open-container{ + @media (min-width: 1000px) { - width: calc((var(--container-width) / 2) + 50vw - 20px); + width: calc((var(--container-width) / 2) + 50vw - var(--col-padding)); margin-left:auto; margin-right:0; padding-right:0; @@ -44,7 +45,7 @@ align-items: flex-start; width: 80000px; contain: layout; - margin:0 -15px; + margin:0 calc(var(--col-padding) * -1); @media(max-width: 999px) { width: 10000%; margin:0; @@ -80,7 +81,7 @@ min-height:400px; @media(min-width: 1000px) { - padding:0 15px; + padding:var(--col-padding); } } @@ -98,12 +99,16 @@ } } -.rotation h1{ +.rotationslider{ + margin-bottom:calc(var(--section-margin) + 2rem) !important; +} + +.rotationslider h1{ max-width: 50%; display: inline-block; } -.rotation .eventteaserlargeslider { +.rotationslider .eventteaserlargeslider { margin-bottom:2rem; position: relative; display: block; 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 31d2b2a..027f267 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 @@ -8,6 +8,7 @@ export default { }, args: { 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, buttonLabel: 'Mehr Veranstaltungen zu Gründung und Nachfolge', 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 30f065e..5dc4011 100644 --- a/gfi-ihk-2024/stories/sections/event-teasers-large/EventTeasersLargeComponent.js +++ b/gfi-ihk-2024/stories/sections/event-teasers-large/EventTeasersLargeComponent.js @@ -6,6 +6,7 @@ import {createEventTeaserLarge} from "../../components/event-teaser-large/EventT export const createEventTeasersLarge = ({ 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, widemode = false, events = EventTeasersLargeData, @@ -14,6 +15,7 @@ export const createEventTeasersLarge = ({ const section = createElement('section', ['event-teasers-large']); const hlContainer = createElement('div', ['container'], null, section); const hl = createElement('h2', [], headline, hlContainer); + const shl = createElement('p', [], subheadline, hlContainer); const wrapper = createElement('div', ['overflow-wrapper'], null, section); const container = createElement('div', ['container'], null, wrapper); const row = createElement('div', ['row'], null, container); @@ -23,7 +25,7 @@ export const createEventTeasersLarge = ({ if (index < 3 && index < count) { const col = createElement('div', ['col'], null, row); const teaser = createEventTeaserLarge({ - ...event, widemode : widemode, + event: event, widemode : widemode, }) col.appendChild(teaser); } 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 index aa32a4a..f1cd663 100644 --- 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 @@ -5,7 +5,7 @@ position: relative; display: block; padding: var(--section-padding) 0; - margin: 0; + //margin: 0; background-color: var(--theme-color-primary-dimmed-04); @media(max-width: 767px) { @@ -14,10 +14,11 @@ h2, .like-h2 { margin-top: var(--section-headline-margin); + margin-bottom:10px; } .row { - flex-wrap: nowrap; + flex-wrap: wrap; margin: calc(var(--col-padding) * -1); padding-top: 0.3em; @@ -52,19 +53,24 @@ @media(max-width: 999px) { flex: 1 1 50%; max-width: 50%; - min-width: 44vw; + + &:last-child { + display:none; + } } @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; + + &:last-child { + display:block; + } } @media(max-width: 359px) { - min-width: 300px; + } }