Use grid instead of equalizer in dashboard resources

Move resource cards layout inside #available-resources-section and switch
from equalizer alignment to a responsive grid layout.

Note that using `grid-auto-rows: 1fr` requires us to change the CSS of
the card itself so the "see resource" link remains at the bottom of the
card.

app/assets/stylesheets/dashboard/resources.scss

@@ -1,9 +1,16 @@
 .dashboard-resources {
+  .resources {
+    display: grid;
+    gap: $line-height;
+    grid-auto-rows: 1fr;
+    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
+
     .resource-card {
       background: #d1f5eb;
       border-radius: rem-calc(4);
-    margin-bottom: $line-height;
+      display: flex;
-    min-height: $line-height * 9;
+      flex-direction: column;
+      justify-content: space-between;
       padding: $line-height * 2 $line-height $line-height;
       position: relative;
       text-align: center;
@@ -41,14 +48,11 @@
         margin-top: $line-height;
       }
 
-    .resource-description {
-      min-height: $line-height * 4;
-    }
-
       .button {
         background: #00cb96;
         color: #000;
         font-weight: bold;
       }
     }
+  }
 }

app/components/dashboard/active_resource_component.html.erb

@@ -1,6 +1,5 @@
-<div id="<%= dom_id(resource) %>" class="small-12 medium-6 large-3 column end">
+<div id="<%= dom_id(resource) %>"
-  <div class="resource-card <%= resource_card_class %>"
+     class="resource-card <%= resource_card_class %>"
-       data-equalizer-watch="resources"
      title="<%= resource_tooltip %>">
   <h4><%= resource.title %></h4>
   <% if is_new_action_since_last_login?(resource, new_actions_since_last_login) %>
@@ -8,20 +7,17 @@
   <% end %>
   <p class="resource-description"><%= resource.short_description %></p>
 
-    <div class="small-12 column small-centered margin-top">
   <% if resource.executed_for?(proposal) || (!resource.request_to_administrators && resource.active_for?(proposal)) %>
     <%= link_to t("dashboard.resource.view_resource"),
                 new_request_proposal_dashboard_action_path(proposal, resource),
-                    class: "button expanded" %>
+                class: "button" %>
   <% elsif resource.requested_for?(proposal) %>
     <strong><%= t("dashboard.resource.resource_requested") %></strong>
   <% elsif resource.active_for?(proposal) %>
     <%= link_to t("dashboard.resource.request_resource"),
                 new_request_proposal_dashboard_action_path(proposal, resource),
-                    class: "button expanded" %>
+                class: "button" %>
   <% else %>
     <strong><%= resource_availability_label %></strong>
   <% end %>
-    </div>
-  </div>
 </div>

app/components/dashboard/default_resource_component.html.erb

@@ -1,10 +1,6 @@
-<div class="small-12 medium-6 large-3 column end">
+<div class="resource-card">
-  <div class="resource-card" data-equalizer-watch="resources">
   <h4><%= t("dashboard.menu.#{resource}") %></h4>
   <p class="resource-description"><%= resource_description %></p>
 
-    <div class="small-12 column small-centered margin-top">
+  <%= link_to t("dashboard.resource.view_resource"), resource_path, class: "button" %>
-      <%= link_to t("dashboard.resource.view_resource"), resource_path, class: "button expanded" %>
-    </div>
-  </div>
 </div>

app/components/dashboard/resources_component.html.erb

@@ -1,7 +1,7 @@
 <div class="dashboard-resources">
   <h3 class="title"><%= t("dashboard.resources.available_resources") %></h3>
 
-  <div data-equalizer="resources" data-equalize-on="medium">
+  <div class="resources">
     <% default_resources.each do |resource| %>
       <%= render Dashboard::DefaultResourceComponent.new(resource, proposal) %>
     <% end %>