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.
31 lines
1.2 KiB
Plaintext
31 lines
1.2 KiB
Plaintext
<div class="recommended-index">
|
|
<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>
|
|
<% end %>
|
|
|
|
<ul>
|
|
<% recommendations.each do |recommendation| %>
|
|
<li>
|
|
<%= link_to recommendation.title, polymorphic_path(recommendation), class: "recommendation" %>
|
|
</li>
|
|
<% end %>
|
|
</ul>
|
|
|
|
<div>
|
|
<%= link_to t("shared.recommended_index.see_more"),
|
|
current_path_with_query_params(order: "recommendations"),
|
|
class: "small" %>
|
|
</div>
|
|
</div>
|
|
</div>
|