From 5db6f8714bf664c9f6030070ffdcf795cf1a303f Mon Sep 17 00:00:00 2001 From: FlorianEisenmenger Date: Fri, 11 Jul 2025 12:57:58 +0200 Subject: [PATCH] bugfixes --- .../stories/_global/gfi-styles/_magazine.scss | 18 +- gfi-ihk-2024/stories/_global/styles/grid.scss | 13 +- .../components/gallery/GalleryComponent.js | 1 + .../stories/components/gallery/GalleryData.js | 207 ++++++++++-------- .../stories/components/gallery/gallery.js | 4 +- .../magazine-header/magazine-header.scss | 13 +- .../stories/pages/article/Article.stories.js | 8 +- .../stories/sections/slider/slider.js | 4 +- 8 files changed, 152 insertions(+), 116 deletions(-) diff --git a/gfi-ihk-2024/stories/_global/gfi-styles/_magazine.scss b/gfi-ihk-2024/stories/_global/gfi-styles/_magazine.scss index 8df2608..edc33a9 100644 --- a/gfi-ihk-2024/stories/_global/gfi-styles/_magazine.scss +++ b/gfi-ihk-2024/stories/_global/gfi-styles/_magazine.scss @@ -14,12 +14,11 @@ line-height: 0; text-align: center; pointer-events: none; - margin-bottom: 10px; + margin-bottom: 0; @media(max-width: 767px) { top: 80px; height: 70px; - margin-bottom: 0; } @media(max-width: 359px) { top: 70px; @@ -62,23 +61,8 @@ font-size: 36px; } - img { - display: block; - width: auto; - height: 75px; - - @media(max-width: 767px) { - height: 56px; - margin: 0 auto; - } - } - &.narrow { height: 50px; - - img { - height: 40px; - } } } diff --git a/gfi-ihk-2024/stories/_global/styles/grid.scss b/gfi-ihk-2024/stories/_global/styles/grid.scss index 78df22d..1066670 100644 --- a/gfi-ihk-2024/stories/_global/styles/grid.scss +++ b/gfi-ihk-2024/stories/_global/styles/grid.scss @@ -7,15 +7,22 @@ } @media(min-width: 1200px) { - .page-wrapper { - border-top-width: 160px; - } .magazine-start, .magazine-article { .page-wrapper { border-top: var(--header-height) solid white; } } } +@media(min-width: 1400px) { + .page-wrapper { + border-top-width: 160px; + } +} +@media(min-width: 1200px) and (max-width: 1399px) { + .magazine-header + .page-wrapper { + border-top-width: 100px; + } +} .container { width: var(--container-width); diff --git a/gfi-ihk-2024/stories/components/gallery/GalleryComponent.js b/gfi-ihk-2024/stories/components/gallery/GalleryComponent.js index 3ef8a7d..70e51cf 100644 --- a/gfi-ihk-2024/stories/components/gallery/GalleryComponent.js +++ b/gfi-ihk-2024/stories/components/gallery/GalleryComponent.js @@ -24,6 +24,7 @@ export const createGallery = imageDiv.dataset.full = item.src; imageDiv.dataset.width = item.width; imageDiv.dataset.height = item.height; + imageDiv.dataset.alt = item.alt; if (item.copyright) { imageDiv.dataset.copyright = item.copyright; } diff --git a/gfi-ihk-2024/stories/components/gallery/GalleryData.js b/gfi-ihk-2024/stories/components/gallery/GalleryData.js index 46a7dea..16556b5 100644 --- a/gfi-ihk-2024/stories/components/gallery/GalleryData.js +++ b/gfi-ihk-2024/stories/components/gallery/GalleryData.js @@ -1,90 +1,121 @@ export const galleryData = [ - { - src: './dummy/placeholder-3-2.svg', - width: 1470, - height: 980, - copyright: '© Shutterstock' - }, - { - src: './dummy/placeholder-2-3.svg', - width: 736, - height: 981, - copyright: '© Shutterstock' - }, - { - src: './dummy/placeholder-3-2.svg', - width: 1470, - height: 980, - copyright: '© Shutterstock' - }, - { - src: './dummy/placeholder-4-3.svg', - width: 1200, - height: 980, - }, - { - src: './dummy/placeholder-3-4.svg', - width: 880, - height: 1200, - }, - { - src: './dummy/placeholder-3-2.svg', - width: 1470, - height: 980, - }, - { - src: './dummy/placeholder-3-4.svg', - width: 800, - height: 1100, - }, - { - src: './dummy/placeholder-3-4.svg', - width: 900, - height: 1200, - }, - { - src: './dummy/placeholder-3-2.svg', - width: 1470, - height: 980, - }, - { - src: './dummy/placeholder-1-1.svg', - width: 1200, - height: 1200, - }, - { - src: './dummy/placeholder-3-4.svg', - width: 880, - height: 1200, - }, - { - src: './dummy/placeholder-3-2.svg', - width: 1470, - height: 980, - }, - { - src: './dummy/placeholder-3-4.svg', - width: 800, - height: 1100, - }, - { - src: './dummy/placeholder-3-4.svg', - width: 900, - height: 1200, - }, - { - src: './dummy/placeholder-3-2.svg', - width: 1470, - height: 980, - }, - { - src: './dummy/placeholder-4-3.svg', - width: 1200, - height: 980, - }, - { - src: './dummy/placeholder-1-1.svg', - width: 1200, - height: 1200, - }, + { + src: './dummy/placeholder-3-2.svg', + width: 1470, + height: 980, + copyright: '© Shutterstock', + alt: 'Dummy Alt Text' + }, + { + src: './dummy/placeholder-2-3.svg', + width: 736, + height: 981, + copyright: '© Shutterstock', + alt: 'Dummy Alt Text' + }, + { + src: './dummy/placeholder-3-2.svg', + width: 1470, + height: 980, + copyright: '© Shutterstock', + alt: 'Dummy Alt Text' + }, + { + src: './dummy/placeholder-4-3.svg', + width: 1200, + height: 980, + copyright: '© Shutterstock', + alt: 'Dummy Alt Text' + }, + { + src: './dummy/placeholder-3-4.svg', + width: 880, + height: 1200, + copyright: '© Shutterstock', + alt: 'Dummy Alt Text' + }, + { + src: './dummy/placeholder-3-2.svg', + width: 1470, + height: 980, + copyright: '© Shutterstock', + alt: 'Dummy Alt Text' + }, + { + src: './dummy/placeholder-3-4.svg', + width: 800, + height: 1100, + copyright: '© Shutterstock', + alt: 'Dummy Alt Text' + }, + { + src: './dummy/placeholder-3-4.svg', + width: 900, + height: 1200, + copyright: '© Shutterstock', + alt: 'Dummy Alt Text' + }, + { + src: './dummy/placeholder-3-2.svg', + width: 1470, + height: 980, + copyright: '© Shutterstock', + alt: 'Dummy Alt Text' + }, + { + src: './dummy/placeholder-1-1.svg', + width: 1200, + height: 1200, + copyright: '© Shutterstock', + alt: 'Dummy Alt Text' + }, + { + src: './dummy/placeholder-3-4.svg', + width: 880, + height: 1200, + copyright: '© Shutterstock', + alt: 'Dummy Alt Text' + }, + { + src: './dummy/placeholder-3-2.svg', + width: 1470, + height: 980, + copyright: '© Shutterstock', + alt: 'Dummy Alt Text' + }, + { + src: './dummy/placeholder-3-4.svg', + width: 800, + height: 1100, + copyright: '© Shutterstock', + alt: 'Dummy Alt Text' + }, + { + src: './dummy/placeholder-3-4.svg', + width: 900, + height: 1200, + copyright: '© Shutterstock', + alt: 'Dummy Alt Text' + }, + { + src: './dummy/placeholder-3-2.svg', + width: 1470, + height: 980, + copyright: '© Shutterstock', + alt: 'Dummy Alt Text' + }, + { + src: './dummy/placeholder-4-3.svg', + width: 1200, + height: 980, + copyright: '© Shutterstock', + alt: 'Dummy Alt Text' + }, + { + src: './dummy/placeholder-1-1.svg', + width: 1200, + height: 1200, + copyright: '© Shutterstock', + alt: 'Dummy Alt Text' + }, ] diff --git a/gfi-ihk-2024/stories/components/gallery/gallery.js b/gfi-ihk-2024/stories/components/gallery/gallery.js index 2ce2611..0cadcfd 100644 --- a/gfi-ihk-2024/stories/components/gallery/gallery.js +++ b/gfi-ihk-2024/stories/components/gallery/gallery.js @@ -189,7 +189,7 @@ class IHKGallery { item.removeClass('loading').addClass('loaded'); }); img.attr('src', (this.section.data('type') === 'masonry' ? item.data('full') : item.data('thumb'))).appendTo(item.find('a')); - img.attr('alt', item.attr('alt')).attr('title', item.attr("title")); + img.attr('alt', item.data('alt')).attr('title', item.data("title")); if (item.data('copyright')) { $('').html(item.data('copyright')).appendTo(item.find('a')); @@ -218,7 +218,7 @@ class IHKGallery { const item = $(element); const slide = $('
').appendTo(slides); - const imgElement = $('
').attr('data-src', item.data('full')).attr('data-copyright', item.data('copyright')).attr("title", item.attr("title")); + const imgElement = $('
').attr('data-src', item.data('full')).attr('data-copyright', item.data('copyright')).attr('data-alt', item.data('alt')).attr("title", item.attr("title")); if (this.section.data("render-download") === true) { imgElement.attr('data-download', item.data('download')); } diff --git a/gfi-ihk-2024/stories/components/magazine-header/magazine-header.scss b/gfi-ihk-2024/stories/components/magazine-header/magazine-header.scss index 4db0da4..cf15f53 100644 --- a/gfi-ihk-2024/stories/components/magazine-header/magazine-header.scss +++ b/gfi-ihk-2024/stories/components/magazine-header/magazine-header.scss @@ -55,8 +55,14 @@ img { display: block; width: auto; - height: calc(var(--magazine-header-height) * 7 / 9); + height: auto; + max-height: 75px; margin: 0 auto; + + @media(max-width: 767px) { + max-height: 56px; + margin: 0 auto; + } } .image-and-text { @@ -103,6 +109,11 @@ margin-bottom: 0; } + img { + height: auto; + max-height: 40px; + } + .title { font-size: var(--font-size-h3); } diff --git a/gfi-ihk-2024/stories/pages/article/Article.stories.js b/gfi-ihk-2024/stories/pages/article/Article.stories.js index 5fd36a6..c865613 100644 --- a/gfi-ihk-2024/stories/pages/article/Article.stories.js +++ b/gfi-ihk-2024/stories/pages/article/Article.stories.js @@ -28,9 +28,9 @@ ArticlePageMicrosite.args = { --theme-color-primary-dimmed-02: #B0C4D6 !important; --theme-color-primary-dimmed-03: #F9BFDF !important; --theme-color-primary-dimmed-04: #FCE6F2 !important; - --theme-color-secondary: #077EAF !important; - --theme-color-secondary-microsite: #077EAF !important; - --theme-color-secondary-intensed: #077EAF !important; + --theme-color-secondary: #0073A2 !important; + --theme-color-secondary-microsite: #0073A2 !important; + --theme-color-secondary-intensed: #0073A2 !important; --theme-color-secondary-dimmed: #E6F2F7 !important; --theme-color-neutral: #636D76 !important; --theme-color-neutral-background: #EFF3F6 !important; @@ -38,7 +38,7 @@ ArticlePageMicrosite.args = { --theme-color-text-intensed: #000000 !important; --theme-color-text: #000000 !important; --theme-color-link: #003366 !important; - --theme-color-link-hover: #077EAF !important; + --theme-color-link-hover: #0073A2 !important; --theme-color-gradient-01: #E6007E !important; --theme-color-gradient-02: #9f1f69 !important; --theme-color-gradient-03: #563f54 !important; diff --git a/gfi-ihk-2024/stories/sections/slider/slider.js b/gfi-ihk-2024/stories/sections/slider/slider.js index 86a36b4..268aad0 100644 --- a/gfi-ihk-2024/stories/sections/slider/slider.js +++ b/gfi-ihk-2024/stories/sections/slider/slider.js @@ -426,6 +426,7 @@ class IHKSlider { const nextItem = t.nextWrapper.find('[data-index="' + index + '"]').removeClass('preload').find('.image-box'); nextItem.append(loadedImage.clone()); + nextItem.find('img').attr('alt', ib.attr('data-alt') || ''); // Copyright für Next-Wrapper if (ib.attr('data-copyright')) { $('