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

Use grid instead of equalizer in dashboard resources

Browse Source 
Move resource cards layout inside #available-resources-section and switch
from equalizer alignment to a responsive grid layout.

Note that using `grid-auto-rows: 1fr` requires us to change the CSS of
the card itself so the "see resource" link remains at the bottom of the
card.
This commit is contained in:
taitus
2025-06-27 16:52:24 +02:00
committed by Javi Martín
parent 1f97a996f8
commit 1dc4f1c534
4 changed files with 73 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
app/assets/stylesheets/dashboard/resources.scss
View File

@@ -1,54 +1,58 @@
.dashboard-resources { .dashboard-resources {
.resource-card { .resources {
background: #d1f5eb; display: grid;
border-radius: rem-calc(4); gap: $line-height;
margin-bottom: $line-height; grid-auto-rows: 1fr;
min-height: $line-height * 9; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
padding: $line-height * 2 $line-height $line-height;
position: relative;
text-align: center;
&.alert { .resource-card {
background: #feeaeb; background: #d1f5eb;
border-radius: rem-calc(4);
display: flex;
flex-direction: column;
justify-content: space-between;
padding: $line-height * 2 $line-height $line-height;
position: relative;
text-align: center;
&.alert {
background: #feeaeb;
&::before {
color: #fb9497;
content: "\74";
}
}
&::before { &::before {
color: #fb9497; border: 2px solid;
content: "\74"; border-radius: rem-calc(40);
color: #00cb96;
content: "\6c";
font-family: "icons";
font-size: rem-calc(20);
height: rem-calc(36);
position: absolute;
right: 12px;
top: 12px;
width: rem-calc(36);
} }
}
&::before { .label {
border: 2px solid; left: 0;
border-radius: rem-calc(40); position: absolute;
color: #00cb96; top: 20px;
content: "\6c"; }
font-family: "icons";
font-size: rem-calc(20);
height: rem-calc(36);
position: absolute;
right: 12px;
top: 12px;
width: rem-calc(36);
}
.label { h4 {
left: 0; margin-top: $line-height;
position: absolute; }
top: 20px;
}
h4 { .button {
margin-top: $line-height; background: #00cb96;
} color: #000;
font-weight: bold;
.resource-description { }
min-height: $line-height * 4;
}
.button {
background: #00cb96;
color: #000;
font-weight: bold;
} }
} }
} }

46
app/components/dashboard/active_resource_component.html.erb
View File

@@ -1,27 +1,23 @@
<div id="<%= dom_id(resource) %>" class="small-12 medium-6 large-3 column end"> <div id="<%= dom_id(resource) %>"
<div class="resource-card <%= resource_card_class %>" class="resource-card <%= resource_card_class %>"
data-equalizer-watch="resources" title="<%= resource_tooltip %>">
title="<%= resource_tooltip %>"> <h4><%= resource.title %></h4>
<h4><%= resource.title %></h4> <% if is_new_action_since_last_login?(resource, new_actions_since_last_login) %>
<% if is_new_action_since_last_login?(resource, new_actions_since_last_login) %> <span class="label"><%= t("dashboard.progress.new_action") %></span>
<span class="label"><%= t("dashboard.progress.new_action") %></span> <% end %>
<% end %> <p class="resource-description"><%= resource.short_description %></p>
<p class="resource-description"><%= resource.short_description %></p>
<div class="small-12 column small-centered margin-top"> <% if resource.executed_for?(proposal) || (!resource.request_to_administrators && resource.active_for?(proposal)) %>
<% if resource.executed_for?(proposal) || (!resource.request_to_administrators && resource.active_for?(proposal)) %> <%= link_to t("dashboard.resource.view_resource"),
<%= link_to t("dashboard.resource.view_resource"), new_request_proposal_dashboard_action_path(proposal, resource),
new_request_proposal_dashboard_action_path(proposal, resource), class: "button" %>
class: "button expanded" %> <% elsif resource.requested_for?(proposal) %>
<% elsif resource.requested_for?(proposal) %> <strong><%= t("dashboard.resource.resource_requested") %></strong>
<strong><%= t("dashboard.resource.resource_requested") %></strong> <% elsif resource.active_for?(proposal) %>
<% elsif resource.active_for?(proposal) %> <%= link_to t("dashboard.resource.request_resource"),
<%= link_to t("dashboard.resource.request_resource"), new_request_proposal_dashboard_action_path(proposal, resource),
new_request_proposal_dashboard_action_path(proposal, resource), class: "button" %>
class: "button expanded" %> <% else %>
<% else %> <strong><%= resource_availability_label %></strong>
<strong><%= resource_availability_label %></strong> <% end %>
<% end %>
</div>
</div>
</div> </div>

12
app/components/dashboard/default_resource_component.html.erb
View File

@@ -1,10 +1,6 @@
<div class="small-12 medium-6 large-3 column end"> <div class="resource-card">
<div class="resource-card" data-equalizer-watch="resources"> <h4><%= t("dashboard.menu.#{resource}") %></h4>
<h4><%= t("dashboard.menu.#{resource}") %></h4> <p class="resource-description"><%= resource_description %></p>
<p class="resource-description"><%= resource_description %></p>
<div class="small-12 column small-centered margin-top"> <%= link_to t("dashboard.resource.view_resource"), resource_path, class: "button" %>
<%= link_to t("dashboard.resource.view_resource"), resource_path, class: "button expanded" %>
</div>
</div>
</div> </div>

2
app/components/dashboard/resources_component.html.erb
View File

@@ -1,7 +1,7 @@
<div class="dashboard-resources"> <div class="dashboard-resources">
<h3 class="title"><%= t("dashboard.resources.available_resources") %></h3> <h3 class="title"><%= t("dashboard.resources.available_resources") %></h3>
<div data-equalizer="resources" data-equalize-on="medium"> <div class="resources">
<% default_resources.each do |resource| %> <% default_resources.each do |resource| %>
<%= render Dashboard::DefaultResourceComponent.new(resource, proposal) %> <%= render Dashboard::DefaultResourceComponent.new(resource, proposal) %>
<% end %> <% end %>