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

Use a flex layout to render participation processes lists

Browse Source 
This way we simplify the HTML, which had some `if...else` blocks that
were hard to follow because there were opening tags inside these blocks
while the closing tags were outside these blocks.

We're also making the CSS container-dependent instead of
window-dependent. Since there are between one and three elements inside
the panel, we accomplish this by making the element with the content
take its own line if the width of the panel is smaller than 35rem.

Note we're trying to keep the layout similar to what it was; since we're
no longer using negative margins (like the ones in the `.row` selector),
the votes element now gets a width of 22.5% instead of 25%.

Also note we're using the column-gap property for flexbox because the
`flex-with-gap` mixin doesn't work so well with elements that have
borders. Since the column-gap property for flexbox is now supperted by
more than 98% of the browsers (which wasn't the case when we started
using the `flex-with-gap` mixin), the `flex-with-gap` mixin has become
obsolete.

Finally, note we're removing the `max-width: 12rem` rule in the images.
I'm not sure why we introduced this rule in the first place, and it
didn't play so well to the new layout. I considered using code like
`max-width: min(100%, 12rem)`, but, since I'm not sure why `12rem` was
there in the first place, I'm not sure whether this approach was better,
and it sure made things more complex.
This commit is contained in:
Javi Martín
2025-02-22 17:50:59 +01:00
parent 6b81799cf9
commit 11816f833d
10 changed files with 259 additions and 311 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
app/assets/stylesheets/legislation_process.scss
View File

@@ -812,7 +812,6 @@
.proposal h3 { .proposal h3 {
font-size: rem-calc(20); font-size: rem-calc(20);
margin-top: 0;
} }
} }

62
app/assets/stylesheets/participation.scss
View File

@@ -385,41 +385,53 @@
@include breakpoint(medium) { @include breakpoint(medium) {
min-height: $line-height * 15; min-height: $line-height * 15;
.with-image > .row {
display: flex;
}
} }
} }
.budget-investments-list .budget-investment, .debates-list,
.proposals-list .proposal, .proposals-list,
.legislation-proposals .proposal { .budget-investments-list,
.legislation-proposals {
@include breakpoint(medium) { .panel {
column-gap: calc(rem-calc(map-get($grid-column-gutter, medium)) * 3 / 4);
display: flex;
flex-wrap: wrap;
.panel { > * {
flex-grow: 1;
}
&.with-image { &.with-image {
padding: 0 calc($line-height / 2) 0 0; padding-bottom: 0;
padding-top: 0;
.panel-image {
margin-#{$global-left}: rem-calc(-12);
text-align: center;
~ * {
padding-top: calc($line-height / 2);
}
}
img {
height: 100%;
} }
} }
.column:first-child { .debate-content,
overflow: hidden; .budget-investment-content,
} .proposal-content {
flex-basis: calc((35rem - 100%) * 999);
flex-grow: 1000;
max-width: 50rem;
.column:nth-child(2) { + * {
float: left; flex-basis: 22.5%;
} flex-shrink: 0;
text-align: center;
.column:last-child:not(:first-child) { }
padding-top: calc($line-height / 2);
}
img {
height: 100%;
max-width: 12rem;
} }
} }
} }

16
app/helpers/proposals_helper.rb
View File

@@ -64,22 +64,6 @@ module ProposalsHelper
proposals_current_view == "default" ? "minimal" : "default" proposals_current_view == "default" ? "minimal" : "default"
end end
def css_for_proposal_info_row(proposal)
if proposal.image.present?
if params[:selected].present?
"small-12 medium-9 column"
else
"small-12 medium-6 large-7 column"
end
else
if params[:selected].present?
"small-12 column"
else
"small-12 medium-9 column"
end
end
end
def show_proposal_votes? def show_proposal_votes?
params[:selected].blank? params[:selected].blank?
end end

96
app/views/budgets/investments/_investment.html.erb
View File

