From cf5084dfd8269f89b23b079a24c2af6081c454b8 Mon Sep 17 00:00:00 2001 From: FlorianEisenmenger Date: Thu, 8 May 2025 11:24:52 +0200 Subject: [PATCH] marketing header picto --- .../public/dummy/marketing-header-picto.svg | 58 +++++++++++++++++++ .../MarketingHeader.stories.js | 6 ++ .../MarketingHeaderComponent.js | 13 +++++ .../marketingheader/marketingheader.scss | 17 ++++++ 4 files changed, 94 insertions(+) create mode 100644 gfi-ihk-2024/public/dummy/marketing-header-picto.svg diff --git a/gfi-ihk-2024/public/dummy/marketing-header-picto.svg b/gfi-ihk-2024/public/dummy/marketing-header-picto.svg new file mode 100644 index 0000000..e35296b --- /dev/null +++ b/gfi-ihk-2024/public/dummy/marketing-header-picto.svg @@ -0,0 +1,58 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/gfi-ihk-2024/stories/sections/marketingheader/MarketingHeader.stories.js b/gfi-ihk-2024/stories/sections/marketingheader/MarketingHeader.stories.js index 429af10..7a8bc73 100644 --- a/gfi-ihk-2024/stories/sections/marketingheader/MarketingHeader.stories.js +++ b/gfi-ihk-2024/stories/sections/marketingheader/MarketingHeader.stories.js @@ -52,6 +52,12 @@ MarketingHeader.args = {}; export const MarketingHeaderSearchBackground = Template.bind({}); MarketingHeaderSearchBackground.args = {backgroundImage: './dummy/placeholder-4-3.svg'}; +export const MarketingHeaderPictoBackground = Template.bind({}); +MarketingHeaderPictoBackground.args = { + pictoImage: './dummy/marketing-header-picto.svg', + pictoImageMobile: './dummy/marketing-header-picto-mobile.svg' +}; + export const MarketingHeaderInfoBanner = Template.bind({}); MarketingHeaderInfoBanner.args = {teasers : infoTeaserData}; diff --git a/gfi-ihk-2024/stories/sections/marketingheader/MarketingHeaderComponent.js b/gfi-ihk-2024/stories/sections/marketingheader/MarketingHeaderComponent.js index b5da802..dedc3d9 100644 --- a/gfi-ihk-2024/stories/sections/marketingheader/MarketingHeaderComponent.js +++ b/gfi-ihk-2024/stories/sections/marketingheader/MarketingHeaderComponent.js @@ -36,6 +36,8 @@ export const createMarketingHeader = showProgress = true, progress = 60, backgroundImage = null, + pictoImage = null, + pictoImageMobile = null, isFirstElement = false, searchAllButton = false, slides = sliderData, @@ -52,6 +54,17 @@ export const createMarketingHeader = search.style = 'background-image: url(' + backgroundImage + ');'; search.classList.add('background-image'); } + if (pictoImage && pictoImage.length > 0 && pictoImageMobile && pictoImageMobile.length > 0) { + search.classList.add('picto-image'); + const styleElement = document.createElement('style'); + styleElement.textContent = ` + .picto-image {background-image: url("${pictoImage}");} + @media (max-width: 767px) { + .picto-image {background-image: url("${pictoImageMobile}");} + } + `; + search.parentNode.insertBefore(styleElement, search.nextSibling); + } const artwork = createArtwork({type: artworkStyle}); search.appendChild(artwork); search.dataset.type = artworkStyle; diff --git a/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss b/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss index 5914df2..9b7b33a 100644 --- a/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss +++ b/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss @@ -161,6 +161,10 @@ section.marketingheader{ @media(max-width: 767px) { font-size: 18px; margin: 15px auto !important; + border-radius: 18px; + } + @media(max-width: 399px) { + max-width: 250px; } } + section, + #toclist > section:first-child { @@ -177,6 +181,8 @@ section.marketingheader{ @media(max-width: 767px) { font-size: 18px; height: 48px; + border-top-left-radius: 18px; + border-bottom-left-radius: 18px; } &::placeholder{ color:var(--theme-color-primary) !important; @@ -501,6 +507,17 @@ section.marketingheader{ display:none; } } + &.picto-image { + background-position: 50% 0; + background-size: auto 100%; + background-repeat: repeat-x; + @media (max-width: 767px) { + background-size: auto 78px; + } + .artwork-wrapper{ + display:none; + } + } .all-button-wrapper { display: block; padding-top: 10px;