From 5de252c884c9fd2f75717c8437d474cebfb7ed84 Mon Sep 17 00:00:00 2001 From: Lukas Zimmer Date: Wed, 6 Mar 2024 18:32:15 +0100 Subject: [PATCH] Marketing Header + Mini-Teaser --- .../mini-teaser/MiniTeaserComponent.js | 21 ++-- .../components/mini-teaser/miniteaser.scss | 8 +- .../EventTeasersLargeComponent.js | 1 + .../MarketingHeader.stories.js | 8 +- .../MarketingHeaderComponent.js | 33 +++++- .../marketingheader/MarketingHeaderData.js | 4 +- .../marketingheader/marketingheader.scss | 104 ++++++++++++++++++ 7 files changed, 163 insertions(+), 16 deletions(-) diff --git a/gfi-ihk-2024/stories/components/mini-teaser/MiniTeaserComponent.js b/gfi-ihk-2024/stories/components/mini-teaser/MiniTeaserComponent.js index f037ccc..80827c4 100644 --- a/gfi-ihk-2024/stories/components/mini-teaser/MiniTeaserComponent.js +++ b/gfi-ihk-2024/stories/components/mini-teaser/MiniTeaserComponent.js @@ -9,18 +9,23 @@ export const createMiniTeaser = ({ icon = 'Roboter', buttonlabel = 'IHK-Newsletter sichern', }) => { - const tile = createElement('div', ['tile', 'mini-teaser', type], null); - tile.href = link; - const textBox = createElement('div', ['text-box'], null, tile); if (type === 'standard') { + const tile = createElement('a', ['tile', 'mini-teaser', type], null); + tile.href = link; + const textBox = createElement('div', ['text-box'], null, tile); createElement('h5', ['category'], category, textBox); + createElement('h4', ['title'], title, textBox); + return tile; }else{ + const tile = createElement('div', ['tile', 'mini-teaser', type], null); + const textBox = createElement('div', ['text-box'], null, tile); createElement('div', ['icon-box', 'pictogram-' + icon.toLowerCase().split(' ').join('-')], null, textBox); + createElement('h4', ['title'], title, textBox); + textBox.appendChild(createButton({color: 'white', label: buttonlabel,link: link, iconPosition: 'icon-right', icon: null})) + return tile; } - createElement('h4', ['title'], title, textBox); - if (type === 'infoteaser') { - textBox.appendChild(createButton({color: 'white', label: buttonlabel, iconPosition: 'icon-right', icon: null})) - } - return tile; + + + } \ No newline at end of file diff --git a/gfi-ihk-2024/stories/components/mini-teaser/miniteaser.scss b/gfi-ihk-2024/stories/components/mini-teaser/miniteaser.scss index 55694d2..0757a9e 100644 --- a/gfi-ihk-2024/stories/components/mini-teaser/miniteaser.scss +++ b/gfi-ihk-2024/stories/components/mini-teaser/miniteaser.scss @@ -14,6 +14,7 @@ text-align: center; text-decoration: none; background-color: var(--theme-grey-light); + display: block; .title{ font-size: 22px; } @@ -24,12 +25,12 @@ top: 0; left: 0; right: 0; - height: var(--border-width); + height: 4px; background-color: var(--theme-color-secondary); transition: 0.2s ease; } &.standard:hover::before { - height: var(--border-width-hover); + height: 8px; } h4{ font-size: 22px; @@ -95,6 +96,9 @@ padding:0; margin:0; margin-bottom:8px; + font-size:16px; + text-transform: uppercase; + line-height: 18px; } .title{ text-align: left; 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 8c74646..fb3cf01 100644 --- a/gfi-ihk-2024/stories/sections/event-teasers-large/EventTeasersLargeComponent.js +++ b/gfi-ihk-2024/stories/sections/event-teasers-large/EventTeasersLargeComponent.js @@ -1,4 +1,5 @@ import './event-teasers-large.scss'; +//import '../../components/mini-teaser/miniteaser.scss'; import {EventTeasersLargeData} from "./EventTeasersLargeData"; import {createElement} from "../../_global/scripts/helpers"; import {createButton} from "../../atoms/button/ButtonComponent"; diff --git a/gfi-ihk-2024/stories/sections/marketingheader/MarketingHeader.stories.js b/gfi-ihk-2024/stories/sections/marketingheader/MarketingHeader.stories.js index 2d493ed..7e5bc3d 100644 --- a/gfi-ihk-2024/stories/sections/marketingheader/MarketingHeader.stories.js +++ b/gfi-ihk-2024/stories/sections/marketingheader/MarketingHeader.stories.js @@ -7,6 +7,12 @@ export default { layout: 'fullscreen', }, argTypes: { + type: { + name: 'Typ', + control: {type: 'select'}, + options: ['standard', 'hero-fullwidth'], + defaultValue: 'standard', + }, artworkStyle: { name: 'Artwork Stil', control: {type: 'select'}, @@ -53,4 +59,4 @@ export const MarketingHeaderSlider = Template.bind({}); MarketingHeaderSlider.args = {}; export const MarketingHeaderStage = Template.bind({}); -MarketingHeaderStage.args = {}; \ No newline at end of file +MarketingHeaderStage.args = {type:'hero-fullwidth'}; \ 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 b794c1a..e095b97 100644 --- a/gfi-ihk-2024/stories/sections/marketingheader/MarketingHeaderComponent.js +++ b/gfi-ihk-2024/stories/sections/marketingheader/MarketingHeaderComponent.js @@ -10,6 +10,7 @@ import IHKSearchTypeahead from "./marketingheader-typeahead"; import {createButton} from "../../atoms/button/ButtonComponent"; import IHKMHSlider from "./marketingheaderslider"; import {searchData, teaserData, sliderData} from "./MarketingHeaderData"; +import {createMiniTeaser} from "../../components/mini-teaser/MiniTeaserComponent"; export const createMarketingHeader = @@ -38,8 +39,10 @@ export const createMarketingHeader = isFirstElement = false, slides = sliderData, teasers = teaserData, + maxItems = 3, + type = 'infoteaser', }) => { - const section = createElement('section', ['marketingheader'], null); + const section = createElement('section', ['marketingheader', type], null); const search = createElement('div', ['search'], null, section); const artwork = createArtwork({type: artworkStyle}); search.appendChild(artwork); @@ -72,8 +75,13 @@ export const createMarketingHeader = /* SLIDER */ - const container2 = createElement('div', ['container', 'slidercontainer', 'rotation'], null, section); - const sliderComponent = createElement('div', ['slider'], null, container2); + const container2 = createElement('div', ['container', 'mainstage'], null, section); + const row2 = createElement('div', ['row'], null, container2); + const colslider = createElement('div', ['col', 'slidercontainer', 'rotation'], null, row2); + + + //const col2 = createElement('div', ['col'], null, row2); + const sliderComponent = createElement('div', ['slider'], null, colslider); slides.map((slideData, index) => { const slide = createElement('div', ['slide'], null, sliderComponent); const outer = createElement('outer', ['outer'], null, slide); @@ -122,8 +130,27 @@ export const createMarketingHeader = } } }) + new IHKMHSlider($(sliderComponent)); + if (type === 'infoteaser') { + const col3 = createElement('div', ['col'], null, row2); + + //const teasers = createMiniTeaser({teasers.type: 'standard'}); + //col3.appendChild(teasers); + + teasers.map((t, i) => { + if (i < maxItems) { + var typ = 'standard'; + if (i == 0 && t.type == 'infoteaser') typ = 'infoteaser'; + const col4 = createElement('div', ['mt'], null, col3); + const tea = createMiniTeaser({ + type : typ, + }) + col4.appendChild(tea); + } + }) + } /* const hasImage = imageSrc && imageSrc.length > 0; const stage = createElement('div', ['participation', 'participation-stage'], null, section); diff --git a/gfi-ihk-2024/stories/sections/marketingheader/MarketingHeaderData.js b/gfi-ihk-2024/stories/sections/marketingheader/MarketingHeaderData.js index 2ff9399..c74759b 100644 --- a/gfi-ihk-2024/stories/sections/marketingheader/MarketingHeaderData.js +++ b/gfi-ihk-2024/stories/sections/marketingheader/MarketingHeaderData.js @@ -31,18 +31,18 @@ export const teaserData = [ title: 'Jetzt Teil der Digitalisierungswelle werden.', link: '#', icon: 'Virus', + buttonlabel: 'IHK-Newsletter sichern', + type: 'standard', }, { category: 'IHK Mitgliedschaft', title: 'Exklusive Einblicke und Branchen-Trends:', link: '#', - icon: 'Roboter', }, { category: 'IHK Mitgliedschaft', title: 'Exklusive Einblicke und Branchen-Trends:', link: '#', - icon: 'Stadt', } ] diff --git a/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss b/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss index 38168b4..5d43bc1 100644 --- a/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss +++ b/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss @@ -2,6 +2,22 @@ @import '../../_global/styles/vars'; section.marketingheader{ margin-top:0; + .rotation .slider{ + border-bottom:0; + .text-box{ + color:var(--theme-color-primary); + &:not(:first-child)::before { + background-color: var(--theme-color-primary-dimmed-04); + } + .btn{ + background-color: var(--theme-color-primary); + color:white; + &:hover:after{ + box-shadow: 0 0 0 var(--button-hover-shadow-size) var(--theme-color-primary); + } + } + } + } .search { position: relative; //padding: calc(0.4vw + 20px) 0 calc(1vw + 40px); @@ -290,4 +306,92 @@ section.marketingheader{ } } } + &.infoteaser{ + .mainstage{ + .row{ + margin:30px -8px 0; + .col{ + flex: 1 1 66.6666%; + max-width: 66.6666%; + padding:0 8px; + + .col{ + flex: 1 1 33.3333%; + max-width: 33.3333%; + display: flex; + flex-flow: column; + justify-content: space-between; + margin: -8px 0; + padding:0 8px; + .mt{ + height: 100%; + padding: 8px 0; + .mini-teaser{ + height: 100%; + } + } + } + } + } + } + + } + &.hero-fullwidth{ + max-height:566px; + .mainstage.container{ + max-width: 1920px; + width:100%; + padding:0; + } + .rotation{ + margin:0 !important; + padding:0 !important; + //max-width: 1920px; + width:100%; + } + .image-box{ + width:100%; + flex: 1 1 100%; + max-width: 100%; + max-height:566px; + position: relative; + + &:after{ + position:absolute; + top:0; + left:0; + bottom:0; + right:0; + z-index: 0; + content:""; + opacity: 0.6; + background: linear-gradient(87deg, #036 12.55%, rgba(1, 40, 81, 0.86) 56.52%, rgba(0, 51, 102, 0.00) 94.05%); + background-blend-mode: overlay; + &:before{ + display:none; + } + } + img{ + object-fit: cover; + position:relative; + z-index: -1; + } + } + .text-box{ + position: absolute; + height: 100%; + color:white; + *{ + color:white; + } + &:after{ + display:none; + } + &:before{ + display:none; + } + } + } + .rotation{ + margin:0; + } } \ No newline at end of file