TCI-1129: cleaner & more dynamic top/left-card image support (#867)

JudicialCouncilOfCalifornia · Jan 12, 2024 · e6c5d8c · e6c5d8c
1 parent 090a9e7
commit e6c5d8c
Show file tree

Hide file tree

Showing 8 changed files with 118 additions and 99 deletions.
diff --git a/source/_patterns/02-molecules/card/_card.scss b/source/_patterns/02-molecules/card/_card.scss
@@ -176,17 +176,72 @@ $_config: map-merge-by-keys($_config_schemes, base, $_config_schemes, $scheme);
     }
   }
 
+  .usa-card--media-top &,
+  .usa-card--media-left & {
+    .usa-card__content {
+      @include u-padding(4);
+    }
+
+    .usa-card__media {
+      @include u-display(flex);
+      min-height: auto;
+
+      // Addressing SVG icons for now
+      svg {
+        @include u-margin(3);
+      }
+
+      .jcc-card--overlay-color-none {
+        flex-grow: 1;
+
+        img {
+          aspect-ratio: 16/9;
+        }
+      }
+    }
+  }
+
+  .usa-card--media-top & {
+    .usa-card__content {
+      @include u-padding-top(2);
+    }
+  }
+
   .usa-card--media-left & {
     @include at-media(tablet) {
       @include grid-row();
       @include u-flex(no-wrap);
       @include u-flex-direction(row);
       @include u-padding-x(4);
     }
+
+    .usa-card__media {
+      .jcc-card--overlay-color-none {
+        @include u-display(flex);
+      }
+    }
   }
 
   .usa-card--media-full &,
   .usa-card--media-top &,
+  .usa-card--media-left &,
+  .usa-card--media-full-overlay &,
+  .usa-card--media-top-overlay & {
+    .usa-card__media {
+      @include u-z(bottom);
+      @include u-width(full);
+
+      img,
+      picture {
+        @include u-width(full);
+        border-radius: map-get($_config, border-radius-img);
+        object-position: 50% 50%;
+        object-fit: cover;
+      }
+    }
+  }
+
+  .usa-card--media-full &,
   .usa-card--media-full-overlay &,
   .usa-card--media-top-overlay & {
     min-height: 250px;
@@ -199,31 +254,15 @@ $_config: map-merge-by-keys($_config_schemes, base, $_config_schemes, $scheme);
       }
     }
 
-    .usa-card__icon-no-brow {
-      @include u-color("white");
-    }
-
+    .usa-card__brow-color,
+    .usa-card__icon-no-brow,
     .usa-card__icon {
       @include u-color("white");
     }
-
-    .usa-card__media {
-      @include u-z(bottom);
-      @include u-width(full);
-
-      img,
-      picture {
-        @include u-width(full);
-        border-radius: map-get($_config, border-radius-img);
-        object-position: 50% 50%;
-        object-fit: cover;
-      }
-    }
   }
 
   .usa-card--media-full-overlay &,
