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 {
.resource-card {
background: #d1f5eb;
border-radius: rem-calc(4);
margin-bottom: $line-height;
min-height: $line-height * 9;
padding: $line-height * 2 $line-height $line-height;
position: relative;
text-align: center;
.resources {
display: grid;
gap: $line-height;
grid-auto-rows: 1fr;
grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
&.alert {
background: #feeaeb;
.resource-card {
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 {
color: #fb9497;
content: "\74";
border: 2px solid;
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 {
border: 2px solid;
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);
}
.label {
left: 0;
position: absolute;
top: 20px;
}
.label {
left: 0;
position: absolute;
top: 20px;
}
h4 {
margin-top: $line-height;
}
h4 {
margin-top: $line-height;
}
.resource-description {
min-height: $line-height * 4;
}
.button {
background: #00cb96;
color: #000;
font-weight: bold;
.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 class="resource-card <%= resource_card_class %>"
data-equalizer-watch="resources"
title="<%= resource_tooltip %>">
<h4><%= resource.title %></h4>
<% if is_new_action_since_last_login?(resource, new_actions_since_last_login) %>
<span class="label"><%= t("dashboard.progress.new_action") %></span>
<% end %>
<p class="resource-description"><%= resource.short_description %></p>
<div id="<%= dom_id(resource) %>"
class="resource-card <%= resource_card_class %>"
title="<%= resource_tooltip %>">
<h4><%= resource.title %></h4>
<% if is_new_action_since_last_login?(resource, new_actions_since_last_login) %>
<span class="label"><%= t("dashboard.progress.new_action") %></span>
<% end %>
<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)) %>
<%= link_to t("dashboard.resource.view_resource"),
new_request_proposal_dashboard_action_path(proposal, resource),
class: "button expanded" %>
<% elsif resource.requested_for?(proposal) %>
<strong><%= t("dashboard.resource.resource_requested") %></strong>
<% elsif resource.active_for?(proposal) %>
<%= link_to t("dashboard.resource.request_resource"),
new_request_proposal_dashboard_action_path(proposal, resource),
class: "button expanded" %>
<% else %>
<strong><%= resource_availability_label %></strong>
<% end %>
</div>
</div>
<% if resource.executed_for?(proposal) || (!resource.request_to_administrators && resource.active_for?(proposal)) %>
<%= link_to t("dashboard.resource.view_resource"),
new_request_proposal_dashboard_action_path(proposal, resource),
class: "button" %>
<% elsif resource.requested_for?(proposal) %>
<strong><%= t("dashboard.resource.resource_requested") %></strong>
<% elsif resource.active_for?(proposal) %>
<%= link_to t("dashboard.resource.request_resource"),
new_request_proposal_dashboard_action_path(proposal, resource),
class: "button" %>
<% else %>
<strong><%= resource_availability_label %></strong>
<% end %>
</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" data-equalizer-watch="resources">
<h4><%= t("dashboard.menu.#{resource}") %></h4>
<p class="resource-description"><%= resource_description %></p>
<div class="resource-card">
<h4><%= t("dashboard.menu.#{resource}") %></h4>
<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 expanded" %>
</div>
</div>
<%= link_to t("dashboard.resource.view_resource"), resource_path, class: "button" %>
</div>

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

@@ -1,7 +1,7 @@
<div class="dashboard-resources">
<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| %>
<%= render Dashboard::DefaultResourceComponent.new(resource, proposal) %>
<% end %>