consul/nairobi
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Use grid instead of equalizer in recommendations

Browse Source 
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.
This commit is contained in:
Javi Martín
2024-10-23 01:47:50 +02:00
parent 34d87dff98
commit 4e129e7d9c
2 changed files with 42 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
app/assets/stylesheets/shared/recommended_index.scss
View File

@@ -17,10 +17,24 @@
} }
ul { ul {
display: grid;
font-weight: bold; font-weight: bold;
grid-auto-rows: 1fr;
grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
list-style: none; list-style: none;
margin: 0; margin: 0;
@include breakpoint(medium) {
+ * {
text-align: $global-right;
}
}
> li,
+ * {
@include grid-column-gutter;
}
> li { > li {
margin-bottom: calc($line-height / 4); margin-bottom: calc($line-height / 4);
} }
@@ -52,9 +66,13 @@
line-height: inherit; line-height: inherit;
position: absolute; position: absolute;
right: 12px; right: 12px;
top: -18px; top: 0;
z-index: 2; z-index: 2;
@include breakpoint(medium) {
top: -18px;
}
&:focus, &:focus,
&:hover { &:hover {
@include anchor-color-hover; @include anchor-color-hover;

50
app/components/shared/recommended_index_component.html.erb
View File

@@ -1,34 +1,30 @@
<div class="recommended-index"> <div class="recommended-index">
<div class="row relative" data-equalizer data-equalizer-on="medium"> <h2 class="show-for-sr"><%= t("shared.recommended_index.title") %></h2>
<div class="small-12 column">
<h2 class="show-for-sr"><%= t("shared.recommended_index.title") %></h2>
</div>
<div id="recommendations" data-toggler=".hide"> <div id="recommendations" data-toggler=".hide">
<%= button_to disable_recommendations_path, title: t("shared.recommended_index.hide"), <%= button_to disable_recommendations_path, title: t("shared.recommended_index.hide"),
class: "hide-recommendations", class: "hide-recommendations",
data: { data: {
toggle: "recommendations", toggle: "recommendations",
confirm: t("#{namespace}.index.recommendations.disable") confirm: t("#{namespace}.index.recommendations.disable")
}, },
method: :put do %> method: :put do %>
<span class="icon-x"></span> <span class="icon-x"></span>
<span class="show-for-sr"><%= t("shared.recommended_index.hide") %></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 %> <% end %>
</ul>
<ul> <div>
<% recommendations.each do |recommendation| %> <%= link_to t("shared.recommended_index.see_more"),
<li class="small-12 medium-6 large-4 column end"> current_path_with_query_params(order: "recommendations"),
<%= link_to recommendation.title, polymorphic_path(recommendation), class: "recommendation", "data-equalizer-watch": true %> class: "small" %>
</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> </div>
</div> </div>
</div> </div>