@@ -2,69 +2,55 @@
<div class="panel <%= ("with-image" if feature?(:allow_images) && investment.image.present?) %>"> <div class="panel <%= ("with-image" if feature?(:allow_images) && investment.image.present?) %>">
<% if feature?(:allow_images) && investment.image.present? %> <% if feature?(:allow_images) && investment.image.present? %>
<div class="row"> <div class="panel-image">
<div class="small-12 medium-3 large-2 column text-center">
<%= image_tag investment.image.variant(:thumb), alt: investment.image.title.unicode_normalize %> <%= image_tag investment.image.variant(:thumb), alt: investment.image.title.unicode_normalize %>
</div> </div>
<div class="small-12 medium-6 large-7 column">
<% else %>
<div class="row">
<div class="small-12 medium-9 column">
<% end %> <% end %>
<div class="budget-investment-content">
<% cache [locale_and_user_status(investment), "index", investment, investment.author] do %> <div class="budget-investment-content">
<h3><%= link_to investment.title, namespaced_budget_investment_path(investment) %></h3> <% cache [locale_and_user_status(investment), "index", investment, investment.author] do %>
<h3><%= link_to investment.title, namespaced_budget_investment_path(investment) %></h3>
<%= render Budgets::Investments::InfoComponent.new(investment) %> <%= render Budgets::Investments::InfoComponent.new(investment) %>
<div class="investment-project-description"> <div class="investment-project-description">
<%= wysiwyg(investment.description) %> <%= wysiwyg(investment.description) %>
<div class="truncate"></div> <div class="truncate"></div>
</div>
<%= render "shared/tags", taggable: investment, limit: 5 %>
<% end %>
</div> </div>
</div> <%= render "shared/tags", taggable: investment, limit: 5 %>
<% unless investment.unfeasible? %>
<% if investment.should_show_votes? %>
<div id="<%= dom_id(investment) %>_votes"
class="small-12 medium-3 column text-center">
<%= render Budgets::Investments::VotesComponent.new(investment) %>
</div>
<% elsif investment.should_show_vote_count? %>
<div id="<%= dom_id(investment) %>_votes"
class="small-12 medium-3 column text-center">
<div class="supports">
<span class="total-supports no-button">
<%= t("budgets.investments.investment.supports",
count: investment.total_votes) %>
</span>
</div>
</div>
<% elsif investment.should_show_ballots? && !management_controller? %>
<div id="<%= dom_id(investment) %>_ballot"
class="small-12 medium-3 column text-center">
<%= render "/budgets/investments/ballot",
investment: investment,
investment_ids: investment_ids,
ballot: ballot %>
</div>
<% elsif investment.should_show_price? %>
<div id="<%= dom_id(investment) %>_price"
class="supports small-12 medium-3 column text-center">
<div class="supports">
<span class="total-supports no-button">
<%= investment.formatted_price %>
</span>
</div>
</div>
<% end %>
<% end %> <% end %>
</div> </div>
<% unless investment.unfeasible? %>
<% if investment.should_show_votes? %>
<div id="<%= dom_id(investment) %>_votes">
<%= render Budgets::Investments::VotesComponent.new(investment) %>
</div>
<% elsif investment.should_show_vote_count? %>
<div id="<%= dom_id(investment) %>_votes">
<div class="supports">
<span class="total-supports no-button">
<%= t("budgets.investments.investment.supports",
count: investment.total_votes) %>
</span>
</div>
</div>
<% elsif investment.should_show_ballots? && !management_controller? %>
<div id="<%= dom_id(investment) %>_ballot">
<%= render "/budgets/investments/ballot",
investment: investment,
investment_ids: investment_ids,
ballot: ballot %>
</div>
<% elsif investment.should_show_price? %>
<div id="<%= dom_id(investment) %>_price" class="supports">
<div class="supports">
<span class="total-supports no-button">
<%= investment.formatted_price %>
</span>
</div>
</div>
<% end %>
<% end %>
</div> </div>
</div> </div>

12
app/views/budgets/investments/_investment_minimal.html.erb
View File

