From ca523a19bde98eba892e919f6da8e76226d3bbe2 Mon Sep 17 00:00:00 2001 From: FlorianEisenmenger Date: Wed, 12 Mar 2025 16:47:32 +0100 Subject: [PATCH] update gfi --- .../stories/_global/styles/_mixins.scss | 16 ++++++++++---- .../document-list/document-list.scss | 18 +--------------- .../election-result-list-item.scss | 14 +------------ .../components/gallery/GalleryComponent.js | 3 +++ .../stories/components/gallery/GalleryData.js | 1 + .../stories/components/gallery/gallery.js | 3 +++ .../stories/components/gallery/gallery.scss | 1 + .../stories/components/teaser/teaser.scss | 13 ++++++------ .../election-detail/election-detail.scss | 14 +------------ .../marketingheader/marketingheader.scss | 10 +-------- .../stories/sections/slider/slider.scss | 21 ++++--------------- .../stories/sections/survey/Survey.stories.js | 13 ++++++++++-- .../stories/sections/survey/SurveyData.js | 4 ++-- .../stories/sections/teasers/teasers.scss | 19 ++--------------- 14 files changed, 50 insertions(+), 100 deletions(-) diff --git a/gfi-ihk-2024/stories/_global/styles/_mixins.scss b/gfi-ihk-2024/stories/_global/styles/_mixins.scss index 8a94a45..192bc54 100644 --- a/gfi-ihk-2024/stories/_global/styles/_mixins.scss +++ b/gfi-ihk-2024/stories/_global/styles/_mixins.scss @@ -104,15 +104,23 @@ display: block; left: 100%; bottom: 0; - color: white; + color: var(--theme-color-white); font-size: 12px; line-height: 1.2; - text-shadow: 0 0 3px rgba(black, 0.6), 0 0 8px rgba(black, 0.6); + text-shadow: -2px 2px 0 #000; z-index: 2; - width: calc(66.6% + 7px); - padding: 8px 18px; + 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%; + } } @mixin form-field { diff --git a/gfi-ihk-2024/stories/components/document-list/document-list.scss b/gfi-ihk-2024/stories/components/document-list/document-list.scss index 2d8dc5d..5f3d0c8 100644 --- a/gfi-ihk-2024/stories/components/document-list/document-list.scss +++ b/gfi-ihk-2024/stories/components/document-list/document-list.scss @@ -97,23 +97,7 @@ } .copyright { - position: absolute; - left: 100%; - bottom: 0; - transform-origin: 0 100%; - color: var(--theme-color-white); - font-size: 12px; - line-height: 1.2; - text-shadow: 0 0 3px rgba(#000, 0.6), 0 0 8px rgba(#000, 0.6); - z-index: 2; - width: 66%; - padding: 8px 10px; - transform: rotate(-90deg); - - @media(max-width: 767px) { - font-size: 10px; - padding: 6px 18px; - } + @include copyright; } } diff --git a/gfi-ihk-2024/stories/components/election-result-list-item/election-result-list-item.scss b/gfi-ihk-2024/stories/components/election-result-list-item/election-result-list-item.scss index 94d3522..573134c 100644 --- a/gfi-ihk-2024/stories/components/election-result-list-item/election-result-list-item.scss +++ b/gfi-ihk-2024/stories/components/election-result-list-item/election-result-list-item.scss @@ -30,19 +30,7 @@ border-top-left-radius: 4px; border-top-right-radius: 4px; .copyright { - bottom: 0; - color: var(--theme-color-white); - display: block; - font-size: 12px; - left: 100%; - line-height: 1.2; - padding: 8px; - position: absolute; - text-shadow: 0 0 3px rgba(0,0,0,.6),0 0 8px rgba(0,0,0,.6); - transform: rotate(-90deg); - transform-origin: 0 100%; - width: 66%; - z-index: 2; + @include copyright; } } diff --git a/gfi-ihk-2024/stories/components/gallery/GalleryComponent.js b/gfi-ihk-2024/stories/components/gallery/GalleryComponent.js index 6b494a2..3ef8a7d 100644 --- a/gfi-ihk-2024/stories/components/gallery/GalleryComponent.js +++ b/gfi-ihk-2024/stories/components/gallery/GalleryComponent.js @@ -24,6 +24,9 @@ export const createGallery = imageDiv.dataset.full = item.src; imageDiv.dataset.width = item.width; imageDiv.dataset.height = item.height; + if (item.copyright) { + imageDiv.dataset.copyright = item.copyright; + } }) $(document).ready(() => { diff --git a/gfi-ihk-2024/stories/components/gallery/GalleryData.js b/gfi-ihk-2024/stories/components/gallery/GalleryData.js index b7c207d..25fb2d0 100644 --- a/gfi-ihk-2024/stories/components/gallery/GalleryData.js +++ b/gfi-ihk-2024/stories/components/gallery/GalleryData.js @@ -3,6 +3,7 @@ export const galleryData = [ src: './dummy/placeholder-3-2.svg', width: 1470, height: 980, + copyright: '© Shutterstock' }, { src: './dummy/placeholder-2-3.svg', diff --git a/gfi-ihk-2024/stories/components/gallery/gallery.js b/gfi-ihk-2024/stories/components/gallery/gallery.js index 359066c..4c5c4e9 100644 --- a/gfi-ihk-2024/stories/components/gallery/gallery.js +++ b/gfi-ihk-2024/stories/components/gallery/gallery.js @@ -70,6 +70,9 @@ class IHKGallery { const first = this.items.first().addClass('loading'); const a = $('').attr('data-index', 0).appendTo(first); const img = $('' + first.attr(').appendTo(a); + if (first.data('copyright')) { + $('' + first.data('copyright') + '').appendTo(a); + } first.find('.image-description').appendTo(this.wrapper); diff --git a/gfi-ihk-2024/stories/components/gallery/gallery.scss b/gfi-ihk-2024/stories/components/gallery/gallery.scss index 2f6b455..9c07498 100644 --- a/gfi-ihk-2024/stories/components/gallery/gallery.scss +++ b/gfi-ihk-2024/stories/components/gallery/gallery.scss @@ -89,6 +89,7 @@ .copyright { @include copyright; + opacity: 1 !important; } } diff --git a/gfi-ihk-2024/stories/components/teaser/teaser.scss b/gfi-ihk-2024/stories/components/teaser/teaser.scss index d34a075..364187c 100644 --- a/gfi-ihk-2024/stories/components/teaser/teaser.scss +++ b/gfi-ihk-2024/stories/components/teaser/teaser.scss @@ -90,6 +90,7 @@ .copyright { @include copyright; + bottom: 8px; } .chart-title { @@ -146,6 +147,12 @@ .image-box::after { height: var(--border-width-hover); } + .copyright { + bottom: 14px; + @media(max-width: 767px) { + bottom: 10px; + } + } } } @@ -224,9 +231,6 @@ } &[data-image-size='s'] { - .copyright { - width: 100%; - } .image-box::before { padding-top: 100%; @@ -234,9 +238,6 @@ } &[data-image-size='l'] { - .copyright { - width: 55%; - } .image-box::before { padding-top: 55%; diff --git a/gfi-ihk-2024/stories/sections/election-detail/election-detail.scss b/gfi-ihk-2024/stories/sections/election-detail/election-detail.scss index 77468b9..fb135bf 100644 --- a/gfi-ihk-2024/stories/sections/election-detail/election-detail.scss +++ b/gfi-ihk-2024/stories/sections/election-detail/election-detail.scss @@ -29,19 +29,7 @@ margin: 0; } .copyright { - bottom: 0; - color: var(--theme-color-white); - display: block; - font-size: 12px; - left: 100%; - line-height: 1.2; - padding: 8px; - position: absolute; - text-shadow: 0 0 3px rgba(0,0,0,.6),0 0 8px rgba(0,0,0,.6); - transform: rotate(-90deg); - transform-origin: 0 100%; - width: 66%; - z-index: 2; + @include copyright; } } diff --git a/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss b/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss index 95b9f5a..6ae498a 100644 --- a/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss +++ b/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss @@ -24,11 +24,6 @@ section.marketingheader{ height:auto; } } - .copyright { - @media screen and (max-width: 900px) { - left: calc(100% - 14px); - } - } } } .text-box{ @@ -643,10 +638,7 @@ section.marketingheader{ } } .copyright { - bottom: 0; - @media screen and (min-width:901px) { - padding-bottom: 26px; - } + left: 100%; } .slider{ background-color: transparent; diff --git a/gfi-ihk-2024/stories/sections/slider/slider.scss b/gfi-ihk-2024/stories/sections/slider/slider.scss index 5906235..f7c190c 100644 --- a/gfi-ihk-2024/stories/sections/slider/slider.scss +++ b/gfi-ihk-2024/stories/sections/slider/slider.scss @@ -174,23 +174,10 @@ } .copyright { - position: absolute; - display: block; - left: 100%; - bottom: 0; - transform-origin: 0 100%; - color: var(--theme-color-white); - font-size: 12px; - line-height: 1.2; - text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.6), 0px 0px 8px rgba(0, 0, 0, 0.6); - z-index: 2; - width: 66%; - padding: 26px 8px; - transform: rotate(-90deg); - - @media(max-width: 999px) { - font-size: 10px; - padding: 4px 6px; + @include copyright; + left: calc(100% - 20px); + @media screen and (min-width: 901px) and (max-width: 999px) { + left: 100%; } } diff --git a/gfi-ihk-2024/stories/sections/survey/Survey.stories.js b/gfi-ihk-2024/stories/sections/survey/Survey.stories.js index f531181..be80b80 100644 --- a/gfi-ihk-2024/stories/sections/survey/Survey.stories.js +++ b/gfi-ihk-2024/stories/sections/survey/Survey.stories.js @@ -1,4 +1,6 @@ import {createSurvey} from "./SurveyComponent"; +import {SurveySimpleData} from "./SurveyData"; +import {SurveyComplexData} from "./SurveyData"; export default { title: 'Sections/Survey', @@ -16,5 +18,12 @@ const Template = ({...args}) => { return createSurvey({...args}); }; -export const Survey = Template.bind({}); -Survey.args = {}; \ No newline at end of file +export const SurveySimple = Template.bind({}); +SurveySimple.args = { + data: SurveySimpleData +}; + +export const SurveyComplex = Template.bind({}); +SurveyComplex.args = { + data: SurveyComplexData +}; \ No newline at end of file diff --git a/gfi-ihk-2024/stories/sections/survey/SurveyData.js b/gfi-ihk-2024/stories/sections/survey/SurveyData.js index c97ed83..b64c597 100644 --- a/gfi-ihk-2024/stories/sections/survey/SurveyData.js +++ b/gfi-ihk-2024/stories/sections/survey/SurveyData.js @@ -1,4 +1,4 @@ -export const SurveySimple = [ +export const SurveySimpleData = [ { legend: null, name: 'vote', @@ -10,7 +10,7 @@ export const SurveySimple = [ } ] -export const SurveyComplex = [ +export const SurveyComplexData = [ { legend: 'Sie sind?', name: 'group', diff --git a/gfi-ihk-2024/stories/sections/teasers/teasers.scss b/gfi-ihk-2024/stories/sections/teasers/teasers.scss index 9ec9274..0ad091f 100644 --- a/gfi-ihk-2024/stories/sections/teasers/teasers.scss +++ b/gfi-ihk-2024/stories/sections/teasers/teasers.scss @@ -536,23 +536,8 @@ } .copyright { - position: absolute; - left: 100%; - bottom: 0; - transform-origin: 0 100%; - color: var(--theme-color-background); - font-size: 12px; - line-height: 1.2; - text-shadow: 0 0 3px rgba(var(--theme-color-text-intensed), 0.6), 0 0 8px rgba(var(--theme-color-text-intensed), 0.6); - z-index: 2; - width: 66%; - padding: 8px 20px; - transform: rotate(-90deg); - - @media(max-width: 767px) { - font-size: 10px; - padding: 6px 18px; - } + @include copyright; + bottom: 8px; } img {