testimonial

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
+};

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;
-  }
+    if (article === true) {
+        console.log(article);
+        return output;
+    } else {
+        console.log(article);
+        return div;
+    }
+}

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);

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) {
+
+      }
+    }
+  }
+}