diff --git a/gfi-ihk-2024/stories/sections/tile-grid-wood/TileGridWood.stories.js b/gfi-ihk-2024/stories/sections/tile-grid-wood/TileGridWood.stories.js
index 29f09b6..551018e 100644
--- a/gfi-ihk-2024/stories/sections/tile-grid-wood/TileGridWood.stories.js
+++ b/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,
}
}
diff --git a/gfi-ihk-2024/stories/sections/tile-grid-wood/TileGridWoodComponent.js b/gfi-ihk-2024/stories/sections/tile-grid-wood/TileGridWoodComponent.js
index c65bd67..cc8ed82 100644
--- a/gfi-ihk-2024/stories/sections/tile-grid-wood/TileGridWoodComponent.js
+++ b/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;
diff --git a/gfi-ihk-2024/stories/sections/tile-grid-wood/TileGridWoodData.js b/gfi-ihk-2024/stories/sections/tile-grid-wood/TileGridWoodData.js
index 48def78..ea70fa7 100644
--- a/gfi-ihk-2024/stories/sections/tile-grid-wood/TileGridWoodData.js
+++ b/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: '#',
diff --git a/gfi-ihk-2024/stories/sections/tile-grid-wood/tile-grid-wood.js b/gfi-ihk-2024/stories/sections/tile-grid-wood/tile-grid-wood.js
index 8257c35..39b1aa7 100644
--- a/gfi-ihk-2024/stories/sections/tile-grid-wood/tile-grid-wood.js
+++ b/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);
});
}
diff --git a/gfi-ihk-2024/stories/sections/tile-grid/TileGrid.stories.js b/gfi-ihk-2024/stories/sections/tile-grid/TileGrid.stories.js
new file mode 100644
index 0000000..29f09b6
--- /dev/null
+++ b/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 = {};
diff --git a/gfi-ihk-2024/stories/sections/tile-grid/TileGridComponent.js b/gfi-ihk-2024/stories/sections/tile-grid/TileGridComponent.js
new file mode 100644
index 0000000..c65bd67
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/gfi-ihk-2024/stories/sections/tile-grid/TileGridData.js b/gfi-ihk-2024/stories/sections/tile-grid/TileGridData.js
new file mode 100644
index 0000000..48def78
--- /dev/null
+++ b/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: 'Vollversammlungsmitglieder',
+ }, {
+ 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ßenwirtschaftsbescheinigungen 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 Durchschnittsbeitrag für Unternehmen',
+ url: '#',
+ }, {
+ icon: './dummy/tile-grid/tile-13.svg',
+ number: '589',
+ unit: '€',
+ label: 'jährlicher Durchschnittsbeitrag für
HR-Unternehmen',
+ url: '#',
+ }, {
+ icon: './dummy/tile-grid/tile-14.svg',
+ number: '1,65',
+ unit: 'Mrd. €',
+ label: 'Gesamterträge
der IHKs',
+ url: '#',
+ }, {
+ icon: './dummy/tile-grid/tile-15.svg',
+ number: '1,5',
+ unit: 'Mrd. €',
+ label: 'Gesamtaufwendungen
der IHKs',
+ url: '#',
+ }, {
+ icon: './dummy/tile-grid/tile-16.svg',
+ number: '8.851',
+ unit: null,
+ label: 'IHK-Mitarbeiterinnen und Mitarbeiter',
+ url: '#',
+ },
+ ],
+ },
+]
\ No newline at end of file
diff --git a/gfi-ihk-2024/stories/sections/tile-grid/tile-grid.js b/gfi-ihk-2024/stories/sections/tile-grid/tile-grid.js
new file mode 100644
index 0000000..8257c35
--- /dev/null
+++ b/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);
+});
\ No newline at end of file
diff --git a/gfi-ihk-2024/stories/sections/tile-grid/tile-grid.scss b/gfi-ihk-2024/stories/sections/tile-grid/tile-grid.scss
new file mode 100644
index 0000000..7a74acf
--- /dev/null
+++ b/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');
+ }
+ */
+}