@@ -1,13 +1,9 @@
<div id="<%= dom_id(investment) %>" class="budget-investment minimal clear"> <div id="<%= dom_id(investment) %>" class="budget-investment minimal clear">
<div class="panel"> <div class="panel">
<div class="row"> <div class="budget-investment-content">
<div class="small-12 column"> <% cache [locale_and_user_status(investment), "index_minimal", investment, investment.author] do %>
<div class="budget-investment-content"> <h3><%= link_to investment.title, namespaced_budget_investment_path(investment) %></h3>
<% cache [locale_and_user_status(investment), "index_minimal", investment, investment.author] do %> <% end %>
<h3><%= link_to investment.title, namespaced_budget_investment_path(investment) %></h3>
<% end %>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>

84
app/views/debates/_debate.html.erb
View File

@@ -1,57 +1,51 @@
<% cache [locale_and_user_status, debate, current_user&.voted_as_when_voted_for(debate)] do %> <% cache [locale_and_user_status, debate, current_user&.voted_as_when_voted_for(debate)] do %>
<div id="<%= dom_id(debate) %>" class="debate clear" data-type="debate"> <div id="<%= dom_id(debate) %>" class="debate clear" data-type="debate">
<div class="panel"> <div class="panel">
<div class="row"> <div class="debate-content">
<h3><%= link_to debate.title, debate %></h3>
<p class="debate-info">
<%= l debate.created_at.to_date %>
<span class="bullet">&nbsp;&bull;&nbsp;</span>
<%= render Shared::CommentsCountComponent.new(
debate.comments_count,
url: debate_path(debate, anchor: "comments")
) %>
<div class="small-12 medium-9 column"> <% if debate.author.hidden? || debate.author.erased? %>
<div class="debate-content"> <span class="bullet">&nbsp;&bull;&nbsp;</span>
<h3><%= link_to debate.title, debate %></h3> <span class="author">
<p class="debate-info"> <%= t("debates.show.author_deleted") %>
<%= l debate.created_at.to_date %> </span>
<% else %>
<span class="bullet">&nbsp;&bull;&nbsp;</span>
<span class="author">
<%= debate.author.name %>
</span>
<% if debate.author.display_official_position_badge? %>
<span class="bullet">&nbsp;&bull;&nbsp;</span> <span class="bullet">&nbsp;&bull;&nbsp;</span>
<%= render Shared::CommentsCountComponent.new( <span class="label round level-<%= debate.author.official_level %>">
debate.comments_count, <%= debate.author.official_position %>
url: debate_path(debate, anchor: "comments") </span>
) %> <% end %>
<% end %>
<% if debate.author.hidden? || debate.author.erased? %> <% if debate.author.verified_organization? %>
<span class="bullet">&nbsp;&bull;&nbsp;</span> <span class="bullet">&nbsp;&bull;&nbsp;</span>
<span class="author"> <span class="label round is-association">
<%= t("debates.show.author_deleted") %> <%= t("shared.collective") %>
</span> </span>
<% else %> <% end %>
<span class="bullet">&nbsp;&bull;&nbsp;</span>
<span class="author">
<%= debate.author.name %>
</span>
<% if debate.author.display_official_position_badge? %>
<span class="bullet">&nbsp;&bull;&nbsp;</span>
<span class="label round level-<%= debate.author.official_level %>">
<%= debate.author.official_position %>
</span>
<% end %>
<% end %>
<% if debate.author.verified_organization? %> </p>
<span class="bullet">&nbsp;&bull;&nbsp;</span> <div class="debate-description">
<span class="label round is-association"> <%= wysiwyg(debate.description) %>
<%= t("shared.collective") %> <div class="truncate"></div>
</span>
<% end %>
</p>
<div class="debate-description">
<%= wysiwyg(debate.description) %>
<div class="truncate"></div>
</div>
<%= render "shared/tags", taggable: debate, limit: 5 %>
</div>
</div>
<div id="<%= dom_id(debate) %>_votes" class="small-12 medium-3 column">
<%= render Debates::VotesComponent.new(debate) %>
</div> </div>
<%= render "shared/tags", taggable: debate, limit: 5 %>
</div>
<div id="<%= dom_id(debate) %>_votes">
<%= render Debates::VotesComponent.new(debate) %>
</div> </div>
</div> </div>
</div> </div>

