From 67222184014106e05105d29b47a0012ec90354ba Mon Sep 17 00:00:00 2001 From: FlorianEisenmenger Date: Tue, 1 Apr 2025 12:55:05 +0200 Subject: [PATCH] copyright fixes and re-activate old theme --- .../stories/_global/styles/_mixins.scss | 30 ++++++++++++------- .../stories/components/gallery/GalleryData.js | 2 ++ .../stories/components/gallery/gallery.js | 15 ++++++++-- .../stories/components/gallery/gallery.scss | 3 ++ .../stories/pages/article/Article.stories.js | 22 +++++++------- .../sections/slider/SliderComponent.js | 3 ++ .../stories/sections/slider/SliderData.js | 2 ++ .../stories/sections/slider/slider.js | 27 ++++++++++++++--- .../stories/sections/slider/slider.scss | 14 +++++---- .../stories/sections/survey/survey.scss | 12 ++++++-- 10 files changed, 93 insertions(+), 37 deletions(-) diff --git a/gfi-ihk-2024/stories/_global/styles/_mixins.scss b/gfi-ihk-2024/stories/_global/styles/_mixins.scss index 192bc54..1b242ac 100644 --- a/gfi-ihk-2024/stories/_global/styles/_mixins.scss +++ b/gfi-ihk-2024/stories/_global/styles/_mixins.scss @@ -104,23 +104,31 @@ display: block; left: 100%; bottom: 0; - color: var(--theme-color-white); font-size: 12px; + text-align: left; line-height: 1.2; - text-shadow: -2px 2px 0 #000; z-index: 2; - padding: 2px 6px 2px 4px; transform-origin: 0 100%; transform: rotate(-90deg); - background: #012d59; - white-space: nowrap; - max-width: calc(66.6% + 7px); - overflow: hidden; transition: 0.3s ease; - @media(max-width: 767px) { - font-size: 10px; - max-width: 100%; - } + + color: white; + text-shadow: 0 0 3px rgba(black, 0.6), 0 0 8px rgba(black, 0.6); + width: calc(66.6% + 7px); + padding: 8px 18px; + + //color: var(--theme-color-white); + //text-shadow: -2px 2px 0 #000; + //padding: 2px 6px 2px 4px; + //background: #012d59; + //white-space: nowrap; + //max-width: calc(66.6% + 7px); + //overflow: hidden; + // + //@media(max-width: 767px) { + // font-size: 10px; + // max-width: 100%; + //} } @mixin form-field { diff --git a/gfi-ihk-2024/stories/components/gallery/GalleryData.js b/gfi-ihk-2024/stories/components/gallery/GalleryData.js index 25fb2d0..980832f 100644 --- a/gfi-ihk-2024/stories/components/gallery/GalleryData.js +++ b/gfi-ihk-2024/stories/components/gallery/GalleryData.js @@ -9,11 +9,13 @@ export const galleryData = [ 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', diff --git a/gfi-ihk-2024/stories/components/gallery/gallery.js b/gfi-ihk-2024/stories/components/gallery/gallery.js index 4c5c4e9..3becacb 100644 --- a/gfi-ihk-2024/stories/components/gallery/gallery.js +++ b/gfi-ihk-2024/stories/components/gallery/gallery.js @@ -110,6 +110,10 @@ class IHKGallery { const a = $('').attr('data-index', i).appendTo(item); a.css('padding-top', Math.round(item.data('height') / item.data('width') * 10000) / 100 + '%'); + // Copyright für Masonry-Element vorbereiten + if (item.data('copyright')) { + a.append('' + item.data('copyright') + ''); + } }) const btnText = window.ihk.translations.loadMoreImages; @@ -184,7 +188,12 @@ 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")).appendTo(item.find('a')); + img.attr('alt', item.attr('alt')).attr('title', item.attr("title")); + + if (item.data('copyright')) { + $('').html(item.data('copyright')).appendTo(item.find('a')); + } + this.visibleItems.push(item); item.find('a').removeAttr('tabindex'); //newItems.push(item); @@ -208,13 +217,13 @@ class IHKGallery { const item = $(element); const slide = $('
').appendTo(slides); - const imgElement = $('
').attr('data-src', item.data('full')).attr("title", item.attr("title")); - + const imgElement = $('
').attr('data-src', item.data('full')).attr('data-copyright', item.data('copyright')).attr("title", item.attr("title")); if (this.section.data("render-download") === true) { imgElement.attr('data-download', item.data('download')); } imgElement.appendTo(slide); + if (item.find('span').length > 0) { $('
').appendTo(slide).append(item.find('span.image-description,span.copyright').clone()); } diff --git a/gfi-ihk-2024/stories/components/gallery/gallery.scss b/gfi-ihk-2024/stories/components/gallery/gallery.scss index 9c07498..a443443 100644 --- a/gfi-ihk-2024/stories/components/gallery/gallery.scss +++ b/gfi-ihk-2024/stories/components/gallery/gallery.scss @@ -308,6 +308,9 @@ max-width: calc(100vw - 200px); } } + .copyright { + @include copyright; + } } .text-box { diff --git a/gfi-ihk-2024/stories/pages/article/Article.stories.js b/gfi-ihk-2024/stories/pages/article/Article.stories.js index 04d0edc..5fd36a6 100644 --- a/gfi-ihk-2024/stories/pages/article/Article.stories.js +++ b/gfi-ihk-2024/stories/pages/article/Article.stories.js @@ -21,24 +21,24 @@ export const ArticlePageMicrosite = Template.bind({}); ArticlePageMicrosite.args = { styleBlock: ` :root { - --theme-color-primary: #E6007E !important; - --theme-color-primary-microsite: #000000 !important; + --theme-color-primary: #003366 !important; + --theme-color-primary-microsite: #003366 !important; --theme-color-primary-rgb: 230,0,126 !important; - --theme-color-primary-dimmed-01: #EB3398 !important; - --theme-color-primary-dimmed-02: #F063B0 !important; + --theme-color-primary-dimmed-01: #335C85 !important; + --theme-color-primary-dimmed-02: #B0C4D6 !important; --theme-color-primary-dimmed-03: #F9BFDF !important; --theme-color-primary-dimmed-04: #FCE6F2 !important; - --theme-color-secondary: #563F54 !important; - --theme-color-secondary-microsite: #E6007E !important; - --theme-color-secondary-intensed: #563F54 !important; - --theme-color-secondary-dimmed: #EEECEE !important; - --theme-color-neutral: #E6007E !important; + --theme-color-secondary: #077EAF !important; + --theme-color-secondary-microsite: #077EAF !important; + --theme-color-secondary-intensed: #077EAF !important; + --theme-color-secondary-dimmed: #E6F2F7 !important; + --theme-color-neutral: #636D76 !important; --theme-color-neutral-background: #EFF3F6 !important; --theme-color-background: #FFFFFF !important; --theme-color-text-intensed: #000000 !important; --theme-color-text: #000000 !important; - --theme-color-link: #E6007E !important; - --theme-color-link-hover: #E6007E !important; + --theme-color-link: #003366 !important; + --theme-color-link-hover: #077EAF !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/SliderComponent.js b/gfi-ihk-2024/stories/sections/slider/SliderComponent.js index bb7972a..cbe7b61 100644 --- a/gfi-ihk-2024/stories/sections/slider/SliderComponent.js +++ b/gfi-ihk-2024/stories/sections/slider/SliderComponent.js @@ -22,6 +22,9 @@ export const createSlider = if (slideData.imageSrc && slideData.imageSrc.length > 0) { const imageBox = createElement('div', ['image-box'], null, outer); createImage(slideData.imageSrc, 900, 600, 'Slide ' + index, [], imageBox); + if (slideData.copyright && slideData.copyright.length > 0) { + createElement('span', ['copyright'], slideData.copyright, imageBox); + } if (contextBoxContentImg) { const contentBoxImg = createElement('div', ['context-box', 'context-box--image'], null, imageBox); createImage(contextBoxContentImg, 200, 50, '', [], contentBoxImg); diff --git a/gfi-ihk-2024/stories/sections/slider/SliderData.js b/gfi-ihk-2024/stories/sections/slider/SliderData.js index c4ff86b..6096b6c 100644 --- a/gfi-ihk-2024/stories/sections/slider/SliderData.js +++ b/gfi-ihk-2024/stories/sections/slider/SliderData.js @@ -4,6 +4,7 @@ export const sliderData = [ headline: 'Möglichkeiten der Integration', copy: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.', imageSrc: './dummy/placeholder-3-2.svg', + copyright: 'Quelle: DigiZeitschriften e.V.', cta: 'Mehr erfahren', link: '#', contextImg: './logos/wirtschaftsdialoge.svg', @@ -22,6 +23,7 @@ export const sliderData = [ headline: 'Möglichkeiten der Integration', copy: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.', imageSrc: './dummy/placeholder-3-2.svg', + copyright: '© Marco Mustermann für Mustervideos', cta: 'Mehr erfahren', link: '#', } diff --git a/gfi-ihk-2024/stories/sections/slider/slider.js b/gfi-ihk-2024/stories/sections/slider/slider.js index aaad81a..64bbaba 100644 --- a/gfi-ihk-2024/stories/sections/slider/slider.js +++ b/gfi-ihk-2024/stories/sections/slider/slider.js @@ -423,13 +423,32 @@ class IHKSlider { const loadedImage = $(this).removeClass('loading'); const slide = loadedImage.closest('.slide').removeClass('preload'); const index = parseInt(slide.attr('data-index')); - t.nextWrapper.find('[data-index="' + index + '"]').removeClass('preload').find('.image-box').append(loadedImage.clone()); - t.prevWrapper.find('[data-index="' + index + '"]').removeClass('preload').find('.image-box').append(loadedImage.clone()); - }) + + const nextItem = t.nextWrapper.find('[data-index="' + index + '"]').removeClass('preload').find('.image-box'); + nextItem.append(loadedImage.clone()); + // Copyright für Next-Wrapper + if (ib.attr('data-copyright')) { + $('').html(ib.attr('data-copyright')).appendTo(nextItem); + } + const prevItem = t.prevWrapper.find('[data-index="' + index + '"]').removeClass('preload').find('.image-box'); + prevItem.append(loadedImage.clone()); + // Copyright für Prev-Wrapper + if (ib.attr('data-copyright')) { + $('').html(ib.attr('data-copyright')).appendTo(prevItem); + } + + //t.nextWrapper.find('[data-index="' + index + '"]').removeClass('preload').find('.image-box').append(loadedImage.clone()); + //t.prevWrapper.find('[data-index="' + index + '"]').removeClass('preload').find('.image-box').append(loadedImage.clone()); + }); img.attr('src', ib.attr('data-src')).appendTo(ib); - img.attr('data-download', ib.attr('data-download')).appendTo(ib); + img.attr('data-download', ib.attr('data-download')); img.attr('draggable', 'false').attr('ondragstart', 'return false;'); + + // Copyright für das Hauptbild hinzufügen + if (ib.attr('data-copyright')) { + $('').html(ib.attr('data-copyright')).appendTo(ib); + } } } diff --git a/gfi-ihk-2024/stories/sections/slider/slider.scss b/gfi-ihk-2024/stories/sections/slider/slider.scss index f7c190c..dd61153 100644 --- a/gfi-ihk-2024/stories/sections/slider/slider.scss +++ b/gfi-ihk-2024/stories/sections/slider/slider.scss @@ -141,9 +141,12 @@ } .image-box { - position: relative; order: 1; + position: relative; flex: 1 1 100%; + @media(min-width: 1000px) { + + } &:before { content: "";; @@ -175,9 +178,8 @@ .copyright { @include copyright; - left: calc(100% - 20px); - @media screen and (min-width: 901px) and (max-width: 999px) { - left: 100%; + @media(min-width: 1000px) { + left: calc(100% - 20px); } } @@ -301,10 +303,10 @@ right: 0; } @media(max-width: 567px) { - top: 60px; + top: 40px; } @media(max-width: 319px) { - top: 40px; + top: 20px; } } } diff --git a/gfi-ihk-2024/stories/sections/survey/survey.scss b/gfi-ihk-2024/stories/sections/survey/survey.scss index bda55a9..cba9bea 100644 --- a/gfi-ihk-2024/stories/sections/survey/survey.scss +++ b/gfi-ihk-2024/stories/sections/survey/survey.scss @@ -14,8 +14,12 @@ background-color: var(--theme-color-secondary-dimmed); border-bottom: var(--border-width) solid var(--theme-color-secondary); + legend { + margin: 0 0 0.75rem 0; + } + .text-box { - padding-bottom: 0; + padding: var(--content-box-padding) var(--content-box-padding) 0 var(--content-box-padding); font-size: var(--font-size-small); .kicker { @@ -223,7 +227,8 @@ &[data-size='lg'] { display: flex; - align-items: center; + //align-items: center; + align-items: flex-start; .text-box, .form-box { flex: 1 1 100%; @@ -233,6 +238,9 @@ .text-box { padding: var(--content-box-padding); margin-bottom: 0.1em; + .kicker { + padding-top: 0.1em; + } } .form-box {