Diverse Verbesserungen nach Designcheck

gfi-ihk-2024/stories/components/event-teaser-large/EventTeaserLargeComponent.js

@@ -16,6 +16,7 @@ export const createEventTeaserLarge = ({
     a.classList.add('widemode');
   }
   const blueBox = createElement('div', ['blue-box'], null, a);
+  const imgCon = createElement('div', ['img-con'], null, blueBox);
   const textBox = createElement('div', ['text-box', 'date-wrapper'], null, a);
   createElement('div', ['icon-box', 'pictogram-' + event.icon.toLowerCase().split(' ').join('-')], null, blueBox);
   createElement('p', ['ev-title'], event.title, blueBox);
@@ -40,7 +41,7 @@ export const createEventTeaserLarge = ({
     }))
   }
   if (event.bgimage && event.bgimage .length > 0) {
-    blueBox.style = 'background-image: url(' + event.bgimage + ');';
+    imgCon.style = 'background-image: url(' + event.bgimage + ');';
     blueBox.classList.add('background-image');
   }
 

gfi-ihk-2024/stories/components/event-teaser-large/event-teaser-large.scss

@@ -38,8 +38,6 @@
     display: flex;
     //flex-direction: column;
     justify-content: flex-end;
-    background: linear-gradient(135deg, #036 45.14%, #368484 100%), #D9D9D9;
-    
     color: var(--theme-color-white);
     margin-right: 18px;
     font-family: "Korb", sans-serif;
@@ -55,6 +53,31 @@
     width:100%;
     margin-right: 0;
     min-height:250px;
+    position: relative;
+    &:not(.background-image){
+      background: linear-gradient(135deg, #036 45.14%, #368484 100%), #D9D9D9;
+    }
+    .img-con{
+      position:absolute;
+      top:0;
+      left:0;
+      right:0;
+      bottom:0;
+      background-color:rgba(#003366,0.54);
+      z-index:0;
+    }
+    &.background-image{
+      .img-con:before{
+        content:"";
+        background: linear-gradient(0deg, rgba(0, 51, 102, 0.33) 0%, rgba(0, 51, 102, 0.33) 100%), linear-gradient(180deg, rgba(0, 32, 65, 0) 0%, rgba(0, 32.45, 64.90, 0.60) 100%);
+        position:absolute;
+        top:0;
+        left:0;
+        right:0;
+        bottom:0;
+        z-index:1;
+      }
+    }
     .icon-box {
       font-family: 'Pictograms', sans-serif;
       font-size: 48px;
@@ -69,6 +92,7 @@
       text-decoration: underline;
       line-height: normal;
       font-size: 28px;
+      position:relative;
     }
     .ev-cat{
       color: #003366;
@@ -82,6 +106,7 @@
       border-radius:8px;
       display:inline-block;
       padding:5px 7px;
+      position:relative;
     }
     span {
       white-space: nowrap;

gfi-ihk-2024/stories/sections/event-teaser-large-slider/EventTeaserLargeSliderComponent.js

@@ -33,6 +33,7 @@ export const createETLSlider =
         a.classList.add('widemode');
       }
       const blueBox = createElement('div', ['blue-box'], null, a);
+      const imgCon = createElement('div', ['img-con'], null, blueBox);
       const textBox = createElement('div', ['text-box', 'date-wrapper'], null, a);
       createElement('div', ['icon-box', 'pictogram-' + slideData.icon.toLowerCase().split(' ').join('-')], null, blueBox);
       createElement('p', ['ev-title'], slideData.title, blueBox);
@@ -57,7 +58,7 @@ export const createETLSlider =
         }))
       }
       if (slideData.bgimage && slideData.bgimage .length > 0) {
-        blueBox.style = 'background-image: url(' + slideData.bgimage + ');';
+        imgCon.style = 'background-image: url(' + slideData.bgimage + ');';
         blueBox.classList.add('background-image');
       }
 

gfi-ihk-2024/stories/sections/event-teaser-large-slider/EventTeaserLargeSliderData.js

@@ -57,7 +57,7 @@ export const sliderData = [
     },
     icon: 'Roboter',
     category: 'Aus- und Weiterbildung',
-    bgimage: null,
+    bgimage: 'https://source.unsplash.com/2vCqH34PqWs/1080x648',
   }
 ]
 

gfi-ihk-2024/stories/sections/event-teaser-large-slider/eventteaserlargeslider.scss

@@ -147,7 +147,7 @@
 
       &.active button:before {
         background-color: var(--theme-color-primary);
-        box-shadow: 0 0 0 2px var(--theme-color-primary);
+        //box-shadow: 0 0 0 2px var(--theme-color-primary);
       }
     }
 
@@ -163,10 +163,11 @@
         content: "";
         position: relative;
         display: block;
-        width: 10px;
-        height: 10px;
-        border: 2px solid var(--theme-color-primary);
-        border-radius: 5px;
+        width: 15px;
+        height: 15px;
+        //border: 2px solid var(--theme-color-primary);
+        background-color: var(--theme-color-primary-dimmed-04);
+        border-radius: 15px;
         transition: 0.2s ease;
       }
 
@@ -196,6 +197,8 @@
     right:auto;
     border-radius: 24px;
     background: var(--theme-color-primary-dimmed-04);
+    --button-hover-shadow-opacity: 0.4; 
+    --button-hover-shadow-size: 6px ;
     @media(max-width: 1470px) {
       left:auto;
       right: var(--container-padding);
@@ -216,6 +219,24 @@
       font-size: 30px;
       content: "\e825";
     }
+    &:after{
+      content: "";
+        position: absolute;
+        display: block;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        border-radius: var(--border-radius-lg);
+        box-shadow: 0 0 0 2px var(--theme-color-primary-dimmed-04);
+        opacity: 0;
+        transition: 0.3s ease;
+    }
+    &:hover:after{
+      opacity: 0.4;
+      box-shadow: 0 0 0 6px var(--theme-color-primary-dimmed-04);
+    }
+    
   }
 
   .prev {
@@ -223,10 +244,10 @@
     transform: rotate(180deg);
     @media(max-width: 1470px) {
       left:auto;
-      right:calc(var(--container-padding) + 80px);
+      right:calc(var(--container-padding) + 70px);
     }
     @media(max-width: 999px) {
-      right:80px;
+      right:70px;
     }
   }
   .count{

gfi-ihk-2024/stories/sections/event-teasers-large/event-teasers-large.scss

@@ -11,7 +11,9 @@
   @media(max-width: 767px) {
     margin-top: 24px;
   }
-
+  .text-box{
+    background-color: white !important;
+  }
   h2, .like-h2 {
     margin-top: var(--section-headline-margin);
     margin-bottom:10px;

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

@@ -54,5 +54,5 @@ GenericEventOverviewStage.args = {
 
 export const EventOverviewStageWithImage = Template.bind({});
 EventOverviewStageWithImage.args = {
-  backgroundImage: 'https://source.unsplash.com/2vCqH34PqWs/1080x648',
+  backgroundImage: './dummy/hero-veranstaltung-photo.jpg',
 }

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

@@ -11,7 +11,7 @@
   }
 }
 .eventoverview-stage {
-  background-image: url('./beteiligung-cover.jpg');
+  background-image: url('./hero-veranstaltung-gfx.jpg');
   background-size: cover;
   color: white;
   min-height: calc(18vw + 400px);