Fix EventOverviewStage

Funktioniert nun auch mit 3-5 Tiles

gfi-ihk-2024/stories/sections/eventoverview-stage/EventOverviewStage.stories.js

@@ -1,4 +1,5 @@
 import {createEventOverviewStage} from "./EventOverviewStageComponent";
+import {eventOverviewStageDataFive, eventOverviewStageDataFour, eventOverviewStageDataThree} from "./EventOverviewStageData";
 
 export default {
   title: 'Sections/EventOverview Stage',
@@ -43,16 +44,29 @@ const Template = ({...args}) => {
 
 export const GenericIntro = Template.bind({});
 GenericIntro.args = {
-
   kicker: 'IHK Musterstadt Beteiligungsportal',
 };
 
 export const GenericEventOverviewStage = Template.bind({});
 GenericEventOverviewStage.args = {
-
 }
 
 export const EventOverviewStageWithImage = Template.bind({});
 EventOverviewStageWithImage.args = {
   backgroundImage: './dummy/hero-veranstaltung-photo.jpg',
 }
+
+export const EventOverviewStageFive = Template.bind({});
+EventOverviewStageFive.args = {
+  tiles: eventOverviewStageDataFive
+}
+
+export const EventOverviewStageFour = Template.bind({});
+EventOverviewStageFour.args = {
+  tiles: eventOverviewStageDataFour
+}
+
+export const EventOverviewStageThree = Template.bind({});
+EventOverviewStageThree.args = {
+  tiles: eventOverviewStageDataThree
+}

gfi-ihk-2024/stories/sections/eventoverview-stage/EventOverviewStageData.js

@@ -24,3 +24,59 @@ export const eventOverviewStageData = [
     icon: 'Waage',
   },
 ]
+
+export const eventOverviewStageDataFive = [
+  {
+    title: 'Aus- und Weiterbildung',
+    icon: 'Person',
+  },
+  {
+    title: 'Alles für Gründer',
+    icon: 'Stadt',
+  },
+  {
+    title: 'Innovation und Umwelt',
+    icon: 'Roboter',
+  },
+  {
+    title: 'International',
+    icon: 'Treppe',
+  },
+  {
+    title: 'Recht und Steuern',
+    icon: 'Virus',
+  },
+]
+
+export const eventOverviewStageDataFour = [
+  {
+    title: 'Aus- und Weiterbildung',
+    icon: 'Person',
+  },
+  {
+    title: 'Alles für Gründer',
+    icon: 'Stadt',
+  },
+  {
+    title: 'Innovation und Umwelt',
+    icon: 'Roboter',
+  },
+  {
+    title: 'International',
+    icon: 'Treppe',
+  },
+]
+export const eventOverviewStageDataThree = [
+  {
+    title: 'Aus- und Weiterbildung',
+    icon: 'Person',
+  },
+  {
+    title: 'Alles für Gründer',
+    icon: 'Stadt',
+  },
+  {
+    title: 'Innovation und Umwelt',
+    icon: 'Roboter',
+  },
+]

gfi-ihk-2024/stories/sections/eventoverview-stage/eventoverview-stage.scss

@@ -183,11 +183,12 @@
 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: -10px;
+    @media(min-width: 1481px) {
+      flex-wrap: nowrap;
+    }
   }
 
-  @media(max-width: 767px) {
- 
-  }
+  
   .icon-box {
     font-size: 40px !important;
     margin-top:0 !important;
@@ -202,8 +203,8 @@ background: linear-gradient(0deg, 0%, 100%), linear-gradient(88deg, #003366 0%,
   .col {
     position: relative;
     display: flex;
-    flex: 1 1 16.6666666667%;
-    max-width: 16.6666666667%;
+    flex: 1 1 100%;
+    max-width: 100%;
     padding: 10px;
     @media(max-width: 1480px) {
       flex: 1 1 33.3333333333%;
@@ -214,8 +215,33 @@ background: linear-gradient(0deg, 0%, 100%), linear-gradient(88deg, #003366 0%,
       flex: 1 1 50%;
       max-width: 50%;
     }
- 
-    
+    @media (max-width: 767px) {
+      &:nth-child(2n+1):last-child {
+        flex: 1 1 100%;
+        max-width: 100%; 
+      }
+    }
+    &.width-half{
+      @media(max-width: 1480px) {
+        flex: 1 1 50%;
+        max-width: 50%;
+      }
+      + .width-half{
+        @media(max-width: 767px) {
+          flex: 1 1 100%;
+          max-width: 100%;
+        }
+      }
+      
+    }
+    &.width-third{
+      flex: 1 1 25%;
+      max-width: 25%; 
+      @media(max-width: 1480px) {
+        flex: 1 1 50%;
+        max-width: 50%; 
+      }
+    }
     .topic-teaser{
       --topic-tile-padding: 10px;
       border-radius: 0.75rem;

gfi-ihk-2024/stories/sections/eventoverview-stage/eventoverview.js

@@ -6,18 +6,24 @@ class IHKEventOverviewTiles {
     this.cols = section.find('.col');
 
     const fullOffset = Math.ceil(this.cols.length / 6) * 3 - this.cols.last().index() - 1;
-
+    const fullOffset2 = Math.ceil(this.cols.length / 3) * 3 - this.cols.last().index() - 1;
     if (fullOffset === 0) {
       return;
     }
+    if (fullOffset2 === 0) {
+      return;
+    }
 
     let firstHalfWidth = this.cols.length - fullOffset * 2;
-
+    let firstHalfWidth2 = this.cols.length - fullOffset2 * 2;
     if (firstHalfWidth < 0) {
       firstHalfWidth = 0;
     }
-
+    if (firstHalfWidth2 < 0) {
+      firstHalfWidth2 = 0;
+    }
     this.cols.eq(firstHalfWidth).addClass('width-half').nextAll().addClass('width-half');
+    this.cols.eq(firstHalfWidth2).addClass('width-third').nextAll().addClass('width-third');
   }
 }