diff --git a/gfi-ihk-2024/stories/components/testimonial/Testimonial.stories.js b/gfi-ihk-2024/stories/components/testimonial/Testimonial.stories.js index 4be9e5b..997350b 100644 --- a/gfi-ihk-2024/stories/components/testimonial/Testimonial.stories.js +++ b/gfi-ihk-2024/stories/components/testimonial/Testimonial.stories.js @@ -17,3 +17,8 @@ const Template = ({...args}) => { export const Testimonial = Template.bind({}); Testimonial.args = {}; + +export const ArticlePage = Template.bind({}); +ArticlePage.args = { + article: true +}; diff --git a/gfi-ihk-2024/stories/components/testimonial/TestimonialComponent.js b/gfi-ihk-2024/stories/components/testimonial/TestimonialComponent.js index f962bf4..eab212e 100644 --- a/gfi-ihk-2024/stories/components/testimonial/TestimonialComponent.js +++ b/gfi-ihk-2024/stories/components/testimonial/TestimonialComponent.js @@ -1,15 +1,25 @@ import './testimonial.scss'; +import './testimonial.js'; import {createElement, createImage} from "../../_global/scripts/helpers"; import {testimonialData} from "./TestimonialData"; export const createTestimonial = - ({ +({ + article = false, listItems: listItems = testimonialData, author = 'Nadine Kurz, IHK Rhein-Neckar', + subline = 'Dolleruper Windpark GmbH & Co. KG', text = 'Mit dem modularen IHK24-System setzen wir flexibel und einfach die digitale Kommunikation unserer IHK um. Unsere Kunden und Redakteure profitieren von den modernen und nutzerfreundlichen Anwendungen.', image = './dummy/why-elect.jpg', - }) => { - const div = createElement('div', ['image-text'], null); + }) => { + let output; + let div; + if (article === true) { + output = createElement('div', ['has-sidebar'], null); + div = createElement('div', ['image-text', 'is-blockquote'], null, output); + } else { + div = createElement('div', ['image-text', 'is-blockquote'], null); + } const div2 = createElement('div', ['image-text--image'], null, div); const div3 = createElement('div', ['image-text--text'], null, div); createImage(image, 1280, 1280, '', [], div2); @@ -17,6 +27,13 @@ export const createTestimonial = const blockquote = createElement('blockquote', [], null, div3); createElement('p', [], text, blockquote); createElement('p', ['author'], author, blockquote); + createElement('p', ['author-subline'], subline, blockquote); - return div; - } \ No newline at end of file + if (article === true) { + console.log(article); + return output; + } else { + console.log(article); + return div; + } +} diff --git a/gfi-ihk-2024/stories/components/testimonial/testimonial.js b/gfi-ihk-2024/stories/components/testimonial/testimonial.js new file mode 100644 index 0000000..e767888 --- /dev/null +++ b/gfi-ihk-2024/stories/components/testimonial/testimonial.js @@ -0,0 +1,25 @@ +import $ from 'jquery'; + +function moveTestimonialImage() { + $('.has-sidebar .image-text').each(function () { + var $container = $(this); + var $image = $container.find('.image-text--image'); + var $firstParagraph = $container.find('.image-text--text blockquote p:first-child'); + + if ($(window).width() < 768) { + // Bild nach dem ersten Paragraphen einfügen + $firstParagraph.after($image); + } else { + // Bild zurück an erste Position im Container + $container.prepend($image); + } + }); +} + +// Beim Laden ausführen +$(document).ready(function () { + moveTestimonialImage(); +}); + +// Bei Resize ausführen +$(window).on('resize', moveTestimonialImage); diff --git a/gfi-ihk-2024/stories/components/testimonial/testimonial.scss b/gfi-ihk-2024/stories/components/testimonial/testimonial.scss index 705ab30..ca878db 100644 --- a/gfi-ihk-2024/stories/components/testimonial/testimonial.scss +++ b/gfi-ihk-2024/stories/components/testimonial/testimonial.scss @@ -1,7 +1,7 @@ @import '../../_global/styles/mixins'; @import '../../_global/styles/vars'; -.image-text { +.image-text.is-blockquote { max-width: 1340px; display: flex; justify-content: space-between; @@ -13,7 +13,7 @@ @media(max-width: 767px) { display: block; } - h3{ + h3 { font-size: 28px; line-height: 120%; /* 50.4px */ @media(min-width: 768px) { @@ -36,8 +36,8 @@ display: block; } - &--text, - &--image { + .image-text--text, + .image-text--image { width: calc(50% - 30px); @media(max-width: 767px) { width: auto; @@ -45,7 +45,7 @@ } } - &--image { + .image-text--image { position: relative; &:after { content: ""; @@ -63,16 +63,27 @@ } } + .image-text--text { + @media(max-width: 767px) { + display: flex; + } + } + blockquote { border-left: 0; font-style: normal; font-weight: 300; margin: calc(var(--section-margin)*.6) 0; padding: 0 20px 0 40px; + @media(max-width: 767px) { + padding: 0; + } p { font-size: var(--font-size-h2); - line-height: 1.3; - &:not(.author) { + line-height: 1.2; + &:not(.author, .author-subline) { + font-family: "Korb", sans-serif; + position: relative; &:before { background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MCA0MCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDAgNDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwYXRoIGQ9Ik0xNyA4LjljLTIuOSAxLjUtNS4xIDMuMi02LjYgNS4yQzkgMTYgOC4zIDE4LjQgOC4zIDIxLjNjLjItLjEuNS0uMSAxLS4xIDIuMSAwIDMuOC43IDUuMyAyIDEuNSAxLjIgMi4yIDMgMi4yIDUuMiAwIDIuNS0uNyA0LjQtMi4xIDUuOS0xLjQgMS40LTMuMiAyLjEtNS40IDIuMS0zLjEgMC01LjQtMS4xLTYuOS0zLjNDLjcgMzAuNyAwIDI3LjYgMCAyMy41YzAtNC42IDEuMS04LjcgMy40LTEyLjJzNS44LTYuNCAxMC40LTguN0wxNyA4Ljl6bTIzIDBjLTIuOSAxLjUtNS4xIDMuMi02LjYgNS4yLTEuNCAxLjktMi4xIDQuMy0yLjEgNy4yLjItLjEuNS0uMSAxLS4xIDIuMSAwIDMuOC43IDUuMyAyIDEuNSAxLjIgMi4yIDMgMi4yIDUuMiAwIDIuNS0uNyA0LjQtMi4xIDUuOS0xLjQgMS40LTMuMiAyLjEtNS40IDIuMS0zLjEgMC01LjQtMS4xLTYuOS0zLjMtMS41LTIuMy0yLjItNS40LTIuMi05LjUgMC00LjYgMS4xLTguNyAzLjQtMTIuMlMzMi40IDUgMzcgMi43bDMgNi4yeiIgc3R5bGU9ImZpbGw6IzU2YmQ2NiIvPjwvc3ZnPg==); background-size: 100%; @@ -80,20 +91,33 @@ display: block; height: 30px; margin: 2px 0 2px -40px; - position: relative; + position: absolute; width: 30px; + left: 0; + top: -40px; + @media(max-width: 767px) { + margin-left: 0; + } } } &.author { font-family: Source Sans Pro,sans-serif; font-size: 18px; - font-weight: 400; + font-weight: 600; margin-right: -20px; - margin-top: 36px; + margin-top: 44px; + padding-top: 8px; position: relative; text-align: right; font-style: normal; line-height: 1.2; + @media(max-width: 767px) { + text-align: left; + margin-right: 0; + padding-top: 20px; + font-size: 16px; + line-height: 1.1; + } &:after { left: 0; position: absolute; @@ -106,6 +130,9 @@ margin: 2px 0 2px -40px; transform: rotate(180deg); width: 30px; + @media(max-width: 767px) { + left: 40px; + } } &:before { content: "— "; @@ -114,6 +141,24 @@ top: -1px; } } + &.author-subline { + font-family: Source Sans Pro,sans-serif; + font-size: 18px; + font-weight: 400; + margin-right: -20px; + margin-top: -10px; + text-align: right; + font-style: normal; + line-height: 1.2; + @media(max-width: 767px) { + text-align: left; + margin-right: 0; + margin-top: -6px; + font-size: 16px; + line-height: 1.1; + padding-left: 18px; + } + } } } @@ -129,3 +174,62 @@ } } +.has-sidebar { + .image-text { + &.is-blockquote { + .image-text--image { + position: absolute; + right: 0; + bottom: 63px; + width: 100px; + @media(max-width: 767px) { + position: relative; + right: auto; + bottom: auto; + margin: 40px 0 15px 0; + } + &:after { + display: none; + } + } + img { + border-radius: 50%; + } + .image-text--text { + width: auto; + } + blockquote { + p:not(.author, .author-subline) { + margin-left: -40px; + padding-bottom: 10px; + @media(max-width: 767px) { + margin-left: 0; + } + &:before { + margin-left: 0; + } + } + .author { + margin-top: 66px; + padding-top: 2px; + @media(max-width: 767px) { + margin-top: 0; + } + &:after { + top: -56px; + @media(max-width: 767px) { + top: -155px; + } + } + } + .author, + .author-subline { + padding-right: 115px; + } + } + @media(max-width: 767px) { + + } + } + } +} \ No newline at end of file