diverse Änderungen EOS

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

@@ -31,7 +31,6 @@ export const createEventOverviewStage = ({
   const tilesrow = createElement('div', ['row'], null, tilescontainer);
   const tilescol = createElement('div', ['col'], null, tilesrow);
   if (backgroundImage && backgroundImage.length > 0) {
-    //section.content('style=background: red;');
     sectiondiv.style = 'background-image: url(' + backgroundImage + ');';
     sectiondiv.classList.add('background-image');
   }

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

@@ -4,6 +4,85 @@
   margin: 0;
   .tilescontainer{
     margin-top: calc(-138px / 2);
+    .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: -10px;
+          @media(min-width: 1481px) {
+            flex-wrap: nowrap;
+          }
+        }
+      
+        
+        .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 {
+          position: relative;
+          display: flex;
+          flex: 1 1 100%;
+          max-width: 100%;
+          padding: 10px;
+          @media(max-width: 1480px) {
+            flex: 1 1 33.3333333333%;
+            max-width: 33.3333333333%;
+          }
+          @media(max-width: 767px) {
+            padding: 6px;
+            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;
+            //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);
+            min-height:138px;
+          }
+        }
+      
+        &[data-type='list'] .col {
+          @media(max-width: 567px) {
+            max-width: 100%;
+            flex: 1 1 100%;
+          }
+        }
+      }
     > .row > .col{
       padding-top:0;
       margin-top:0;
@@ -179,82 +258,3 @@
   }
 }
 
-.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: -10px;
-    @media(min-width: 1481px) {
-      flex-wrap: nowrap;
-    }
-  }
-
-  
-  .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 {
-    position: relative;
-    display: flex;
-    flex: 1 1 100%;
-    max-width: 100%;
-    padding: 10px;
-    @media(max-width: 1480px) {
-      flex: 1 1 33.3333333333%;
-      max-width: 33.3333333333%;
-    }
-    @media(max-width: 767px) {
-      padding: 6px;
-      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;
-      //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);
-      min-height:138px;
-    }
-  }
-
-  &[data-type='list'] .col {
-    @media(max-width: 567px) {
-      max-width: 100%;
-      flex: 1 1 100%;
-    }
-  }
-}

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

@@ -30,7 +30,7 @@ class IHKEventOverviewTiles {
 export default IHKEventOverviewTiles;
 
 $('body').on('ihk-init dynamic-component-loaded gfi-dynamic-init', function () {
-  $('.topics:not(.initiated)').each(() => {
+  $('.eventoverview-section:not(.initiated)').each(() => {
     new IHKEventOverviewTiles($(this));
   });
 })

gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss

@@ -28,6 +28,9 @@ section.marketingheader{
     overflow: hidden;
     margin: 0;
     background-color: var(--theme-color-primary-dimmed-04);
+    transition:all 5s ease-in-out;
+    max-height:100px;
+    //height:100%;
     .sc.container{
       position: absolute;
       top: 0;
@@ -81,15 +84,21 @@ section.marketingheader{
     }
     
     &.open{
+      //height:100%;
+      //animation: slowopen 2s forwards;
+      //transition:all 5s ease-in-out;
+      max-height: 2000px;
       .close-search{
         display:block !important;
       }
       .tiles{
         //display:flex !important;
-        height:auto;
-        opacity: 1;
-        transition:none;
-        transition:height 0.25s ease;
+        //height:auto;
+        //opacity: 1;
+        //transition:none;
+        //transition:all 2s ease;
+        margin-top:0;
+        padding-bottom:9px;
       }
       form{
         max-width: 580px;
@@ -105,7 +114,7 @@ section.marketingheader{
       transition: 0.25s ease;
       @media(max-width: 767px) {
         font-size: 18px;
-        margin-top: 8px auto !important;
+        margin: 8px auto !important;
       }
     }
     + section, + #toclist > section:first-child {
@@ -206,11 +215,12 @@ section.marketingheader{
       display: flex;
       flex-wrap: wrap;
       font-family: "Korb", sans-serif;
-      height:0;
-      opacity: 0;
-      transition: all 1s ease-in;
-      padding-bottom:9px;
-      transition:height 0.25s ease;
+      //height:0;
+      //opacity: 0;
+      transition: all 5s ease-in;
+      padding-bottom:0px;
+      //transition:all 2s ease;
+      margin-top:100px;
       @media(max-width: 567px) {
         margin: 0 -6px;
       }
@@ -702,4 +712,4 @@ section.marketingheader{
       display:none !important;
     }
   }
-}
+}