14
app/views/debates/_debate_minimal.html.erb
View File

@@ -1,14 +1,10 @@
<div id="<%= dom_id(debate) %>" class="debate minimal clear" data-type="debate"> <div id="<%= dom_id(debate) %>" class="debate minimal clear" data-type="debate">
<div class="panel"> <div class="panel">
<div class="row"> <div class="debate-content">
<div class="small-12 column"> <% cache [locale_and_user_status,
<div class="debate-content"> "index_minimal", debate, current_user&.voted_as_when_voted_for(debate)] do %>
<% cache [locale_and_user_status, <h3><%= link_to debate.title, debate %></h3>
"index_minimal", debate, current_user&.voted_as_when_voted_for(debate)] do %> <% end %>
<h3><%= link_to debate.title, debate %></h3>
<% end %>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>

124
app/views/legislation/proposals/_proposal.html.erb
View File

@@ -7,75 +7,69 @@
<% end %> <% end %>
<% if proposal.image.present? %> <% if proposal.image.present? %>
<div class="row"> <div class="panel-image">
<div class="small-12 medium-3 large-2 column text-center"> <%= image_tag proposal.image.variant(:thumb),
<%= image_tag proposal.image.variant(:thumb), alt: proposal.image.title.unicode_normalize %>
alt: proposal.image.title.unicode_normalize %> </div>
</div>
<div class="small-12 medium-6 large-7 column margin-top">
<% else %>
<div class="row">
<div class="small-12 medium-9 column">
<% end %> <% end %>
<div class="proposal-content">
<% cache [locale_and_user_status(proposal), "index", proposal, proposal.author] do %> <div class="proposal-content">
<h3><%= link_to proposal.title, legislation_process_proposal_path(proposal.legislation_process_id, proposal) %></h3> <% cache [locale_and_user_status(proposal), "index", proposal, proposal.author] do %>
<p class="proposal-info"> <h3><%= link_to proposal.title, legislation_process_proposal_path(proposal.legislation_process_id, proposal) %></h3>
<%= l proposal.created_at.to_date %> <p class="proposal-info">
<%= l proposal.created_at.to_date %>
<span class="bullet">&nbsp;&bull;&nbsp;</span>
<%= render Shared::CommentsCountComponent.new(
proposal.comments_count,
url: legislation_process_proposal_path(
proposal.legislation_process_id,
proposal,
anchor: "comments"
)
) %>
<% if proposal.author.hidden? || proposal.author.erased? %>
<span class="bullet">&nbsp;&bull;&nbsp;</span>
<span class="author">
<%= t("proposals.show.author_deleted") %>
</span>
<% else %>
<span class="bullet">&nbsp;&bull;&nbsp;</span>
<span class="author">
<%= proposal.author.name %>
</span>
<% if proposal.author.display_official_position_badge? %>
<span class="bullet">&nbsp;&bull;&nbsp;</span> <span class="bullet">&nbsp;&bull;&nbsp;</span>
<%= render Shared::CommentsCountComponent.new( <span class="label round level-<%= proposal.author.official_level %>">
proposal.comments_count, <%= proposal.author.official_position %>
url: legislation_process_proposal_path( </span>
proposal.legislation_process_id, <% end %>
proposal,
anchor: "comments"
)
) %>
<% if proposal.author.hidden? || proposal.author.erased? %>
<span class="bullet">&nbsp;&bull;&nbsp;</span>
<span class="author">
<%= t("proposals.show.author_deleted") %>
</span>
<% else %>
<span class="bullet">&nbsp;&bull;&nbsp;</span>
<span class="author">
<%= proposal.author.name %>
</span>
<% if proposal.author.display_official_position_badge? %>
<span class="bullet">&nbsp;&bull;&nbsp;</span>
<span class="label round level-<%= proposal.author.official_level %>">
<%= proposal.author.official_position %>
</span>
<% end %>
<% end %>
<% if proposal.author.verified_organization? %>
<span class="bullet">&nbsp;&bull;&nbsp;</span>
<span class="label round is-association">
<%= t("shared.collective") %>
</span>
<% end %>
<% if Geozone.any? %>
<span class="bullet">&nbsp;&bull;&nbsp;</span>
<span class="geozone">
<%= link_to geozone_name(proposal), legislation_process_proposals_path(proposal.legislation_process_id, search: geozone_name(proposal)) %>
</span>
<% end %>
</p>
<div class="proposal-description">
<p><%= proposal.summary %></p>
<div class="truncate"></div>
</div>
<%= render "shared/tags", taggable: proposal, limit: 5 %>
<% end %> <% end %>
</div>
</div>
<div id="<%= dom_id(proposal) %>_votes" class="small-12 medium-3 column"> <% if proposal.author.verified_organization? %>
<%= render Legislation::Proposals::VotesComponent.new(proposal) %> <span class="bullet">&nbsp;&bull;&nbsp;</span>
</div> <span class="label round is-association">
<%= t("shared.collective") %>
</span>
<% end %>
<% if Geozone.any? %>
<span class="bullet">&nbsp;&bull;&nbsp;</span>
<span class="geozone">
<%= link_to geozone_name(proposal), legislation_process_proposals_path(proposal.legislation_process_id, search: geozone_name(proposal)) %>
</span>
<% end %>
</p>
<div class="proposal-description">
<p><%= proposal.summary %></p>
<div class="truncate"></div>
</div>
<%= render "shared/tags", taggable: proposal, limit: 5 %>
<% end %>
</div>
<div id="<%= dom_id(proposal) %>_votes">
<%= render Legislation::Proposals::VotesComponent.new(proposal) %>
</div> </div>
</div> </div>
</div> </div>

