Fertigstellung EventoverviewStage Section

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({});

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;
 }

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);
     }
   }
 

gfi-ihk-2024/stories/sections/eventoverview-stage/topic-teasers.js → 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));
   });
 })