Fertigstellung der Event Teaser Large Komponente

+ dp24 Variable hinzugefügt in main.scss

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;

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

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',
     }))
   }

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 = {

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

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