Refactored card to remove breakpoint classes (#1872)

Signed-off-by: Travis Beckham <[email protected]>
linkerd · Nov 5, 2024 · 6ad88ff · 6ad88ff
1 parent 4972bd8
commit 6ad88ff
Show file tree

Hide file tree

Showing 11 changed files with 110 additions and 103 deletions.
diff --git a/linkerd.io/assets/scss/app/_adopters.scss b/linkerd.io/assets/scss/app/_adopters.scss
@@ -11,7 +11,7 @@
     gap: spacer(4);
     grid-template-columns: 1fr;
 
-    @media (min-width: breakpoint-min-width("md")) {
+    @media (min-width: breakpoint-min-width("lg")) {
       grid-template-columns: repeat(2, 1fr);
     }
   }

diff --git a/linkerd.io/assets/scss/app/_ambassadors.scss b/linkerd.io/assets/scss/app/_ambassadors.scss
@@ -8,7 +8,7 @@
     gap: spacer(4);
     grid-template-columns: 1fr;
 
-    @media (min-width: breakpoint-min-width("md")) {
+    @media (min-width: breakpoint-min-width("lg")) {
       grid-template-columns: repeat(2, 1fr);
     }
   }

diff --git a/linkerd.io/assets/scss/app/_enterprise.scss b/linkerd.io/assets/scss/app/_enterprise.scss
@@ -13,13 +13,13 @@
   .enterprise__section {
     @include make-stack(5);
   }
-  @media (min-width: breakpoint-min-width("md")) {
+  @media (min-width: breakpoint-min-width("lg")) {
     .card {
+      @include make-card--horz;
+      @include make-card--reverse;
       gap: spacer(6);
       padding: spacer(6);
     }
-  }
-  @media (min-width: breakpoint-min-width("lg")) {
     .hero__container {
       background-image: url("/enterprise/images/bkgd.svg");
       background-repeat: no-repeat;

diff --git a/linkerd.io/assets/scss/app/_get-involved.scss b/linkerd.io/assets/scss/app/_get-involved.scss
@@ -8,7 +8,7 @@
     gap: spacer(4);
     grid-template-columns: 1fr;
 
-    @media (min-width: breakpoint-min-width("md")) {
+    @media (min-width: breakpoint-min-width("lg")) {
       grid-template-columns: repeat(2, 1fr);
     }
   }

diff --git a/linkerd.io/assets/scss/app/_heroes.scss b/linkerd.io/assets/scss/app/_heroes.scss
@@ -8,7 +8,7 @@
     gap: spacer(4);
     grid-template-columns: 1fr;
 
-    @media (min-width: breakpoint-min-width("md")) {
+    @media (min-width: breakpoint-min-width("lg")) {
       grid-template-columns: repeat(2, 1fr);
     }
   }

diff --git a/linkerd.io/assets/scss/app/_tests.scss b/linkerd.io/assets/scss/app/_tests.scss
@@ -0,0 +1,6 @@
+@media (min-width: breakpoint-min-width("md")) {
+  .test-card {
+    @include make-card--horz;
+    @include make-card--reverse;
+  }
+}
diff --git a/linkerd.io/assets/scss/components/_card.scss b/linkerd.io/assets/scss/components/_card.scss
@@ -18,122 +18,36 @@
 </div>
 */
 
-// Mix-ins
-
-@mixin make-card-horz {
-  flex-direction: row;
-}
-@mixin make-card-reverse {
-  .card__body {
-    order: 1;
-  }
-  .card__media {
-    order: 2;
-  }
-}
-
-// Classes
-
 .card {
-  display: flex;
-  flex-direction: column;
-  padding: spacer(2);
-  background-color: $white;
-  border-radius: $border-radius;
-  box-shadow: $box-shadow;
-
-  .card__body {
-    display: flex;
-    flex-direction: column;
-    gap: spacer(4);
-    flex-grow: 1;
-    padding: spacer(3);
-  }
-  .card__header {
-    @include make-stack(1);
-  }
-  .card__content {
-    @include make-stack(3);
-    flex-grow: 1;
-  }
-  .card__footer {
-    display: flex;
-    flex-direction: row;
-    gap: spacer(3);
-  }
+  @include make-card;
 
   // @options
 
-  // Add padding around media to align with content
   &.card--inset-media {
-    gap: spacer(4);
-    padding: spacer(4);
-
-    .card__body {
-      padding: 0;
-    }
+    @include make-card--inset-media;
   }
-
-  // Keep media to the right of the content
   &.card--horz {
-    @include make-card-horz;
-  }
-  @each $k, $v in $breakpoint-min-widths {
-    &.card--#{$k}-horz {
-      @media (min-width: breakpoint-min-width($k)) {
-        @include make-card-horz;
-      }
-    }
+    @include make-card--horz;
   }
-
-  // Move media after the content
   &.card--reverse {
-    @include make-card-reverse;
-  }
-  @each $k, $v in $breakpoint-min-widths {
-    &.card--#{$k}-reverse {
-      @media (min-width: breakpoint-min-width($k)) {
-        @include make-card-reverse;
-      }
-    }
+    @include make-card--reverse;
   }
-
-  // Center the media and body
   &.card--center {
-    align-items: center;
-
-    // TODO: center align body when not in horizontal layout
-    //.card__body {
-    //  align-items: center;
-    //}
+    @include make-card--center;
   }
 }
 
 /*
-Make the whole card clickable.
 [!IMPORTANT] If using a card-link, the card **must not** have anchor links in the content.
 
 @markup
-<div class="card-link">
+<a class="card-link">
   <div class="card">
     ...
   </div>
-</div>
+</a>
 */
 
 .card-link {
-  display: block;
-  transition: all 0.3s ease-out;
-  color: $navy;
-
-  .card {
-    height: 100%;
-  }
-  &:hover {
-    transform: scale(1.05);
-
-    .card {
-      background-image: linear-gradient(160deg, tint-color($light-blue, 50%), $white);
-    }
-  }
+  @include make-card-link;
 }
diff --git a/linkerd.io/assets/scss/main.scss b/linkerd.io/assets/scss/main.scss
@@ -9,6 +9,7 @@
 
 // Mix-ins
 @import "mixins/button";
+@import "mixins/card";
 @import "mixins/stack";
 
 // Global styling of html elements
@@ -52,6 +53,7 @@
 @import "app/meetup";
 @import "app/search";
 @import "app/404";
+//@import "app/tests";
 
 // Responsive containers and utilities
 @import "layout/container";
diff --git a/linkerd.io/assets/scss/mixins/_card.scss b/linkerd.io/assets/scss/mixins/_card.scss
@@ -0,0 +1,85 @@
+@mixin make-card {
+  --card--center-body: center;
+
+  display: flex;
+  flex-direction: column;
+  padding: spacer(2);
+  background-color: $white;
+  border-radius: $border-radius;
+  box-shadow: $box-shadow;
+
+  .card__body {
+    display: flex;
+    flex-direction: column;
+    gap: spacer(4);
+    flex-grow: 1;
+    padding: spacer(3);
+  }
+  .card__header {
+    @include make-stack(1);
+  }
+  .card__content {
+    @include make-stack(3);
+    flex-grow: 1;
+  }
+  .card__footer {
+    display: flex;
+    flex-direction: row;
+    gap: spacer(3);
+  }
+}
+
+// @options
+
+// Add padding around media to align with content
+@mixin make-card--inset-media {
+  gap: spacer(4);
+  padding: spacer(4);
+
+  .card__body {
+    padding: 0;
+  }
+}
+
+// Move media horizontal to content
+@mixin make-card--horz {
+  --card--center-body: left; // When card is horizontal, do not center items in card body
+  flex-direction: row;
+}
+
+// Move media after content
+@mixin make-card--reverse {
+  .card__body {
+    order: 1;
+  }
+  .card__media {
+    order: 2;
+  }
+}
+
+// Center the media and body
+@mixin make-card--center {
+  align-items: center;
+
+  .card__body {
+    align-items: var(--card--center-body);
+  }
+}
+
+// Make the whole card clickable
+@mixin make-card-link {
+  display: block;
+  transition: all 0.3s ease-out;
+  color: $navy;
+
+  .card {
+    height: 100%;
+  }
+  &:hover {
+    transform: scale(1.05);
+
+    .card {
+      background-image: linear-gradient(160deg, tint-color($light-blue, 50%), $white);
+    }
+  }
+}
diff --git a/linkerd.io/content/tests/components.html b/linkerd.io/content/tests/components.html
@@ -148,7 +148,7 @@ <h4>Header</h4>
     </div>
   </div>
 
-  <div class="card card--md-horz card--inset-media card--md-reverse card--center">
+  <div class="test-card | card card--inset-media card--center">
     <div class="card__media">
       <img src="../image.png" class="img img--128 img--cover img--round">
     </div>

diff --git a/linkerd.io/layouts/enterprise/list.html b/linkerd.io/layouts/enterprise/list.html
@@ -24,7 +24,7 @@ <h2>
               {{ .title }}
             </h2>
             {{ range .items }}
-              <div class="card card--md-horz card--md-reverse card--inset-media">
+              <div class="card card--inset-media">
                 <div class="card__media">
                   {{ $alt := .title }}
                   {{ with $.Resources.Get .image }}