Improve QuoteWithImage component for use in markdown files (#4293)

* Improve responsiveness of quote component and allow it to be used in markdown files * Added example quote in initial teacher training page * removing bottom border and hover as we are using the components with and without links * Remove quote_with_image from markdown template handler --------- Co-authored-by: jenhadfield-dfe <[email protected]>
DFE-Digital · Nov 21, 2024 · 25a7114 · 25a7114
1 parent 6de9a3d
commit 25a7114
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 36 deletions.
diff --git a/app/views/content/train-to-be-a-teacher/initial-teacher-training.md b/app/views/content/train-to-be-a-teacher/initial-teacher-training.md
@@ -11,14 +11,8 @@ related_content:
     How to choose your teacher training course : "/train-to-be-a-teacher/how-to-choose-your-teacher-training-course"
     Training and support for early career teachers : "/life-as-a-teacher/teaching-as-a-career/early-career-teachers"
     How to apply : "/how-to-apply-for-teacher-training"
-quote:
-  hasina:
-    text: "Teacher training has been by far one of the most fulfilling experiences of my life. It has made me realise my potential, testing the limits of my patience, confidence, organisational skills and empathy, as well as academic ability."
-    name: "Hasina, science teacher"
-    classes: quote--indent
 promo_content:
     - content/train-to-be-a-teacher/promos/mailing-list-promo-itt
-
 ---
 
 Your initial teacher training (ITT) will vary depending on your course provider and the qualifications you're working towards.
@@ -60,8 +54,6 @@ All initial teacher training will help you:
 environment
 * make a positive contribution to your school community
 
-$hasina$
-
 ## Your school placements
 
 School placements enable you to get experience in the classroom. They're an essential and exciting part of your training, and help you learn the skills you need to be a teacher.

diff --git a/app/webpacker/styles/components/quote-with-image.scss b/app/webpacker/styles/components/quote-with-image.scss
@@ -4,16 +4,6 @@
   max-width: 1500px;
   margin: auto;
 
-  &:not(:has(> picture)) {
-    .quote-with-image__content {
-      left: 0;
-
-      @include mq($from: tablet) {
-        margin: auto;
-      }
-    }
-  }
-
   @include mq($from: tablet) {
     flex-direction: row;
     flex-wrap: wrap;
@@ -55,13 +45,8 @@
     margin: auto 30px;
     background-color: white;
     padding: 40px;
-    border-bottom: 4px solid $grey-light;
     position: relative;
 
-    &:hover {
-      border-color: $blue-dark;
-    }
-
     a, p, h1, h2, h3, h4, h5 {
       font-size: inherit;
 
@@ -74,22 +59,12 @@
       }
     }
 
-    @include mq($from: mobile) {
+    @include mq($from: mobile, $until: desktop) {
       margin: auto 50px;
     }
 
-    @include mq($from: tablet, $until: desktop) {
-      width: 368px;
-    }
-
-    @include mq($from: desktop, $until: wide) {
-      left: 50px;
-      width: 500px;
-    }
-
-    @include mq($from: wide) {
-      left: 50px;
-      width: 700px;
+    @include mq($from: desktop) {
+      margin: auto 100px;
     }
 
     &--with-quotes {
@@ -134,6 +109,14 @@
     }
   }
 
+  &:has(> picture) {
+    .quote-with-image__content {
+      @include mq($from: tablet) {
+        width: 100%;
+      }
+    }
+  }
+
   &__title {
     @extend .heading-m;
     @extend .heading--box-pink;