-  .usa-card--media-top-overlay &,
-  .usa-card--media-top & {
+  .usa-card--media-top-overlay & {
     .usa-card__media {
       @each $overlay-bgcolor, $color-value in map-get($_config, overlay-bgcolors) {
         @if $overlay-bgcolor {
@@ -310,7 +349,6 @@ $_config: map-merge-by-keys($_config_schemes, base, $_config_schemes, $scheme);
     }
   }
 
-  .usa-card--media-top &,
   .usa-card--media-top-overlay & {
     .usa-card__header {
       @include u-position(relative);
@@ -343,13 +381,12 @@ $_config: map-merge-by-keys($_config_schemes, base, $_config_schemes, $scheme);
       }
     }
   }
-  .usa-card--media-top & {
-    .usa-card__header {
-      height: calc(18rem - 15px);
-      .usa-card__heading {
-        @include u-color(map-get($_config, title-color));
-      }
-    }
+}
+
+.usa-card--media-top,
+.usa-card--media-left {
+  .usa-card__container {
+    @include u-padding(0);
   }
 }
 
@@ -477,7 +514,6 @@ $_config: map-merge-by-keys($_config_schemes, base, $_config_schemes, $scheme);
 }
 
 .usa-card__media {
-  @include u-margin-right(5);
   @include u-color(map-get($_config, icon-color));
   .icon {
     width: 80px;
@@ -498,51 +534,3 @@ $_config: map-merge-by-keys($_config_schemes, base, $_config_schemes, $scheme);
   }
 }
 
-.usa-card--media-left, .usa-card--media-top {
-  .usa-card__container.type-image {
-    @include u-padding(0);
-    .usa-card__body {
-      @include u-padding-left(0);
-      @include u-padding-right(0);
-    }
-  }
-}
-
-.usa-card--media-top {
-  .usa-card__container.type-image {
-    .usa-card__header {
-      height: unset;
-      margin-top: 21rem;
-      .usa-card__heading {
-        @include u-color(map-get($_config, title-color));
-        position: unset;
-        white-space: normal;
-      }
-    }
-    .usa-card__media{
-      line-height: 0;
-      @include u-margin-right(1);
-      img{
-        object-fit: cover;
-        height: 20rem;
-        display: flex;
-        }
-      }
-    }
-    .usa-card__content{
-      @include u-padding(3);
-    }
-}
-
-.jcc-cards--1-cols {
-  .usa-card--media-left{
-    .usa-card__container.type-image {
-      .jcc-card--overlay-color-none {
-        aspect-ratio: var(--frame-h,16)/var(--frame-v,9);
-        overflow: hidden;
-        border-radius: initial;
-      }
-    }
-  }
-}
-
diff --git a/source/_patterns/02-molecules/card/card.js b/source/_patterns/02-molecules/card/card.js
@@ -0,0 +1,25 @@
+/*
+* Consistent image height for mixed card widths.
+*/
+const cards = Array.from(document.querySelectorAll('.jcc-cards--2-60-40-cols, .jcc-cards--2-75-25-cols'));
+
+cards.forEach(function (cardset) {
+  // If media containers exist.
+  let medias = Array.from(cardset.getElementsByClassName('usa-card__media'));
+
+  if (medias.length > 0) {
+    // Determine max height from smallest image.
+    let maxHeight = medias[0].offsetHeight;
+    medias.forEach(function(media) {
+      maxHeight = Math.min(maxHeight, media.offsetHeight);
+    })
+
+    // Adjust all container and image heights to max allowed.
+    medias.forEach(function (media) {
+      let image = media.getElementsByTagName('img');
+      let imageHeight = maxHeight/16 + 'rem';
+      image[0].setAttribute('style', 'height: ' + imageHeight + ';');
+      media.style.height = imageHeight;
+    });
+  }
+});
diff --git a/source/_patterns/02-molecules/card/card.twig b/source/_patterns/02-molecules/card/card.twig
@@ -13,7 +13,7 @@
  *     - url: card link/button url
  *     - text: card link/button text
  *     - type: card link/button type (n/a or external or file) [ext, file]
- *   - media: icon as embeded svg code
+ *   - media: icon as embedded svg code
  *     - src: image source file or URL for use as background image
  *     - alt: image alt description
  *   - bgcolor: overlay color [none or see overlay-bgcolors options in _card.scss theme scheme]
@@ -27,7 +27,6 @@
 {% set heading_tag = card.card_title_tag|default('h3') %}
 {% set unique_id = 'card-' ~ random() %}
 {% set style = card.style|default('cta') %}
-{% set type = card.type|default('icon') %}
 {% set icon_set = card.icon.set|default('fa') %}
 
 {% if (style == 'hover') or (card.is_clickable == TRUE) %}
@@ -46,7 +45,7 @@
 ]|merge(card.classes|default([''])) %}
 
 <{{ tag }} {{ attributes.addClass(classes) }}>
-  <div class="usa-card__container{% if card.media.src is not null and card.media.src is not empty %} type-image{% endif %}">
+  <div class="usa-card__container">
     <div class="usa-card__content">
       <header class="usa-card__header">
         {% if card.brow %}
@@ -57,17 +56,16 @@
               {{ card.brow }}
             {% endif %}
 
-          {% if card.icon %}
-            <div class="usa-card__icon">
-              {% include "@atoms/icon/icon.twig" with {
-                icon: {
-                  name: card.icon.name,
-                  set: icon_set
-                }
-              } %}
-            </div>
-          {% endif %}
-
+            {% if card.icon %}
+              <div class="usa-card__icon">
+                {% include "@atoms/icon/icon.twig" with {
+                  icon: {
+                    name: card.icon.name,
+                    set: icon_set
+                  }
+                } %}
+              </div>
+            {% endif %}
           </div>
         {% else %}
           {% if card.icon %}

diff --git a/...rns/02-molecules/card/card~media-left.yml → ...2-molecules/card/card~media-icon-left.yml b/...rns/02-molecules/card/card~media-left.yml → ...2-molecules/card/card~media-icon-left.yml
diff --git a/source/_patterns/02-molecules/card/card~media-image-left.yml b/source/_patterns/02-molecules/card/card~media-image-left.yml
@@ -0,0 +1,10 @@
+card:
+  style: "media-left"
+  title: "Posuere et ornare"
+  body: "<p>Tellus justo ornare, ipsum pulvinar praesent viverra luctus sociosqu eu, dolor blandit cum vel tempus volutpat.</p>"
+  media:
+    src: "https://newsroom.courts.ca.gov/sites/default/files/newsroom/2020-08/supreme%20court%20mural%20%28SF%29.jpg"
+    alt: "Image media test"
+  link:
+    url: "#"
+    text: "Luctus nunc quam"
diff --git a/...erns/02-molecules/card/card~media-top.yml → ...2-molecules/card/card~media-image-top.yml b/...erns/02-molecules/card/card~media-top.yml → ...2-molecules/card/card~media-image-top.yml
@@ -2,8 +2,6 @@ card:
   style: "media-top"
   title: "Posuere et ornare"
   brow: "Pellentesque tempo"
