From 65edbea0abf5353869e8a97a39f6156b8bd38f96 Mon Sep 17 00:00:00 2001 From: Lukas Zimmer Date: Fri, 23 Feb 2024 16:14:27 +0100 Subject: [PATCH] Fertigstellung der Event Teaser Large Komponente MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit + dp24 Variable hinzugefügt in main.scss --- gfi-ihk-2024/stories/_global/styles/main.scss | 2 + .../EventTeaserLarge.stories.js | 6 ++ .../EventTeaserLargeComponent.js | 6 +- .../EventTeaserLargeData.js | 1 + .../event-teaser-large.scss | 102 +++++++++++++----- .../eventoverview-stage.scss | 3 +- 6 files changed, 91 insertions(+), 29 deletions(-) diff --git a/gfi-ihk-2024/stories/_global/styles/main.scss b/gfi-ihk-2024/stories/_global/styles/main.scss index 1339125..1be3c7b 100644 --- a/gfi-ihk-2024/stories/_global/styles/main.scss +++ b/gfi-ihk-2024/stories/_global/styles/main.scss @@ -27,7 +27,9 @@ --theme-color-error: #EA515A; --theme-color-error-dimmed: #FBDCDE; --theme-grey-light: #EFF3F6; + --theme-24dp: 0px 0px 15px 0px rgba(0, 51, 102, 0.20), 0px 0px 46px 0px rgba(0, 51, 102, 0.12), 0px 0px 38px 0px rgba(0, 51, 102, 0.14); + --header-height: 160px; --container-width: 1460px; diff --git a/gfi-ihk-2024/stories/components/event-teaser-large/EventTeaserLarge.stories.js b/gfi-ihk-2024/stories/components/event-teaser-large/EventTeaserLarge.stories.js index 8d2ac3c..a3cde51 100644 --- a/gfi-ihk-2024/stories/components/event-teaser-large/EventTeaserLarge.stories.js +++ b/gfi-ihk-2024/stories/components/event-teaser-large/EventTeaserLarge.stories.js @@ -10,6 +10,7 @@ export default { }, args: { event: EventTeaserLargeData, + widemode: false, }, argTypes: { event: { @@ -30,3 +31,8 @@ EventTeaserLargeImage.args = { event: EventTeaserLargeImageData, }; +export const EventTeaserLargeWide = Template.bind({}); +EventTeaserLargeWide.args = { + widemode: true, +}; + diff --git a/gfi-ihk-2024/stories/components/event-teaser-large/EventTeaserLargeComponent.js b/gfi-ihk-2024/stories/components/event-teaser-large/EventTeaserLargeComponent.js index cfa5b92..2b7783b 100644 --- a/gfi-ihk-2024/stories/components/event-teaser-large/EventTeaserLargeComponent.js +++ b/gfi-ihk-2024/stories/components/event-teaser-large/EventTeaserLargeComponent.js @@ -5,12 +5,16 @@ import {createButton} from "../../atoms/button/ButtonComponent"; export const createEventTeaserLarge = ({ event = EventTeaserLargeData, + widemode = false, moreCta = { label: 'Mehr erfahren', target: '_self', }, }) => { const a = createElement('a', ['event-teaser-large']); + if (widemode) { + a.classList.add('widemode'); + } const blueBox = createElement('div', ['blue-box'], null, a); const textBox = createElement('div', ['text-box', 'date-wrapper'], null, a); createElement('div', ['icon-box', 'pictogram-' + event.icon.toLowerCase().split(' ').join('-')], null, blueBox); @@ -31,7 +35,7 @@ export const createEventTeaserLarge = ({ detailBox.appendChild(createButton({ label: moreCta.label, link: event.link, - color: 'primary-light', + color: 'primary', size: 'small', })) } diff --git a/gfi-ihk-2024/stories/components/event-teaser-large/EventTeaserLargeData.js b/gfi-ihk-2024/stories/components/event-teaser-large/EventTeaserLargeData.js index 17b8ef9..3d0316d 100644 --- a/gfi-ihk-2024/stories/components/event-teaser-large/EventTeaserLargeData.js +++ b/gfi-ihk-2024/stories/components/event-teaser-large/EventTeaserLargeData.js @@ -32,6 +32,7 @@ export const EventTeaserLargeData = { icon: 'Roboter', category: 'Gründung und Nachfolge', bgimage: null, + widemode: false, } export const EventTeaserLargeImageData = { diff --git a/gfi-ihk-2024/stories/components/event-teaser-large/event-teaser-large.scss b/gfi-ihk-2024/stories/components/event-teaser-large/event-teaser-large.scss index 71ff9bc..ac7cc02 100644 --- a/gfi-ihk-2024/stories/components/event-teaser-large/event-teaser-large.scss +++ b/gfi-ihk-2024/stories/components/event-teaser-large/event-teaser-large.scss @@ -9,6 +9,8 @@ transition: 0.3s ease; text-decoration: none; min-height:400px; + //max-width:800px; + flex-wrap: wrap; @include focus-visible; &:hover { @@ -19,44 +21,51 @@ } } - .icon-box { - font-family: 'Pictograms', sans-serif; - font-size: 70px; - line-height: 1; - color: var(--theme-color-white); - position:absolute; - top:20px; - left:15px; - @media(max-width: 567px) { - font-size: 50px; - margin-top: 0; - } - } + .blue-box { display: flex; - flex-direction: column; + //flex-direction: column; justify-content: flex-end; - background: linear-gradient(158deg, #003366 4%, #4BA490 39%, #AFCC7A 98%); + background: linear-gradient(135deg, #036 45.14%, #368484 100%), #D9D9D9; + color: var(--theme-color-white); margin-right: 18px; font-family: "Korb", sans-serif; min-height: 80px; font-size: 14px; line-height: 1; - padding: 20px 15px; + padding: 70px 15px 15px 15px; min-width: 80px; transition: 0.2s ease; position:relative; + flex-flow: column; + align-items: baseline; + width:100%; + margin-right: 0; + min-height:250px; @media(max-width: 767px) { margin-right: 12px; justify-content: flex-start; padding-top: 10px; } + .icon-box { + font-family: 'Pictograms', sans-serif; + font-size: 48px; + line-height: 1; + color: var(--theme-color-white); + position:absolute; + top:15px; + left:15px; + @media(max-width: 567px) { + font-size: 50px; + margin-top: 0; + } + } .ev-title{ - font-size: 36px; font-weight: 400; text-decoration: underline; - line-height: 43.20px; + line-height: normal; + font-size: 28px; } .ev-cat{ color: #003366; @@ -67,7 +76,7 @@ line-height: 16px; letter-spacing: 0.32px; background-color:white; - border-radius:7px; + border-radius:8px; display:inline-block; padding:5px 7px; } @@ -99,32 +108,46 @@ } .text-box { - align-self: center; - padding: 10px 18px 10px 0; - line-height: 1.2; - + //align-self: center; + padding: 15px; + //line-height: 1.2; + background-color: var(--theme-grey-light); + width:100%; + display:flex; + justify-content:space-between; + flex-flow: column; @media(max-width: 767px) { font-size: var(--font-size-small); } + .ev-desc{ + line-height: 27px; + letter-spacing: 0.18px; + } } p { margin: 0; - &:not(:last-child) { margin: 2px 0 0.3em; } } .detail-box { + padding-top: 15px; + border-top: 1px #CCD7E6 solid; + .btn{ + float: right; + margin-top:15px; + display:none; + } > div { - display: inline-block; + display: block; font-size: var(--font-size-small); line-height: 1.2em; margin-right: 15px; - margin-bottom: 2px; + margin-bottom: 5px; color: var(--theme-color-primary); - + &::before { position: relative; display: inline-block; @@ -182,4 +205,29 @@ } } } + &.widemode{ + @media screen and (min-width:992px){ + .blue-box{ + width:50%; + padding: 100px 15px 20px 15px; + .icon-box { + font-size: 70px; + top:20px; + } + .ev-title{ + font-size: 36px; + line-height: 43.20px; + } + } + .text-box{ + width:50%; + padding: 20px; + .detail-box { + .btn{ + display:inline-block; + } + } + } + } + } } \ No newline at end of file diff --git a/gfi-ihk-2024/stories/sections/eventoverview-stage/eventoverview-stage.scss b/gfi-ihk-2024/stories/sections/eventoverview-stage/eventoverview-stage.scss index 82bff14..a16b6af 100644 --- a/gfi-ihk-2024/stories/sections/eventoverview-stage/eventoverview-stage.scss +++ b/gfi-ihk-2024/stories/sections/eventoverview-stage/eventoverview-stage.scss @@ -220,7 +220,8 @@ background: linear-gradient(0deg, 0%, 100%), linear-gradient(88deg, #003366 0%, .topic-teaser{ --topic-tile-padding: 10px; border-radius: 0.75rem; - box-shadow: 0px 0px 15px 0px rgba(0, 51, 102, 0.20), 0px 0px 46px 0px rgba(0, 51, 102, 0.12), 0px 0px 38px 0px rgba(0, 51, 102, 0.14); + //box-shadow: 0px 0px 15px 0px rgba(0, 51, 102, 0.20), 0px 0px 46px 0px rgba(0, 51, 102, 0.12), 0px 0px 38px 0px rgba(0, 51, 102, 0.14); + box-shadow: var(--theme-24dp); } }