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.
This commit is contained in:
Javi Martín
2024-10-23 01:42:14 +02:00
parent 054fbf585e
commit 34d87dff98
2 changed files with 15 additions and 12 deletions

View File

@@ -16,9 +16,14 @@
text-transform: uppercase; text-transform: uppercase;
} }
h3 { ul {
font-size: $base-font-size; font-weight: bold;
margin-bottom: 0; list-style: none;
margin: 0;
> li {
margin-bottom: calc($line-height / 4);
}
} }
a { a {
@@ -29,11 +34,9 @@
} }
.recommendation { .recommendation {
@include card;
background: $body-background; background: $body-background;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15); box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15);
display: block; display: block;
margin-bottom: calc($line-height / 4);
padding: calc($line-height / 2); padding: calc($line-height / 2);
z-index: 1; z-index: 1;

View File

@@ -16,13 +16,13 @@
<span class="show-for-sr"><%= t("shared.recommended_index.hide") %></span> <span class="show-for-sr"><%= t("shared.recommended_index.hide") %></span>
<% end %> <% end %>
<% recommendations.each do |recommendation| %> <ul>
<div class="small-12 medium-6 large-4 column end"> <% recommendations.each do |recommendation| %>
<div class="recommendation" data-equalizer-watch> <li class="small-12 medium-6 large-4 column end">
<h3><%= link_to recommendation.title, polymorphic_path(recommendation) %></h3> <%= link_to recommendation.title, polymorphic_path(recommendation), class: "recommendation", "data-equalizer-watch": true %>
</div> </li>
</div> <% end %>
<% end %> </ul>
<div class="small-12 column"> <div class="small-12 column">
<%= link_to t("shared.recommended_index.see_more"), <%= link_to t("shared.recommended_index.see_more"),