diff --git a/gfi-ihk-2024/stories/components/common-content-article/CommonContentArticle.stories.js b/gfi-ihk-2024/stories/components/common-content-article/CommonContentArticle.stories.js new file mode 100644 index 0000000..3304ef5 --- /dev/null +++ b/gfi-ihk-2024/stories/components/common-content-article/CommonContentArticle.stories.js @@ -0,0 +1,13 @@ +import {createCommonContentArticle} from "./CommonContentArticleComponent"; + +export default { + title: 'Components/Common Content Article', + args: {}, +} + +const Template = ({...args}) => { + return createCommonContentArticle({...args}); +}; + +export const CommonContentArticle = Template.bind({}); +CommonContentArticle.args = {}; \ No newline at end of file diff --git a/gfi-ihk-2024/stories/components/common-content-article/CommonContentArticleComponent.js b/gfi-ihk-2024/stories/components/common-content-article/CommonContentArticleComponent.js new file mode 100644 index 0000000..47ff0c5 --- /dev/null +++ b/gfi-ihk-2024/stories/components/common-content-article/CommonContentArticleComponent.js @@ -0,0 +1,35 @@ +import './commonContent-article.scss'; +import {createElement} from "../../_global/scripts/helpers"; +import {lorem2} from "../../_global/scripts/lorem"; +import {createBlockquote} from "../../atoms/blockquote/BlockquoteComponent"; +import {createContact} from "../contact/ContactComponent"; +import {createPrintShare} from "../print-share/PrintShareComponent"; +import {createInfobox} from "../infobox/InfoboxComponent"; +import {createTopicTeasersSection} from "../../sections/topic-teasers/TopicTeasersComponent"; +import {createCommonContent} from "../common-content/CommonContentComponent"; + +export const createCommonContentArticle = ({ + addArticleComponents = true, + kicker = 'Titelthema', + headline = '5 Beispiele, wie sich Unternehmen für ihr Umfeld engagieren', +}) => { + const div = createElement('div'); + const article = createElement('article', ['col', 'magazine-article'], null, div); + + if (addArticleComponents) { + createElement('p', ['kicker'], kicker, article); + createElement('h1', [], headline, article); + } + article.appendChild(createCommonContent({})); + + const wrapper = createElement('div', ['content'], null, div); + wrapper.appendChild(createTopicTeasersSection({maxItems: 6})); + + const article2 = createElement('article', ['col', 'magazine-article'], null, div); + article2.appendChild(createInfobox({content: lorem2})); + article2.appendChild(createBlockquote({})); + article2.appendChild(createContact({})); + article2.appendChild(createPrintShare({})); + + return div; +} \ No newline at end of file diff --git a/gfi-ihk-2024/stories/components/common-content-article/commonContent-article.scss b/gfi-ihk-2024/stories/components/common-content-article/commonContent-article.scss new file mode 100644 index 0000000..0485511 --- /dev/null +++ b/gfi-ihk-2024/stories/components/common-content-article/commonContent-article.scss @@ -0,0 +1,73 @@ +@import '../../_global/styles/mixins'; +@import '../../_global/styles/vars'; + +.magazine-article article.col, .magazine-article.col { + position: relative; + z-index: 1; + width: 880px; + max-width: 66.6667%; + background-color: #fff; + margin: 0 auto; + padding-bottom: 0; + + @media(max-width: 1199px) { + max-width: 83.3333%; + } + @media(max-width: 999px) { + box-shadow: 0 0 0 10px white; + } + @media(max-width: 767px) { + max-width: 100%; + box-shadow: 0 -4px 0 2px white; + } + + .print-share { + margin-bottom: 0; + } + + .print-share .bookmarks.show-bookmarks { + margin-bottom: 1em; + } + + .image-box { + img { + max-width: 100%; + } + + &.off-grid{ + @media(min-width: 568px) { + float: left; + margin: 0.3em 20px 1em 0; + width: calc(50% - 10px); + } + + @media(min-width: 768px) { + margin: 0.3em 40px 1em calc(-12.5% - 5px); + width: calc(50% - 20px); + + @media(max-width: 1199px) { + margin: 0.3em 30px 1em calc(-10% - 3px); + width: calc(50% - 15px); + } + + @media(max-width: 999px) { + margin: 0.3em 20px 1em calc(-10% - 2px); + width: calc(50% - 10px); + } + } + + ~ *:not(p) { + clear: left; + } + } + + &.portrait{ + display: flex; + justify-content: center; + flex-flow: column; + img, figcaption{ + align-self: center; + } + } + } +} \ No newline at end of file diff --git a/gfi-ihk-2024/stories/components/common-content/CommonContent.stories.js b/gfi-ihk-2024/stories/components/common-content/CommonContent.stories.js new file mode 100644 index 0000000..6ca27c2 --- /dev/null +++ b/gfi-ihk-2024/stories/components/common-content/CommonContent.stories.js @@ -0,0 +1,13 @@ +import {createCommonContent} from "./CommonContentComponent"; + +export default { + title: 'Components/Common Content', + args: {}, +} + +const Template = ({...args}) => { + return createCommonContent({...args}); +}; + +export const CommonContent = Template.bind({}); +CommonContent.args = {}; \ No newline at end of file diff --git a/gfi-ihk-2024/stories/components/common-content/CommonContentComponent.js b/gfi-ihk-2024/stories/components/common-content/CommonContentComponent.js new file mode 100644 index 0000000..68f0e09 --- /dev/null +++ b/gfi-ihk-2024/stories/components/common-content/CommonContentComponent.js @@ -0,0 +1,40 @@ +import './commonContent.scss'; +import {createElement} from "../../_global/scripts/helpers"; +import {createButton} from "../../atoms/button/ButtonComponent"; + +export const createCommonContent = ({ + text = "Möchten Sie, dass zusätzliche regionale Inhalte Ihrer IHK zum Thema auf dieser Seite eingeblendet werden?", + noCta = { + label: 'Nein danke', + link: '#', + target: '_self', + }, + yesCta = { + label: 'Ja gerne', + link: '#', + target: '_self', + } +}) => { + const common = createElement('div', ['common-content']); + + const p = createElement('p', [], text, common); + const buttons = createElement('div', ['buttons'], null, common); + buttons.appendChild(createButton({ + label: noCta.label, + link: noCta.link, + color: 'primary-light', + size: 'small', + icon: 'schliessen', + iconPosition: 'icon-right' + })); + buttons.appendChild(createButton({ + label: yesCta.label, + link: yesCta.link, + color: 'secondary', + size: 'small', + icon: 'check', + iconPosition: 'icon-right' + })); + + return common; +} \ No newline at end of file diff --git a/gfi-ihk-2024/stories/components/common-content/commonContent.scss b/gfi-ihk-2024/stories/components/common-content/commonContent.scss new file mode 100644 index 0000000..b8663a7 --- /dev/null +++ b/gfi-ihk-2024/stories/components/common-content/commonContent.scss @@ -0,0 +1,20 @@ +@import '../../_global/styles/mixins'; +@import '../../_global/styles/vars'; + +.common-content { + margin-top: var(--section-margin); + padding: calc(var(--container-padding) / 2) var(--container-padding); + background: var(--theme-color-primary-dimmed-04); + background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23B0C4D6' stroke-width='4' stroke-dasharray='0%2c 7' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e"); + p { + + } + .buttons { + .btn { + margin-right: 1rem; + @media (max-width: 567px) { + margin-bottom: 1rem; + } + } + } +} \ No newline at end of file diff --git a/gfi-ihk-2024/stories/components/header/HeaderComponent.js b/gfi-ihk-2024/stories/components/header/HeaderComponent.js index 6ad8f54..3eeefff 100644 --- a/gfi-ihk-2024/stories/components/header/HeaderComponent.js +++ b/gfi-ihk-2024/stories/components/header/HeaderComponent.js @@ -8,6 +8,7 @@ import {createHeaderSearch} from "../header-search/HeaderSearchComponent"; export const createHeader = ({ + isZip = false, contactPhone, contactMail, contactLink = '#', @@ -51,7 +52,7 @@ export const createHeader = createElement('button', ['toggle-nav'], 'Menü', header); header.appendChild(createNav({})); - header.appendChild(createIhkSwitch({})); + header.appendChild(createIhkSwitch({zip: isZip})); new IHKHeader($(header)); diff --git a/gfi-ihk-2024/stories/components/ihk-switch/IHKSwitch.stories.js b/gfi-ihk-2024/stories/components/ihk-switch/IHKSwitch.stories.js index 836f354..5a96db9 100644 --- a/gfi-ihk-2024/stories/components/ihk-switch/IHKSwitch.stories.js +++ b/gfi-ihk-2024/stories/components/ihk-switch/IHKSwitch.stories.js @@ -7,7 +7,7 @@ export default { }, args: { currentIHK: 'Musterstadt', - myIHK: 'Hamburg', + myIHK: 'Hamburg' } } @@ -16,4 +16,9 @@ const Template = ({...args}) => { }; export const IHKSwitch = Template.bind({}); -IHKSwitch.args = {}; \ No newline at end of file +IHKSwitch.args = {}; + +export const IHKSwitchZip = Template.bind({}); +IHKSwitchZip.args = { + zip: true +}; \ No newline at end of file diff --git a/gfi-ihk-2024/stories/components/ihk-switch/IHKSwitchComponent.js b/gfi-ihk-2024/stories/components/ihk-switch/IHKSwitchComponent.js index e8224a8..b38f2df 100644 --- a/gfi-ihk-2024/stories/components/ihk-switch/IHKSwitchComponent.js +++ b/gfi-ihk-2024/stories/components/ihk-switch/IHKSwitchComponent.js @@ -3,35 +3,63 @@ import $ from 'jquery'; import {createElement} from "../../_global/scripts/helpers"; import IHKSwitch from "./ihk-switch"; import {createButton} from "../../atoms/button/ButtonComponent"; +import {createInputText} from "../../atoms/input-text/InputTextComponent"; +import {createSearchButton} from "../../atoms/search-button/SearchButtonComponent"; const Cookies = require('js-cookie'); export const createIhkSwitch = ({ currentIHK = 'Musterstadt', myIHK = 'Hamburg', + zip = false, + zipPlaceholder = 'z.B. 20146 Hamburg' }) => { const wrap = createElement('div', ['ihk-switch']); const step1 = createElement('div', ['step'], null, wrap); - const step2 = createElement('div', ['step'], null, wrap); - const step3 = createElement('div', ['step'], null, wrap); - const p1 = 'Sie befinden sich auf der Seite der ' + currentIHK + '. Möchten Sie diese Seite in einem Cookie als Ihre Heimat-IHK setzen?'; - const p2 = 'Sie befinden sich auf der Seite der ' + currentIHK + '. Bisher ist die ' + myIHK + ' als Ihre Heimat-IHK hinterlegt. Wollen Sie die Seite der ' + currentIHK + ' in einem Cookie als Ihre neue Heimat-IHK setzen?'; - const p3 = 'Sie werden zum Angebot der ' + myIHK + ' weitergeleitet.'; - createElement('button', ['closer'], null, wrap); + if (!zip) { + const step2 = createElement('div', ['step'], null, wrap); + const step3 = createElement('div', ['step'], null, wrap); + const p1 = 'Sie befinden sich auf der Seite der ' + currentIHK + '. Möchten Sie diese Seite in einem Cookie als Ihre Heimat-IHK setzen?'; + const p2 = 'Sie befinden sich auf der Seite der ' + currentIHK + '. Bisher ist die ' + myIHK + ' als Ihre Heimat-IHK hinterlegt. Wollen Sie die Seite der ' + currentIHK + ' in einem Cookie als Ihre neue Heimat-IHK setzen?'; + const p3 = 'Sie werden zum Angebot der ' + myIHK + ' weitergeleitet.'; - step1.dataset.step = 'form'; - createElement('p', [], p1, step1); - step1.appendChild(buildButtons()); + createElement('button', ['closer'], null, wrap); - step2.dataset.step = 'switch'; - createElement('p', [], p2, step2); - step2.appendChild(buildButtons()); + step1.dataset.step = 'form'; + createElement('p', [], p1, step1); + step1.appendChild(buildButtons()); - step3.dataset.step = 'success'; - createElement('p', [], p3, step3); + step2.dataset.step = 'switch'; + createElement('p', [], p2, step2); + step2.appendChild(buildButtons()); - window.sessionStorage.removeItem('my-ihk-ignore'); - Cookies.remove('my-ihk', {expires: 365}); + step3.dataset.step = 'success'; + createElement('p', [], p3, step3); + + window.sessionStorage.removeItem('my-ihk-ignore'); + Cookies.remove('my-ihk', {expires: 365}); + } else { + const p1 = 'Geben Sie Ihre Postleitzahl ein, um zu dem Angebot Ihrer IHK zu gelangen:'; + + createElement('button', ['closer'], null, wrap); + + step1.dataset.step = 'zip'; + createElement('p', [], p1, step1); + const inputWrapper = createElement('div', ['input-wrapper'], null, step1); + inputWrapper.appendChild(createInputText({ + placeholder: zipPlaceholder, + isRequired: true, + id: 'switch-zip', + name: 'switch-zip', + })); + inputWrapper.appendChild(createButton({ + label: '', + link: '#', + iconPosition: 'icon-inline', + icon: 'lokalisierung', + })); + step1.appendChild(buildOKButton()); + } $(document).ready(() => { new IHKSwitch($(wrap)); @@ -62,3 +90,20 @@ const buildButtons = () => { return buttons; } +const buildOKButton = () => { + const buttons = createElement('div', ['buttons', 'align-right']); + const ok = createButton({ + elementType: 'button', + label: 'OK', + color: 'secondary', + icon: 'check', + iconPosition: 'icon-right' + }) + + ok.classList.add('stay-here'); + + buttons.appendChild(ok); + + return buttons; +} + diff --git a/gfi-ihk-2024/stories/components/ihk-switch/ihk-switch.scss b/gfi-ihk-2024/stories/components/ihk-switch/ihk-switch.scss index bb93379..3c64615 100644 --- a/gfi-ihk-2024/stories/components/ihk-switch/ihk-switch.scss +++ b/gfi-ihk-2024/stories/components/ihk-switch/ihk-switch.scss @@ -68,7 +68,8 @@ &[data-show-step="geolocation"] [data-step="geolocation"], &[data-show-step="form"] [data-step="form"], &[data-show-step="switch"] [data-step="switch"], - &[data-show-step="success"] [data-step="success"] { + &[data-show-step="success"] [data-step="success"], + [data-step="zip"] { display: block; } @@ -112,10 +113,34 @@ } } + .input-wrapper { + position: relative; + .btn { + position: absolute; + right: 0; + top: 0; + height: 100%; + padding: 0; + border-radius: 0; + background: #193f69; + * { + display: none; + } + &:hover:after { + display: none; + } + } + } + .buttons { margin-top: 28px; margin-left: -2px; margin-right: -8px; + &.align-right { + display: flex; + justify-content: flex-end; + margin-right: 0; + } @media(max-width: 767px) { margin-top: 20px; diff --git a/gfi-ihk-2024/stories/components/mini-teaser/MiniTeaser.stories.js b/gfi-ihk-2024/stories/components/mini-teaser/MiniTeaser.stories.js index 9b1dc6c..ee97014 100644 --- a/gfi-ihk-2024/stories/components/mini-teaser/MiniTeaser.stories.js +++ b/gfi-ihk-2024/stories/components/mini-teaser/MiniTeaser.stories.js @@ -42,3 +42,9 @@ StandardMiniTeaser.args = {}; export const infobanner = MiniTeaser.bind({}); infobanner.args = {type:'infoteaser'}; + +export const infobannerWithoutIcon = MiniTeaser.bind({}); +infobannerWithoutIcon.args = {type:'infoteaser', icon: null}; + +export const infobannerBackground = MiniTeaser.bind({}); +infobannerBackground.args = {type:'infoteaser', backgroundImage: 'https://source.unsplash.com/2vCqH34PqWs/1080x648'}; diff --git a/gfi-ihk-2024/stories/components/mini-teaser/MiniTeaserComponent.js b/gfi-ihk-2024/stories/components/mini-teaser/MiniTeaserComponent.js index 80827c4..c949172 100644 --- a/gfi-ihk-2024/stories/components/mini-teaser/MiniTeaserComponent.js +++ b/gfi-ihk-2024/stories/components/mini-teaser/MiniTeaserComponent.js @@ -8,6 +8,7 @@ export const createMiniTeaser = ({ link = '#', icon = 'Roboter', buttonlabel = 'IHK-Newsletter sichern', + backgroundImage = null, }) => { if (type === 'standard') { @@ -18,14 +19,22 @@ export const createMiniTeaser = ({ createElement('h4', ['title'], title, textBox); return tile; }else{ - const tile = createElement('div', ['tile', 'mini-teaser', type], null); + const tile = createElement('a', ['tile', 'mini-teaser', type], null); + tile.href = link; + if (backgroundImage && backgroundImage.length > 0) { + tile.style = 'background-image: url(' + backgroundImage + ');'; + tile.classList.add('background-image'); + } 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})) + if (icon && icon.length > 0) { + createElement('div', ['icon-box', 'pictogram-' + icon.toLowerCase().split(' ').join('-')], null, textBox); + createElement('h4', ['title'], title, textBox); + textBox.appendChild(createButton({elementType: 'span',color: 'white', label: buttonlabel,iconPosition: 'icon-right', icon: null, preventClick: false})) + }else{ + createElement('h4', ['title', 'noicon'], title, textBox); + textBox.appendChild(createButton({elementType: 'span',color: 'white', label: buttonlabel, iconPosition: 'icon-right', icon: null, preventClick: false})) + } + 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 eae215b..fada232 100644 --- a/gfi-ihk-2024/stories/components/mini-teaser/miniteaser.scss +++ b/gfi-ihk-2024/stories/components/mini-teaser/miniteaser.scss @@ -35,8 +35,12 @@ h4{ font-size: 22px; } + .text-box{ + position: relative; + } &.infoteaser{ background: linear-gradient(161deg, rgba(var(--theme-color-primary-rgb), 1) 0%, rgba(var(--theme-color-primary-rgb), 0.2) 100%); + position: relative; &:after{ content:""; position:absolute; @@ -47,6 +51,26 @@ z-index:-1; background: linear-gradient(161deg, var(--theme-color-gradient-01) 40%, var(--theme-color-gradient-02) 80%, var(--theme-color-gradient-03) 120%); } + &.background-image{ + background-size:cover; + &: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; + + } + .text-box{ + position: relative; + z-index: 1; + } + } .title, .category, .btn{ color:white; } @@ -57,6 +81,14 @@ text-align: left; line-height: 24px; margin-bottom: 19px; + width: 100%; + &.noicon{ + padding-left: 0; + min-height: 0; + + .btn{ + margin-left: 0; + } + } } .btn{ background-color: transparent; @@ -69,14 +101,18 @@ --button-padding: 8px 10px; min-height: 0; font-size: 22px; + &:after{ + border-radius:16px; + } } .icon-box{ margin-bottom: 19px; margin-top: 0; padding-top: 0; position: absolute; - top: 16px; - left: 12px; + top: 0; + left: 0; + } .text-box{ padding: 0; diff --git a/gfi-ihk-2024/stories/pages/common-content/CommonContent.stories.js b/gfi-ihk-2024/stories/pages/common-content/CommonContent.stories.js new file mode 100644 index 0000000..70e3d14 --- /dev/null +++ b/gfi-ihk-2024/stories/pages/common-content/CommonContent.stories.js @@ -0,0 +1,18 @@ +import {createCommonContentPage} from "./CommonContentPage"; + +export default { + title: 'Pages/Common Content Page', + parameters: { + layout: 'fullscreen', + }, + argTypes: { + + }, +} + +const Template = ({...args}) => { + return createCommonContentPage({...args}); +}; + +export const CommonContentPage = Template.bind({}); +CommonContentPage.args = {}; \ No newline at end of file diff --git a/gfi-ihk-2024/stories/pages/common-content/CommonContentPage.js b/gfi-ihk-2024/stories/pages/common-content/CommonContentPage.js new file mode 100644 index 0000000..e3cbea7 --- /dev/null +++ b/gfi-ihk-2024/stories/pages/common-content/CommonContentPage.js @@ -0,0 +1,36 @@ +import {createElement} from "../../_global/scripts/helpers"; +import {createHeader} from "../../components/header/HeaderComponent"; +import {createMagazineHeader} from "../../components/magazine-header/MagazineHeaderComponent"; +import {createPageDetails} from "../../components/page-details/PageDetailsComponent"; +import {createMagazineCover} from "../../components/magazine-cover/MagazineCoverComponent"; +import {createTeasersSection} from "../../sections/teasers/TeasersComponent"; +import {createFooter} from "../../components/footer/FooterComponent"; +import {createCommonContentArticle} from "../../components/common-content-article/CommonContentArticleComponent"; + +export const createCommonContentPage = ({ + kicker = 'Titelthema', + headline = '5 Beispiele, wie sich Unternehmen für ihr Umfeld engagieren', +}) => { + const page = createElement('div', ['page', 'magazine-article']); + const header = createHeader({isZip: true}); + const magazineHeader = createMagazineHeader({ size: 'narrow' }); + page.appendChild(header); + page.appendChild(magazineHeader); + + const wrapper = createElement('div', ['page-wrapper'], null, page); + wrapper.appendChild(createPageDetails({})); + + const pageContent = createElement('main', ['page-content'], null, wrapper); + pageContent.appendChild(createMagazineCover({})); + + const container = createElement('div', ['container'], null, pageContent); + const row = createElement('div', ['row'], null, container); + const article = createCommonContentArticle({}); + row.appendChild(article); + + pageContent.appendChild(createTeasersSection({type: 'magazine', showReadingTime: true, headline: 'Mehr interessante Artikel'})) + + page.appendChild(createFooter({})); + + return page; +} \ 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 da08d84..79c110a 100644 --- a/gfi-ihk-2024/stories/sections/marketingheader/MarketingHeaderComponent.js +++ b/gfi-ihk-2024/stories/sections/marketingheader/MarketingHeaderComponent.js @@ -89,10 +89,7 @@ export const createMarketingHeader = 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); + const sliderComponent = createElement('div', ['slider', 'btnanimation'], null, colslider); slides.map((slideData, index) => { const slide = createElement('div', ['slide'], null, sliderComponent); const outer = createElement('outer', ['outer'], null, slide); @@ -124,7 +121,7 @@ export const createMarketingHeader = if (slideData.cta && slideData.link) { const buttonP = createElement('p', [], '', textBox); const btn = createButton({ - color: 'white', icon: 'pfeil-simple-rechts', iconPosition: 'icon-right', label: slideData.cta + color: 'white', icon: 'pfeil-simple-rechts', iconPosition: 'icon-right', label: slideData.cta, size: 'small', }); buttonP.appendChild(btn); } @@ -147,13 +144,13 @@ export const createMarketingHeader = 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'; + if (i == 0 && t.type == 'infoteaser'){ + typ = 'infoteaser'; + section.classList.add('miniinfoteaser'); + } const col4 = createElement('div', ['mt'], null, col3); const tea = createMiniTeaser({ type : typ, @@ -162,55 +159,6 @@ export const createMarketingHeader = } }) } - /* - const hasImage = imageSrc && imageSrc.length > 0; - const stage = createElement('div', ['participation', 'participation-stage'], null, section); - const container2 = createElement('div', ['container'], null, stage); - const row2 = createElement('div', ['row'], null, container2); - const col2 = createElement('div', ['col'], null, row2); - const tb2 = createElement('div', ['text-box'], null, col2); - - if (backgroundImage && backgroundImage.length > 0) { - //section.content('style=background: red;'); - stage.style = 'background-image: url(' + backgroundImage + ');'; - stage.classList.add('background-image'); - } - - if (isFirstElement) { - stage.classList.add('first-element'); - } - - if (kicker && kicker.length > 0) { - createElement('p', ['kicker'], kicker, tb2); - } - if (showProgress) { - tb2.appendChild(createProgressBar({progress})); - } - createElement('h1', ['like-h2'], headline, tb2); - createElement('p', [], copy, tb2); - if (moreCta) { - const more = createElement('a', [], moreCta.label, tb2); - more.href = moreCta.link; - more.target = moreCta.target; - } - if (buttonCta) { - const button2 = createButton({ - elementType: 'a', - link: buttonCta.link, - color: 'white', - label: buttonCta.label, - iconPosition: 'icon-right', - icon: 'small-arrow-right-simple', - }); - tb2.appendChild(button2); - } - - if (hasImage) { - stage.classList.add('image-stage'); - const ib2 = createElement('div', ['image-box'], null, col2); - createImage(imageSrc, 1080, 648, 'Beteiligung', [], ib2); - } - */ return section; } \ No newline at end of file diff --git a/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss b/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss index 23acb27..2b4bca8 100644 --- a/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss +++ b/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss @@ -2,26 +2,18 @@ @import '../../_global/styles/vars'; section.marketingheader{ margin-top:0; - .rotation .slider{ - border-bottom:0; - .slider-tabs{ - li:first-child:last-child{ - display:none; - } + &.miniinfoteaser{ + .kicker{ + color:var(--theme-color-secondary); } - .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); - } - } + .mini-teaser{ + .category{ + color:var(--theme-color-secondary); } + } + .text-only .kicker{ + color:white; + } } .search { position: relative; @@ -29,7 +21,7 @@ section.marketingheader{ margin: 0; background-color: var(--theme-color-primary-dimmed-04); max-height: 100px; - transition: all .5s cubic-bezier(0,1,0,1); + transition: all 1s ease-in; background-size:cover; @media (max-width:767px){ max-height: 78px; @@ -37,6 +29,10 @@ section.marketingheader{ .sc.container{ position: absolute; top: 0; + left: 0; + right: 0; + width: 100%; + max-width: 100%; @media (max-width:767px){ position: relative; .close-search{ @@ -55,7 +51,7 @@ section.marketingheader{ left:auto; cursor: pointer; transition: 0.3s ease; - border: 2px solid var(--theme-color-primary-dimmed-04); + border: 1px solid var(--theme-color-primary-dimmed-04); border-radius: 10px; height:34px; width:34px; @@ -92,7 +88,7 @@ section.marketingheader{ display:block !important; } .tiles{ - margin-top:0; + top: 0; padding-bottom:9px; @media screen and (max-width:767px){ padding-bottom:0; @@ -208,11 +204,13 @@ section.marketingheader{ } .tiles { - margin: 100px -8px 0 -8px; + margin: 0 -8px 0 -8px; + position: relative; + top: 100px; display: flex; flex-wrap: wrap; font-family: "Korb", sans-serif; - transition: all 0.25s ease-in; + transition: all 0.3s ease-in; padding-bottom: 0; @media(max-width: 767px) { //margin-left: -6px; @@ -455,7 +453,10 @@ section.marketingheader{ } } &.infoteaser{ - max-height:427px; + border-radius: 4px; + .slide-overflow{ + border-radius: 4px; + } outer{ max-height:427px; height:427px; @@ -465,16 +466,41 @@ section.marketingheader{ } } .rotation { - @media screen and (max-width:900px){ - .slider .text-box:first-child::after { - display: none; + padding:0; + @media screen and (max-width: 1000px) { + .slide:not(.text-only) .text-box{ + padding: 16px 0; + } + .slide .image-box img{ + position: static; + height:300px; + } + .slider-tabs{ + top:0; + height: auto; + bottom: auto; + margin-top:15px; } - padding:0; } + @media screen and (max-width: 900px) { + .slider .image-box { + padding-left: var(--container-padding); + padding-right: var(--container-padding); + } + .slider .text-box:first-child::after { + display: none; + } + } .text-box{ min-height: 0; } } + outer{ + border-radius: 4px; + .image-box img{ + border-radius: 4px; + } + } .image-box{ max-height:427px; min-height: 0; @@ -519,8 +545,19 @@ section.marketingheader{ .mt{ height: 100%; padding: 8px 0; + @media screen and (max-width:575px){ + padding: 4px 0; + } .mini-teaser{ height: 100%; + .text-box{ + height: 100%; + flex-flow: column; + justify-content: space-between; + .btn{ + height: fit-content; + } + } } } } @@ -553,18 +590,18 @@ section.marketingheader{ } .slider{ background-color: transparent; - .image-box img { @media screen and (max-width:900px) { height: 300px; + } @media screen and (max-width:767px) { height: 300px; } } - .slide.text-only.current { - background: linear-gradient(-10deg, var(--theme-color-gradient-01) 10%, var(--theme-color-gradient-02) 55%, var(--theme-color-gradient-03) 90%); + .slide.text-only.current{ + background: linear-gradient(-10deg, var(--theme-color-gradient-01) 10%, var(--theme-color-gradient-02) 55%, var(--theme-color-gradient-03) 90%); } } @@ -646,49 +683,178 @@ section.marketingheader{ } } } - .rotation{ - margin:0; - @media screen and (max-width:900px){ - .slider{ - background-color: transparent; - .slider-tabs{ - top:0; - height: auto; - bottom: auto; - margin-top:15px; - @media screen and (max-width:767px){ - .btn{ - --button-icon-padding: 30px; - --button-icon-offset: 5px; - --button-padding: 5px 10px; - --button-min-size: 30px; - margin: 2.5px; - } + .rotation .slider{ + border-bottom:0; + + background-color: white; + h3{ + margin-top: 4px; + margin-bottom: 8px; + } + .kicker{ + margin-bottom:0; + } + p{ + margin-bottom:0.4em; + } + .btn{ + margin-top:0.4em; + } + &.ishovered .slider-tabs li.active button.btn::before{ + animation-play-state: paused; + } + &.btnanimation{ + .slider-tabs{ + li.active{ + button.btn::before{ + animation: fillgrey 7s linear forwards; } } + } + } + .slider-tabs{ + li:first-child:last-child{ + display:none; + } + li.active{ + button.btn{ + background-blend-mode: overlay; + } + } + li{ + button.btn{ + position: relative; + border-radius: var(--border-radius-lg); + overflow:hidden; + + } + button.btn::before{ + width:0; + background-color:var(--theme-grey-light); + content: ""; + z-index:0; + height:100%; + position:absolute; + top:0; + bottom:0; + right:0; + left:0; + right:0; + display:block; + background-blend-mode: multiply; + } + } + } + .slide.text-only.current{ + background: none; + outer{ + background: linear-gradient(-10deg, var(--theme-color-gradient-01) 10%, var(--theme-color-gradient-02) 55%, var(--theme-color-gradient-03) 90%); .text-box{ - padding: var(--container-padding); + justify-content: center; + } + } + } + .text-box{ + color:var(--theme-color-primary); + padding: 30px 36px 24px 36px; + display: flex; + flex-flow: column; + justify-content: center; + min-width: 324px; + &: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); + } + } + } + .text-only{ + .text-box{ + color:white; } + } + } + .rotation{ + margin:0; + @media (max-width: 1339px) { + .rotation .slider .text-box { + min-width: 324px; + } + } + @media (min-width: 1001px) { + .slider .text-box:not(:first-child)::before { + border-top-right-radius: 16% 50% !important; + border-bottom-right-radius: 16% 50% !important; + margin: -15% -8% -15% 20px; + } + } + @media (max-width:1000px){ + .slider{ + background-color: white; + + .text-box:not(:first-child)::before{ display: none; } .image-box{ order: 0; + height:auto; + max-height:none !important; + img{ + aspect-ratio: 16 / 9; + height: auto !important; + max-height:none !important; + min-height: 177px !important; + } &:before{ display: none; } img{ position: static; - height:300px; + //height:300px; + } + } + } + } + @media screen and (max-width:900px){ + .slider{ + margin-bottom:20px; + .slide:not(.text-only){ + .text-box{ + padding: 16px var(--container-padding) 0; + } + } + .slide.text-only{ + padding-left: var(--container-padding); + padding-right: var(--container-padding); + } + .slider-tabs{ + right: calc(var(--container-padding) + 10px); + top: 15px; + padding: 0; + margin: 0; + .btn{ + margin-top:0 !important; } } } } @media screen and (max-width:767px){ .slider{ - .image-box{ - img{ - height:250px; + .slide:not(.text-only) .text-box{ + padding: 16px var(--container-padding); + } + .slider-tabs{ + .btn{ + --button-icon-padding: 30px; + --button-icon-offset: 5px; + --button-padding: 5px 10px; + --button-min-size: 30px; + margin: 2.5px; } } } @@ -696,11 +862,7 @@ section.marketingheader{ @media screen and (max-width:567px) { .slider { margin: 0; - .image-box{ - img{ - height:177px; - } - } + margin-bottom: 8px; } } .context-box{ @@ -708,3 +870,7 @@ section.marketingheader{ } } } +@keyframes fillgrey { + 0%{width:0;} + 100%{width:100%} +} \ No newline at end of file diff --git a/gfi-ihk-2024/stories/sections/marketingheader/marketingheaderslider.js b/gfi-ihk-2024/stories/sections/marketingheader/marketingheaderslider.js index 1ff8a98..d4fad0e 100644 --- a/gfi-ihk-2024/stories/sections/marketingheader/marketingheaderslider.js +++ b/gfi-ihk-2024/stories/sections/marketingheader/marketingheaderslider.js @@ -5,16 +5,15 @@ import Slider from "../slider/slider"; class IHKMHSlider { constructor(section) { this.section = section.addClass('initiated'); - this.slides = section.children(); this.slider = new Slider(section); - this.stringLength = 0; - - this.slider.section.on('in-viewport slide-change', () => { - const curr = this.slider.currentSlide; - if (this.slides[curr].hasCounter) { - this.startCounter(curr); - } - }) + this.slider.settings = { + loop: true, + autoplay: true, + infinite: true, + autoplaySpeed: 7000, + animationSpeed: 600, + startSlide: 1, + }; } } diff --git a/gfi-ihk-2024/stories/sections/slider/slider.js b/gfi-ihk-2024/stories/sections/slider/slider.js index 29143e3..0688faf 100644 --- a/gfi-ihk-2024/stories/sections/slider/slider.js +++ b/gfi-ihk-2024/stories/sections/slider/slider.js @@ -24,7 +24,7 @@ class IHKSlider { infinite: true, autoplaySpeed: this.section.data('autoplay-speed') ? this.section.data('autoplay-speed') : 5000, animationSpeed: 600, - startSlide: 0, + startSlide: 0 }; this.initSlides(); @@ -114,8 +114,11 @@ class IHKSlider { this.slides.each(function (i) { const s = $(this); const li = $('
  • ').appendTo(tabsWrapper); - - $('