Tile Grid Copy

gfi-ihk-2024/stories/sections/tile-grid-wood/TileGridWood.stories.js

@@ -1,14 +1,14 @@
-import {createTileGrid} from "./TileGridComponent";
-import {TileGridData} from "./TileGridData";
+import {createTileGrid} from "./TileGridWoodComponent";
+import {TileGridWoodData} from "./TileGridWoodData";
 
 export default {
-  title: 'Sections/Tile Grid',
+  title: 'Sections/Tile Grid Wood',
   parameters: {
     layout: 'fullscreen',
   },
   args: {
     headline: 'Daten und Fakten auf einen Blick',
-    tiles: TileGridData,
+    tiles: TileGridWoodData,
   }
 }
 

gfi-ihk-2024/stories/sections/tile-grid-wood/TileGridWoodComponent.js

@@ -1,12 +1,12 @@
-import './tile-grid.scss';
+import './tile-grid-wood.scss';
 import {createElement, createImage} from "../../_global/scripts/helpers";
-import {TileGridData} from "./TileGridData";
-import IHKTileGrid from "./tile-grid";
+import {TileGridWoodData} from "./TileGridWoodData";
+import IHKTileGridWood from "./tile-grid-wood";
 import IHKEventOverviewTiles from "../eventoverview-stage/eventoverview";
 
 export const createTileGrid = ({
   headline = 'Daten und Fakten auf einen Blick',
-  tiles = TileGridData,
+  tiles = TileGridWoodData,
 }) => {
   const section = createElement('section', ['tile-grid']);
   const container = createElement('div', ['container'], null, section);
@@ -44,7 +44,7 @@ export const createTileGrid = ({
       }
       createElement('span', ['label'], item.label, p);
     })
-    new IHKTileGrid($(section));
+    new IHKTileGridWood($(section));
   })
 
   return section;

gfi-ihk-2024/stories/sections/tile-grid-wood/TileGridWoodData.js

