From 34d87dff9857b61c6e545cf4312b54f1206afbd8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Wed, 23 Oct 2024 01:42:14 +0200
Subject: [PATCH] Use a list of links to display recommendations

We were using an <h3> tag with no content associated to it. This is like
having a chapter in a book with only the title.
---
 .../stylesheets/shared/recommended_index.scss      | 13 ++++++++-----
 .../shared/recommended_index_component.html.erb    | 14 +++++++-------
 2 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/app/assets/stylesheets/shared/recommended_index.scss b/app/assets/stylesheets/shared/recommended_index.scss
index 8c0ee9466..0f581cb67 100644
--- a/app/assets/stylesheets/shared/recommended_index.scss
+++ b/app/assets/stylesheets/shared/recommended_index.scss
@@ -16,9 +16,14 @@
     text-transform: uppercase;
   }
 
-  h3 {
-    font-size: $base-font-size;
-    margin-bottom: 0;
+  ul {
+    font-weight: bold;
+    list-style: none;
+    margin: 0;
+
+    > li {
+      margin-bottom: calc($line-height / 4);
+    }
   }
 
   a {
@@ -29,11 +34,9 @@
   }
 
   .recommendation {
-    @include card;
     background: $body-background;
     box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15);
     display: block;
-    margin-bottom: calc($line-height / 4);
     padding: calc($line-height / 2);
     z-index: 1;
 
diff --git a/app/components/shared/recommended_index_component.html.erb b/app/components/shared/recommended_index_component.html.erb
index 713f6478a..20fbc176c 100644
--- a/app/components/shared/recommended_index_component.html.erb
+++ b/app/components/shared/recommended_index_component.html.erb
@@ -16,13 +16,13 @@
         <span class="show-for-sr"><%= t("shared.recommended_index.hide") %></span>
       <% end %>
 
-      <% recommendations.each do |recommendation| %>
-        <div class="small-12 medium-6 large-4 column end">
-          <div class="recommendation" data-equalizer-watch>
-            <h3><%= link_to recommendation.title, polymorphic_path(recommendation) %></h3>
-          </div>
-        </div>
-      <% end %>
+      <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"),