diff --git a/gfi-ihk-2024/stories/sections/marketingheader/MarketingHeader.stories.js b/gfi-ihk-2024/stories/sections/marketingheader/MarketingHeader.stories.js index 4792e7c..429af10 100644 --- a/gfi-ihk-2024/stories/sections/marketingheader/MarketingHeader.stories.js +++ b/gfi-ihk-2024/stories/sections/marketingheader/MarketingHeader.stories.js @@ -59,4 +59,11 @@ export const MarketingHeaderSingleSlide = Template.bind({}); MarketingHeaderSingleSlide.args = {slides: singleSlideData}; export const MarketingHeaderStage = Template.bind({}); -MarketingHeaderStage.args = {type:'hero-fullwidth'}; \ No newline at end of file +MarketingHeaderStage.args = {type:'hero-fullwidth'}; + +export const MarketingHeaderStageSingle = Template.bind({}); +MarketingHeaderStageSingle.args = { + type: 'hero-fullwidth', + slides: singleSlideData, + searchAllButton: true +}; \ 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 79c110a..91f1410 100644 --- a/gfi-ihk-2024/stories/sections/marketingheader/MarketingHeaderComponent.js +++ b/gfi-ihk-2024/stories/sections/marketingheader/MarketingHeaderComponent.js @@ -37,6 +37,7 @@ export const createMarketingHeader = progress = 60, backgroundImage = null, isFirstElement = false, + searchAllButton = false, slides = sliderData, teasers = teaserData, maxItems = 3, @@ -44,6 +45,9 @@ export const createMarketingHeader = }) => { const section = createElement('section', ['marketingheader', type], null); const search = createElement('div', ['search'], null, section); + if (searchAllButton) { + search.classList.add('has-button-wrapper'); + } if (backgroundImage && backgroundImage.length > 0) { search.style = 'background-image: url(' + backgroundImage + ');'; search.classList.add('background-image'); @@ -72,7 +76,11 @@ export const createMarketingHeader = const div = createElement('div', ['tile'], null, tilesContainer); const a = createElement('a', [], tile.title, div); a.href = tile.link; - }) + }); + if (searchAllButton) { + const allButtonWrapper = createElement('span', ['all-button-wrapper'], null, col); + const searchAllBtn = createElement('div', ['btn', 'has-icon', 'icon-small-arrow-right-simple'], 'Alle Suchergebnisse', allButtonWrapper); + } if (api) { new IHKSearchTypeahead($(form).find('input.typeahead')); @@ -90,6 +98,7 @@ export const createMarketingHeader = const row2 = createElement('div', ['row'], null, container2); const colslider = createElement('div', ['col', 'slidercontainer', 'rotation'], null, row2); 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); @@ -99,6 +108,7 @@ export const createMarketingHeader = if (slideData.imageSrc && slideData.imageSrc.length > 0) { const imageBox = createElement('div', ['image-box'], null, outer); createImage(slideData.imageSrc, 900, 600, 'Slide ' + index, [], imageBox); + createElement('span', ['copyright'], 'Copyright-Angabe', imageBox); if (contextBoxContentImg) { const contentBoxImg = createElement('div', ['context-box', 'context-box--image'], null, imageBox); createImage(contextBoxContentImg, 200, 50, '', [], contentBoxImg); @@ -137,7 +147,7 @@ export const createMarketingHeader = } } } - }) + }); new IHKMHSlider($(sliderComponent)); diff --git a/gfi-ihk-2024/stories/sections/marketingheader/MarketingHeaderData.js b/gfi-ihk-2024/stories/sections/marketingheader/MarketingHeaderData.js index acd9311..2419359 100644 --- a/gfi-ihk-2024/stories/sections/marketingheader/MarketingHeaderData.js +++ b/gfi-ihk-2024/stories/sections/marketingheader/MarketingHeaderData.js @@ -98,7 +98,7 @@ export const sliderData = [ export const singleSlideData = [ { kicker: 'Lorem Ipsum dolor', - headline: 'Möglichkeiten der Integration', + headline: 'Nur ein Slide', copy: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.', imageSrc: './dummy/placeholder-3-2.svg', cta: 'Mehr erfahren', diff --git a/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss b/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss index 749cf0a..95b9f5a 100644 --- a/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss +++ b/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss @@ -15,11 +15,25 @@ section.marketingheader{ color:white; } } - .rotation .slider .outer { - max-height: 427px; - @media(max-width: 999px) { - max-height:none; - height:auto; + .rotation { + .slider { + .outer { + max-height: 427px; + @media(max-width: 999px) { + max-height:none; + height:auto; + } + } + .copyright { + @media screen and (max-width: 900px) { + left: calc(100% - 14px); + } + } + } + } + .text-box{ + .btn.has-icon.icon-small-arrow-right-simple { + bottom: auto; } } .search { @@ -27,12 +41,20 @@ section.marketingheader{ overflow: hidden; margin: 0; background-color: var(--theme-color-primary-dimmed-04); - max-height: 100px; - transition: all .5s ease-in; + //max-height: 100px; + height: 100px; + transition: all .3s ease-in; background-size:cover; @media (max-width:767px){ max-height: 78px; } + .artwork-left .foreground, + .artwork-left .background, + .artwork-left + .artwork .foreground, + .artwork-left + .artwork .background { + height: 100%; + min-height: 437px; + } .sc.container{ position: absolute; top: 0; @@ -41,7 +63,8 @@ section.marketingheader{ width: 100%; max-width: 100%; @media (max-width:767px){ - position: relative; + top: auto; + bottom: 0; .close-search{ position: relative !important; right:0 !important; @@ -84,9 +107,29 @@ section.marketingheader{ } } - &.open{ - max-height: 9999px; - transition: all .1s cubic-bezier(1,0,1,0); + &.open { + height: 390px; + @media (max-width:767px){ + height: 385px; + max-height: 385px; + } + @media (max-width:567px){ + height: 509px; + max-height: 509px; + } + //max-height: 9999px; + //transition: all .1s cubic-bezier(1,0,1,0); + &.has-button-wrapper { + height: 460px; + @media (max-width:767px){ + height: 395px; + max-height: 395px; + } + @media (max-width:567px){ + height: 519px; + max-height: 519px; + } + } .close-search{ display:block !important; } @@ -97,6 +140,9 @@ section.marketingheader{ padding-bottom:0; } } + .all-button-wrapper { + top: 0; + } form{ max-width: 580px; } @@ -108,7 +154,7 @@ section.marketingheader{ font-size: 22px; max-width: 360px; margin: 20px auto !important; - transition: 0.25s ease; + transition: 0.3s ease; @media(max-width: 767px) { font-size: 18px; margin: 15px auto !important; @@ -184,6 +230,7 @@ section.marketingheader{ top: 40px; right: -30px; } + } form { position: relative; @@ -213,7 +260,7 @@ section.marketingheader{ display: flex; flex-wrap: wrap; font-family: "Korb", sans-serif; - transition: all 0.4s ease-in; + transition: all 0.3s ease-in; padding-bottom: 0; .tile { @@ -305,8 +352,9 @@ section.marketingheader{ display: flex; align-items: flex-end; width: 100%; - min-height: 108px; - padding: 18px 24px 24px; + height: 108px; + max-height: 108px; + padding: 10px 24px 18px 24px; border-radius: var(--border-radius-md); box-shadow: 0 4px 20px -5px rgba(#000, 0.25); transition: 0.25s ease; @@ -450,6 +498,13 @@ section.marketingheader{ display:none; } } + .all-button-wrapper { + display: block; + padding-top: 10px; + position: relative; + top: 100px; + transition: all 0.3s ease-in; + } } &.infoteaser{ border-radius: 4px; @@ -467,14 +522,14 @@ section.marketingheader{ .rotation { padding:0; @media screen and (max-width: 1000px) { - .slide:not(.text-only) .text-box{ + .slide:not(.text-only) .text-box { padding: 16px 0; } - .slide .image-box img{ + .slide .image-box img { position: static; height:300px; } - .slider-tabs{ + .slider-tabs { top:0; height: auto; bottom: auto; @@ -567,7 +622,7 @@ section.marketingheader{ } &.hero-fullwidth{ .mainstage.container{ - max-width: 1920px; + /*max-width: 1920px;*/ width:100%; padding:0; > .row{ @@ -587,6 +642,12 @@ section.marketingheader{ max-height:566px; } } + .copyright { + bottom: 0; + @media screen and (min-width:901px) { + padding-bottom: 26px; + } + } .slider{ background-color: transparent; .image-box img { @@ -676,6 +737,9 @@ section.marketingheader{ max-width: 100%; margin: 0 auto; position: relative; + .slider-tabs { + right: 30px; + } @media screen and (max-width:900px){ position: absolute !important; top: 0; @@ -718,14 +782,13 @@ section.marketingheader{ li.active{ button.btn{ background-blend-mode: overlay; + overflow: hidden; } } li{ button.btn{ position: relative; border-radius: var(--border-radius-lg); - overflow:hidden; - } button.btn::before{ width:0; diff --git a/gfi-ihk-2024/stories/sections/marketingheader/searchAccordion.js b/gfi-ihk-2024/stories/sections/marketingheader/searchAccordion.js index 6b6336e..3fcd753 100644 --- a/gfi-ihk-2024/stories/sections/marketingheader/searchAccordion.js +++ b/gfi-ihk-2024/stories/sections/marketingheader/searchAccordion.js @@ -29,7 +29,7 @@ class IHKSearchAccordion { } var style = document.createElement('style'); style.id = 'dynamic-style'; - style.innerHTML = `section.marketingheader .search.open {max-height: ${heightOffset}px !important;}`; + //style.innerHTML = `section.marketingheader .search.open {max-height: ${heightOffset}px !important;}`; document.body.appendChild(style); setTimeout(() => {