-  icon:
-    name: "gavel"
   body: "<p>Tellus justo ornare, ipsum pulvinar praesent viverra luctus sociosqu eu, dolor blandit cum vel tempus volutpat.</p>"
   media:
     src: "https://newsroom.courts.ca.gov/sites/default/files/newsroom/2020-08/supreme%20court%20mural%20%28SF%29.jpg"

diff --git a/source/_patterns/03-organisms/cards/cards~media-background.yml b/source/_patterns/03-organisms/cards/cards~media-background.yml
@@ -8,7 +8,7 @@ cards:
       title: "Posuere et ornare"
       body: "<p>Tellus justo ornare, ipsum pulvinar praesent viverra luctus sociosqu eu, dolor blandit cum vel tempus volutpat.</p>"
       media:
-        src: "https://placeimg.com/350/250/nature"
+        src: "https://source.unsplash.com/random/350x250/?nature"
         alt: "Cupidatat non proident, sunt in culpa qui"
       link:
         url: "#"
@@ -17,7 +17,7 @@ cards:
       title: "Posuere et ornare"
       body: "<p>In torquent consequat quam vulputate himenaeos semper ut aliquam at, iaculis ac platea laoreet ridiculus mattis sagittis volutpat hendrerit, vehicula orci dictum dictumst nunc scelerisque lacus auctor.</p>"
       media:
-        src: "https://placeimg.com/350/250/animals"
+        src: "https://source.unsplash.com/random/350x250/?animals"
         alt: "Cupidatat non proident, sunt in culpa qui"
       link:
         url: "#"
@@ -27,7 +27,7 @@ cards:
       title: "Visual Hover"
       body: "<p>The image will appear 90% opaque on hover. Habitasse nec dui adipiscing massa magna mollis morbi netus malesuada, odio varius id eu integer felis tellus at feugiat.</p>"
       media:
-        src: "https://placeimg.com/350/250/people"
+        src: "https://source.unsplash.com/random/350x250/?people"
         alt: "Cupidatat non proident, sunt in culpa qui"
       link:
         url: "#"
@@ -36,7 +36,7 @@ cards:
       title: "Posuere et ornare"
       body: "<p>Tellus justo ornare, ipsum pulvinar praesent viverra luctus sociosqu eu, dolor blandit cum vel tempus volutpat.</p>"
       media:
-        src: "https://placeimg.com/350/250/tech"
+        src: "https://source.unsplash.com/random/350x250/?tech"
         alt: "Cupidatat non proident, sunt in culpa qui"
       link:
         url: "#"

diff --git a/source/_patterns/03-organisms/cards/cards~media-two-60-40.yml b/source/_patterns/03-organisms/cards/cards~media-two-60-40.yml
@@ -5,10 +5,10 @@ cards:
   num_cols: "2-60-40"
   items:
     - style: "media-top"
-      title: "Posuere et ornare Posuere et ornare Posuere et ornare Posuere et ornare Posuere et ornare Posuere et ornare Posuere et ornare Posuere et ornare Posuere et ornare Posuere et ornare Posuere et ornare Posuere et ornare Posuere et ornare "
+      title: "Posuere et ornare"
       body: "<p>Tellus justo ornare, ipsum pulvinar praesent viverra luctus sociosqu eu, dolor blandit cum vel tempus volutpat.</p>"
       media:
-        src: "https://newsroom.courts.ca.gov/sites/default/files/newsroom/2020-08/supreme%20court%20mural%20%28SF%29.jpg"
+        src: "https://source.unsplash.com/random/350x250/?people"
         alt: "green"
       link:
         url: "#"
@@ -17,7 +17,7 @@ cards:
       title: "Posuere et ornare"
       body: "<p>Tellus justo ornare, ipsum pulvinar praesent viverra luctus sociosqu eu, dolor blandit cum vel tempus volutpat.</p>"
       media:
-        src: "https://newsroom.courts.ca.gov/sites/default/files/newsroom/2020-08/supreme%20court%20mural%20%28SF%29.jpg"
+        src: "https://source.unsplash.com/random/350x250/?face"
         alt: "green"
       link:
         url: "#"