feat(components): Display 1-item responsive_card_list full-width

HGNM · Mar 4, 2019 · f33f5c8 · f33f5c8
1 parent 84d7113
commit f33f5c8
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 1 deletion.
diff --git a/components/responsive_card_list.php b/components/responsive_card_list.php
@@ -11,7 +11,9 @@ function responsive_card_list($opts)
     {
         $cards = isset($opts['cards']) ? $opts['cards'] : array();
         if (!is_array($cards)) return '';
-        $html = '<div class="responsive-cards"><ul class="responsive-cards__list">';
+        $classes = array('responsive-cards');
+        if (count($cards) === 1) $classes[] = 'responsive-cards--single';
+        $html = '<div class="' . implode(' ', $classes) . '"><ul class="responsive-cards__list">';
         foreach ($cards as $card) {
             $html .= '<li class="responsive-cards__item">' . $card . '</li>';
         }

diff --git a/scss/style.scss b/scss/style.scss
@@ -373,6 +373,14 @@ $item-gutter: 1em;
       margin-left: 0;
     }
 
+    @at-root .responsive-cards--single & {
+      width: 100%;
+
+      @include mq(m) {
+        width: calc(#{100% / $items-per-row} - #{($items-per-row - 1) / $items-per-row * $item-gutter});
+      }
+    }
+
     @include mq(m) {
       margin-bottom: $item-gutter;
       width: calc(#{100% / $items-per-row} - #{($items-per-row - 1) / $items-per-row * $item-gutter});