diff --git a/gfi-ihk-2024/stories/sections/eventoverview-stage/EventOverviewStage.stories.js b/gfi-ihk-2024/stories/sections/eventoverview-stage/EventOverviewStage.stories.js index 5dff295..f75cc55 100644 --- a/gfi-ihk-2024/stories/sections/eventoverview-stage/EventOverviewStage.stories.js +++ b/gfi-ihk-2024/stories/sections/eventoverview-stage/EventOverviewStage.stories.js @@ -9,19 +9,9 @@ export default { 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.', - moreCta: { - label: 'Mehr Infos', - link: '#', - target: '_self', - }, - buttonCta: { - label: 'Jetzt beteiligen', - link: '#', - target: '_self', - }, - showProgress: true, - progress: 60, + //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.', + //showProgress: true, + //progress: 60, }, argTypes: { imageSrc: { @@ -33,9 +23,9 @@ export default { headline: { name: 'Überschrift', }, - copy: { + /*copy: { name: 'Kurztext', - }, + },*/ moreCta: { name: 'Mehr-Link', }, @@ -64,13 +54,13 @@ export const GenericIntro = Template.bind({}); GenericIntro.args = { imageSrc: null, kicker: 'IHK Musterstadt Beteiligungsportal', - showProgress: false, + /*showProgress: false, buttonCta: { label: 'Mehr erfahren', link: '#', target: '_self', }, - moreCta: null, + moreCta: null,*/ }; export const GenericEventOverviewStage = Template.bind({}); diff --git a/gfi-ihk-2024/stories/sections/eventoverview-stage/EventOverviewStageComponent.js b/gfi-ihk-2024/stories/sections/eventoverview-stage/EventOverviewStageComponent.js index 1a51240..a30c42f 100644 --- a/gfi-ihk-2024/stories/sections/eventoverview-stage/EventOverviewStageComponent.js +++ b/gfi-ihk-2024/stories/sections/eventoverview-stage/EventOverviewStageComponent.js @@ -1,23 +1,22 @@ import './eventoverview-stage.scss'; import {createElement, createImage} from "../../_global/scripts/helpers"; -import {createProgressBar} from "../../atoms/progress-bar/ProgressBarComponent"; -import {createButton} from "../../atoms/button/ButtonComponent"; +//import {createProgressBar} from "../../atoms/progress-bar/ProgressBarComponent"; import {eventOverviewStageData} from "./EventOverviewStageData"; import {createSearchInput} from "../../atoms/search-input/SearchInputComponent"; import {createSearchButton} from "../../atoms/search-button/SearchButtonComponent"; import IHKSearchTypeahead from "../../sections/search/search-typeahead"; import {createTopicTeaser} from "../../components/topic-teaser/TopicTeaserComponent"; -import IHKTopicTeasers from "./topic-teasers"; +import IHKEventOverviewTiles from "./eventoverview"; export const createEventOverviewStage = ({ 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.', + //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.', maxItems = 6, - showProgress = true, - progress = 60, + //showProgress = true, + //progress = 60, backgroundImage = null, isFirstElement = false, placeholder = 'Veranstaltungssuche, z.B. „Existenzgründung”', @@ -25,12 +24,17 @@ export const createEventOverviewStage = ({ tiles = eventOverviewStageData, }) => { const hasImage = imageSrc && imageSrc.length > 0; - const section = createElement('section', ['eventoverview', 'eventoverview-stage']); - const container = createElement('div', ['container'], null, section); + const section = createElement('section', ['eventoverview-section']); + const sectiondiv = createElement('div', ['eventoverview', 'eventoverview-stage'], null, section); + const container = createElement('div', ['container'], null, sectiondiv); const row = createElement('div', ['row'], null, container); const col = createElement('div', ['col'], null, row); - const tb = createElement('div', ['text-box'], null, col); + const tb = createElement('div', ['stagetext-box'], null, col); + + const tilescontainer = createElement('div', ['container', 'tilescontainer'], null, section); + const tilesrow = createElement('div', ['row'], null, tilescontainer); + const tilescol = createElement('div', ['col'], null, tilesrow); if (backgroundImage && backgroundImage.length > 0) { //section.content('style=background: red;'); section.style = 'background-image: url(' + backgroundImage + ');'; @@ -44,11 +48,11 @@ export const createEventOverviewStage = ({ if (kicker && kicker.length > 0) { createElement('p', ['kicker'], kicker, tb); } - if (showProgress) { + /*if (showProgress) { tb.appendChild(createProgressBar({progress})); - } + }*/ createElement('h1', ['like-h2'], headline, tb); - createElement('p', [], copy, tb); + //createElement('p', [], copy, tb); if (hasImage) { section.classList.add('image-stage'); @@ -56,7 +60,7 @@ export const createEventOverviewStage = ({ createImage(imageSrc, 1080, 648, 'Beteiligung', [], ib); } - const form = createElement('form', [], null, col); + const form = createElement('form', [], null, tb); const label = createElement('label', ['visually-hidden'], 'IHK durchsuchen', form); label.for = 'search-term'; @@ -66,7 +70,7 @@ export const createEventOverviewStage = ({ form.action = '#'; - const tilesContainer = createElement('div', ['tiles', 'row'], null, col); + const tilesContainer = createElement('div', ['tiles', 'row'], null, tilescol); tiles.map((topic, i) => { if (i < maxItems) { const col = createElement('div', ['col'], null, tilesContainer); @@ -74,12 +78,11 @@ export const createEventOverviewStage = ({ col.appendChild(teaser); } }) - new IHKTopicTeasers($(section)); + new IHKEventOverviewTiles($(section)); + if (api) { new IHKSearchTypeahead($(form).find('input.typeahead')); } - - return section; } \ 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 1ce5d22..5a0f5b6 100644 --- a/gfi-ihk-2024/stories/sections/eventoverview-stage/eventoverview-stage.scss +++ b/gfi-ihk-2024/stories/sections/eventoverview-stage/eventoverview-stage.scss @@ -1,11 +1,20 @@ @import '../../_global/styles/mixins'; @import '../../_global/styles/vars'; - +.eventoverview-section{ + margin: 0; + .tilescontainer{ + margin-top: calc(-138px / 2); + > .row > .col{ + padding-top:0; + margin-top:0; + } + } +} .eventoverview-stage { background-image: url('./beteiligung-cover.jpg'); background-size: cover; color: white; - min-height: calc(18vw + 300px); + min-height: calc(18vw + 400px); display: flex; align-items: center; margin: 0; @@ -20,24 +29,32 @@ margin-top: -60px; } } - + form{ + position:relative; + input.search-field{ + height:60px; + padding: 14px 90px 14px 24px; + } + button.search-submit{ + width: 60px; + height: 60px; + border-radius: 24px; + &:before{ + font-size:30px; + } + } + } .kicker { margin-bottom: 0.6em; } - .btn { - margin-top: 0.8em; - margin-bottom: 0.4em; - } - - .text-box { + .stagetext-box { max-width: 580px; padding: calc(30px + 1vw) 0; } - a:not(.btn) { + .stagetext-box a:not(.btn) { color: white; - + .btn { margin-left: 30px; } @@ -71,7 +88,7 @@ background-color: var(--theme-color-primary); } - .text-box { + .stagetext-box { position: relative; } @@ -103,7 +120,7 @@ min-width: 560px; } - .text-box { + .stagetext-box { max-width: 480px; } } @@ -153,7 +170,7 @@ } } - .text-box { + .stagetext-box { max-width: none; margin-bottom: 0; padding-bottom: 24px; @@ -163,18 +180,23 @@ } .tiles { +background: linear-gradient(0deg, 0%, 100%), linear-gradient(88deg, #003366 0%, rgba(1.01, 40.28, 80.75, 0.86) 54%, rgba(0, 51, 102, 0) 100%); &.row { - margin: calc(var(--col-padding) * -1); + margin: -10px; } @media(max-width: 767px) { - &.row { - margin: 0 -7px; - } + + } + .icon-box { + font-size: 40px !important; + margin-top:0 !important; } - .title { font-weight: 400; + font-size: 20px; + line-height:21px; + margin: 8px 0 5px 0 !important; } .col { @@ -182,28 +204,22 @@ display: flex; flex: 1 1 16.6666666667%; max-width: 16.6666666667%; - - &.width-half { - flex: 1 1 50%; - max-width: 50%; - - &:first-child:last-child { - flex: 1 1 100%; - max-width: 100%; - } + padding: 10px; + @media(max-width: 1080px) { + flex: 1 1 33.3333333333%; + max-width: 33.3333333333%; + } + @media(max-width: 767px) { + padding: 6px; } - @media(max-width: 567px) { flex: 1 1 50%; max-width: 50%; - - &:nth-child(odd):last-child { - flex: 1 1 100%; - max-width: 100%; - } } - @media(max-width: 767px) { - padding: 6px; + + .topic-teaser{ + --topic-tile-padding: 10px; + box-shadow: 0 4px 20px -5px rgba(0,0,0,.25); } } diff --git a/gfi-ihk-2024/stories/sections/eventoverview-stage/topic-teasers.js b/gfi-ihk-2024/stories/sections/eventoverview-stage/eventoverview.js similarity index 76% rename from gfi-ihk-2024/stories/sections/eventoverview-stage/topic-teasers.js rename to gfi-ihk-2024/stories/sections/eventoverview-stage/eventoverview.js index a1dce03..1557a8b 100644 --- a/gfi-ihk-2024/stories/sections/eventoverview-stage/topic-teasers.js +++ b/gfi-ihk-2024/stories/sections/eventoverview-stage/eventoverview.js @@ -1,11 +1,11 @@ import $ from 'jquery'; -class IHKTopicTeasers { +class IHKEventOverviewTiles { constructor(section) { this.section = section.addClass('initiated'); this.cols = section.find('.col'); - const fullOffset = Math.ceil(this.cols.length / 3) * 3 - this.cols.last().index() - 1; + const fullOffset = Math.ceil(this.cols.length / 6) * 3 - this.cols.last().index() - 1; if (fullOffset === 0) { return; @@ -21,10 +21,10 @@ class IHKTopicTeasers { } } -export default IHKTopicTeasers; +export default IHKEventOverviewTiles; $('body').on('ihk-init dynamic-component-loaded gfi-dynamic-init', function () { $('.topics:not(.initiated)').each(() => { - new IHKTopicTeasers($(this)); + new IHKEventOverviewTiles($(this)); }); })