@@ -1,4 +1,4 @@
-export const TileGridData = [
+export const TileGridWoodData = [
   {
     title: 'Demokratie und ehrenamtliches Engagement',
     titleUrl: '#',

gfi-ihk-2024/stories/sections/tile-grid-wood/tile-grid-wood.js

@@ -1,6 +1,6 @@
 import $ from 'jquery';
 
-class IHKTileGrid {
+class IHKTileGridWood {
   constructor(section) {
     this.$dynamicIcon = $(section);
     this.iconSize();
@@ -36,12 +36,12 @@ class IHKTileGrid {
   }
 }
 
-export default IHKTileGrid;
+export default IHKTileGridWood;
 
 // Nur einmal initialisieren, aber mit besserer Timing-Sicherheit
 function initIcons() {
   $('.tile-grid .dynamic-icon').each((i, el) => {
-    new IHKTileGrid(el);
+    new IHKTileGridWood(el);
   });
 }
 

gfi-ihk-2024/stories/sections/tile-grid/TileGrid.stories.js

@@ -0,0 +1,20 @@
+import {createTileGrid} from "./TileGridComponent";
+import {TileGridData} from "./TileGridData";
+
+export default {
+  title: 'Sections/Tile Grid',
+  parameters: {
+    layout: 'fullscreen',
+  },
+  args: {
+    headline: 'Daten und Fakten auf einen Blick',
+    tiles: TileGridData,
+  }
+}
+
+const Template = ({...args}) => {
+  return createTileGrid({...args});
+};
+
+export const TileGrid = Template.bind({});
+TileGrid.args = {};

gfi-ihk-2024/stories/sections/tile-grid/TileGridComponent.js

@@ -0,0 +1,51 @@
+import './tile-grid.scss';
+import {createElement, createImage} from "../../_global/scripts/helpers";
+import {TileGridData} from "./TileGridData";
+import IHKTileGrid from "./tile-grid";
+import IHKEventOverviewTiles from "../eventoverview-stage/eventoverview";
+
+export const createTileGrid = ({
+  headline = 'Daten und Fakten auf einen Blick',
+  tiles = TileGridData,
+}) => {
+  const section = createElement('section', ['tile-grid']);
+  const container = createElement('div', ['container'], null, section);
+  createElement('h2', [], headline, container);
+  const row = createElement('div', ['row'], null, container);
+
+  tiles.map((group) => {
+    const col = createElement('div', ['col'], null, row);
+    const head = createElement('div', ['tile-head'], null, col);
+    const tileLink = createElement('a', ['tile-head-outer'], null, head);
+    tileLink.href = group.titleUrl;
+    createElement('h3', ['like-h4'], group.title, tileLink);
+
+    group.tiles.map((item) => {
+      const tile = createElement('div', ['tile'], null, col);
+      let tileLink;
+      if (item.url) {
+        tileLink = createElement('a', ['tile-outer'], null, tile);
+        tileLink.href = item.url;
+      } else {
+        tileLink = createElement('span', ['tile-outer'], null, tile);
+      }
+      if (item.icon) {
+        const iconBox = createElement('div', ['icon'], null, tileLink);
+        createImage(item.icon, 220, 220, ['icon'], [], iconBox);
+      }
+      if (item.dynamicIcon) {
+        const iconBox = createElement('div', ['icon','dynamic-icon'], null, tileLink);
+        iconBox.classList.add(item.dynamicIcon);
+      }
+      const p = createElement('p', [], null, tileLink);
+      const num = createElement('span', ['number'], item.number, p);
+      if (item.unit) {
+        createElement('small', [], item.unit, num);
+      }
+      createElement('span', ['label'], item.label, p);
+    })
+    new IHKTileGrid($(section));
+  })
+
+  return section;
+}

gfi-ihk-2024/stories/sections/tile-grid/TileGridData.js

@@ -0,0 +1,128 @@
+export const TileGridData = [
+  {
+    title: 'Demokratie und ehrenamtliches Engagement',
+    titleUrl: '#',
+    tiles: [
+      {
+        icon: './dummy/tile-grid/tile-01.svg',
+        number: '5.235',
+        unit: null,
+        label: 'Vollversammlungs­mitglieder',
+      }, {
+        dynamicIcon: 'pictogram-bueroklammer',
+        number: '78',
+        unit: '%',
+        label: 'KMU-Vertreter in IHK-Vollversammlungen',
+        url: '#',
+      }, {
+        dynamicIcon: 'pictogram-gruppe-idee',
+        number: '22',
+        unit: '%',
+        label: 'weibliche Mitglieder in IHK-Vollversammlungen',
+        url: '#',
+      }, {
+        dynamicIcon: 'pictogram-rakete-a',
+        number: '163.000',
+        unit: null,
+        label: 'ehrenamtliche Prüfer in Aus- und Weiterbildung',
+        url: '#',
+      }, {
+        dynamicIcon: 'pictogram-reisepass',
+        number: '127.400',
+        unit: null,
+        label: 'männliche Mitglieder in IHK-Vollversammlungen',
+        url: '#',
+      },
+    ],
+  },
+  {
+    title: 'Bildung und Beruf',
+    titleUrl: '#',
+    tiles: [
+      {
+        number: '286.000',
+        unit: null,
+        label: 'abgenommene Abschlussprüfungen in der Ausbildung',
+        url: '#',
+      }, {
+        icon: './dummy/tile-grid/tile-06.svg',
+        number: '117.000',
+        unit: null,
+        label: 'Weiterbildungsprüfungen abgenommen',
+        url: '#',
+      }, {
+        icon: './dummy/tile-grid/tile-07.svg',
+        number: '126.000',
+        unit: null,
+        label: 'Sach- und Fachkundeprüfungen abgenommen',
+        url: '#',
+      },
+    ],
+  },
+  {
+    title: 'Services für Unternehmen',
+    titleUrl: '#',
+    tiles: [
+      {
+        number: '1.9',
+        unit: 'Mio.',
+        label: 'Außenwirtschafts­bescheinigungen ausgestellt',
+      }, {
+        icon: './dummy/tile-grid/tile-09.svg',
+        number: '177.000',
+        unit: null,
+        label: 'Einstiegsgespräche für Existenzgründer',
+        url: '#',
+      }, {
+        icon: './dummy/tile-grid/tile-10.svg',
+        number: '550.000',
+        unit: null,
+        label: 'Rechtsauskünfte',
+        url: '#',
+      }, {
+        icon: './dummy/tile-grid/tile-11.svg',
+        number: '80.500',
+        unit: null,
+        label: 'Unternehmensbesuche',
+        url: '#',
+      },
+    ],
+  },
+  {
+    title: 'Finanzierung und Mitgliedsbeitrag',
+    titleUrl: '#',
+    tiles: [
+      {
+        icon: './dummy/tile-grid/tile-12.svg',
+        number: '441',
+        unit: '€',
+        label: 'jährlicher Durchschnitts­beitrag für Unternehmen',
+        url: '#',
+      }, {
+        icon: './dummy/tile-grid/tile-13.svg',
+        number: '589',
+        unit: '€',
+        label: 'jährlicher Durchschnitts&shy;beitrag für <br> HR-Unternehmen',
+        url: '#',
+      }, {
+        icon: './dummy/tile-grid/tile-14.svg',
+        number: '1,65',
+        unit: 'Mrd. €',
+        label: 'Gesamterträge <br> der IHKs',
+        url: '#',
+      }, {
+        icon: './dummy/tile-grid/tile-15.svg',
+        number: '1,5',
+        unit: 'Mrd. €',
+        label: 'Gesamtaufwendungen <br> der IHKs',
+        url: '#',
+      }, {
+        icon: './dummy/tile-grid/tile-16.svg',
+        number: '8.851',
+        unit: null,
+        label: 'IHK-Mitarbeiterinnen und Mitarbeiter',
+        url: '#',
+      },
+    ],
+  },
+]

gfi-ihk-2024/stories/sections/tile-grid/tile-grid.js

@@ -0,0 +1,57 @@
+import $ from 'jquery';
+
+class IHKTileGrid {
+  constructor(section) {
+    this.$dynamicIcon = $(section);
+    this.iconSize();
+
+    // Event-Listener für Resize
+    $(window).on('resize', () => {
+      this.iconSize();
+    });
+  }
+
+  iconSize() {
+    // Die Höhe des Parent-Elements (tile-outer) holen
+    const $tileOuter = this.$dynamicIcon.closest('.tile-outer');
+
+    // Prüfen ob das Element existiert und sichtbar ist
+    if ($tileOuter.length && $tileOuter.is(':visible')) {
+      const containerHeight = $tileOuter.outerHeight();
+
+      // Nur setzen wenn containerHeight gültig ist
+      if (containerHeight && containerHeight > 0) {
+        this.$dynamicIcon.css('--icon-height', `${containerHeight}px`);
+        console.log('Icon höhe gesetzt:', containerHeight, 'px für', this.$dynamicIcon);
+      } else {
+        console.warn('Ungültige Höhe:', containerHeight);
+        // Fallback setzen
+        this.$dynamicIcon.css('--icon-height', '100%');
+      }
+    } else {
+      console.warn('Tile-outer nicht gefunden oder nicht sichtbar');
+      // Fallback setzen
+      this.$dynamicIcon.css('--icon-height', '100%');
+    }
+  }
+}
+
+export default IHKTileGrid;
+
+// Nur einmal initialisieren, aber mit besserer Timing-Sicherheit
+function initIcons() {
+  $('.tile-grid .dynamic-icon').each((i, el) => {
+    new IHKTileGrid(el);
+  });
+}
+
+// Bei allen relevanten Events ausführen
+$('body').on('ihk-init dynamic-component-loaded gfi-dynamic-init', initIcons);
+
+// Beim Laden der Seite und kurz danach nochmal (für Storybook)
+$(document).ready(() => {
+  initIcons();
+
+  // Nach kurzer Verzögerung nochmal ausführen, falls DOM noch ändert
+  setTimeout(initIcons, 500);
+});

gfi-ihk-2024/stories/sections/tile-grid/tile-grid.scss

@@ -0,0 +1,234 @@
+@import '../../_global/styles/mixins';
+@import '../../_global/styles/vars';
+
+.tile-grid {
+  margin: var(--section-margin) auto;
+
+  h2 {
+    margin-bottom: 0.2em;
+  }
+
+  @media(max-width: 567px) {
+    max-width: 340px;
+  }
+
+  @media(min-width: 768px) and (max-width: 999px) {
+    max-width: 88%;
+    padding: 0 15px;
+  }
+  .row {
+    margin: 0 -5px;
+  }
+
+  .col {
+    flex: 1 1 100%;
+    max-width: 25%;
+    padding: 5px;
+    margin-bottom: 200px;
+
+    @media(max-width: 1000px) {
+      max-width: 50%;
+    }
+
+    @media(max-width: 567px) {
+      max-width: 100%;
+      margin-bottom: 100px;
+    }
+
+    &:nth-child(odd) {
+      .tile .tile-outer {
+        background-color: var(--theme-color-secondary-dimmed);
+        color: var(--theme-color-secondary-intensed);
+      }
+
+      .tile-head-outer {
+        background-color: var(--theme-color-secondary-intensed);
+      }
+    }
+  }
+
+  .tile-head {
+    position: sticky;
+    display: block;
+    top: 100px;
+    padding: 20px 0 10px;
+    z-index: 1;
+    background-color: #fff;
+
+    @media(max-width: 767px) {
+      top: 75px;
+    }
+
+    .like-h4 {
+      min-height: 3.6em;
+      margin: 5px 0;
+      max-width: 10em;
+    }
+  }
+
+  .tile-head-outer {
+    position: relative;
+    display: block;
+    color: white;
+    background-color: var(--theme-color-primary);
+    transition: 0.2s ease;
+    border-top-right-radius: 30px;
+    border-top-left-radius: 30px;
+    padding: 5% 16% 5% 7%;
+    text-decoration-color: rgba(white, 0);
+    @include focus-visible;
+  }
+
+  .tile {
+    padding: 0 0 10px;
+
+    &:last-child {
+      margin-bottom: -200px;
+
+      @media(max-width: 567px) {
+        margin-bottom: -100px;
+      }
+    }
+
+    .tile-outer {
+      position: relative;
+      display: block;
+      background-color: var(--theme-color-primary-dimmed-04);
+      transition: 0.2s ease;
+      @include focus-visible;
+
+
+      &.focus-visible, &:focus {
+        z-index: 1;
+      }
+
+      &::before {
+        content: '';
+        display: block;
+        padding-top: 60%;
+        background-color: #fff;
+        opacity: 0;
+        transition: 0.2s ease;
+
+        @media(max-width: 767px) {
+          padding-top: 55%;
+        }
+      }
+
+      &:hover::before {
+        opacity: 0.6;
+      }
+    }
+
+    span {
+      display: block;
+    }
+
+    .number {
+      font-size: var(--font-size-h1);
+      line-height: 1;
+      font-weight: 700;
+      font-family: 'Korb', sans-serif;
+      margin-left: -0.04em;
+
+      @media(max-width: 1200px) {
+        font-size: 56px;
+      }
+      @media(max-width: 999px) {
+        font-size: 62px;
+      }
+
+      small {
+        font-size: 0.6em;
+        margin-left: 0.2em;
+      }
+    }
+
+    .icon {
+      @include full-size;
+      text-align: right;
+
+      img {
+        width: auto;
+        height: 100%;
+        float: right;
+      }
+      &.dynamic-icon {
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+        &:before {
+          display: block;
+          height: 100%;
+          width: 100%;
+          position: absolute;
+          right: -8px;
+          top: 0;
+          font-family: "Pictograms", sans-serif;
+          color: var(--theme-color-white);
+          font-size: calc(var(--icon-height, 1em) + 14px);
+          line-height: 1;
+        }
+      }
+    }
+
+    p {
+      @include full-size;
+      margin: 0;
+      padding: 6% 16% 6.5% 7%;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      line-height: 1.2;
+
+      @media(max-width: 1200px) and (min-width: 1000px) {
+        font-size: 17px;
+        margin-bottom: 1%;
+      }
+    }
+  }
+
+  .tile-head-outer, .tile a {
+    &::after {
+      @include icon-small-arrow-right-simple;
+      font-family: 'Icons', sans-serif;
+      position: absolute;
+      bottom: 0;
+      right: 0;
+      margin: 7% 5%;
+      font-size: var(--icon-size);
+      line-height: 1;
+      transition: 0.2s ease;
+
+      @media(max-width: 1200px) and (min-width: 1000px) {
+        font-size: 24px;
+      }
+    }
+
+    &:hover::after {
+      transform: translateX(20%);
+    }
+  }
+
+  // So dass die bilder ins target kopiert werden
+  /*
+  .fake-class-for-images{
+    background-image: url('../../../img/kacheln/tile-01.svg');
+    background-image: url('../../../img/kacheln/tile-02.svg');
+    background-image: url('../../../img/kacheln/tile-03.svg');
+    background-image: url('../../../img/kacheln/tile-04.svg');
+    background-image: url('../../../img/kacheln/tile-05.svg');
+    background-image: url('../../../img/kacheln/tile-06.svg');
+    background-image: url('../../../img/kacheln/tile-07.svg');
+    background-image: url('../../../img/kacheln/tile-08.svg');
+    background-image: url('../../../img/kacheln/tile-09.svg');
+    background-image: url('../../../img/kacheln/tile-10.svg');
+    background-image: url('../../../img/kacheln/tile-11.svg');
+    background-image: url('../../../img/kacheln/tile-12.svg');
+    background-image: url('../../../img/kacheln/tile-13.svg');
+    background-image: url('../../../img/kacheln/tile-14.svg');
+    background-image: url('../../../img/kacheln/tile-15.svg');
+    background-image: url('../../../img/kacheln/tile-16.svg');
+  }
+  */
+}