From ef8dddc8948296806dedda2ec0ab9a337b143629 Mon Sep 17 00:00:00 2001 From: FlorianEisenmenger Date: Tue, 2 Dec 2025 23:06:49 +0100 Subject: [PATCH] fixes --- gfi-ihk-2024/stories/components/nav/nav.scss | 19 +++-- .../testimonial/TestimonialComponent.js | 6 +- .../components/testimonial/testimonial.js | 24 +++--- .../components/testimonial/testimonial.scss | 75 ++++++++++++++++--- 4 files changed, 97 insertions(+), 27 deletions(-) diff --git a/gfi-ihk-2024/stories/components/nav/nav.scss b/gfi-ihk-2024/stories/components/nav/nav.scss index 15f291c..9470910 100644 --- a/gfi-ihk-2024/stories/components/nav/nav.scss +++ b/gfi-ihk-2024/stories/components/nav/nav.scss @@ -277,12 +277,6 @@ top: 50%; margin-top: calc(var(--icon-size) / -2); text-align: center; - @media(max-width: 999px) { - top: calc(50% - 3px); - } - @media(max-width: 767px) { - top: calc(50% - 6px); - } } @media(max-width: 359px), (max-width: 767px) and (orientation: landscape) { @@ -299,6 +293,19 @@ background-color: rgba(var(--theme-color-primary-rgb), 0.06); } } + + .back { + a { + &:before { + @media(max-width: 999px) { + top: calc(50% - 3px); + } + @media(max-width: 767px) { + top: calc(50% - 6px); + } + } + } + } } } .page-header { diff --git a/gfi-ihk-2024/stories/components/testimonial/TestimonialComponent.js b/gfi-ihk-2024/stories/components/testimonial/TestimonialComponent.js index eab212e..85efc52 100644 --- a/gfi-ihk-2024/stories/components/testimonial/TestimonialComponent.js +++ b/gfi-ihk-2024/stories/components/testimonial/TestimonialComponent.js @@ -26,8 +26,10 @@ export const createTestimonial = const blockquote = createElement('blockquote', [], null, div3); createElement('p', [], text, blockquote); - createElement('p', ['author'], author, blockquote); - createElement('p', ['author-subline'], subline, blockquote); + const div4 = createElement('div', ['author-text'], null, blockquote); + const div5 = createElement('div', ['author-text--inner'], null, div4); + createElement('p', ['author'], author, div5); + createElement('p', ['author-subline'], subline, div5); if (article === true) { console.log(article); diff --git a/gfi-ihk-2024/stories/components/testimonial/testimonial.js b/gfi-ihk-2024/stories/components/testimonial/testimonial.js index e767888..f534563 100644 --- a/gfi-ihk-2024/stories/components/testimonial/testimonial.js +++ b/gfi-ihk-2024/stories/components/testimonial/testimonial.js @@ -3,23 +3,29 @@ 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'); + var $image = $container.children('.image-text--image'); + var $firstParagraph = $container.find('.image-text--text blockquote > p:first-child'); + + if ($image.length === 0) return; if ($(window).width() < 768) { - // Bild nach dem ersten Paragraphen einfügen - $firstParagraph.after($image); + // Nur verschieben, wenn noch nicht verschoben + if (!$image.data('moved')) { + $firstParagraph.after($image); + $image.data('moved', true); + } } else { - // Bild zurück an erste Position im Container - $container.prepend($image); + // Nur zurück verschieben, wenn verschoben wurde + if ($image.data('moved')) { + $container.prepend($image); + $image.data('moved', false); + } } }); } -// Beim Laden ausführen $(document).ready(function () { moveTestimonialImage(); }); -// Bei Resize ausführen -$(window).on('resize', moveTestimonialImage); +$(window).on('resize', moveTestimonialImage); \ No newline at end of file diff --git a/gfi-ihk-2024/stories/components/testimonial/testimonial.scss b/gfi-ihk-2024/stories/components/testimonial/testimonial.scss index ca878db..708c7c8 100644 --- a/gfi-ihk-2024/stories/components/testimonial/testimonial.scss +++ b/gfi-ihk-2024/stories/components/testimonial/testimonial.scss @@ -180,13 +180,13 @@ .image-text--image { position: absolute; right: 0; - bottom: 63px; + bottom: 78px; width: 100px; @media(max-width: 767px) { position: relative; right: auto; bottom: auto; - margin: 40px 0 15px 0; + margin: 0 0 15px 0; } &:after { display: none; @@ -201,35 +201,90 @@ blockquote { p:not(.author, .author-subline) { margin-left: -40px; - padding-bottom: 10px; + padding-bottom: 65px; + padding-left: 30px; + margin-bottom: 0; @media(max-width: 767px) { margin-left: 0; + margin-bottom: 0; + padding-left: 0; + padding-bottom: 50px; } &:before { margin-left: 0; } + &:after { + left: 0; + position: absolute; + bottom: 23px; + background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MCA0MCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDAgNDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwYXRoIGQ9Ik0xNyA4LjljLTIuOSAxLjUtNS4xIDMuMi02LjYgNS4yQzkgMTYgOC4zIDE4LjQgOC4zIDIxLjNjLjItLjEuNS0uMSAxLS4xIDIuMSAwIDMuOC43IDUuMyAyIDEuNSAxLjIgMi4yIDMgMi4yIDUuMiAwIDIuNS0uNyA0LjQtMi4xIDUuOS0xLjQgMS40LTMuMiAyLjEtNS40IDIuMS0zLjEgMC01LjQtMS4xLTYuOS0zLjNDLjcgMzAuNyAwIDI3LjYgMCAyMy41YzAtNC42IDEuMS04LjcgMy40LTEyLjJzNS44LTYuNCAxMC40LTguN0wxNyA4Ljl6bTIzIDBjLTIuOSAxLjUtNS4xIDMuMi02LjYgNS4yLTEuNCAxLjktMi4xIDQuMy0yLjEgNy4yLjItLjEuNS0uMSAxLS4xIDIuMSAwIDMuOC43IDUuMyAyIDEuNSAxLjIgMi4yIDMgMi4yIDUuMiAwIDIuNS0uNyA0LjQtMi4xIDUuOS0xLjQgMS40LTMuMiAyLjEtNS40IDIuMS0zLjEgMC01LjQtMS4xLTYuOS0zLjMtMS41LTIuMy0yLjItNS40LTIuMi05LjUgMC00LjYgMS4xLTguNyAzLjQtMTIuMlMzMi40IDUgMzcgMi43bDMgNi4yeiIgc3R5bGU9ImZpbGw6IzU2YmQ2NiIvPjwvc3ZnPg==); + background-size: 100%; + content: ""; + display: block; + height: 30px; + margin: 2px 0 2px 0; + transform: rotate(180deg); + width: 30px; + @media(max-width: 767px) { + bottom: 8px; + } + } } - .author { - margin-top: 66px; + .author-text { + @media(max-width: 767px) { + padding-left: 20px; + } + } + .author-text--inner { + position: relative; + @media(min-width: 768px) { + display: flex; + flex-direction: column; + width: fit-content; + margin-left: auto; + } + &:before { + content: "— "; + position: absolute; + top: 1px; + left: -20px; + font-family: Source Sans Pro,sans-serif; + font-style: normal; + line-height: 1.2; + font-size: 18px; + font-weight: 600; + @media(max-width: 767px) { + top: -1px; + } + } + } + p.author { + margin-top: 0; padding-top: 2px; @media(max-width: 767px) { margin-top: 0; } &:after { + display: none; top: -56px; @media(max-width: 767px) { top: -155px; } } + &:before { + display: none; + } } - .author, - .author-subline { + p.author, + p.author-subline { padding-right: 115px; + text-align: left; + @media(max-width: 767px) { + padding-left: 0; + padding-right: 0; + } } } - @media(max-width: 767px) { - - } } } } \ No newline at end of file