Merge pull request #3973 from consul/cards-height

Replace equalizer to display flex on cards

app/assets/stylesheets/layout.scss

@@ -2787,11 +2787,18 @@ table {
     margin-top: rem-calc(-48);
   }
 
+  .cards-container {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
   .card {
     border: 0;
+    flex-grow: 0;
     overflow: visible;
 
     a {
+      height: 100%;
 
       img {
         transition-duration: 0.3s;

app/views/pages/_cards.html.erb

@@ -1,5 +0,0 @@
-<div class="row" data-equalizer data-equalizer-on="medium">
-  <% @cards.find_each do |card| %>
-    <%= render "card", card: card %>
-  <% end %>
-</div>

app/views/pages/custom_page.html.erb

@@ -20,7 +20,7 @@
 
   <% if @cards.any? %>
     <div class="small-12 column">
-      <%= render "cards" %>
+      <%= render "shared/cards" %>
     </div>
   <% end %>
 

app/views/shared/_card.html.erb

@@ -1,5 +1,5 @@
 <div id="<%= dom_id(card) %>"
-     class="card small-12 medium-<%= card.columns %> column margin-bottom end" data-equalizer-watch>
+     class="card small-12 medium-<%= card.columns %> column margin-bottom end">
   <%= link_to card.link_url do %>
     <figure class="figure-card">
       <div class="gradient"></div>

app/views/shared/_cards.html.erb

@@ -0,0 +1,7 @@
+<div class="row">
+  <div class="cards-container">
+    <% @cards.each do |card| %>
+      <%= render "shared/card", card: card %>
+    <% end %>
+  </div>
+</div>

app/views/welcome/_card.html.erb

@@ -1,20 +0,0 @@
-<div id="<%= dom_id(card) %>"
-     class="card small-12 medium-<%= card.columns %> column margin-bottom end" data-equalizer-watch>
-  <%= link_to card.link_url do %>
-    <figure class="figure-card">
-      <div class="gradient"></div>
-      <% if card.image.present? %>
-        <%= image_tag(card.image_url(:large), alt: card.image.title) %>
-      <% end %>
-      <figcaption>
-        <% if card.label.present? %>
-          <span><%= card.label %></span>
-        <% end %>
-        <br>
-        <h3><%= card.title %></h3>
-      </figcaption>
-    </figure>
-    <p class="description"><%= card.description %></p>
-    <p><%= card.link_text %></p>
-  <% end %>
-</div>

app/views/welcome/_cards.html.erb

@@ -1,7 +0,0 @@
-<h3 class="title"><%= t("welcome.cards.title") %></h3>
-
-<div class="row" data-equalizer data-equalizer-on="medium">
-  <% @cards.each do |card| %>
-    <%= render "card", card: card %>
-  <% end %>
-</div>

app/views/welcome/index.html.erb

@@ -21,7 +21,9 @@
   <div class="row">
     <% if @cards.any? %>
       <div class="small-12 column <%= "large-8" if feed_processes_enabled? %>">
-        <%= render "cards" %>
+        <h3 class="title"><%= t("welcome.cards.title") %></h3>
+
+        <%= render "shared/cards" %>
       </div>
     <% end %>