From 4e129e7d9ca24d0985d97ab38ba6700da55347ed Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Wed, 23 Oct 2024 01:47:50 +0200
Subject: [PATCH] Use grid instead of equalizer in recommendations

It's August 2025 and support for grid layout has been available in about
99% of the browsers for some time now. All major browsers added support
for grid layouts in 2017, which means our rule to support browsers that
are 7 years old allows us to start using `display: grid`.

Using a grid layout allows displaying a dynamic number of rows while
keepin all of them the same height, the same foundation's equalizer
does, by setting `grid-auto-rows: 1fr`.

And the `grid-template-columns` property lets us use dynamic columns for
all screen sizes, always filling the available space. No need to use
breakpoints.
---
 .../stylesheets/shared/recommended_index.scss | 20 +++++++-
 .../recommended_index_component.html.erb      | 50 +++++++++----------
 2 files changed, 42 insertions(+), 28 deletions(-)

diff --git a/app/assets/stylesheets/shared/recommended_index.scss b/app/assets/stylesheets/shared/recommended_index.scss
index 0f581cb67..2c45d19b4 100644
--- a/app/assets/stylesheets/shared/recommended_index.scss
+++ b/app/assets/stylesheets/shared/recommended_index.scss
@@ -17,10 +17,24 @@
   }
 
   ul {
+    display: grid;
     font-weight: bold;
+    grid-auto-rows: 1fr;
+    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
     list-style: none;
     margin: 0;
 
+    @include breakpoint(medium) {
+      + * {
+        text-align: $global-right;
+      }
+    }
+
+    > li,
+    + * {
+      @include grid-column-gutter;
+    }
+
     > li {
       margin-bottom: calc($line-height / 4);
     }
@@ -52,9 +66,13 @@
     line-height: inherit;
     position: absolute;
     right: 12px;
-    top: -18px;
+    top: 0;
     z-index: 2;
 
+    @include breakpoint(medium) {
+      top: -18px;
+    }
+
     &:focus,
     &:hover {
       @include anchor-color-hover;
diff --git a/app/components/shared/recommended_index_component.html.erb b/app/components/shared/recommended_index_component.html.erb
index 20fbc176c..a535dcbfc 100644
--- a/app/components/shared/recommended_index_component.html.erb
+++ b/app/components/shared/recommended_index_component.html.erb
@@ -1,34 +1,30 @@
 <div class="recommended-index">
-  <div class="row relative" data-equalizer data-equalizer-on="medium">
-    <div class="small-12 column">
-      <h2 class="show-for-sr"><%= t("shared.recommended_index.title") %></h2>
-    </div>
+  <h2 class="show-for-sr"><%= t("shared.recommended_index.title") %></h2>
 
-    <div id="recommendations" data-toggler=".hide">
-      <%= button_to disable_recommendations_path, title: t("shared.recommended_index.hide"),
-                                                  class: "hide-recommendations",
-                                                  data: {
-                                                    toggle: "recommendations",
-                                                    confirm: t("#{namespace}.index.recommendations.disable")
-                                                  },
-                                                  method: :put do %>
-        <span class="icon-x"></span>
-        <span class="show-for-sr"><%= t("shared.recommended_index.hide") %></span>
+  <div id="recommendations" data-toggler=".hide">
+    <%= button_to disable_recommendations_path, title: t("shared.recommended_index.hide"),
+                                                class: "hide-recommendations",
+                                                data: {
+                                                  toggle: "recommendations",
+                                                  confirm: t("#{namespace}.index.recommendations.disable")
+                                                },
+                                                method: :put do %>
+      <span class="icon-x"></span>
+      <span class="show-for-sr"><%= t("shared.recommended_index.hide") %></span>
+    <% end %>
+
+    <ul>
+      <% recommendations.each do |recommendation| %>
+        <li>
+          <%= link_to recommendation.title, polymorphic_path(recommendation), class: "recommendation" %>
+        </li>
       <% end %>
+    </ul>
 
-      <ul>
-        <% recommendations.each do |recommendation| %>
-          <li class="small-12 medium-6 large-4 column end">
-            <%= link_to recommendation.title, polymorphic_path(recommendation), class: "recommendation", "data-equalizer-watch": true %>
-          </li>
-        <% end %>
-      </ul>
-
-      <div class="small-12 column">
-        <%= link_to t("shared.recommended_index.see_more"),
-                    current_path_with_query_params(order: "recommendations"),
-                    class: "float-right-medium small" %>
-      </div>
+    <div>
+      <%= link_to t("shared.recommended_index.see_more"),
+                  current_path_with_query_params(order: "recommendations"),
+                  class: "small" %>
     </div>
   </div>
 </div>