f285dfcbac
This way it's going to be easier to style the link on focus, since
styles like `box-shadow` weren't working properly when we had an inline
link with block elements inside, and adding the `display: inline-block`
element to the link didn't play well with the layout we were using for
the recommendations.
We're also fixing the focus outline on recommendations, which didn't
look properly because of the border added with:
```
.recommended-index {
// (...)
@include full-width-border(top, 1px solid #fafafa);
}
```
The border was on top of the outline, breaking it. Increasing the
`z-index` of the element containing the outline solves the issue.
In a similar way, we're making sure the button to hide recommendations
stays visible so it's easier to click it.
35 lines
1.5 KiB
Plaintext
35 lines
1.5 KiB
Plaintext
<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>
|
|
|
|
<div id="recommendations" data-toggler=".hide">
|
|
<%= link_to disable_recommendations_path, title: t("shared.recommended_index.hide"),
|
|
class: "float-right-medium small 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 %>
|
|
|
|
<% recommended.each_with_index do |recommended, index| %>
|
|
<div class="small-12 medium-6 large-4 column end">
|
|
<div class="recommendation" data-equalizer-watch>
|
|
<h3><%= link_to recommended.title, recommended_path(recommended) %></h3>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
|
|
<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>
|