Merge pull request #658 from middlebury/themed-panel-fixes

Theme panel fixes
middlebury · Oct 4, 2024 · ab40480 · ab40480
2 parents ba1551a + f0d7e18
commit ab40480
Show file tree

Hide file tree

Showing 6 changed files with 88 additions and 26 deletions.
diff --git a/src/scss/components/_themed-panel.scss b/src/scss/components/_themed-panel.scss
@@ -7,12 +7,10 @@
 }
 
 .themed-panel__main {
-  @include breakpoint(xl) {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    flex: 1;
-  }
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  flex: 1;
 }
 
 .themed-panel__title {
@@ -31,15 +29,36 @@
 }
 
 .themed-panel__figure {
+  position: relative;
+
+  &:before {
+    display: block;
+    content: "";
+    width: 100%;
+    padding-top: (9 / 16) * 100%;
+  }
+
   @include breakpoint(sm) {
-    margin: 0 $spacing-3;
+    margin: $spacing-3 $spacing-3 0;
   }
 
   @include breakpoint(lg) {
-    margin: 0 $spacing-5;
+    margin: $spacing-5 $spacing-5 0;
+  }
+
+  .themed-panel__title + & {
+    margin-top: 0;
   }
 
   img {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+
     @include breakpoint(xl) {
       object-fit: cover;
       font-family: 'object-fit: cover;';
@@ -58,6 +77,8 @@
   margin-left: $spacing-3;
   margin-right: $spacing-3; 
   margin-bottom: $spacing-4;
+  position: relative;
+  z-index: 1;
 
   @include breakpoint(md) {
     margin-bottom: $spacing-5;
@@ -90,6 +111,10 @@
 
   .themed-panel__text {
     color: $black;
+
+    a {
+      color: $navy;
+    }
   }
 }
 
@@ -112,6 +137,7 @@
 .themed-panel__subarticle {
 
   .themed-panel__heading {
+    color: $white;
     font-weight: $font-weight-bold;
   }
 
@@ -141,7 +167,6 @@
 }
 
 .themed-panel__heading {
-  color: $white;
   margin-bottom: $spacing-1;
 
   @include breakpoint(lg) {
@@ -159,7 +184,6 @@
 
 .themed-panel__text {
   color: $white;
-  margin-bottom: $spacing-4;
   font-size: $typescale-3;
 
   @include breakpoint(lg) {
@@ -169,12 +193,18 @@
   .themed-panel__subarticle & {
     font-size: $typescale-3;
   }
+
+  a {
+    color: $white;
+    @include link-border;
+  }
 }
 
 .themed-panel__cta {
   color: $white;
   font-weight: $font-weight-semibold;
   padding: $spacing-2;
+  margin-top: $spacing-4;
 
   &.button--light {
     font-size: $typescale-2;

diff --git a/src/templates/office-library-home.twig b/src/templates/office-library-home.twig
@@ -17,7 +17,13 @@
     {% block paragraphs %}
       {% include 'paragraphs/lib-search.twig' %}
       {% include 'paragraphs/text-short.twig' %}
-      {% include 'paragraphs/themed-panel.twig' %}
+      {% include 'paragraphs/themed-panel.twig' with {
+        main_title: true,
+        main_article: true,
+        main_article_cta: true,
+        main_article_title_link: true,
+        subarticles: 3,
+      } %}
     {% endblock %}
   {% endembed %}
 {% endblock %}

diff --git a/src/templates/paragraphs/themed-panel.twig b/src/templates/paragraphs/themed-panel.twig
@@ -1,11 +1,11 @@
 {% set id = random(1234) %}
 
 {# set count for number of subarticles and assign appropriate classname #}
-{% set count = random(2) %}
+{% set count = subarticles %}
 
-{% if count == 1 %}
+{% if count == 2 %}
   {% set class = "col-md-5" %}
-{% elseif count == 0 %}
+{% elseif count == 1 %}
   {% set class = "col-md-10" %}
 {% else %}
   {% set class = "col-md-4" %}
@@ -18,7 +18,9 @@
 
       <div class="themed-panel__main">
 
-        <h2 class="themed-panel__title" id="themed-panel-{{id}}-title">Sustainability and other things that go on and on</h2>
+        {% if main_title %}
+          <h2 class="themed-panel__title" id="themed-panel-{{id}}-title">Sustainability and other things that go on and on</h2>
+        {% endif %}
         <figure class="themed-panel__figure">
           {% include 'partials/img.twig' with {
             name: 'spotlight'
@@ -27,29 +29,35 @@
       </div>
 
       <div class="themed-panel__secondary">
-        {% if random(1) %}
+        {% if main_article %}
           <div class="themed-panel__main-article">
             <article class="col-md-10 themed-panel__article" aria-labelledby="themed-panel-{{id}}-first">
               <h3 class="themed-panel__heading h2" id="themed-panel-{{id}}-first">
-                <a href="">Lorem ipsum dolor sit amet consectetur adipisicing</a>
+                {% if main_article_title_link %}
+                  <a href="">Lorem ipsum dolor sit amet consectetur adipisicing</a>
+                {% else %}
+                  Lorem ipsum dolor sit amet consectetur adipisicing
+                {% endif %}
               </h3>
-              <p class="themed-panel__text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sit magnam dicta nihil reiciendis laboriosam, exercitationem harum numquam rem sint laudantium ducimus optio provident voluptate obcaecati reprehenderit voluptates illum dignissimos corrupti!</p>
-              <a href="#" class="button button--primary themed-panel__cta">Learn more</a>
+              <p class="themed-panel__text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sit magnam dicta nihil reiciendis laboriosam, exercitationem harum numquam rem sint laudantium ducimus <a href="#">optio provident voluptate</a> obcaecati reprehenderit voluptates illum dignissimos corrupti!</p>
+              {% if main_article_cta %}
+                <a href="#" class="button button--primary themed-panel__cta">Learn more</a>
+              {% endif %}
             </article>
           </div>
         {% endif %}
-        {% if random(1) %}
+        {% if subarticles > 0 %}
           <div class="themed-panel__subarticles">
-            {% for item in 0..count %}
+            {% for item in 0..subarticles - 1  %}
               <article class="col-auto {{class}} themed-panel__subarticle" aria-labelledby="themed-panel-{{id}}-{{loop.index}}">
                 <h3 class="themed-panel__heading" id="themed-panel-{{id}}-{{loop.index}}">
                   <a href="" class="text-white">24/7 Support</a>
                 </h3>
                 <p class="themed-panel__text">
                 {% if random(1) %}
-                  Lorem ipsum dolor sit amet consectetur adipisicing ipsum dolor sit amet consectetur adipisicing elit.
+                  Lorem ipsum dolor sit amet consectetur adipisicing ipsum dolor sit amet <a href="#">consectetur adipisicing</a> elit.
                 {% else %}
-                  Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae quo optio quia molestias ipsa debitis, accusamus tempore quaerat eveniet, perspiciatis, natus provident saepe ducimus placeat dignissimos nemo delectus pariatur nesciunt! Earum eveniet qui provident ad aliquam, assumenda reprehenderit fugit recusandae, est cum deleniti, dolore corrupti doloremque magni. Laboriosam accusantium natus rem adipisci.
+                  Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae quo optio quia molestias ipsa debitis, accusamus tempore quaerat eveniet, perspiciatis, natus provident saepe ducimus placeat dignissimos nemo <a href="#">delectus pariatur</a> nesciunt! Earum eveniet qui provident ad aliquam, assumenda reprehenderit fugit recusandae, est cum deleniti, dolore corrupti doloremque magni. Laboriosam accusantium natus rem adipisci.
                 {% endif %}
                 </p>
                 <a href="" class="button button--light button--outline themed-panel__cta">Read more</a>

diff --git a/src/templates/partials/top-level-paragraphs.twig b/src/templates/partials/top-level-paragraphs.twig
@@ -16,7 +16,13 @@
 
 {% include 'paragraphs/text-short.twig' %}
 
-{% include 'paragraphs/themed-panel.twig' %}
+{% include 'paragraphs/themed-panel.twig' with {
+  main_title: true,
+  main_article: true,
+  main_article_cta: true,
+  main_article_title_link: true,
+  subarticles: 3,
+} %}
 
 {% include 'paragraphs/waveform.twig' %}
 

diff --git a/src/templates/school-home-institute.twig b/src/templates/school-home-institute.twig
@@ -79,7 +79,13 @@
 
 	{% include 'paragraphs/quad-story.twig' %}
 
-	{% include 'paragraphs/themed-panel.twig' %}
+	{% include 'paragraphs/themed-panel.twig' with {
+    main_title: true,
+    main_article: true,
+    main_article_cta: true,
+    main_article_title_link: false,
+    subarticles: 3,
+  }%}
 {% endblock %}
 
 {% block layout_footer %}

diff --git a/src/templates/school-home-schools-abroad.twig b/src/templates/school-home-schools-abroad.twig
@@ -14,7 +14,13 @@
 
   {% include 'paragraphs/video-group.twig' %}
 
-  {% include 'paragraphs/themed-panel.twig' %}
+  {% include 'paragraphs/themed-panel.twig' with {
+    main_title: true,
+    main_article: true,
+    main_article_cta: true,
+    main_article_title_link: true,
+    subarticles: 3,
+  } %}
 
   {% include 'paragraphs/spotlight.twig' %}