Fix focus outline on budget executions index

The outline was invisible when we had the link containing block
elements, and I didn't manage to fix it, so the easiest solution is to
use an inline link and style the card with CSS.
This commit is contained in:
Javi Martín
2023-09-27 17:21:34 +02:00
parent f285dfcbac
commit b15512f025
2 changed files with 14 additions and 12 deletions

View File

@@ -1284,6 +1284,7 @@
}
.budget-execution {
@include card;
border: 1px solid $border;
overflow: hidden;
position: relative;

View File

@@ -5,19 +5,20 @@
<div class="row" data-equalizer-on="medium" data-equalizer>
<% investments.each do |investment| %>
<div class="small-12 medium-6 large-4 column end margin-bottom">
<div class="budget-execution">
<%= link_to budget_investment_path(@budget, investment, anchor: "tab-milestones"), data: { "equalizer-watch": true } do %>
<%= render Budgets::Executions::ImageComponent.new(investment) %>
<div class="budget-execution-info">
<div class="budget-execution-content">
<h5><%= investment.title %></h5>
<span class="author"><%= investment.author.name %></span>
</div>
<p class="price margin-top text-center">
<strong><%= investment.formatted_price %></strong>
</p>
<div class="budget-execution" data-equalizer-watch>
<%= render Budgets::Executions::ImageComponent.new(investment) %>
<div class="budget-execution-info">
<div class="budget-execution-content">
<h5>
<%= link_to investment.title,
budget_investment_path(@budget, investment, anchor: "tab-milestones") %>
</h5>
<span class="author"><%= investment.author.name %></span>
</div>
<% end %>
<p class="price margin-top text-center">
<strong><%= investment.formatted_price %></strong>
</p>
</div>
</div>
</div>
<% end %>