From e79a2c0fd1bdf160386615e67bcff04154e680da Mon Sep 17 00:00:00 2001 From: FlorianEisenmenger Date: Wed, 3 Dec 2025 15:14:49 +0100 Subject: [PATCH] Tile Grid Copy --- .../tile-grid-wood/TileGridWood.stories.js | 8 +- .../tile-grid-wood/TileGridWoodComponent.js | 10 +- .../tile-grid-wood/TileGridWoodData.js | 2 +- .../sections/tile-grid-wood/tile-grid-wood.js | 6 +- .../sections/tile-grid/TileGrid.stories.js | 20 ++ .../sections/tile-grid/TileGridComponent.js | 51 ++++ .../sections/tile-grid/TileGridData.js | 128 ++++++++++ .../stories/sections/tile-grid/tile-grid.js | 57 +++++ .../stories/sections/tile-grid/tile-grid.scss | 234 ++++++++++++++++++ 9 files changed, 503 insertions(+), 13 deletions(-) create mode 100644 gfi-ihk-2024/stories/sections/tile-grid/TileGrid.stories.js create mode 100644 gfi-ihk-2024/stories/sections/tile-grid/TileGridComponent.js create mode 100644 gfi-ihk-2024/stories/sections/tile-grid/TileGridData.js create mode 100644 gfi-ihk-2024/stories/sections/tile-grid/tile-grid.js create mode 100644 gfi-ihk-2024/stories/sections/tile-grid/tile-grid.scss 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: '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­beitrag 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'); + } + */ +}