From 11816f833d64f3bcba150fd7f55e14c9ecadb432 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Sat, 22 Feb 2025 17:50:59 +0100 Subject: [PATCH] Use a flex layout to render participation processes lists 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. --- .../stylesheets/legislation_process.scss | 1 - app/assets/stylesheets/participation.scss | 62 +++++--- app/helpers/proposals_helper.rb | 16 -- .../budgets/investments/_investment.html.erb | 96 +++++------- .../investments/_investment_minimal.html.erb | 12 +- app/views/debates/_debate.html.erb | 84 +++++----- app/views/debates/_debate_minimal.html.erb | 14 +- .../legislation/proposals/_proposal.html.erb | 124 +++++++-------- app/views/proposals/_proposal.html.erb | 147 ++++++++---------- .../proposals/_proposal_minimal.html.erb | 14 +- 10 files changed, 259 insertions(+), 311 deletions(-) diff --git a/app/assets/stylesheets/legislation_process.scss b/app/assets/stylesheets/legislation_process.scss index 3bd4106e0..5e7f78fc7 100644 --- a/app/assets/stylesheets/legislation_process.scss +++ b/app/assets/stylesheets/legislation_process.scss @@ -812,7 +812,6 @@ .proposal h3 { font-size: rem-calc(20); - margin-top: 0; } } diff --git a/app/assets/stylesheets/participation.scss b/app/assets/stylesheets/participation.scss index 270fe56aa..7f06d370c 100644 --- a/app/assets/stylesheets/participation.scss +++ b/app/assets/stylesheets/participation.scss @@ -385,41 +385,53 @@ @include breakpoint(medium) { min-height: $line-height * 15; - - .with-image > .row { - display: flex; - } } } -.budget-investments-list .budget-investment, -.proposals-list .proposal, -.legislation-proposals .proposal { +.debates-list, +.proposals-list, +.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 { - padding: 0 calc($line-height / 2) 0 0; + &.with-image { + 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 { - overflow: hidden; - } + .debate-content, + .budget-investment-content, + .proposal-content { + flex-basis: calc((35rem - 100%) * 999); + flex-grow: 1000; + max-width: 50rem; - .column:nth-child(2) { - float: left; - } - - .column:last-child:not(:first-child) { - padding-top: calc($line-height / 2); - } - - img { - height: 100%; - max-width: 12rem; + + * { + flex-basis: 22.5%; + flex-shrink: 0; + text-align: center; + } } } } diff --git a/app/helpers/proposals_helper.rb b/app/helpers/proposals_helper.rb index a497c7037..cfd9a79b0 100644 --- a/app/helpers/proposals_helper.rb +++ b/app/helpers/proposals_helper.rb @@ -64,22 +64,6 @@ module ProposalsHelper proposals_current_view == "default" ? "minimal" : "default" 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? params[:selected].blank? end diff --git a/app/views/budgets/investments/_investment.html.erb b/app/views/budgets/investments/_investment.html.erb index 2f67a5a9a..c60a0a760 100644 --- a/app/views/budgets/investments/_investment.html.erb +++ b/app/views/budgets/investments/_investment.html.erb @@ -2,69 +2,55 @@
"> <% if feature?(:allow_images) && investment.image.present? %> -
- -
+
<%= image_tag investment.image.variant(:thumb), alt: investment.image.title.unicode_normalize %>
- -
- <% else %> -
-
<% end %> -
- <% cache [locale_and_user_status(investment), "index", investment, investment.author] do %> -

<%= link_to investment.title, namespaced_budget_investment_path(investment) %>

+
+ <% cache [locale_and_user_status(investment), "index", investment, investment.author] do %> +

<%= link_to investment.title, namespaced_budget_investment_path(investment) %>

- <%= render Budgets::Investments::InfoComponent.new(investment) %> + <%= render Budgets::Investments::InfoComponent.new(investment) %> -
- <%= wysiwyg(investment.description) %> -
-
- <%= render "shared/tags", taggable: investment, limit: 5 %> - <% end %> +
+ <%= wysiwyg(investment.description) %> +
-
- - <% unless investment.unfeasible? %> - - <% if investment.should_show_votes? %> -
- <%= render Budgets::Investments::VotesComponent.new(investment) %> -
- <% elsif investment.should_show_vote_count? %> -
-
- - <%= t("budgets.investments.investment.supports", - count: investment.total_votes) %> - -
-
- <% elsif investment.should_show_ballots? && !management_controller? %> -
- <%= render "/budgets/investments/ballot", - investment: investment, - investment_ids: investment_ids, - ballot: ballot %> -
- <% elsif investment.should_show_price? %> -
-
- - <%= investment.formatted_price %> - -
-
- <% end %> + <%= render "shared/tags", taggable: investment, limit: 5 %> <% end %>
+ + <% unless investment.unfeasible? %> + <% if investment.should_show_votes? %> +
+ <%= render Budgets::Investments::VotesComponent.new(investment) %> +
+ <% elsif investment.should_show_vote_count? %> +
+
+ + <%= t("budgets.investments.investment.supports", + count: investment.total_votes) %> + +
+
+ <% elsif investment.should_show_ballots? && !management_controller? %> +
+ <%= render "/budgets/investments/ballot", + investment: investment, + investment_ids: investment_ids, + ballot: ballot %> +
+ <% elsif investment.should_show_price? %> +
+
+ + <%= investment.formatted_price %> + +
+
+ <% end %> + <% end %>
diff --git a/app/views/budgets/investments/_investment_minimal.html.erb b/app/views/budgets/investments/_investment_minimal.html.erb index ca0b1f27f..20207d7b4 100644 --- a/app/views/budgets/investments/_investment_minimal.html.erb +++ b/app/views/budgets/investments/_investment_minimal.html.erb @@ -1,13 +1,9 @@
-
-
-
- <% cache [locale_and_user_status(investment), "index_minimal", investment, investment.author] do %> -

<%= link_to investment.title, namespaced_budget_investment_path(investment) %>

- <% end %> -
-
+
+ <% cache [locale_and_user_status(investment), "index_minimal", investment, investment.author] do %> +

<%= link_to investment.title, namespaced_budget_investment_path(investment) %>

+ <% end %>
diff --git a/app/views/debates/_debate.html.erb b/app/views/debates/_debate.html.erb index 68de5a60d..27caa521e 100644 --- a/app/views/debates/_debate.html.erb +++ b/app/views/debates/_debate.html.erb @@ -1,57 +1,51 @@ <% cache [locale_and_user_status, debate, current_user&.voted_as_when_voted_for(debate)] do %>
-
+
+

<%= link_to debate.title, debate %>

+

+ <%= l debate.created_at.to_date %> +  •  + <%= render Shared::CommentsCountComponent.new( + debate.comments_count, + url: debate_path(debate, anchor: "comments") + ) %> -

-
-

<%= link_to debate.title, debate %>

-

- <%= l debate.created_at.to_date %> + <% if debate.author.hidden? || debate.author.erased? %> +  •  + + <%= t("debates.show.author_deleted") %> + + <% else %> +  •  + + <%= debate.author.name %> + + <% if debate.author.display_official_position_badge? %>  •  - <%= render Shared::CommentsCountComponent.new( - debate.comments_count, - url: debate_path(debate, anchor: "comments") - ) %> + + <%= debate.author.official_position %> + + <% end %> + <% end %> - <% if debate.author.hidden? || debate.author.erased? %> -  •  - - <%= t("debates.show.author_deleted") %> - - <% else %> -  •  - - <%= debate.author.name %> - - <% if debate.author.display_official_position_badge? %> -  •  - - <%= debate.author.official_position %> - - <% end %> - <% end %> + <% if debate.author.verified_organization? %> +  •  + + <%= t("shared.collective") %> + + <% end %> - <% if debate.author.verified_organization? %> -  •  - - <%= t("shared.collective") %> - - <% end %> - -

-
- <%= wysiwyg(debate.description) %> -
-
- <%= render "shared/tags", taggable: debate, limit: 5 %> -
-
- -
- <%= render Debates::VotesComponent.new(debate) %> +

+
+ <%= wysiwyg(debate.description) %> +
+ <%= render "shared/tags", taggable: debate, limit: 5 %> +
+
+ <%= render Debates::VotesComponent.new(debate) %>
diff --git a/app/views/debates/_debate_minimal.html.erb b/app/views/debates/_debate_minimal.html.erb index e0156d95a..18c757d38 100644 --- a/app/views/debates/_debate_minimal.html.erb +++ b/app/views/debates/_debate_minimal.html.erb @@ -1,14 +1,10 @@
-
-
-
- <% cache [locale_and_user_status, - "index_minimal", debate, current_user&.voted_as_when_voted_for(debate)] do %> -

<%= link_to debate.title, debate %>

- <% end %> -
-
+
+ <% cache [locale_and_user_status, + "index_minimal", debate, current_user&.voted_as_when_voted_for(debate)] do %> +

<%= link_to debate.title, debate %>

+ <% end %>
diff --git a/app/views/legislation/proposals/_proposal.html.erb b/app/views/legislation/proposals/_proposal.html.erb index ece4edb35..79646d3af 100644 --- a/app/views/legislation/proposals/_proposal.html.erb +++ b/app/views/legislation/proposals/_proposal.html.erb @@ -7,75 +7,69 @@ <% end %> <% if proposal.image.present? %> -
-
- <%= image_tag proposal.image.variant(:thumb), - alt: proposal.image.title.unicode_normalize %> -
-
- <% else %> -
-
+
+ <%= image_tag proposal.image.variant(:thumb), + alt: proposal.image.title.unicode_normalize %> +
<% end %> -
- <% cache [locale_and_user_status(proposal), "index", proposal, proposal.author] do %> -

<%= link_to proposal.title, legislation_process_proposal_path(proposal.legislation_process_id, proposal) %>

-

- <%= l proposal.created_at.to_date %> + +

+ <% cache [locale_and_user_status(proposal), "index", proposal, proposal.author] do %> +

<%= link_to proposal.title, legislation_process_proposal_path(proposal.legislation_process_id, proposal) %>

+

+ <%= l proposal.created_at.to_date %> +  •  + <%= 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? %> +  •  + + <%= t("proposals.show.author_deleted") %> + + <% else %> +  •  + + <%= proposal.author.name %> + + <% if proposal.author.display_official_position_badge? %>  •  - <%= 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? %> -  •  - - <%= t("proposals.show.author_deleted") %> - - <% else %> -  •  - - <%= proposal.author.name %> - - <% if proposal.author.display_official_position_badge? %> -  •  - - <%= proposal.author.official_position %> - - <% end %> - <% end %> - - <% if proposal.author.verified_organization? %> -  •  - - <%= t("shared.collective") %> - - <% end %> - - <% if Geozone.any? %> -  •  - - <%= link_to geozone_name(proposal), legislation_process_proposals_path(proposal.legislation_process_id, search: geozone_name(proposal)) %> - - <% end %> -

-
-

<%= proposal.summary %>

-
-
- <%= render "shared/tags", taggable: proposal, limit: 5 %> + + <%= proposal.author.official_position %> + + <% end %> <% end %> -
-
-
- <%= render Legislation::Proposals::VotesComponent.new(proposal) %> -
+ <% if proposal.author.verified_organization? %> +  •  + + <%= t("shared.collective") %> + + <% end %> + + <% if Geozone.any? %> +  •  + + <%= link_to geozone_name(proposal), legislation_process_proposals_path(proposal.legislation_process_id, search: geozone_name(proposal)) %> + + <% end %> +

+
+

<%= proposal.summary %>

+
+
+ <%= render "shared/tags", taggable: proposal, limit: 5 %> + <% end %> +
+ +
+ <%= render Legislation::Proposals::VotesComponent.new(proposal) %>
diff --git a/app/views/proposals/_proposal.html.erb b/app/views/proposals/_proposal.html.erb index e4f89698a..3900b1448 100644 --- a/app/views/proposals/_proposal.html.erb +++ b/app/views/proposals/_proposal.html.erb @@ -7,89 +7,80 @@ <% end %> <% if proposal.image.present? %> -
-
- <%= image_tag proposal.image.variant(:thumb), - alt: proposal.image.title.unicode_normalize %> -
- -
- <% else %> -
-
- <% end %> -
- <% cache [locale_and_user_status(proposal), "index", proposal, proposal.author] do %> -

<%= link_to proposal.title, namespaced_proposal_path(proposal) %>

-

- <%= l proposal.created_at.to_date %> -  •  - <%= render Shared::CommentsCountComponent.new( - proposal.comments_count, - url: namespaced_proposal_path(proposal, anchor: "comments") - ) %> - - <% if proposal.author.hidden? || proposal.author.erased? %> -  •  - - <%= t("proposals.show.author_deleted") %> - - <% else %> -  •  - - <%= proposal.author.name %> - - <% if proposal.author.display_official_position_badge? %> -  •  - - <%= proposal.author.official_position %> - - <% end %> - <% end %> - - <% if proposal.author.verified_organization? %> -  •  - - <%= t("shared.collective") %> - - <% end %> - - <% if Geozone.any? %> -  •  - - <%= link_to geozone_name(proposal), proposals_path(search: geozone_name(proposal)) %> - - <% end %> -

-
-

<%= proposal.summary %>

-
-
- <%= render "shared/tags", taggable: proposal, limit: 5 %> - <% end %> -
+
+ <%= image_tag proposal.image.variant(:thumb), + alt: proposal.image.title.unicode_normalize %>
+ <% end %> - <% if show_proposal_votes? %> -
- <% if proposal.successful? %> -
-
- <%= render "proposals/supports", proposal: proposal %> -
-
- <% elsif proposal.archived? %> -
- <%= t("proposals.proposal.supports", count: proposal.total_votes) %> -

<%= t("proposals.proposal.archived") %>

-
+
+ <% cache [locale_and_user_status(proposal), "index", proposal, proposal.author] do %> +

<%= link_to proposal.title, namespaced_proposal_path(proposal) %>

+

+ <%= l proposal.created_at.to_date %> +  •  + <%= render Shared::CommentsCountComponent.new( + proposal.comments_count, + url: namespaced_proposal_path(proposal, anchor: "comments") + ) %> + + <% if proposal.author.hidden? || proposal.author.erased? %> +  •  + + <%= t("proposals.show.author_deleted") %> + <% else %> - <%= render "votes", proposal: proposal %> +  •  + + <%= proposal.author.name %> + + <% if proposal.author.display_official_position_badge? %> +  •  + + <%= proposal.author.official_position %> + + <% end %> <% end %> -

- <% end %> + <% if proposal.author.verified_organization? %> +  •  + + <%= t("shared.collective") %> + + <% end %> + + <% if Geozone.any? %> +  •  + + <%= link_to geozone_name(proposal), proposals_path(search: geozone_name(proposal)) %> + + <% end %> +

+
+

<%= proposal.summary %>

+
+
+ <%= render "shared/tags", taggable: proposal, limit: 5 %> + <% end %>
+ + <% if show_proposal_votes? %> +
+ <% if proposal.successful? %> +
+
+ <%= render "proposals/supports", proposal: proposal %> +
+
+ <% elsif proposal.archived? %> +
+ <%= t("proposals.proposal.supports", count: proposal.total_votes) %> +

<%= t("proposals.proposal.archived") %>

+
+ <% else %> + <%= render "votes", proposal: proposal %> + <% end %> +
+ <% end %>
diff --git a/app/views/proposals/_proposal_minimal.html.erb b/app/views/proposals/_proposal_minimal.html.erb index 373622925..6041839c7 100644 --- a/app/views/proposals/_proposal_minimal.html.erb +++ b/app/views/proposals/_proposal_minimal.html.erb @@ -1,14 +1,10 @@
-
-
-
- <% cache [locale_and_user_status(proposal), - "index_minimal", proposal, proposal.author] do %> -

<%= link_to proposal.title, namespaced_proposal_path(proposal) %>

- <% end %> -
-
+
+ <% cache [locale_and_user_status(proposal), + "index_minimal", proposal, proposal.author] do %> +

<%= link_to proposal.title, namespaced_proposal_path(proposal) %>

+ <% end %>