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 {