147
app/views/proposals/_proposal.html.erb
View File

@@ -7,89 +7,80 @@
<% end %> <% end %>
<% if proposal.image.present? %> <% if proposal.image.present? %>
<div class="row"> <div class="panel-image">
<div class="small-12 medium-3 large-2 column text-center"> <%= image_tag proposal.image.variant(:thumb),
<%= image_tag proposal.image.variant(:thumb), alt: proposal.image.title.unicode_normalize %>
alt: proposal.image.title.unicode_normalize %>
</div>
<div class="<%= css_for_proposal_info_row(proposal) %>">
<% else %>
<div class="row">
<div class="<%= css_for_proposal_info_row(proposal) %>">
<% end %>
<div class="proposal-content">
<% cache [locale_and_user_status(proposal), "index", proposal, proposal.author] do %>
<h3><%= link_to proposal.title, namespaced_proposal_path(proposal) %></h3>
<p class="proposal-info">
<%= l proposal.created_at.to_date %>
<span class="bullet">&nbsp;&bull;&nbsp;</span>
<%= render Shared::CommentsCountComponent.new(
proposal.comments_count,
url: namespaced_proposal_path(proposal, anchor: "comments")
) %>
<% if proposal.author.hidden? || proposal.author.erased? %>
<span class="bullet">&nbsp;&bull;&nbsp;</span>
<span class="author">
<%= t("proposals.show.author_deleted") %>
</span>
<% else %>
<span class="bullet">&nbsp;&bull;&nbsp;</span>
<span class="author">
<%= proposal.author.name %>
</span>
<% if proposal.author.display_official_position_badge? %>
<span class="bullet">&nbsp;&bull;&nbsp;</span>
<span class="label round level-<%= proposal.author.official_level %>">
<%= proposal.author.official_position %>
</span>
<% end %>
<% end %>
<% if proposal.author.verified_organization? %>
<span class="bullet">&nbsp;&bull;&nbsp;</span>
<span class="label round is-association">
<%= t("shared.collective") %>
</span>
<% end %>
<% if Geozone.any? %>
<span class="bullet">&nbsp;&bull;&nbsp;</span>
<span class="geozone">
<%= link_to geozone_name(proposal), proposals_path(search: geozone_name(proposal)) %>
</span>
<% end %>
</p>
<div class="proposal-description">
<p><%= proposal.summary %></p>
<div class="truncate"></div>
</div>
<%= render "shared/tags", taggable: proposal, limit: 5 %>
<% end %>
</div>
</div> </div>
<% end %>
<% if show_proposal_votes? %> <div class="proposal-content">
<div id="<%= dom_id(proposal) %>_votes" <% cache [locale_and_user_status(proposal), "index", proposal, proposal.author] do %>
class="small-12 medium-3 column supports-container"> <h3><%= link_to proposal.title, namespaced_proposal_path(proposal) %></h3>
<% if proposal.successful? %> <p class="proposal-info">
<div class="padding"> <%= l proposal.created_at.to_date %>
<div class="supports text-center"> <span class="bullet">&nbsp;&bull;&nbsp;</span>
<%= render "proposals/supports", proposal: proposal %> <%= render Shared::CommentsCountComponent.new(
</div> proposal.comments_count,
</div> url: namespaced_proposal_path(proposal, anchor: "comments")
<% elsif proposal.archived? %> ) %>
<div class="padding text-center">
<strong><%= t("proposals.proposal.supports", count: proposal.total_votes) %></strong> <% if proposal.author.hidden? || proposal.author.erased? %>
<p><%= t("proposals.proposal.archived") %></p> <span class="bullet">&nbsp;&bull;&nbsp;</span>
</div> <span class="author">
<%= t("proposals.show.author_deleted") %>
</span>
<% else %> <% else %>
<%= render "votes", proposal: proposal %> <span class="bullet">&nbsp;&bull;&nbsp;</span>
<span class="author">
<%= proposal.author.name %>
</span>
<% if proposal.author.display_official_position_badge? %>
<span class="bullet">&nbsp;&bull;&nbsp;</span>
<span class="label round level-<%= proposal.author.official_level %>">
<%= proposal.author.official_position %>
</span>
<% end %>
<% end %> <% end %>
</div>
<% end %>
<% if proposal.author.verified_organization? %>
<span class="bullet">&nbsp;&bull;&nbsp;</span>
<span class="label round is-association">
<%= t("shared.collective") %>
</span>
<% end %>
<% if Geozone.any? %>
<span class="bullet">&nbsp;&bull;&nbsp;</span>
<span class="geozone">
<%= link_to geozone_name(proposal), proposals_path(search: geozone_name(proposal)) %>
</span>
<% end %>
</p>
<div class="proposal-description">
<p><%= proposal.summary %></p>
<div class="truncate"></div>
</div>
<%= render "shared/tags", taggable: proposal, limit: 5 %>
<% end %>
</div> </div>
<% if show_proposal_votes? %>
<div id="<%= dom_id(proposal) %>_votes" class="supports-container">
<% if proposal.successful? %>
<div class="padding">
<div class="supports">
<%= render "proposals/supports", proposal: proposal %>
</div>
</div>
<% elsif proposal.archived? %>
<div class="padding">
<strong><%= t("proposals.proposal.supports", count: proposal.total_votes) %></strong>
<p><%= t("proposals.proposal.archived") %></p>
</div>
<% else %>
<%= render "votes", proposal: proposal %>
<% end %>
</div>
<% end %>
</div> </div>
</div> </div>

14
app/views/proposals/_proposal_minimal.html.erb
View File

@@ -1,14 +1,10 @@
<div id="<%= dom_id(proposal) %>" class="proposal minimal clear" data-type="proposal"> <div id="<%= dom_id(proposal) %>" class="proposal minimal clear" data-type="proposal">
<div class="panel"> <div class="panel">
<div class="row"> <div class="proposal-content">
<div class="small-12 column"> <% cache [locale_and_user_status(proposal),
<div class="proposal-content"> "index_minimal", proposal, proposal.author] do %>
<% cache [locale_and_user_status(proposal), <h3><%= link_to proposal.title, namespaced_proposal_path(proposal) %></h3>
"index_minimal", proposal, proposal.author] do %> <% end %>
<h3><%= link_to proposal.title, namespaced_proposal_path(proposal) %></h3>
<% end %>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>