diff --git a/gfi-ihk-2024/stories/components/artwork/artwork.scss b/gfi-ihk-2024/stories/components/artwork/artwork.scss index 55da62f..da7f8e4 100644 --- a/gfi-ihk-2024/stories/components/artwork/artwork.scss +++ b/gfi-ihk-2024/stories/components/artwork/artwork.scss @@ -92,42 +92,45 @@ section .artwork-wrapper { left: 0; top: 0; height: 100%; - width: calc(50vw - (var(--container-width) / 2)); + width: calc(23vw - 160px); + .artwork{ - width: calc(50vw - (var(--container-width) / 2)); - .foreground, .background { + width: calc(23vw - 160px); + .background{ + margin-top:0 !important; + height:100%; + } + @media(max-width: 1199px) { + margin: 0; + } + @media(max-width: 767px) { + display:none; + } + .foreground { + height: 437px; + transform: rotate(0) !important; + } + .background{ height: 437px; - transform-origin: center center; transform: rotate(0) !important; } } - /* @media(max-width: 1199px) { - width: 50vw; - margin: 1% -18%; - max-height: 90vw; - }*/ - - @media(max-width: 767px) { - margin: 3% -24%; - height: 94%; + @media(max-width: 1199px) { + margin: 0; } - @media(max-width: 567px) { - margin: 5% -32%; - height: 90%; + @media(max-width: 767px) { + display:none; } - .foreground, .background { position: absolute; left: 0; right: 0; top: 0; - transform-origin: center center; + transform-origin: left bottom; height: 437px; - //transform: rotate(-3.762deg); - transform: rotate(0); + transform: rotate(-3.762deg); overflow: hidden; - + margin-top: 7%; &:before { content: ""; @include full-size; @@ -139,20 +142,13 @@ section .artwork-wrapper { } .background { - //transform: rotate(-11.38deg); - transform: rotate(0); - left: -482px; - margin-right: -60px; - + transform: rotate(-3.762deg); + margin-right: -100px; + margin-top: 0; @media(max-width: 999px) { - margin-right: -45px; - margin-top: 5px; + margin-right: -70px; + //margin-top: 0px; } - @media(max-width: 567px) { - margin-right: -30px; - margin-top: 10px; - } - &:before { background: linear-gradient(-10deg, var(--theme-color-gradient-03) 10%, var(--theme-color-gradient-02) 55%, var(--theme-color-gradient-01) 90%); } diff --git a/gfi-ihk-2024/stories/components/mini-teaser/miniteaser.scss b/gfi-ihk-2024/stories/components/mini-teaser/miniteaser.scss index 0757a9e..eae215b 100644 --- a/gfi-ihk-2024/stories/components/mini-teaser/miniteaser.scss +++ b/gfi-ihk-2024/stories/components/mini-teaser/miniteaser.scss @@ -6,7 +6,7 @@ background-color: white; overflow: hidden; width: 100%; - max-width: 420px; + //max-width: 420px; border-radius: 4px; padding: 16px 12px; transition: 0.25s ease; diff --git a/gfi-ihk-2024/stories/sections/marketingheader/MarketingHeaderComponent.js b/gfi-ihk-2024/stories/sections/marketingheader/MarketingHeaderComponent.js index c0a6610..da08d84 100644 --- a/gfi-ihk-2024/stories/sections/marketingheader/MarketingHeaderComponent.js +++ b/gfi-ihk-2024/stories/sections/marketingheader/MarketingHeaderComponent.js @@ -11,6 +11,7 @@ import {createButton} from "../../atoms/button/ButtonComponent"; import IHKMHSlider from "./marketingheaderslider"; import {searchData, teaserData, sliderData} from "./MarketingHeaderData"; import {createMiniTeaser} from "../../components/mini-teaser/MiniTeaserComponent"; +import IHKSearchAccordion from "./searchAccordion"; export const createMarketingHeader = @@ -19,7 +20,6 @@ export const createMarketingHeader = placeholder = 'Hier Ihr Thema finden', api = 'services/search/{SEARCHTERM}.json', tiles = searchData, - imageSrc = 'https://source.unsplash.com/2vCqH34PqWs/1080x648', kicker = 'Noch 7 Tage offen', headline = 'Jetzt und digital mitreden', copy = 'Mit der digitalen Beteiligung erhalten Mitgliedsunternehmen die Möglichkeit, sich einfach und schnell über laufende Verfahren und Abstimmungen zu informieren und sich aktiv daran zu beteiligen.', @@ -51,8 +51,9 @@ export const createMarketingHeader = const artwork = createArtwork({type: artworkStyle}); search.appendChild(artwork); search.dataset.type = artworkStyle; - + const container = createElement('div', ['container', 'small'], null, search); + const row = createElement('div', ['row'], null, container); const col = createElement('div', ['col'], null, row); @@ -76,7 +77,13 @@ export const createMarketingHeader = if (api) { new IHKSearchTypeahead($(form).find('input.typeahead')); } - + + /* Accordion */ + const sc = createElement('div', ['container','sc'], null, search); + $(document).ready(() => { + new IHKSearchAccordion($(search)); + }) + createElement('button', ['close-search'], '', sc); /* SLIDER */ const container2 = createElement('div', ['container', 'mainstage'], null, section); diff --git a/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss b/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss index 8039565..7c86191 100644 --- a/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss +++ b/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss @@ -28,9 +28,72 @@ section.marketingheader{ overflow: hidden; margin: 0; background-color: var(--theme-color-primary-dimmed-04); + .sc.container{ + position: absolute; + top: 0; + @media (max-width:767px){ + position: relative; + .close-search{ + position: relative !important; + right:0 !important; + top:0 !important; + float: right; + margin-bottom:15px; + } + } + .close-search{ + display:none; + position: absolute; + right:30px; + top:33px; + left:auto; + cursor: pointer; + transition: 0.3s ease; + border: 2px solid var(--theme-color-primary-dimmed-04); + border-radius: 10px; + height:34px; + width:34px; + background-color: var(--theme-color-primary); + @include focus-visible; + z-index: 2; + &:before, &:after { + content: ""; + position: absolute; + top: 50%; + left: 50%; + width: 17px; + height: 1.5px; + border-radius: 2px; + background-color: var(--theme-color-white); + transform: translate(-50%,-50%) rotate(45deg); + transition: 0.3s ease; + + } + + &:after { + transform: translate(-50%,-50%) rotate(-45deg); + } + } + } @media(max-width: 767px) { - padding: calc(1.5vw + 15px) 0 0; - margin-bottom: -10px; + //padding: calc(1.5vw + 15px) 0 0; + //margin-bottom: -10px; + } + + &.open{ + .close-search{ + display:block !important; + } + .tiles{ + //display:flex !important; + height:auto; + opacity: 1; + transition:none; + transition:height 0.25s ease; + } + form{ + max-width: 580px; + } } form{ border-radius: 24px; @@ -39,6 +102,10 @@ section.marketingheader{ font-size: 22px; max-width: 360px; margin: 20px auto !important; + transition: 0.25s ease; + @media(max-width: 767px) { + font-size: 18px; + } } + section, + #toclist > section:first-child { @media(min-width: 768px) { @@ -51,6 +118,10 @@ section.marketingheader{ border-top-left-radius: 24px; border-bottom-left-radius: 24px; font-size: 22px; + @media(max-width: 767px) { + font-size: 18px; + height: 48px; + } &::placeholder{ color:var(--theme-color-primary) !important; } @@ -66,11 +137,20 @@ section.marketingheader{ height: 60px; width:60px; font-size: 22px; + @media(max-width: 767px) { + font-size: 18px; + height: 48px; + width:48px; + } &:before{ width:30px; height:30px; font-size:30px; - //border-radius: 24px; + @media(max-width: 767px) { + width:24px; + height:24px; + font-size:24px; + } } } .container { @@ -83,7 +163,7 @@ section.marketingheader{ > .col{ margin-top:0; padding-top:0; - padding-bottom:9px; + padding-bottom:0; } } } @@ -121,10 +201,15 @@ section.marketingheader{ .tiles { margin: 0 -8px; + //display:none; display: flex; flex-wrap: wrap; font-family: "Korb", sans-serif; - + height:0; + opacity: 0; + transition: all 1s ease-in; + padding-bottom:9px; + transition:height 0.25s ease; @media(max-width: 567px) { margin: 0 -6px; } @@ -347,6 +432,18 @@ section.marketingheader{ } } &.background-image{ + &: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; + } .artwork-wrapper{ display:none; } @@ -356,25 +453,64 @@ section.marketingheader{ max-height:427px; outer{ max-height:427px; + height:427px; + @media(max-width: 999px) { + max-height:none; + height:auto; + } + } + .rotation { + @media screen and (max-width:900px){ + .slider .text-box:first-child::after { + display: none; + } + padding:0; + } + .text-box{ + min-height: 0; + } + } + .image-box{ + max-height:427px; + min-height: 0; + height:427px; img{ max-height:427px; + height:427px; } } .mainstage{ + @media screen and (max-width:900px){ + padding:0; + } .row{ - margin:30px -8px 0; + margin:16px 0; + @media screen and (min-width:901px){ + margin:30px -8px 0; + } .col{ - flex: 1 1 calc(100% - 322px); - max-width: calc(100% - 322px); - padding:0 8px; + flex: 1 1 100%; + max-width: 100%; + + @media screen and (min-width:901px){ + padding:0 8px; + flex: 1 1 calc(100% - 322px); + max-width: calc(100% - 322px); + } + .col{ - flex: 1 1 322px; - max-width: 322px; + flex: 1 1 100%; + max-width: 100%; display: flex; flex-flow: column; justify-content: space-between; - margin: -8px 0; - padding:0 8px; + margin: 0; + padding: 0 var(--container-padding); + @media screen and (min-width:901px){ + flex: 1 1 322px; + max-width: 322px; + padding:0 8px; + margin: -8px 0; + } .mt{ height: 100%; padding: 8px 0; @@ -486,5 +622,53 @@ section.marketingheader{ } .rotation{ margin:0; + @media screen and (max-width:900px){ + .slider{ + background-color: transparent; + .slider-tabs{ + top:0; + height: auto; + bottom: auto; + } + .text-box{ + padding: var(--container-padding); + } + .text-box:not(:first-child)::before{ + display: none; + } + .image-box{ + order: 0; + &:before{ + display: none; + } + img{ + position: static; + height:300px; + } + } + } + } + @media screen and (max-width:767px){ + .slider{ + .image-box{ + img{ + height:250px; + } + } + } + } + @media screen and (max-width:567px) { + .slider { + margin: 0; + .image-box{ + img{ + height:177px; + } + } + } + } + .context-box{ + display:none !important; + } } } \ No newline at end of file diff --git a/gfi-ihk-2024/stories/sections/marketingheader/searchAccordion.js b/gfi-ihk-2024/stories/sections/marketingheader/searchAccordion.js new file mode 100644 index 0000000..b03dc7f --- /dev/null +++ b/gfi-ihk-2024/stories/sections/marketingheader/searchAccordion.js @@ -0,0 +1,67 @@ +import {getUrlVars} from "../../_global/scripts/helpers"; +const $ = global.$; + +class IHKSearchAccordion { + constructor(section) { + this.section = section.addClass('initiated'); + this.section.find('#search-term').attr('aria-label', 'Klappmenü geschlossen'); + + this.section.find('#search-term').off('click').on('click', (e) => { + e.preventDefault(); + section.addClass('open'); + if(section.hasClass('open')){ + section.attr('aria-label', 'Klappmenü geöffnet'); + } + else{ + section.attr('aria-label', 'Klappmenü geschlossen'); + } + if (this.section.data('single-open') !== false) { + section.siblings('.open').removeClass('open').find('.tiles').slideUp(300, 'easeOutQuad'); + } + }); + /* CLOSE */ + this.section.find('.close-search').off('click').on('click', (e) => { + e.preventDefault(); + section.removeClass('open'); + if(section.hasClass('open')){ + section.attr('aria-label', 'Klappmenü geschlossen'); + } + else{ + section.attr('aria-label', 'Klappmenü geöffnet'); + } + if (this.section.data('single-open') !== false) { + section.siblings('.open').removeClass('open').find('.tiles').slideUp(300, 'easeOutQuad'); + } + }); + + if (section.attr('data-type') === 'event') { + this.initEvent(); + } + } + + initEvent() { + this.openEvent(); + this.section.find('.tiles').hide(); + }; + + openEvent() { + const t = this; + const vars = getUrlVars(); + const $events = t.section.find('.tiles'); + const $queryParamEvent = $('#js-event-' + vars['terminId']); + + if ($queryParamEvent.length) { + $queryParamEvent.show().closest('li').addClass('open'); + } else { + $events.first().show().closest('li').addClass('open'); + } + } +} + +export default IHKSearchAccordion; + +$('body').on('ihk-init dynamic-component-loaded gfi-dynamic-init', function () { + $('form:not(.initiated)').each(function(i) { + new IHKSearchAccordion($(this)); + }); +});