GH-83: Fix Callout Component after Plugin's tweaks

TACC · Aug 21, 2021 · c76aedc · c76aedc
1 parent 4494919
commit c76aedc
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 7 deletions.
diff --git a/taccsite_cms/static/site_cms/css/src/_imports/components/c-callout.css b/taccsite_cms/static/site_cms/css/src/_imports/components/c-callout.css
@@ -4,7 +4,8 @@ Callout
 Interrupt or end Sections with a "call to action".
 
 Markup:
-<aside class="c-callout">
+<!-- Has Figure -->
+<aside class="c-callout c-callout--has-figure">
   <h2 class="c-callout__title">
     Quick Start Guide
   </h2>
@@ -13,6 +14,15 @@ Markup:
   </p>
   <figure class="c-callout__figure">...</figure>
 </aside>
+<!-- No Figure -->
+<aside class="c-callout">
+  <h2 class="c-callout__title">
+    Quick Start Guide
+  </h2>
+  <p class="c-callout__desc">
+    Explore the Frontera User Guide to learn how to get started, see what Frontera offers, and get answers to your questions.
+  </p>
+</aside>
 
 Styleguide Components.Callout
 */
@@ -29,12 +39,12 @@ Styleguide Components.Callout
 
   padding: 20px;
 }
-.c-callout--has-children {
+.c-callout--has-figure {
   grid-template-areas:
     'figure title'
     'figure desc';
 }
-.c-callout:not(.c-callout--has-children) {
+.c-callout:not(.c-callout--has-figure) {
   grid-template-areas:
     'title'
     'desc';
@@ -45,11 +55,11 @@ Styleguide Components.Callout
 
 /* To hide figure on narrow window */
 @media only screen and (--narrow-and-below) {
-  .c-callout--has-children .c-callout { column-gap: 0px; }
-  .c-callout--has-children .c-callout__figure { display: none; }
+  .c-callout--has-figure { column-gap: 0px; }
+  .c-callout--has-figure .c-callout__figure { display: none; }
 }
 @media only screen and (--narrow-and-above) {
-  .c-callout--has-children .c-callout { column-gap: 40px; }
+  .c-callout--has-figure { column-gap: 40px; }
 }
 
 /* To align image to exact center */

diff --git a/taccsite_cms/templates/snippets/c-callout.html b/taccsite_cms/templates/snippets/c-callout.html
@@ -1,4 +1,4 @@
-<aside class="c-callout">
+<aside class="c-callout c-callout--has-figure">
   <h2 class="c-callout__title">Quick Start Guide</h2>
   <p class="c-callout__desc">Explore the Frontera User Guide to learn how to get started, see what Frontera offers, and get answers to your questions.</p>
   <figure class="c-callout__figure" style="width: 310px; height: 135px; background-color: white;"></figure>