From b2a49cd2918dd4094c6b1675bc64344ef7060285 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Mon, 22 Apr 2024 03:16:40 +0200 Subject: [PATCH 01/26] Extract component to render the status of a poll We're renaming the existing HTML class in order to be consistent with the name of the component. --- .../stylesheets/polls/access_status.scss | 55 ++++++++++++++++++ app/assets/stylesheets/polls/poll.scss | 56 ------------------- .../polls/access_status_component.html.erb | 19 +++++++ .../polls/access_status_component.rb | 8 +++ app/components/polls/poll_component.html.erb | 21 +------ app/components/polls/poll_component.rb | 2 +- .../polls/access_status_component_spec.rb | 40 +++++++++++++ spec/components/polls/poll_component_spec.rb | 39 ------------- 8 files changed, 125 insertions(+), 115 deletions(-) create mode 100644 app/assets/stylesheets/polls/access_status.scss create mode 100644 app/components/polls/access_status_component.html.erb create mode 100644 app/components/polls/access_status_component.rb create mode 100644 spec/components/polls/access_status_component_spec.rb diff --git a/app/assets/stylesheets/polls/access_status.scss b/app/assets/stylesheets/polls/access_status.scss new file mode 100644 index 000000000..24391e76e --- /dev/null +++ b/app/assets/stylesheets/polls/access_status.scss @@ -0,0 +1,55 @@ +.poll .access-status { + border-bottom: 60px solid transparent; + border-top: 0; + height: 0; + position: absolute; + right: 0; + top: 0; + width: 0; + + &.cant-answer::after, + &.not-logged-in::after, + &.already-answer::after, + &.unverified::after { + font-family: "icons" !important; + left: 34px; + position: absolute; + top: 5px; + } + + &.cant-answer { + border-right: 60px solid $alert-bg; + + &::after { + color: $color-alert; + content: "\74"; + } + } + + &.not-logged-in { + border-right: 60px solid $info-bg; + + &::after { + color: $color-info; + content: "\6f"; + } + } + + &.unverified { + border-right: 60px solid $warning-bg; + + &::after { + color: $color-warning; + content: "\6f"; + } + } + + &.already-answer { + border-right: 60px solid $success-bg; + + &::after { + color: $color-success; + content: "\59"; + } + } +} diff --git a/app/assets/stylesheets/polls/poll.scss b/app/assets/stylesheets/polls/poll.scss index 8e3446ef7..e97264af5 100644 --- a/app/assets/stylesheets/polls/poll.scss +++ b/app/assets/stylesheets/polls/poll.scss @@ -12,62 +12,6 @@ } } - .icon-poll-answer { - border-bottom: 60px solid transparent; - border-top: 0; - height: 0; - position: absolute; - right: 0; - top: 0; - width: 0; - - &.cant-answer::after, - &.not-logged-in::after, - &.already-answer::after, - &.unverified::after { - font-family: "icons" !important; - left: 34px; - position: absolute; - top: 5px; - } - - &.cant-answer { - border-right: 60px solid $alert-bg; - - &::after { - color: $color-alert; - content: "\74"; - } - } - - &.not-logged-in { - border-right: 60px solid $info-bg; - - &::after { - color: $color-info; - content: "\6f"; - } - } - - &.unverified { - border-right: 60px solid $warning-bg; - - &::after { - color: $color-warning; - content: "\6f"; - } - } - - &.already-answer { - border-right: 60px solid $success-bg; - - &::after { - color: $color-success; - content: "\59"; - } - } - } - .dates { color: $text-medium; font-size: $small-font-size; diff --git a/app/components/polls/access_status_component.html.erb b/app/components/polls/access_status_component.html.erb new file mode 100644 index 000000000..046094db9 --- /dev/null +++ b/app/components/polls/access_status_component.html.erb @@ -0,0 +1,19 @@ +<% if current_user %> + <% if current_user.unverified? %> +
"> + <%= t("polls.index.unverified") %> +
+ <% elsif cannot?(:answer, poll) %> +
"> + <%= t("polls.index.cant_answer") %> +
+ <% elsif !poll.votable_by?(current_user) %> +
"> + <%= t("polls.index.already_answer") %> +
+ <% end %> +<% else %> +
"> + <%= t("polls.index.not_logged_in") %> +
+<% end %> diff --git a/app/components/polls/access_status_component.rb b/app/components/polls/access_status_component.rb new file mode 100644 index 000000000..faf10512e --- /dev/null +++ b/app/components/polls/access_status_component.rb @@ -0,0 +1,8 @@ +class Polls::AccessStatusComponent < ApplicationComponent + attr_reader :poll + use_helpers :cannot?, :current_user + + def initialize(poll) + @poll = poll + end +end diff --git a/app/components/polls/poll_component.html.erb b/app/components/polls/poll_component.html.erb index 110bef076..e290c9434 100644 --- a/app/components/polls/poll_component.html.erb +++ b/app/components/polls/poll_component.html.erb @@ -1,23 +1,6 @@
- <% if current_user %> - <% if current_user.unverified? %> -
"> - <%= t("polls.index.unverified") %> -
- <% elsif cannot?(:answer, poll) %> -
"> - <%= t("polls.index.cant_answer") %> -
- <% elsif !poll.votable_by?(current_user) %> -
"> - <%= t("polls.index.already_answer") %> -
- <% end %> - <% else %> -
"> - <%= t("polls.index.not_logged_in") %> -
- <% end %> + <%= render Polls::AccessStatusComponent.new(poll) %> +
diff --git a/app/components/polls/poll_component.rb b/app/components/polls/poll_component.rb index a1cda60ea..32b8b0b17 100644 --- a/app/components/polls/poll_component.rb +++ b/app/components/polls/poll_component.rb @@ -1,6 +1,6 @@ class Polls::PollComponent < ApplicationComponent attr_reader :poll - use_helpers :cannot?, :current_user, :link_to_poll + use_helpers :link_to_poll def initialize(poll) @poll = poll diff --git a/spec/components/polls/access_status_component_spec.rb b/spec/components/polls/access_status_component_spec.rb new file mode 100644 index 000000000..405f06049 --- /dev/null +++ b/spec/components/polls/access_status_component_spec.rb @@ -0,0 +1,40 @@ +require "rails_helper" + +describe Polls::AccessStatusComponent do + it "asks anonymous users to sign in" do + render_inline Polls::AccessStatusComponent.new(create(:poll)) + + expect(page).to have_css ".not-logged-in", count: 1 + expect(page).to have_content "You must sign in or sign up to participate" + end + + it "asks unverified users to verify their account" do + sign_in(create(:user)) + + render_inline Polls::AccessStatusComponent.new(create(:poll)) + + expect(page).to have_css ".unverified", count: 1 + expect(page).to have_content "You must verify your account to participate" + end + + it "tell users from different geozones that the poll isn't available" do + sign_in(create(:user, :level_two)) + + render_inline Polls::AccessStatusComponent.new(create(:poll, geozone_restricted: true)) + + expect(page).to have_css ".cant-answer", count: 1 + expect(page).to have_content "This poll is not available on your geozone" + end + + it "informs users when they've already participated" do + user = create(:user, :level_two) + poll = create(:poll) + create(:poll_voter, user: user, poll: poll) + + sign_in(user) + render_inline Polls::AccessStatusComponent.new(poll) + + expect(page).to have_css ".already-answer", count: 1 + expect(page).to have_content "You already have participated in this poll" + end +end diff --git a/spec/components/polls/poll_component_spec.rb b/spec/components/polls/poll_component_spec.rb index a12041ff8..4317ad2a8 100644 --- a/spec/components/polls/poll_component_spec.rb +++ b/spec/components/polls/poll_component_spec.rb @@ -3,45 +3,6 @@ require "rails_helper" describe Polls::PollComponent do include Rails.application.routes.url_helpers - describe "status message" do - it "asks anonymous users to sign in" do - render_inline Polls::PollComponent.new(create(:poll)) - - expect(page).to have_css ".not-logged-in", count: 1 - expect(page).to have_content "You must sign in or sign up to participate" - end - - it "asks unverified users to verify their account" do - sign_in(create(:user)) - - render_inline Polls::PollComponent.new(create(:poll)) - - expect(page).to have_css ".unverified", count: 1 - expect(page).to have_content "You must verify your account to participate" - end - - it "tell users from different geozones that the poll isn't available" do - sign_in(create(:user, :level_two)) - - render_inline Polls::PollComponent.new(create(:poll, geozone_restricted: true)) - - expect(page).to have_css ".cant-answer", count: 1 - expect(page).to have_content "This poll is not available on your geozone" - end - - it "informs users when they've already participated" do - user = create(:user, :level_two) - poll = create(:poll) - create(:poll_voter, user: user, poll: poll) - - sign_in(user) - render_inline Polls::PollComponent.new(poll) - - expect(page).to have_css ".already-answer", count: 1 - expect(page).to have_content "You already have participated in this poll" - end - end - describe "dates" do it "renders the dates inside an HTML tag" do poll = create(:poll, starts_at: "2015-07-15", ends_at: "2015-07-22") From 1b9d321c4e291e56ee782876ef21e1e465fbc71b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Mon, 22 Apr 2024 03:28:33 +0200 Subject: [PATCH 02/26] Extract methods in poll status component This way we remove duplication in the HTML. We're also adding a test checking what happens when users can vote in order to test the `render?` method we've added. --- .../polls/access_status_component.html.erb | 22 ++------------- .../polls/access_status_component.rb | 28 +++++++++++++++++++ .../polls/access_status_component_spec.rb | 8 ++++++ 3 files changed, 39 insertions(+), 19 deletions(-) diff --git a/app/components/polls/access_status_component.html.erb b/app/components/polls/access_status_component.html.erb index 046094db9..d82f5d669 100644 --- a/app/components/polls/access_status_component.html.erb +++ b/app/components/polls/access_status_component.html.erb @@ -1,19 +1,3 @@ -<% if current_user %> - <% if current_user.unverified? %> -
"> - <%= t("polls.index.unverified") %> -
- <% elsif cannot?(:answer, poll) %> -
"> - <%= t("polls.index.cant_answer") %> -
- <% elsif !poll.votable_by?(current_user) %> -
"> - <%= t("polls.index.already_answer") %> -
- <% end %> -<% else %> -
"> - <%= t("polls.index.not_logged_in") %> -
-<% end %> +
+ <%= text %> +
diff --git a/app/components/polls/access_status_component.rb b/app/components/polls/access_status_component.rb index faf10512e..f93c38a97 100644 --- a/app/components/polls/access_status_component.rb +++ b/app/components/polls/access_status_component.rb @@ -5,4 +5,32 @@ class Polls::AccessStatusComponent < ApplicationComponent def initialize(poll) @poll = poll end + + def render? + attributes.present? + end + + private + + def text + attributes[:text] + end + + def html_class + attributes[:class] + end + + def attributes + if current_user + if current_user.unverified? + { text: t("polls.index.unverified"), class: "unverified" } + elsif cannot?(:answer, poll) + { text: t("polls.index.cant_answer"), class: "cant-answer" } + elsif !poll.votable_by?(current_user) + { text: t("polls.index.already_answer"), class: "already-answer" } + end + else + { text: t("polls.index.not_logged_in"), class: "not-logged-in" } + end + end end diff --git a/spec/components/polls/access_status_component_spec.rb b/spec/components/polls/access_status_component_spec.rb index 405f06049..9ac1b77cc 100644 --- a/spec/components/polls/access_status_component_spec.rb +++ b/spec/components/polls/access_status_component_spec.rb @@ -37,4 +37,12 @@ describe Polls::AccessStatusComponent do expect(page).to have_css ".already-answer", count: 1 expect(page).to have_content "You already have participated in this poll" end + + it "is not rendered when users can vote" do + sign_in(create(:user, :level_two)) + + render_inline Polls::AccessStatusComponent.new(create(:poll)) + + expect(page).not_to be_rendered + end end From edfea8f06bdd7b8f16c06bc492696057b4f56cbe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Tue, 22 Oct 2024 23:18:14 +0200 Subject: [PATCH 03/26] Move image-container CSS to the polls component This is the only place where we use the `image-container` HTML class. --- app/assets/stylesheets/participation.scss | 6 ------ app/assets/stylesheets/polls/poll.scss | 8 +++++++- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/app/assets/stylesheets/participation.scss b/app/assets/stylesheets/participation.scss index 09b22bd4f..d89822de3 100644 --- a/app/assets/stylesheets/participation.scss +++ b/app/assets/stylesheets/participation.scss @@ -1390,12 +1390,6 @@ } } -.image-container { - background: #fafafa; - overflow: hidden; - position: relative; -} - .public .poll { border: 1px solid $border; margin-bottom: calc($line-height / 2); diff --git a/app/assets/stylesheets/polls/poll.scss b/app/assets/stylesheets/polls/poll.scss index e97264af5..338bdbc8c 100644 --- a/app/assets/stylesheets/polls/poll.scss +++ b/app/assets/stylesheets/polls/poll.scss @@ -4,8 +4,14 @@ @include breakpoint(medium) { padding: 0 calc($line-height / 2) 0 0; } + } - .image-container img { + .image-container { + background: #fafafa; + overflow: hidden; + position: relative; + + img { height: 100%; max-width: none; position: absolute; From b00ddfc931a2dbb64f7c4c5270565bb9af54e03f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Tue, 22 Oct 2024 23:23:10 +0200 Subject: [PATCH 04/26] Move helper method to the component --- app/components/polls/poll_component.rb | 12 +++++++++++- app/helpers/polls_helper.rb | 10 ---------- 2 files changed, 11 insertions(+), 11 deletions(-) diff --git a/app/components/polls/poll_component.rb b/app/components/polls/poll_component.rb index 32b8b0b17..af70041d7 100644 --- a/app/components/polls/poll_component.rb +++ b/app/components/polls/poll_component.rb @@ -1,6 +1,6 @@ class Polls::PollComponent < ApplicationComponent attr_reader :poll - use_helpers :link_to_poll + use_helpers :can? def initialize(poll) @poll = poll @@ -11,4 +11,14 @@ class Polls::PollComponent < ApplicationComponent def dates t("polls.dates", open_at: l(poll.starts_at.to_date), closed_at: l(poll.ends_at.to_date)) end + + def link_to_poll(text, poll, options = {}) + if can?(:results, poll) + link_to text, results_poll_path(id: poll.slug || poll.id), options + elsif can?(:stats, poll) + link_to text, stats_poll_path(id: poll.slug || poll.id), options + else + link_to text, poll_path(id: poll.slug || poll.id), options + end + end end diff --git a/app/helpers/polls_helper.rb b/app/helpers/polls_helper.rb index b6cadd423..9705c3fda 100644 --- a/app/helpers/polls_helper.rb +++ b/app/helpers/polls_helper.rb @@ -4,16 +4,6 @@ module PollsHelper booth.name + location end - def link_to_poll(text, poll, options = {}) - if can?(:results, poll) - link_to text, results_poll_path(id: poll.slug || poll.id), options - elsif can?(:stats, poll) - link_to text, stats_poll_path(id: poll.slug || poll.id), options - else - link_to text, poll_path(id: poll.slug || poll.id), options - end - end - def results_menu? controller_name == "polls" && action_name == "results" end From 8ca941ab02bb7f85b3b194642f53b0c35b7ec5a0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Tue, 22 Oct 2024 23:57:02 +0200 Subject: [PATCH 05/26] Use flex in a poll in the polls index Note we aren't using flex-with-gap because currently (until we decide to use the `gap` property) this mixin sets a negative margin that would move the border of this element to the left. --- app/assets/stylesheets/layout.scss | 8 --- app/assets/stylesheets/polls/poll.scss | 18 ++++++ app/components/polls/poll_component.html.erb | 62 +++++++++----------- 3 files changed, 46 insertions(+), 42 deletions(-) diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss index b3eae06c4..073dcde3e 100644 --- a/app/assets/stylesheets/layout.scss +++ b/app/assets/stylesheets/layout.scss @@ -403,18 +403,10 @@ button, vertical-align: top; } -.align-middle { - vertical-align: middle; -} - .table { display: table; } -.table-cell { - display: table-cell; -} - .uppercase { text-transform: uppercase; } diff --git a/app/assets/stylesheets/polls/poll.scss b/app/assets/stylesheets/polls/poll.scss index 338bdbc8c..3cf046f2d 100644 --- a/app/assets/stylesheets/polls/poll.scss +++ b/app/assets/stylesheets/polls/poll.scss @@ -2,7 +2,25 @@ &.with-image { @include breakpoint(medium) { + display: flex; padding: 0 calc($line-height / 2) 0 0; + + > * { + flex-basis: 25%; + } + + .poll-info { + flex-basis: 50%; + } + + > a { + align-self: center; + } + + > .poll-info, + > a { + margin-#{$global-left}: rem-calc(map-get($grid-column-gutter, medium)); + } } } diff --git a/app/components/polls/poll_component.html.erb b/app/components/polls/poll_component.html.erb index e290c9434..17002ba0c 100644 --- a/app/components/polls/poll_component.html.erb +++ b/app/components/polls/poll_component.html.erb @@ -1,39 +1,33 @@
<%= render Polls::AccessStatusComponent.new(poll) %> -
-
-
- <% if poll.image.present? %> - <%= image_tag poll.image.variant(:large), alt: poll.image.title.unicode_normalize %> - <% end %> -
-
-
- <% if poll.questions.one? %> -

<%= link_to_poll poll.questions.first.title, poll %>

-
<%= dates %>
- <% else %> -

<%= link_to_poll poll.name, poll %>

-
<%= dates %>
- -
    - <% poll.questions.sort_for_list.each do |question| %> -
  • <%= question.title %>
    • - <% end %> -
- <% end %> - <%= render Polls::GeozonesComponent.new(poll) %> - <%= render SDG::TagListComponent.new(poll, limit: 5, linkable: false) %> -
-
-
- <% if poll.expired? %> - <%= link_to_poll t("polls.index.participate_button_expired"), poll, class: "button hollow expanded" %> - <% else %> - <%= link_to_poll t("polls.index.participate_button"), poll, class: "button hollow expanded" %> - <% end %> -
-
+
+ <% if poll.image.present? %> + <%= image_tag poll.image.variant(:large), alt: poll.image.title.unicode_normalize %> + <% end %>
+ +
+ <% if poll.questions.one? %> +

<%= link_to_poll poll.questions.first.title, poll %>

+
<%= dates %>
+ <% else %> +

<%= link_to_poll poll.name, poll %>

+
<%= dates %>
+ +
    + <% poll.questions.sort_for_list.each do |question| %> +
  • <%= question.title %>
    • + <% end %> +
+ <% end %> + <%= render Polls::GeozonesComponent.new(poll) %> + <%= render SDG::TagListComponent.new(poll, limit: 5, linkable: false) %> +
+ + <% if poll.expired? %> + <%= link_to_poll t("polls.index.participate_button_expired"), poll, class: "button hollow expanded" %> + <% else %> + <%= link_to_poll t("polls.index.participate_button"), poll, class: "button hollow expanded" %> + <% end %>
From 22b0c04cf4107b80f737c86287d357bf68c200cc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Wed, 23 Oct 2024 00:22:23 +0200 Subject: [PATCH 06/26] Use a component to render poll results We're also renaming the `poll-results-stats` class to `poll-results`. The former name was confusing because it had nothing to do with stats. --- app/assets/stylesheets/participation.scss | 3 ++- .../polls/results_component.html.erb | 22 ++++++++++++++++++ app/components/polls/results_component.rb | 7 ++++++ app/views/polls/results.html.erb | 23 +------------------ app/views/polls/stats.html.erb | 2 +- 5 files changed, 33 insertions(+), 24 deletions(-) create mode 100644 app/components/polls/results_component.html.erb create mode 100644 app/components/polls/results_component.rb diff --git a/app/assets/stylesheets/participation.scss b/app/assets/stylesheets/participation.scss index d89822de3..73ad32cdd 100644 --- a/app/assets/stylesheets/participation.scss +++ b/app/assets/stylesheets/participation.scss @@ -1409,7 +1409,8 @@ // 09. Polls results and stats // --------------------------- -.polls-results-stats { +.polls-results, +.polls-stats { table { table-layout: fixed; diff --git a/app/components/polls/results_component.html.erb b/app/components/polls/results_component.html.erb new file mode 100644 index 000000000..a112b9dc2 --- /dev/null +++ b/app/components/polls/results_component.html.erb @@ -0,0 +1,22 @@ +<% provide :title, poll.name %> + +
+ <%= render Polls::PollHeaderComponent.new(poll) %> + + <%= render "poll_subnav" %> + +
+
+

<%= t("polls.show.results.title") %>

+
    + <%- poll.questions.each do |question| %> +
  • <%= link_to question.title, "##{question.title.parameterize}" %>
    • + <% end %> +
+
+ +
+ <%= render Polls::Results::QuestionComponent.with_collection(poll.questions) %> +
+
+
diff --git a/app/components/polls/results_component.rb b/app/components/polls/results_component.rb new file mode 100644 index 000000000..9da3eb130 --- /dev/null +++ b/app/components/polls/results_component.rb @@ -0,0 +1,7 @@ +class Polls::ResultsComponent < ApplicationComponent + attr_reader :poll + + def initialize(poll) + @poll = poll + end +end diff --git a/app/views/polls/results.html.erb b/app/views/polls/results.html.erb index 8f6cddd44..44af3685a 100644 --- a/app/views/polls/results.html.erb +++ b/app/views/polls/results.html.erb @@ -1,22 +1 @@ -<% provide :title, @poll.name %> - -
- <%= render Polls::PollHeaderComponent.new(@poll) %> - - <%= render "poll_subnav" %> - -
-
-

<%= t("polls.show.results.title") %>

-
    - <%- @poll.questions.each do |question| %> -
  • <%= link_to question.title, "##{question.title.parameterize}" %>
    • - <% end %> -
-
- -
- <%= render Polls::Results::QuestionComponent.with_collection(@poll.questions) %> -
-
-
+<%= render Polls::ResultsComponent.new(@poll) %> diff --git a/app/views/polls/stats.html.erb b/app/views/polls/stats.html.erb index b99052f48..8c1766181 100644 --- a/app/views/polls/stats.html.erb +++ b/app/views/polls/stats.html.erb @@ -1,6 +1,6 @@ <% provide :title, @poll.name %> -
+
<%= render Polls::PollHeaderComponent.new(@poll) %> <%= render "poll_subnav" %> From c4d69416ca34efb5c99ba58e599c472005b9bc30 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Wed, 23 Oct 2024 00:27:39 +0200 Subject: [PATCH 07/26] Use flex instead of equalizer in polls results Note that the sidebar class isn't used since commit b91b766e9, so we're removing it. --- app/assets/stylesheets/polls/results.scss | 22 +++++++++++++++++++ .../polls/results_component.html.erb | 6 ++--- 2 files changed, 25 insertions(+), 3 deletions(-) create mode 100644 app/assets/stylesheets/polls/results.scss diff --git a/app/assets/stylesheets/polls/results.scss b/app/assets/stylesheets/polls/results.scss new file mode 100644 index 000000000..769199149 --- /dev/null +++ b/app/assets/stylesheets/polls/results.scss @@ -0,0 +1,22 @@ +.polls-results { + .polls-results-content { + margin-bottom: $line-height; + margin-top: $line-height; + + @include breakpoint(medium) { + display: flex; + + > :first-child { + flex-basis: 25%; + } + + > :last-child { + flex-basis: 75%; + } + } + + > * { + @include grid-column-gutter; + } + } +} diff --git a/app/components/polls/results_component.html.erb b/app/components/polls/results_component.html.erb index a112b9dc2..28e33ad82 100644 --- a/app/components/polls/results_component.html.erb +++ b/app/components/polls/results_component.html.erb @@ -5,8 +5,8 @@ <%= render "poll_subnav" %> -
-
+
+

<%= t("polls.show.results.title") %>

    <%- poll.questions.each do |question| %> @@ -15,7 +15,7 @@
-
+
<%= render Polls::Results::QuestionComponent.with_collection(poll.questions) %>
From 909272d879670788f0863f13b53c686ceba66885 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Wed, 23 Oct 2024 00:46:48 +0200 Subject: [PATCH 08/26] Move users following partial to a component --- app/assets/stylesheets/layout.scss | 34 ------------------- app/assets/stylesheets/users/following.scss | 33 ++++++++++++++++++ .../users/following_component.html.erb} | 2 +- app/components/users/following_component.rb | 32 +++++++++++++++++ .../users/public_activity_component.html.erb | 2 +- app/helpers/followables_helper.rb | 22 ------------ 6 files changed, 67 insertions(+), 58 deletions(-) create mode 100644 app/assets/stylesheets/users/following.scss rename app/{views/users/_following.html.erb => components/users/following_component.html.erb} (91%) create mode 100644 app/components/users/following_component.rb diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss index 073dcde3e..4dbd49d55 100644 --- a/app/assets/stylesheets/layout.scss +++ b/app/assets/stylesheets/layout.scss @@ -1857,40 +1857,6 @@ table { } } -.following { - - .follow-list { - list-style-type: circle; - padding: calc($line-height / 2); - - li { - margin-bottom: calc($line-height / 2); - margin-left: $line-height; - } - } - - h3 { - font-size: rem-calc(24); - margin-top: $line-height; - padding-left: rem-calc(30); - position: relative; - - span { - left: 0; - position: absolute; - top: 2px; - } - } - - .interests { - - @include breakpoint(medium) { - border-left: 1px solid #ececec; - padding-left: $line-height; - } - } -} - // 19. Recommendations // ------------------- diff --git a/app/assets/stylesheets/users/following.scss b/app/assets/stylesheets/users/following.scss new file mode 100644 index 000000000..f14e7dfcd --- /dev/null +++ b/app/assets/stylesheets/users/following.scss @@ -0,0 +1,33 @@ +.users-following { + + .follow-list { + list-style-type: circle; + padding: calc($line-height / 2); + + li { + margin-bottom: calc($line-height / 2); + margin-left: $line-height; + } + } + + h3 { + font-size: rem-calc(24); + margin-top: $line-height; + padding-left: rem-calc(30); + position: relative; + + span { + left: 0; + position: absolute; + top: 2px; + } + } + + .interests { + + @include breakpoint(medium) { + border-left: 1px solid #ececec; + padding-left: $line-height; + } + } +} diff --git a/app/views/users/_following.html.erb b/app/components/users/following_component.html.erb similarity index 91% rename from app/views/users/_following.html.erb rename to app/components/users/following_component.html.erb index d09f99fe6..4470cb4c5 100644 --- a/app/views/users/_following.html.erb +++ b/app/components/users/following_component.html.erb @@ -1,4 +1,4 @@ -
+
    <% follows.each do |followable_type, follows| %> diff --git a/app/components/users/following_component.rb b/app/components/users/following_component.rb new file mode 100644 index 000000000..94a04c6dd --- /dev/null +++ b/app/components/users/following_component.rb @@ -0,0 +1,32 @@ +class Users::FollowingComponent < ApplicationComponent + attr_reader :user, :follows + + def initialize(user, follows:) + @user = user + @follows = follows + end + + private + + def followable_type_title(followable_type) + t("activerecord.models.#{followable_type.underscore}.other") + end + + def followable_icon(followable) + { proposals: "Proposal", budget: "Budget::Investment" }.invert[followable] + end + + def render_follow(follow) + return if follow.followable.blank? + + followable = follow.followable + partial = "#{followable_class_name(followable)}_follow" + locals = { followable_class_name(followable).to_sym => followable } + + render partial, locals + end + + def followable_class_name(followable) + followable.class.to_s.parameterize(separator: "_") + end +end diff --git a/app/components/users/public_activity_component.html.erb b/app/components/users/public_activity_component.html.erb index 03554e9a6..86009368c 100644 --- a/app/components/users/public_activity_component.html.erb +++ b/app/components/users/public_activity_component.html.erb @@ -16,7 +16,7 @@
<% if current_filter == "follows" %> - <%= render "users/following", user: user, follows: follows.group_by(&:followable_type) %> + <%= render Users::FollowingComponent.new(user, follows: follows.group_by(&:followable_type)) %> <% else %> <%= render_user_partial current_filter %> <% end %> diff --git a/app/helpers/followables_helper.rb b/app/helpers/followables_helper.rb index ab199567f..d4e81ef3b 100644 --- a/app/helpers/followables_helper.rb +++ b/app/helpers/followables_helper.rb @@ -1,26 +1,4 @@ module FollowablesHelper - def followable_type_title(followable_type) - t("activerecord.models.#{followable_type.underscore}.other") - end - - def followable_icon(followable) - { proposals: "Proposal", budget: "Budget::Investment" }.invert[followable] - end - - def render_follow(follow) - return if follow.followable.blank? - - followable = follow.followable - partial = "#{followable_class_name(followable)}_follow" - locals = { followable_class_name(followable).to_sym => followable } - - render partial, locals - end - - def followable_class_name(followable) - followable.class.to_s.parameterize(separator: "_") - end - def find_or_build_follow(user, followable) Follow.find_or_initialize_by(user: user, followable: followable) end From d34c9905a402b8aa6991b803e696ff8331244f10 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Wed, 23 Oct 2024 01:03:11 +0200 Subject: [PATCH 09/26] Use flex instead of equalizer in following We're also removing the padding in the (now called) followables element, since it caused a gap on the right side of the border of the `.menu.simple` element. --- app/assets/stylesheets/users/following.scss | 23 ++++++++++++------- .../users/following_component.html.erb | 6 ++--- 2 files changed, 18 insertions(+), 11 deletions(-) diff --git a/app/assets/stylesheets/users/following.scss b/app/assets/stylesheets/users/following.scss index f14e7dfcd..0c325cd00 100644 --- a/app/assets/stylesheets/users/following.scss +++ b/app/assets/stylesheets/users/following.scss @@ -1,4 +1,19 @@ .users-following { + margin-top: $line-height; + + @include breakpoint(medium) { + display: flex; + + > .followables { + flex-basis: calc(100% * 2 / 3); + } + + > .interests { + border-left: 1px solid #ececec; + flex-basis: calc(100% / 3); + padding-left: $line-height; + } + } .follow-list { list-style-type: circle; @@ -22,12 +37,4 @@ top: 2px; } } - - .interests { - - @include breakpoint(medium) { - border-left: 1px solid #ececec; - padding-left: $line-height; - } - } } diff --git a/app/components/users/following_component.html.erb b/app/components/users/following_component.html.erb index 4470cb4c5..2a1e683f0 100644 --- a/app/components/users/following_component.html.erb +++ b/app/components/users/following_component.html.erb @@ -1,5 +1,5 @@ -
-
+
+
    <% follows.each do |followable_type, follows| %>
  • <%= link_to followable_type_title(followable_type), "##{followable_type_title(followable_type).parameterize.underscore}" %>
    • @@ -21,7 +21,7 @@ <% end %>
-
+
<%= render "interests", user: user %>
From a548c497fcf4b69f5d566ba1a4e63ec1841a1144 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Wed, 23 Oct 2024 01:15:53 +0200 Subject: [PATCH 10/26] Move recommended index partial to a component Thanks to it, we can slightly simplify the debates view rendering it. --- app/assets/stylesheets/layout.scss | 61 ------------------- .../stylesheets/shared/recommended_index.scss | 60 ++++++++++++++++++ .../recommended_index_component.html.erb} | 0 .../shared/recommended_index_component.rb | 14 +++++ app/helpers/proposals_helper.rb | 2 +- app/views/debates/index.html.erb | 8 +-- app/views/proposals/index.html.erb | 6 +- 7 files changed, 81 insertions(+), 70 deletions(-) create mode 100644 app/assets/stylesheets/shared/recommended_index.scss rename app/{views/shared/_recommended_index.html.erb => components/shared/recommended_index_component.html.erb} (100%) create mode 100644 app/components/shared/recommended_index_component.rb diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss index 4dbd49d55..0c69d0bae 100644 --- a/app/assets/stylesheets/layout.scss +++ b/app/assets/stylesheets/layout.scss @@ -1997,67 +1997,6 @@ table { } } -.recommended-index { - @include full-width-background; - @include full-width-border(bottom, 1px solid #eee); - @include full-width-border(top, 1px solid #fafafa); - background: #fafafa; - margin-bottom: $line-height; - margin-top: rem-calc(-25); - padding: $line-height 0 calc($line-height / 2); - - @include breakpoint(medium) { - padding-top: 0; - } - - h2 { - font-size: $small-font-size; - text-transform: uppercase; - } - - h3 { - font-size: $base-font-size; - margin-bottom: 0; - } - - a { - - &:hover { - text-decoration: none; - } - } - - .recommendation { - @include card; - background: $body-background; - box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15); - display: block; - margin-bottom: calc($line-height / 4); - padding: calc($line-height / 2); - z-index: 1; - - &:hover:not(:focus-within) { - box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.15); - } - } -} - -.hide-recommendations { - color: $text-light; - cursor: pointer; - font-size: $small-font-size; - line-height: inherit; - position: absolute; - right: 12px; - top: -18px; - z-index: 2; - - &:focus, - &:hover { - @include anchor-color-hover; - } -} - // 20. Documents // ------------- diff --git a/app/assets/stylesheets/shared/recommended_index.scss b/app/assets/stylesheets/shared/recommended_index.scss new file mode 100644 index 000000000..8c0ee9466 --- /dev/null +++ b/app/assets/stylesheets/shared/recommended_index.scss @@ -0,0 +1,60 @@ +.recommended-index { + @include full-width-background; + @include full-width-border(bottom, 1px solid #eee); + @include full-width-border(top, 1px solid #fafafa); + background: #fafafa; + margin-bottom: $line-height; + margin-top: rem-calc(-25); + padding: $line-height 0 calc($line-height / 2); + + @include breakpoint(medium) { + padding-top: 0; + } + + h2 { + font-size: $small-font-size; + text-transform: uppercase; + } + + h3 { + font-size: $base-font-size; + margin-bottom: 0; + } + + a { + + &:hover { + text-decoration: none; + } + } + + .recommendation { + @include card; + background: $body-background; + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15); + display: block; + margin-bottom: calc($line-height / 4); + padding: calc($line-height / 2); + z-index: 1; + + &:hover:not(:focus-within) { + box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.15); + } + } + + .hide-recommendations { + color: $text-light; + cursor: pointer; + font-size: $small-font-size; + line-height: inherit; + position: absolute; + right: 12px; + top: -18px; + z-index: 2; + + &:focus, + &:hover { + @include anchor-color-hover; + } + } +} diff --git a/app/views/shared/_recommended_index.html.erb b/app/components/shared/recommended_index_component.html.erb similarity index 100% rename from app/views/shared/_recommended_index.html.erb rename to app/components/shared/recommended_index_component.html.erb diff --git a/app/components/shared/recommended_index_component.rb b/app/components/shared/recommended_index_component.rb new file mode 100644 index 000000000..91493c6e6 --- /dev/null +++ b/app/components/shared/recommended_index_component.rb @@ -0,0 +1,14 @@ +class Shared::RecommendedIndexComponent < ApplicationComponent + attr_reader :recommended, :disable_recommendations_path, :namespace + use_helpers :recommended_path, :current_path_with_query_params + + def initialize(recommended, disable_recommendations_path:, namespace:) + @recommended = recommended + @disable_recommendations_path = disable_recommendations_path + @namespace = namespace + end + + def render? + feature?("user.recommendations") && recommended.present? + end +end diff --git a/app/helpers/proposals_helper.rb b/app/helpers/proposals_helper.rb index cfd9a79b0..468cc788d 100644 --- a/app/helpers/proposals_helper.rb +++ b/app/helpers/proposals_helper.rb @@ -73,6 +73,6 @@ module ProposalsHelper end def show_recommended_proposals? - params[:selected].blank? && feature?("user.recommendations") && @recommended_proposals.present? + params[:selected].blank? end end diff --git a/app/views/debates/index.html.erb b/app/views/debates/index.html.erb index fd35a031c..fe16bde5e 100644 --- a/app/views/debates/index.html.erb +++ b/app/views/debates/index.html.erb @@ -18,11 +18,9 @@ <%= render "shared/section_header", i18n_namespace: "debates.index.section_header", image: "debates" %> <% end %> -<% if feature?("user.recommendations") && @recommended_debates.present? %> - <%= render "shared/recommended_index", recommended: @recommended_debates, - disable_recommendations_path: recommendations_disable_debates_path, - namespace: "debates" %> -<% end %> +<%= render Shared::RecommendedIndexComponent.new(@recommended_debates, + disable_recommendations_path: recommendations_disable_debates_path, + namespace: "debates") %>
diff --git a/app/views/proposals/index.html.erb b/app/views/proposals/index.html.erb index c8be341e8..2c5606329 100644 --- a/app/views/proposals/index.html.erb +++ b/app/views/proposals/index.html.erb @@ -25,9 +25,9 @@ <% end %> <% if show_recommended_proposals? %> - <%= render "shared/recommended_index", recommended: @recommended_proposals, - disable_recommendations_path: recommendations_disable_proposals_path, - namespace: "proposals" %> + <%= render Shared::RecommendedIndexComponent.new(@recommended_proposals, + disable_recommendations_path: recommendations_disable_proposals_path, + namespace: "proposals") %> <% end %>
From f5793013c9abf0d897d999f8e739c4d0ccfee23a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Wed, 23 Oct 2024 01:22:59 +0200 Subject: [PATCH 11/26] Remove unused block parameter in recommended index --- app/components/shared/recommended_index_component.html.erb | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/components/shared/recommended_index_component.html.erb b/app/components/shared/recommended_index_component.html.erb index eb3783d58..4a2992549 100644 --- a/app/components/shared/recommended_index_component.html.erb +++ b/app/components/shared/recommended_index_component.html.erb @@ -16,7 +16,7 @@ <%= t("shared.recommended_index.hide") %> <% end %> - <% recommended.each_with_index do |recommended, index| %> + <% recommended.each do |recommended| %>

<%= link_to recommended.title, recommended_path(recommended) %>

From 34c8559065693f39a9863181a1afde307af756ca Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Wed, 23 Oct 2024 01:25:08 +0200 Subject: [PATCH 12/26] Remove helper that returned a polymorphic path This is similar to what we did in commits 1a902a967 and fa3781059. --- .../shared/recommended_index_component.html.erb | 2 +- app/components/shared/recommended_index_component.rb | 2 +- app/helpers/welcome_helper.rb | 11 ----------- app/views/welcome/_recommended_carousel.html.erb | 2 +- 4 files changed, 3 insertions(+), 14 deletions(-) diff --git a/app/components/shared/recommended_index_component.html.erb b/app/components/shared/recommended_index_component.html.erb index 4a2992549..7432bf193 100644 --- a/app/components/shared/recommended_index_component.html.erb +++ b/app/components/shared/recommended_index_component.html.erb @@ -19,7 +19,7 @@ <% recommended.each do |recommended| %>
-

<%= link_to recommended.title, recommended_path(recommended) %>

+

<%= link_to recommended.title, polymorphic_path(recommended) %>

<% end %> diff --git a/app/components/shared/recommended_index_component.rb b/app/components/shared/recommended_index_component.rb index 91493c6e6..cbace8337 100644 --- a/app/components/shared/recommended_index_component.rb +++ b/app/components/shared/recommended_index_component.rb @@ -1,6 +1,6 @@ class Shared::RecommendedIndexComponent < ApplicationComponent attr_reader :recommended, :disable_recommendations_path, :namespace - use_helpers :recommended_path, :current_path_with_query_params + use_helpers :current_path_with_query_params def initialize(recommended, disable_recommendations_path:, namespace:) @recommended = recommended diff --git a/app/helpers/welcome_helper.rb b/app/helpers/welcome_helper.rb index 85ee522da..cda8b110e 100644 --- a/app/helpers/welcome_helper.rb +++ b/app/helpers/welcome_helper.rb @@ -7,17 +7,6 @@ module WelcomeHelper "display: none;" if index.positive? end - def recommended_path(recommended) - case recommended.class.name - when "Debate" - debate_path(recommended) - when "Proposal" - proposal_path(recommended) - else - "#" - end - end - def render_recommendation_image(recommended) image_path = calculate_image_path(recommended) image_tag(image_path) if image_path.present? diff --git a/app/views/welcome/_recommended_carousel.html.erb b/app/views/welcome/_recommended_carousel.html.erb index da2ac25f5..def55377d 100644 --- a/app/views/welcome/_recommended_carousel.html.erb +++ b/app/views/welcome/_recommended_carousel.html.erb @@ -13,7 +13,7 @@
<%= render_recommendation_image(recommended) %>
- <%= link_to recommended_path(recommended) do %> + <%= link_to polymorphic_path(recommended) do %>

<%= recommended.title %>

<% end %> <%= wysiwyg(recommended.description) %> From 3347e85017bc0f7e3404d8da4560b2ca4c42a2b4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Wed, 23 Oct 2024 01:26:43 +0200 Subject: [PATCH 13/26] Use a different parameter name in recommendex index The problem with "recommended" is that it had identical singular and plural, which means it wasn't clear whether we were using it to refer to an item of a collection or to refer to the collection itself. --- .../shared/recommended_index_component.html.erb | 4 ++-- app/components/shared/recommended_index_component.rb | 8 ++++---- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/app/components/shared/recommended_index_component.html.erb b/app/components/shared/recommended_index_component.html.erb index 7432bf193..713f6478a 100644 --- a/app/components/shared/recommended_index_component.html.erb +++ b/app/components/shared/recommended_index_component.html.erb @@ -16,10 +16,10 @@ <%= t("shared.recommended_index.hide") %> <% end %> - <% recommended.each do |recommended| %> + <% recommendations.each do |recommendation| %>
-

<%= link_to recommended.title, polymorphic_path(recommended) %>

+

<%= link_to recommendation.title, polymorphic_path(recommendation) %>

<% end %> diff --git a/app/components/shared/recommended_index_component.rb b/app/components/shared/recommended_index_component.rb index cbace8337..439f69989 100644 --- a/app/components/shared/recommended_index_component.rb +++ b/app/components/shared/recommended_index_component.rb @@ -1,14 +1,14 @@ class Shared::RecommendedIndexComponent < ApplicationComponent - attr_reader :recommended, :disable_recommendations_path, :namespace + attr_reader :recommendations, :disable_recommendations_path, :namespace use_helpers :current_path_with_query_params - def initialize(recommended, disable_recommendations_path:, namespace:) - @recommended = recommended + def initialize(recommendations, disable_recommendations_path:, namespace:) + @recommendations = recommendations @disable_recommendations_path = disable_recommendations_path @namespace = namespace end def render? - feature?("user.recommendations") && recommended.present? + feature?("user.recommendations") && recommendations.present? end end From 054fbf585e62642f237138f6a89df8e591ba213a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Wed, 2 Jul 2025 15:11:46 +0200 Subject: [PATCH 14/26] Simplify recommended index component parameters We can get the path if we know the namespace, so we don't need to pass both of them. --- .../shared/recommended_index_component.rb | 15 ++++++++++++--- app/views/debates/index.html.erb | 4 +--- app/views/proposals/index.html.erb | 4 +--- 3 files changed, 14 insertions(+), 9 deletions(-) diff --git a/app/components/shared/recommended_index_component.rb b/app/components/shared/recommended_index_component.rb index 439f69989..f22a87de3 100644 --- a/app/components/shared/recommended_index_component.rb +++ b/app/components/shared/recommended_index_component.rb @@ -1,14 +1,23 @@ class Shared::RecommendedIndexComponent < ApplicationComponent - attr_reader :recommendations, :disable_recommendations_path, :namespace + attr_reader :recommendations, :namespace use_helpers :current_path_with_query_params - def initialize(recommendations, disable_recommendations_path:, namespace:) + def initialize(recommendations, namespace:) @recommendations = recommendations - @disable_recommendations_path = disable_recommendations_path @namespace = namespace end def render? feature?("user.recommendations") && recommendations.present? end + + private + + def disable_recommendations_path + if namespace == "debates" + recommendations_disable_debates_path + else + recommendations_disable_proposals_path + end + end end diff --git a/app/views/debates/index.html.erb b/app/views/debates/index.html.erb index fe16bde5e..ed1b688c4 100644 --- a/app/views/debates/index.html.erb +++ b/app/views/debates/index.html.erb @@ -18,9 +18,7 @@ <%= render "shared/section_header", i18n_namespace: "debates.index.section_header", image: "debates" %> <% end %> -<%= render Shared::RecommendedIndexComponent.new(@recommended_debates, - disable_recommendations_path: recommendations_disable_debates_path, - namespace: "debates") %> +<%= render Shared::RecommendedIndexComponent.new(@recommended_debates, namespace: "debates") %>
diff --git a/app/views/proposals/index.html.erb b/app/views/proposals/index.html.erb index 2c5606329..3cdd444e3 100644 --- a/app/views/proposals/index.html.erb +++ b/app/views/proposals/index.html.erb @@ -25,9 +25,7 @@ <% end %> <% if show_recommended_proposals? %> - <%= render Shared::RecommendedIndexComponent.new(@recommended_proposals, - disable_recommendations_path: recommendations_disable_proposals_path, - namespace: "proposals") %> + <%= render Shared::RecommendedIndexComponent.new(@recommended_proposals, namespace: "proposals") %> <% end %>
From 34d87dff9857b61c6e545cf4312b54f1206afbd8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Wed, 23 Oct 2024 01:42:14 +0200 Subject: [PATCH 15/26] Use a list of links to display recommendations We were using an

tag with no content associated to it. This is like having a chapter in a book with only the title. --- .../stylesheets/shared/recommended_index.scss | 13 ++++++++----- .../shared/recommended_index_component.html.erb | 14 +++++++------- 2 files changed, 15 insertions(+), 12 deletions(-) diff --git a/app/assets/stylesheets/shared/recommended_index.scss b/app/assets/stylesheets/shared/recommended_index.scss index 8c0ee9466..0f581cb67 100644 --- a/app/assets/stylesheets/shared/recommended_index.scss +++ b/app/assets/stylesheets/shared/recommended_index.scss @@ -16,9 +16,14 @@ text-transform: uppercase; } - h3 { - font-size: $base-font-size; - margin-bottom: 0; + ul { + font-weight: bold; + list-style: none; + margin: 0; + + > li { + margin-bottom: calc($line-height / 4); + } } a { @@ -29,11 +34,9 @@ } .recommendation { - @include card; background: $body-background; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15); display: block; - margin-bottom: calc($line-height / 4); padding: calc($line-height / 2); z-index: 1; diff --git a/app/components/shared/recommended_index_component.html.erb b/app/components/shared/recommended_index_component.html.erb index 713f6478a..20fbc176c 100644 --- a/app/components/shared/recommended_index_component.html.erb +++ b/app/components/shared/recommended_index_component.html.erb @@ -16,13 +16,13 @@ <%= t("shared.recommended_index.hide") %> <% end %> - <% recommendations.each do |recommendation| %> -
-
-

<%= link_to recommendation.title, polymorphic_path(recommendation) %>

-
-
- <% end %> +
    + <% recommendations.each do |recommendation| %> +
  • + <%= link_to recommendation.title, polymorphic_path(recommendation), class: "recommendation", "data-equalizer-watch": true %> +
    • + <% end %> +
<%= link_to t("shared.recommended_index.see_more"), From 4e129e7d9ca24d0985d97ab38ba6700da55347ed Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Wed, 23 Oct 2024 01:47:50 +0200 Subject: [PATCH 16/26] Use grid instead of equalizer in recommendations It's August 2025 and support for grid layout has been available in about 99% of the browsers for some time now. All major browsers added support for grid layouts in 2017, which means our rule to support browsers that are 7 years old allows us to start using `display: grid`. Using a grid layout allows displaying a dynamic number of rows while keepin all of them the same height, the same foundation's equalizer does, by setting `grid-auto-rows: 1fr`. And the `grid-template-columns` property lets us use dynamic columns for all screen sizes, always filling the available space. No need to use breakpoints. --- .../stylesheets/shared/recommended_index.scss | 20 +++++++- .../recommended_index_component.html.erb | 50 +++++++++---------- 2 files changed, 42 insertions(+), 28 deletions(-) diff --git a/app/assets/stylesheets/shared/recommended_index.scss b/app/assets/stylesheets/shared/recommended_index.scss index 0f581cb67..2c45d19b4 100644 --- a/app/assets/stylesheets/shared/recommended_index.scss +++ b/app/assets/stylesheets/shared/recommended_index.scss @@ -17,10 +17,24 @@ } ul { + display: grid; font-weight: bold; + grid-auto-rows: 1fr; + grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); list-style: none; margin: 0; + @include breakpoint(medium) { + + * { + text-align: $global-right; + } + } + + > li, + + * { + @include grid-column-gutter; + } + > li { margin-bottom: calc($line-height / 4); } @@ -52,9 +66,13 @@ line-height: inherit; position: absolute; right: 12px; - top: -18px; + top: 0; z-index: 2; + @include breakpoint(medium) { + top: -18px; + } + &:focus, &:hover { @include anchor-color-hover; diff --git a/app/components/shared/recommended_index_component.html.erb b/app/components/shared/recommended_index_component.html.erb index 20fbc176c..a535dcbfc 100644 --- a/app/components/shared/recommended_index_component.html.erb +++ b/app/components/shared/recommended_index_component.html.erb @@ -1,34 +1,30 @@
-
-
-

<%= t("shared.recommended_index.title") %>

-
+

<%= t("shared.recommended_index.title") %>

-
- <%= button_to disable_recommendations_path, title: t("shared.recommended_index.hide"), - class: "hide-recommendations", - data: { - toggle: "recommendations", - confirm: t("#{namespace}.index.recommendations.disable") - }, - method: :put do %> - - <%= t("shared.recommended_index.hide") %> +
+ <%= button_to disable_recommendations_path, title: t("shared.recommended_index.hide"), + class: "hide-recommendations", + data: { + toggle: "recommendations", + confirm: t("#{namespace}.index.recommendations.disable") + }, + method: :put do %> + + <%= t("shared.recommended_index.hide") %> + <% end %> + +
    + <% recommendations.each do |recommendation| %> +
  • + <%= link_to recommendation.title, polymorphic_path(recommendation), class: "recommendation" %> +
    • <% end %> +
-
    - <% recommendations.each do |recommendation| %> -
  • - <%= link_to recommendation.title, polymorphic_path(recommendation), class: "recommendation", "data-equalizer-watch": true %> -
    • - <% end %> -
- -
- <%= link_to t("shared.recommended_index.see_more"), - current_path_with_query_params(order: "recommendations"), - class: "float-right-medium small" %> -
+
+ <%= link_to t("shared.recommended_index.see_more"), + current_path_with_query_params(order: "recommendations"), + class: "small" %>
From 048c8ce917afb5ac39c933c2321e3dd6e7dbdf42 Mon Sep 17 00:00:00 2001 From: taitus Date: Thu, 26 Jun 2025 18:02:08 +0200 Subject: [PATCH 17/26] Move dashboard resources partial to a component We're renaming the HTML class (and removing the id attribute, which was only used in tests) in order to follow our naming conventions. --- app/assets/stylesheets/application.scss | 1 + app/assets/stylesheets/dashboard.scss | 57 ------------------- .../stylesheets/dashboard/resources.scss | 54 ++++++++++++++++++ .../dashboard/resources_component.html.erb} | 2 +- .../dashboard/resources_component.rb | 7 +++ app/views/dashboard/progress.html.erb | 2 +- spec/system/dashboard/dashboard_spec.rb | 6 +- 7 files changed, 67 insertions(+), 62 deletions(-) create mode 100644 app/assets/stylesheets/dashboard/resources.scss rename app/{views/dashboard/_resources.html.erb => components/dashboard/resources_component.html.erb} (89%) create mode 100644 app/components/dashboard/resources_component.rb diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index 1be22b348..8a9be181e 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -21,6 +21,7 @@ @import "account/**/*"; @import "budgets/**/*"; @import "comments/**/*"; +@import "dashboard/**/*"; @import "debates/**/*"; @import "devise/**/*"; @import "documents/**/*"; diff --git a/app/assets/stylesheets/dashboard.scss b/app/assets/stylesheets/dashboard.scss index 3233d17a8..c75202c4f 100644 --- a/app/assets/stylesheets/dashboard.scss +++ b/app/assets/stylesheets/dashboard.scss @@ -2,7 +2,6 @@ // // 01. Dashboard global // 02. Actions -// 03. Resources // 04. Goals // 05. Sidebar // 06. Community @@ -165,62 +164,6 @@ } } -// 03. 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; - - &.alert { - background: #feeaeb; - - &::before { - color: #fb9497; - content: "\74"; - } - } - - &::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; - } - - h4 { - margin-top: $line-height; - } - - .resource-description { - min-height: $line-height * 4; - } - - .button { - background: #00cb96; - color: #000; - font-weight: bold; - } -} - // 04. Goals // --------- diff --git a/app/assets/stylesheets/dashboard/resources.scss b/app/assets/stylesheets/dashboard/resources.scss new file mode 100644 index 000000000..8ba2d76e9 --- /dev/null +++ b/app/assets/stylesheets/dashboard/resources.scss @@ -0,0 +1,54 @@ +.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; + + &.alert { + background: #feeaeb; + + &::before { + color: #fb9497; + content: "\74"; + } + } + + &::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; + } + + h4 { + margin-top: $line-height; + } + + .resource-description { + min-height: $line-height * 4; + } + + .button { + background: #00cb96; + color: #000; + font-weight: bold; + } + } +} diff --git a/app/views/dashboard/_resources.html.erb b/app/components/dashboard/resources_component.html.erb similarity index 89% rename from app/views/dashboard/_resources.html.erb rename to app/components/dashboard/resources_component.html.erb index 6c82994fc..60c731f01 100644 --- a/app/views/dashboard/_resources.html.erb +++ b/app/components/dashboard/resources_component.html.erb @@ -1,4 +1,4 @@ -
+

<%= t("dashboard.resources.available_resources") %>

diff --git a/app/components/dashboard/resources_component.rb b/app/components/dashboard/resources_component.rb new file mode 100644 index 000000000..0ed5ac6ba --- /dev/null +++ b/app/components/dashboard/resources_component.rb @@ -0,0 +1,7 @@ +class Dashboard::ResourcesComponent < ApplicationComponent + attr_reader :active_resources + + def initialize(active_resources) + @active_resources = active_resources + end +end diff --git a/app/views/dashboard/progress.html.erb b/app/views/dashboard/progress.html.erb index de9e94be8..e6824663f 100644 --- a/app/views/dashboard/progress.html.erb +++ b/app/views/dashboard/progress.html.erb @@ -38,4 +38,4 @@ <%= render "summary_recommended_actions" %> <% end %> -<%= render "resources" %> +<%= render Dashboard::ResourcesComponent.new(active_resources) %> diff --git a/spec/system/dashboard/dashboard_spec.rb b/spec/system/dashboard/dashboard_spec.rb index 379478cec..b7be33baa 100644 --- a/spec/system/dashboard/dashboard_spec.rb +++ b/spec/system/dashboard/dashboard_spec.rb @@ -157,7 +157,7 @@ describe "Proposal's dashboard" do required_supports: proposal.votes_for.size + 1_000) visit progress_proposal_dashboard_path(proposal) - within "div#available-resources-section" do + within ".dashboard-resources" do expect(page).to have_content("Polls") expect(page).to have_content("E-mail") expect(page).to have_content("Poster") @@ -204,7 +204,7 @@ describe "Proposal's dashboard" do required_supports: proposal.votes_for.size + 1_000) visit progress_proposal_dashboard_path(proposal) - within "div#available-resources-section" do + within ".dashboard-resources" do expect(page).to have_content("Polls") expect(page).to have_content("E-mail") expect(page).to have_content("Poster") @@ -239,7 +239,7 @@ describe "Proposal's dashboard" do visit progress_proposal_dashboard_path(proposal) - within "div#available-resources-section" do + within ".dashboard-resources" do expect(page).to have_content("Polls") expect(page).to have_content("E-mail") expect(page).to have_content("Poster") From 9b0675aa066c311d83fc64a092d16cf6d479417b Mon Sep 17 00:00:00 2001 From: taitus Date: Fri, 27 Jun 2025 10:20:49 +0200 Subject: [PATCH 18/26] Unify dashboard default resources partials to a component --- .../default_resource_component.html.erb | 10 +++++++ .../dashboard/default_resource_component.rb | 29 +++++++++++++++++++ .../dashboard/resources_component.html.erb | 6 ++-- .../dashboard/resources_component.rb | 11 +++++-- .../dashboard/_mailing_resource.html.erb | 16 ---------- app/views/dashboard/_poll_resource.html.erb | 16 ---------- app/views/dashboard/_poster_resource.html.erb | 16 ---------- app/views/dashboard/progress.html.erb | 2 +- 8 files changed, 52 insertions(+), 54 deletions(-) create mode 100644 app/components/dashboard/default_resource_component.html.erb create mode 100644 app/components/dashboard/default_resource_component.rb delete mode 100644 app/views/dashboard/_mailing_resource.html.erb delete mode 100644 app/views/dashboard/_poll_resource.html.erb delete mode 100644 app/views/dashboard/_poster_resource.html.erb diff --git a/app/components/dashboard/default_resource_component.html.erb b/app/components/dashboard/default_resource_component.html.erb new file mode 100644 index 000000000..c11691553 --- /dev/null +++ b/app/components/dashboard/default_resource_component.html.erb @@ -0,0 +1,10 @@ +
+
+

<%= t("dashboard.menu.#{resource}") %>

+

<%= resource_description %>

+ +
+ <%= link_to t("dashboard.resource.view_resource"), resource_path, class: "button expanded" %> +
+
+
diff --git a/app/components/dashboard/default_resource_component.rb b/app/components/dashboard/default_resource_component.rb new file mode 100644 index 000000000..ae14d7e89 --- /dev/null +++ b/app/components/dashboard/default_resource_component.rb @@ -0,0 +1,29 @@ +class Dashboard::DefaultResourceComponent < ApplicationComponent + attr_reader :resource, :proposal + use_helpers :can? + + def initialize(resource, proposal) + @resource = resource + @proposal = proposal + end + + def render? + can?(:"manage_#{resource}", proposal) + end + + def resource_description + if resource == "mailing" + Setting["proposals.email_short_title"] + else + Setting["proposals.#{resource}_short_title"] + end + end + + def resource_path + if resource == "polls" + proposal_dashboard_polls_path(proposal) + else + send("new_proposal_dashboard_#{resource}_path", proposal) + end + end +end diff --git a/app/components/dashboard/resources_component.html.erb b/app/components/dashboard/resources_component.html.erb index 60c731f01..c2c367920 100644 --- a/app/components/dashboard/resources_component.html.erb +++ b/app/components/dashboard/resources_component.html.erb @@ -2,9 +2,9 @@

<%= t("dashboard.resources.available_resources") %>

- <%= render "poll_resource" %> - <%= render "mailing_resource" %> - <%= render "poster_resource" %> + <% default_resources.each do |resource| %> + <%= render Dashboard::DefaultResourceComponent.new(resource, proposal) %> + <% end %> <%= render partial: "resource", collection: active_resources %>
diff --git a/app/components/dashboard/resources_component.rb b/app/components/dashboard/resources_component.rb index 0ed5ac6ba..90a880f3d 100644 --- a/app/components/dashboard/resources_component.rb +++ b/app/components/dashboard/resources_component.rb @@ -1,7 +1,14 @@ class Dashboard::ResourcesComponent < ApplicationComponent - attr_reader :active_resources + attr_reader :active_resources, :proposal - def initialize(active_resources) + def initialize(active_resources, proposal) @active_resources = active_resources + @proposal = proposal end + + private + + def default_resources + %w[polls mailing poster] + end end diff --git a/app/views/dashboard/_mailing_resource.html.erb b/app/views/dashboard/_mailing_resource.html.erb deleted file mode 100644 index 2ec0beb40..000000000 --- a/app/views/dashboard/_mailing_resource.html.erb +++ /dev/null @@ -1,16 +0,0 @@ -<% if can?(:manage_mailing, proposal) %> -
-
-

<%= t("dashboard.menu.mailing") %>

-

- <%= Setting["proposals.email_short_title"] %> -

- -
- <%= link_to t("dashboard.resource.view_resource"), - new_proposal_dashboard_mailing_path(proposal.to_param), - class: "button expanded" %> -
-
-
-<% end %> diff --git a/app/views/dashboard/_poll_resource.html.erb b/app/views/dashboard/_poll_resource.html.erb deleted file mode 100644 index 39d21ea8e..000000000 --- a/app/views/dashboard/_poll_resource.html.erb +++ /dev/null @@ -1,16 +0,0 @@ -<% if can?(:manage_polls, proposal) %> -
-
-

<%= t("dashboard.menu.polls") %>

-

- <%= Setting["proposals.poll_short_title"] %> -

- -
- <%= link_to t("dashboard.resource.view_resource"), - proposal_dashboard_polls_path(proposal.to_param), - class: "button expanded" %> -
-
-
-<% end %> diff --git a/app/views/dashboard/_poster_resource.html.erb b/app/views/dashboard/_poster_resource.html.erb deleted file mode 100644 index 0f47d6c32..000000000 --- a/app/views/dashboard/_poster_resource.html.erb +++ /dev/null @@ -1,16 +0,0 @@ -<% if can?(:manage_poster, proposal) %> -
-
-

<%= t("dashboard.menu.poster") %>

-

- <%= Setting["proposals.poster_short_title"] %> -

- -
- <%= link_to t("dashboard.resource.view_resource"), - new_proposal_dashboard_poster_path(proposal.to_param), - class: "button expanded" %> -
-
-
-<% end %> diff --git a/app/views/dashboard/progress.html.erb b/app/views/dashboard/progress.html.erb index e6824663f..e4378e7f7 100644 --- a/app/views/dashboard/progress.html.erb +++ b/app/views/dashboard/progress.html.erb @@ -38,4 +38,4 @@ <%= render "summary_recommended_actions" %> <% end %> -<%= render Dashboard::ResourcesComponent.new(active_resources) %> +<%= render Dashboard::ResourcesComponent.new(active_resources, proposal) %> From 1f97a996f895075fac96d11b828d336ff3d36d6a Mon Sep 17 00:00:00 2001 From: taitus Date: Fri, 27 Jun 2025 10:25:01 +0200 Subject: [PATCH 19/26] Move resource partial to a component We're renaming it to ActiveResource in order to better differentiate it from the DefaultResource component. --- .../active_resource_component.html.erb} | 14 +++---- .../dashboard/active_resource_component.rb | 37 +++++++++++++++++++ .../dashboard/resources_component.html.erb | 4 +- .../dashboard/resources_component.rb | 13 +++++-- app/controllers/dashboard_controller.rb | 9 +---- app/helpers/proposals_dashboard_helper.rb | 27 -------------- app/views/dashboard/progress.html.erb | 2 +- 7 files changed, 57 insertions(+), 49 deletions(-) rename app/{views/dashboard/_resource.html.erb => components/dashboard/active_resource_component.html.erb} (72%) create mode 100644 app/components/dashboard/active_resource_component.rb diff --git a/app/views/dashboard/_resource.html.erb b/app/components/dashboard/active_resource_component.html.erb similarity index 72% rename from app/views/dashboard/_resource.html.erb rename to app/components/dashboard/active_resource_component.html.erb index bef2c194f..94e8c81ca 100644 --- a/app/views/dashboard/_resource.html.erb +++ b/app/components/dashboard/active_resource_component.html.erb @@ -1,14 +1,12 @@
-
+ title="<%= resource_tooltip %>">

<%= resource.title %>

- <% 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) %> <%= t("dashboard.progress.new_action") %> <% end %> -

- <%= resource.short_description %> -

+

<%= resource.short_description %>

<% if resource.executed_for?(proposal) || (!resource.request_to_administrators && resource.active_for?(proposal)) %> @@ -22,9 +20,7 @@ new_request_proposal_dashboard_action_path(proposal, resource), class: "button expanded" %> <% else %> - - <%= resource_availability_label(resource) %> - + <%= resource_availability_label %> <% end %>
diff --git a/app/components/dashboard/active_resource_component.rb b/app/components/dashboard/active_resource_component.rb new file mode 100644 index 000000000..26726af9a --- /dev/null +++ b/app/components/dashboard/active_resource_component.rb @@ -0,0 +1,37 @@ +class Dashboard::ActiveResourceComponent < ApplicationComponent + attr_reader :resource, :proposal, :new_actions_since_last_login + use_helpers :is_new_action_since_last_login? + + def initialize(resource, proposal, new_actions_since_last_login) + @resource = resource + @proposal = proposal + @new_actions_since_last_login = new_actions_since_last_login + end + + def resource_card_class + return "alert" unless resource.active_for?(proposal) + return "success" if resource.executed_for?(proposal) + + "primary" + end + + def resource_tooltip + return t("dashboard.resource.resource_locked") unless resource.active_for?(proposal) + return t("dashboard.resource.view_resource") if resource.executed_for?(proposal) + return t("dashboard.resource.resource_requested") if resource.requested_for?(proposal) + + t("dashboard.resource.request_resource") + end + + def resource_availability_label + label = [] + + label << t("dashboard.resource.required_days", + days: resource.day_offset) if resource.day_offset > 0 + label << t("dashboard.resource.required_supports", + supports: number_with_delimiter(resource.required_supports, + delimiter: ".")) if resource.required_supports > 0 + + safe_join label, h(" #{t("dashboard.resource.and")})") + tag(:br) + end +end diff --git a/app/components/dashboard/resources_component.html.erb b/app/components/dashboard/resources_component.html.erb index c2c367920..36669a3a5 100644 --- a/app/components/dashboard/resources_component.html.erb +++ b/app/components/dashboard/resources_component.html.erb @@ -5,6 +5,8 @@ <% default_resources.each do |resource| %> <%= render Dashboard::DefaultResourceComponent.new(resource, proposal) %> <% end %> - <%= render partial: "resource", collection: active_resources %> + <% active_resources.each do |resource| %> + <%= render Dashboard::ActiveResourceComponent.new(resource, proposal, new_actions_since_last_login) %> + <% end %>
diff --git a/app/components/dashboard/resources_component.rb b/app/components/dashboard/resources_component.rb index 90a880f3d..99fe3de33 100644 --- a/app/components/dashboard/resources_component.rb +++ b/app/components/dashboard/resources_component.rb @@ -1,9 +1,9 @@ class Dashboard::ResourcesComponent < ApplicationComponent - attr_reader :active_resources, :proposal + attr_reader :proposal, :new_actions_since_last_login - def initialize(active_resources, proposal) - @active_resources = active_resources + def initialize(proposal, new_actions_since_last_login) @proposal = proposal + @new_actions_since_last_login = new_actions_since_last_login end private @@ -11,4 +11,11 @@ class Dashboard::ResourcesComponent < ApplicationComponent def default_resources %w[polls mailing poster] end + + def active_resources + @active_resources ||= Dashboard::Action.active + .resources + .by_proposal(proposal) + .order(required_supports: :asc, day_offset: :asc) + end end diff --git a/app/controllers/dashboard_controller.rb b/app/controllers/dashboard_controller.rb index 5e2be5d03..aa0784f83 100644 --- a/app/controllers/dashboard_controller.rb +++ b/app/controllers/dashboard_controller.rb @@ -1,5 +1,5 @@ class DashboardController < Dashboard::BaseController - helper_method :dashboard_action, :active_resources, :course + helper_method :dashboard_action, :course before_action :set_done_and_pending_actions, only: [:recommended_actions, :progress] before_action :authorize_dashboard, except: :publish @@ -30,13 +30,6 @@ class DashboardController < Dashboard::BaseController private - def active_resources - @active_resources ||= Dashboard::Action.active - .resources - .by_proposal(proposal) - .order(required_supports: :asc, day_offset: :asc) - end - def course @course ||= Dashboard::Action.course_for(proposal) end diff --git a/app/helpers/proposals_dashboard_helper.rb b/app/helpers/proposals_dashboard_helper.rb index f7144320a..dfac3b52f 100644 --- a/app/helpers/proposals_dashboard_helper.rb +++ b/app/helpers/proposals_dashboard_helper.rb @@ -56,18 +56,6 @@ module ProposalsDashboardHelper controller_name == "dashboard" && action_name == "new_request" && dashboard_action&.id == id end - def resource_availability_label(resource) - label = [] - - label << t("dashboard.resource.required_days", - days: resource.day_offset) if resource.day_offset > 0 - label << t("dashboard.resource.required_supports", - supports: number_with_delimiter(resource.required_supports, - delimiter: ".")) if resource.required_supports > 0 - - safe_join label, h(" #{t("dashboard.resource.and")})") + tag(:br) - end - def daily_selected_class return nil if params[:group_by].blank? @@ -86,21 +74,6 @@ module ProposalsDashboardHelper "hollow" end - def resource_card_class(resource, proposal) - return "alert" unless resource.active_for?(proposal) - return "success" if resource.executed_for?(proposal) - - "primary" - end - - def resource_tooltip(resource, proposal) - return t("dashboard.resource.resource_locked") unless resource.active_for?(proposal) - return t("dashboard.resource.view_resource") if resource.executed_for?(proposal) - return t("dashboard.resource.resource_requested") if resource.requested_for?(proposal) - - t("dashboard.resource.request_resource") - end - def proposed_action_description(proposed_action) sanitize proposed_action.description.truncate(200) end diff --git a/app/views/dashboard/progress.html.erb b/app/views/dashboard/progress.html.erb index e4378e7f7..6b0d75816 100644 --- a/app/views/dashboard/progress.html.erb +++ b/app/views/dashboard/progress.html.erb @@ -38,4 +38,4 @@ <%= render "summary_recommended_actions" %> <% end %> -<%= render Dashboard::ResourcesComponent.new(active_resources, proposal) %> +<%= render Dashboard::ResourcesComponent.new(proposal, @new_actions_since_last_login) %> From 1dc4f1c534d65cb4306bfff03fd4e236febf0e96 Mon Sep 17 00:00:00 2001 From: taitus Date: Fri, 27 Jun 2025 16:52:24 +0200 Subject: [PATCH 20/26] Use grid instead of equalizer in dashboard resources 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. --- .../stylesheets/dashboard/resources.scss | 90 ++++++++++--------- .../active_resource_component.html.erb | 46 +++++----- .../default_resource_component.html.erb | 12 +-- .../dashboard/resources_component.html.erb | 2 +- 4 files changed, 73 insertions(+), 77 deletions(-) diff --git a/app/assets/stylesheets/dashboard/resources.scss b/app/assets/stylesheets/dashboard/resources.scss index 8ba2d76e9..2e037e2db 100644 --- a/app/assets/stylesheets/dashboard/resources.scss +++ b/app/assets/stylesheets/dashboard/resources.scss @@ -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; + } } } } diff --git a/app/components/dashboard/active_resource_component.html.erb b/app/components/dashboard/active_resource_component.html.erb index 94e8c81ca..0c4faec31 100644 --- a/app/components/dashboard/active_resource_component.html.erb +++ b/app/components/dashboard/active_resource_component.html.erb @@ -1,27 +1,23 @@ -
-
-

<%= resource.title %>

- <% if is_new_action_since_last_login?(resource, new_actions_since_last_login) %> - <%= t("dashboard.progress.new_action") %> - <% end %> -

<%= resource.short_description %>

+
+

<%= resource.title %>

+ <% if is_new_action_since_last_login?(resource, new_actions_since_last_login) %> + <%= t("dashboard.progress.new_action") %> + <% end %> +

<%= resource.short_description %>

-
- <% 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) %> - <%= t("dashboard.resource.resource_requested") %> - <% elsif resource.active_for?(proposal) %> - <%= link_to t("dashboard.resource.request_resource"), - new_request_proposal_dashboard_action_path(proposal, resource), - class: "button expanded" %> - <% else %> - <%= resource_availability_label %> - <% end %> -
-
+ <% 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) %> + <%= t("dashboard.resource.resource_requested") %> + <% elsif resource.active_for?(proposal) %> + <%= link_to t("dashboard.resource.request_resource"), + new_request_proposal_dashboard_action_path(proposal, resource), + class: "button" %> + <% else %> + <%= resource_availability_label %> + <% end %>
diff --git a/app/components/dashboard/default_resource_component.html.erb b/app/components/dashboard/default_resource_component.html.erb index c11691553..6d57a00ec 100644 --- a/app/components/dashboard/default_resource_component.html.erb +++ b/app/components/dashboard/default_resource_component.html.erb @@ -1,10 +1,6 @@ -
-
-

<%= t("dashboard.menu.#{resource}") %>

-

<%= resource_description %>

+
+

<%= t("dashboard.menu.#{resource}") %>

+

<%= resource_description %>

-
- <%= link_to t("dashboard.resource.view_resource"), resource_path, class: "button expanded" %> -
-
+ <%= link_to t("dashboard.resource.view_resource"), resource_path, class: "button" %>
diff --git a/app/components/dashboard/resources_component.html.erb b/app/components/dashboard/resources_component.html.erb index 36669a3a5..05df43d05 100644 --- a/app/components/dashboard/resources_component.html.erb +++ b/app/components/dashboard/resources_component.html.erb @@ -1,7 +1,7 @@

<%= t("dashboard.resources.available_resources") %>

-
+
<% default_resources.each do |resource| %> <%= render Dashboard::DefaultResourceComponent.new(resource, proposal) %> <% end %> From 1e06e676a4413f05e63fc2d816c583ed9a18b94f Mon Sep 17 00:00:00 2001 From: taitus Date: Wed, 2 Jul 2025 09:51:22 +0200 Subject: [PATCH 21/26] Move dashboard system tests to resources component specs We're making the `new_actions_since_last_login` parameter optional in order to simplify the tests. --- .../dashboard/resources_component.rb | 2 +- .../dashboard/resources_component_spec.rb | 130 +++++++++++++++++ spec/system/dashboard/dashboard_spec.rb | 133 ------------------ 3 files changed, 131 insertions(+), 134 deletions(-) create mode 100644 spec/components/dashboard/resources_component_spec.rb diff --git a/app/components/dashboard/resources_component.rb b/app/components/dashboard/resources_component.rb index 99fe3de33..8517653a2 100644 --- a/app/components/dashboard/resources_component.rb +++ b/app/components/dashboard/resources_component.rb @@ -1,7 +1,7 @@ class Dashboard::ResourcesComponent < ApplicationComponent attr_reader :proposal, :new_actions_since_last_login - def initialize(proposal, new_actions_since_last_login) + def initialize(proposal, new_actions_since_last_login = []) @proposal = proposal @new_actions_since_last_login = new_actions_since_last_login end diff --git a/spec/components/dashboard/resources_component_spec.rb b/spec/components/dashboard/resources_component_spec.rb new file mode 100644 index 000000000..46d261299 --- /dev/null +++ b/spec/components/dashboard/resources_component_spec.rb @@ -0,0 +1,130 @@ +require "rails_helper" + +describe Dashboard::ResourcesComponent do + let(:proposal) { create(:proposal, :draft) } + before { sign_in(proposal.author) } + + describe "Available resources section" do + let!(:available) { create(:dashboard_action, :resource, :active) } + let(:requested) { create(:dashboard_action, :resource, :admin_request, :active) } + let(:executed_action) do + create( + :dashboard_executed_action, + action: requested, + proposal: proposal, + executed_at: Time.current + ) + end + let(:solved) { create(:dashboard_action, :resource, :admin_request, :active) } + let(:executed_solved_action) do + create( + :dashboard_executed_action, + action: solved, + proposal: proposal, + executed_at: Time.current + ) + end + let!(:unavailable) do + create( + :dashboard_action, + :resource, + :active, + required_supports: proposal.votes_for.size + 1_000 + ) + end + + before do + create(:dashboard_administrator_task, :pending, source: executed_action) + create(:dashboard_administrator_task, :done, source: executed_solved_action) + end + + it "shows available resources for proposal drafts" do + render_inline Dashboard::ResourcesComponent.new(proposal) + + expect(page).to have_content "Polls" + expect(page).to have_content "E-mail" + expect(page).to have_content "Poster" + expect(page).to have_content available.title + expect(page).to have_content unavailable.title + expect(page).to have_content requested.title + expect(page).to have_content solved.title + + page.find("div#dashboard_action_#{available.id}") do |dashboard_action_available| + expect(dashboard_action_available).to have_link "See resource" + end + + page.find("div#dashboard_action_#{requested.id}") do |dashboard_action_requested| + expect(dashboard_action_requested).to have_content "Resource already requested" + end + + page.find("div#dashboard_action_#{unavailable.id}") do |dashboard_action_unavailable| + expect(dashboard_action_unavailable).to have_content "1.000 supports required" + end + + page.find("div#dashboard_action_#{solved.id}") do |dashboard_action_solved| + expect(dashboard_action_solved).to have_link "See resource" + end + end + + it "shows available resources for published proposals" do + proposal.update!(published_at: Date.current) + + render_inline Dashboard::ResourcesComponent.new(proposal) + + expect(page).to have_content "Polls" + expect(page).to have_content "E-mail" + expect(page).to have_content "Poster" + expect(page).to have_content available.title + expect(page).to have_content unavailable.title + expect(page).to have_content requested.title + expect(page).to have_content solved.title + + page.find("div#dashboard_action_#{available.id}") do |dashboard_action_available| + expect(dashboard_action_available).to have_link "See resource" + end + + page.find("div#dashboard_action_#{requested.id}") do |dashboard_action_requested| + expect(dashboard_action_requested).to have_content "Resource already requested" + end + + page.find("div#dashboard_action_#{unavailable.id}") do |dashboard_action_unavailable| + expect(dashboard_action_unavailable).to have_content "1.000 supports required" + end + + page.find("div#dashboard_action_#{solved.id}") do |dashboard_action_solved| + expect(dashboard_action_solved).to have_link "See resource" + end + end + + it "does not show resources with published_proposal: true" do + available.update!(published_proposal: true) + unavailable.update!(published_proposal: true) + + render_inline Dashboard::ResourcesComponent.new(proposal) + + expect(page).to have_content "Polls" + expect(page).to have_content "E-mail" + expect(page).to have_content "Poster" + expect(page).not_to have_content available.title + expect(page).not_to have_content unavailable.title + end + end + + describe "Tags for new actions" do + it "displays tag 'new' only when resource is detected like new action" do + new_resource = create(:dashboard_action, :resource, :active) + old_resource = create(:dashboard_action, :resource, :active) + new_actions_since_last_login = [new_resource.id] + + render_inline Dashboard::ResourcesComponent.new(proposal, new_actions_since_last_login) + + page.find("div#dashboard_action_#{new_resource.id}") do |dashboard_action_new_resource| + expect(dashboard_action_new_resource).to have_content "New" + end + + page.find("div#dashboard_action_#{old_resource.id}") do |dashboard_action_old_resource| + expect(dashboard_action_old_resource).not_to have_content "New" + end + end + end +end diff --git a/spec/system/dashboard/dashboard_spec.rb b/spec/system/dashboard/dashboard_spec.rb index b7be33baa..64154806f 100644 --- a/spec/system/dashboard/dashboard_spec.rb +++ b/spec/system/dashboard/dashboard_spec.rb @@ -138,116 +138,6 @@ describe "Proposal's dashboard" do expect(page).not_to have_content(action.title) end - scenario "Dashboard progress show available resources for proposal draft" do - available = create(:dashboard_action, :resource, :active) - - requested = create(:dashboard_action, :resource, :admin_request, :active) - executed_action = create(:dashboard_executed_action, action: requested, - proposal: proposal, - executed_at: Time.current) - _task = create(:dashboard_administrator_task, :pending, source: executed_action) - - solved = create(:dashboard_action, :resource, :admin_request, :active) - executed_solved_action = create(:dashboard_executed_action, action: solved, - proposal: proposal, - executed_at: Time.current) - _solved_task = create(:dashboard_administrator_task, :done, source: executed_solved_action) - - unavailable = create(:dashboard_action, :resource, :active, - required_supports: proposal.votes_for.size + 1_000) - - visit progress_proposal_dashboard_path(proposal) - within ".dashboard-resources" do - expect(page).to have_content("Polls") - expect(page).to have_content("E-mail") - expect(page).to have_content("Poster") - expect(page).to have_content(available.title) - expect(page).to have_content(unavailable.title) - expect(page).to have_content(requested.title) - expect(page).to have_content(solved.title) - - within "div#dashboard_action_#{available.id}" do - expect(page).to have_link "See resource" - end - - within "div#dashboard_action_#{requested.id}" do - expect(page).to have_content("Resource already requested") - end - - within "div#dashboard_action_#{unavailable.id}" do - expect(page).to have_content("1.000 supports required") - end - - within "div#dashboard_action_#{solved.id}" do - expect(page).to have_link("See resource") - end - end - end - - scenario "Dashboard progress show available resources for published proposal" do - proposal.update!(published_at: Date.current) - available = create(:dashboard_action, :resource, :active) - - requested = create(:dashboard_action, :resource, :admin_request, :active) - executed_action = create(:dashboard_executed_action, action: requested, - proposal: proposal, - executed_at: Time.current) - _task = create(:dashboard_administrator_task, :pending, source: executed_action) - - solved = create(:dashboard_action, :resource, :admin_request, :active) - executed_solved_action = create(:dashboard_executed_action, action: solved, - proposal: proposal, - executed_at: Time.current) - _solved_task = create(:dashboard_administrator_task, :done, source: executed_solved_action) - - unavailable = create(:dashboard_action, :resource, :active, - required_supports: proposal.votes_for.size + 1_000) - - visit progress_proposal_dashboard_path(proposal) - within ".dashboard-resources" do - expect(page).to have_content("Polls") - expect(page).to have_content("E-mail") - expect(page).to have_content("Poster") - expect(page).to have_content(available.title) - expect(page).to have_content(unavailable.title) - expect(page).to have_content(requested.title) - expect(page).to have_content(solved.title) - - within "div#dashboard_action_#{available.id}" do - expect(page).to have_link "See resource" - end - - within "div#dashboard_action_#{requested.id}" do - expect(page).to have_content("Resource already requested") - end - - within "div#dashboard_action_#{unavailable.id}" do - expect(page).to have_content("1.000 supports required") - end - - within "div#dashboard_action_#{solved.id}" do - expect(page).to have_link("See resource") - end - end - end - - scenario "Dashboard progress dont show resources with published_proposal: true" do - available = create(:dashboard_action, :resource, :active, published_proposal: true) - unavailable = create(:dashboard_action, :resource, :active, - required_supports: proposal.votes_for.size + 1_000, - published_proposal: true) - - visit progress_proposal_dashboard_path(proposal) - - within ".dashboard-resources" do - expect(page).to have_content("Polls") - expect(page).to have_content("E-mail") - expect(page).to have_content("Poster") - expect(page).not_to have_content(available.title) - expect(page).not_to have_content(unavailable.title) - end - end - scenario "Dashboard has a link to resources on main menu" do feature = create(:dashboard_action, :resource, :active) @@ -480,29 +370,6 @@ describe "Proposal's dashboard" do describe "detect_new_actions_after_last_login" do before { proposal.author.update!(current_sign_in_at: 1.day.ago) } - scenario "Display tag 'new' on resouce when it is new for author since last login" do - resource = create(:dashboard_action, :resource, :active, day_offset: 0, - published_proposal: false) - - visit progress_proposal_dashboard_path(proposal) - - within "#dashboard_action_#{resource.id}" do - expect(page).to have_content("New") - end - end - - scenario "Not display tag 'new' on resouce when there is not new resources since last login" do - resource = create(:dashboard_action, :resource, :active, day_offset: 0, - published_proposal: false) - proposal.author.update!(current_sign_in_at: Date.current) - - visit progress_proposal_dashboard_path(proposal) - - within "#dashboard_action_#{resource.id}" do - expect(page).not_to have_content("New") - end - end - scenario "Display tag 'new' on proposed_action when it is new for author since last login" do proposed_action = create(:dashboard_action, :proposed_action, :active, day_offset: 0, published_proposal: false) From 150af75e3e93e04435e4ddeb5b9bdb434a2d9d12 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Tue, 26 Aug 2025 16:31:23 +0200 Subject: [PATCH 22/26] Make resources component tests more readable We're testing things from the user's point of view by finding elements given their texts, instead of checking for elements with a certain ID. --- .../dashboard/resources_component_spec.rb | 33 ++++++++++--------- 1 file changed, 17 insertions(+), 16 deletions(-) diff --git a/spec/components/dashboard/resources_component_spec.rb b/spec/components/dashboard/resources_component_spec.rb index 46d261299..00978ecb4 100644 --- a/spec/components/dashboard/resources_component_spec.rb +++ b/spec/components/dashboard/resources_component_spec.rb @@ -5,8 +5,8 @@ describe Dashboard::ResourcesComponent do before { sign_in(proposal.author) } describe "Available resources section" do - let!(:available) { create(:dashboard_action, :resource, :active) } - let(:requested) { create(:dashboard_action, :resource, :admin_request, :active) } + let!(:available) { create(:dashboard_action, :resource, :active, title: "Available!") } + let(:requested) { create(:dashboard_action, :resource, :admin_request, :active, title: "Requested!") } let(:executed_action) do create( :dashboard_executed_action, @@ -15,7 +15,7 @@ describe Dashboard::ResourcesComponent do executed_at: Time.current ) end - let(:solved) { create(:dashboard_action, :resource, :admin_request, :active) } + let(:solved) { create(:dashboard_action, :resource, :admin_request, :active, title: "Solved!") } let(:executed_solved_action) do create( :dashboard_executed_action, @@ -29,7 +29,8 @@ describe Dashboard::ResourcesComponent do :dashboard_action, :resource, :active, - required_supports: proposal.votes_for.size + 1_000 + required_supports: proposal.votes_for.size + 1_000, + title: "Unavailable!" ) end @@ -49,19 +50,19 @@ describe Dashboard::ResourcesComponent do expect(page).to have_content requested.title expect(page).to have_content solved.title - page.find("div#dashboard_action_#{available.id}") do |dashboard_action_available| + page.find(".resource-card", text: "Available!") do |dashboard_action_available| expect(dashboard_action_available).to have_link "See resource" end - page.find("div#dashboard_action_#{requested.id}") do |dashboard_action_requested| + page.find(".resource-card", text: "Requested!") do |dashboard_action_requested| expect(dashboard_action_requested).to have_content "Resource already requested" end - page.find("div#dashboard_action_#{unavailable.id}") do |dashboard_action_unavailable| + page.find(".resource-card", text: "Unavailable!") do |dashboard_action_unavailable| expect(dashboard_action_unavailable).to have_content "1.000 supports required" end - page.find("div#dashboard_action_#{solved.id}") do |dashboard_action_solved| + page.find(".resource-card", text: "Solved!") do |dashboard_action_solved| expect(dashboard_action_solved).to have_link "See resource" end end @@ -79,19 +80,19 @@ describe Dashboard::ResourcesComponent do expect(page).to have_content requested.title expect(page).to have_content solved.title - page.find("div#dashboard_action_#{available.id}") do |dashboard_action_available| + page.find(".resource-card", text: "Available!") do |dashboard_action_available| expect(dashboard_action_available).to have_link "See resource" end - page.find("div#dashboard_action_#{requested.id}") do |dashboard_action_requested| + page.find(".resource-card", text: "Requested!") do |dashboard_action_requested| expect(dashboard_action_requested).to have_content "Resource already requested" end - page.find("div#dashboard_action_#{unavailable.id}") do |dashboard_action_unavailable| + page.find(".resource-card", text: "Unavailable!") do |dashboard_action_unavailable| expect(dashboard_action_unavailable).to have_content "1.000 supports required" end - page.find("div#dashboard_action_#{solved.id}") do |dashboard_action_solved| + page.find(".resource-card", text: "Solved!") do |dashboard_action_solved| expect(dashboard_action_solved).to have_link "See resource" end end @@ -112,17 +113,17 @@ describe Dashboard::ResourcesComponent do describe "Tags for new actions" do it "displays tag 'new' only when resource is detected like new action" do - new_resource = create(:dashboard_action, :resource, :active) - old_resource = create(:dashboard_action, :resource, :active) + create(:dashboard_action, :resource, :active, title: "Old!") + new_resource = create(:dashboard_action, :resource, :active, title: "Recent!") new_actions_since_last_login = [new_resource.id] render_inline Dashboard::ResourcesComponent.new(proposal, new_actions_since_last_login) - page.find("div#dashboard_action_#{new_resource.id}") do |dashboard_action_new_resource| + page.find(".resource-card", text: "Recent!") do |dashboard_action_new_resource| expect(dashboard_action_new_resource).to have_content "New" end - page.find("div#dashboard_action_#{old_resource.id}") do |dashboard_action_old_resource| + page.find(".resource-card", text: "Old!") do |dashboard_action_old_resource| expect(dashboard_action_old_resource).not_to have_content "New" end end From fc0d79b47b2d0bd1275eaac9cedbb02d552c5cae Mon Sep 17 00:00:00 2001 From: taitus Date: Mon, 30 Jun 2025 11:22:37 +0200 Subject: [PATCH 23/26] Move dashboard poll partial to component --- app/assets/stylesheets/dashboard.scss | 22 ------- app/assets/stylesheets/dashboard/poll.scss | 21 ++++++ .../dashboard/poll_component.html.erb} | 2 +- app/components/dashboard/poll_component.rb | 13 ++++ app/views/dashboard/polls/index.html.erb | 4 +- .../dashboard/poll_component_spec.rb | 60 +++++++++++++++++ spec/system/dashboard/polls_spec.rb | 64 ------------------- 7 files changed, 98 insertions(+), 88 deletions(-) create mode 100644 app/assets/stylesheets/dashboard/poll.scss rename app/{views/dashboard/polls/_poll.html.erb => components/dashboard/poll_component.html.erb} (94%) create mode 100644 app/components/dashboard/poll_component.rb create mode 100644 spec/components/dashboard/poll_component_spec.rb diff --git a/app/assets/stylesheets/dashboard.scss b/app/assets/stylesheets/dashboard.scss index c75202c4f..cbcb40f88 100644 --- a/app/assets/stylesheets/dashboard.scss +++ b/app/assets/stylesheets/dashboard.scss @@ -372,28 +372,6 @@ padding: $line-height; } -.poll-card { - background: #e7f3fd; - border-radius: rem-calc(4); - margin-bottom: $line-height; - min-height: $line-height * 9; - padding: $line-height; - position: relative; - text-align: center; - - .button { - font-weight: bold; - } - - button { - cursor: pointer; - - &:hover { - text-decoration: underline; - } - } -} - .community-poll { border-bottom: 1px solid $border; margin-bottom: $line-height; diff --git a/app/assets/stylesheets/dashboard/poll.scss b/app/assets/stylesheets/dashboard/poll.scss new file mode 100644 index 000000000..9235a79e1 --- /dev/null +++ b/app/assets/stylesheets/dashboard/poll.scss @@ -0,0 +1,21 @@ +.dashboard-poll .poll-card { + background: #e7f3fd; + border-radius: rem-calc(4); + margin-bottom: $line-height; + min-height: $line-height * 9; + padding: $line-height; + position: relative; + text-align: center; + + .button { + font-weight: bold; + } + + button { + cursor: pointer; + + &:hover { + text-decoration: underline; + } + } +} diff --git a/app/views/dashboard/polls/_poll.html.erb b/app/components/dashboard/poll_component.html.erb similarity index 94% rename from app/views/dashboard/polls/_poll.html.erb rename to app/components/dashboard/poll_component.html.erb index 4c3eca69d..55a28d88b 100644 --- a/app/views/dashboard/polls/_poll.html.erb +++ b/app/components/dashboard/poll_component.html.erb @@ -1,4 +1,4 @@ -
+

<%= link_to poll.title, proposal_poll_path(proposal, poll) %>

diff --git a/app/components/dashboard/poll_component.rb b/app/components/dashboard/poll_component.rb new file mode 100644 index 000000000..8990576f2 --- /dev/null +++ b/app/components/dashboard/poll_component.rb @@ -0,0 +1,13 @@ +class Dashboard::PollComponent < ApplicationComponent + attr_reader :poll + + def initialize(poll) + @poll = poll + end + + private + + def proposal + poll.related + end +end diff --git a/app/views/dashboard/polls/index.html.erb b/app/views/dashboard/polls/index.html.erb index fb7eebae8..ad362dd84 100644 --- a/app/views/dashboard/polls/index.html.erb +++ b/app/views/dashboard/polls/index.html.erb @@ -5,7 +5,9 @@ <% if @polls.any? %>
- <%= render @polls %> + <% @polls.each do |poll| %> + <%= render Dashboard::PollComponent.new(poll) %> + <% end %>
<% end %>
diff --git a/spec/components/dashboard/poll_component_spec.rb b/spec/components/dashboard/poll_component_spec.rb new file mode 100644 index 000000000..101615e39 --- /dev/null +++ b/spec/components/dashboard/poll_component_spec.rb @@ -0,0 +1,60 @@ +require "rails_helper" + +describe Dashboard::PollComponent do + include Rails.application.routes.url_helpers + + let(:proposal) { create(:proposal, :draft) } + + before { sign_in(proposal.author) } + + describe "Poll card content" do + describe "actions visibility" do + it "shows edit link for upcoming polls" do + upcoming = create(:poll, related: proposal, starts_at: 1.week.from_now) + + render_inline Dashboard::PollComponent.new(upcoming) + + page.find("div#poll_#{upcoming.id}") do |poll_card| + expect(poll_card).to have_link "Edit survey", + href: edit_proposal_dashboard_poll_path(proposal, upcoming) + expect(poll_card).not_to have_link "View results" + end + end + + it "shows results link for current polls" do + current = create(:poll, related: proposal) + + render_inline Dashboard::PollComponent.new(current) + + page.find("div#poll_#{current.id}") do |poll_card| + expect(poll_card).not_to have_link "Edit survey" + expect(poll_card).to have_link "View results", href: results_proposal_poll_path(proposal, current) + end + end + + it "shows results link for expired polls" do + expired = create(:poll, :expired, related: proposal) + + render_inline Dashboard::PollComponent.new(expired) + + page.find("div#poll_#{expired.id}") do |poll_card| + expect(poll_card).not_to have_link "Edit survey" + expect(poll_card).to have_link "View results", href: results_proposal_poll_path(proposal, expired) + end + end + end + + it "renders poll title and dates" do + expired = create(:poll, :expired, related: proposal) + + render_inline Dashboard::PollComponent.new(expired) + + page.find("div#poll_#{expired.id}") do |poll_card| + expect(page).to have_content I18n.l(expired.starts_at.to_date) + expect(page).to have_content I18n.l(expired.ends_at.to_date) + expect(page).to have_link expired.title + expect(page).to have_link expired.title, href: proposal_poll_path(proposal, expired) + end + end + end +end diff --git a/spec/system/dashboard/polls_spec.rb b/spec/system/dashboard/polls_spec.rb index cb9ed5821..2ef729541 100644 --- a/spec/system/dashboard/polls_spec.rb +++ b/spec/system/dashboard/polls_spec.rb @@ -123,26 +123,6 @@ describe "Polls" do expect(page).to have_content("Edit poll") end - scenario "Edit poll is not allowed for current polls" do - poll = create(:poll, related: proposal) - - visit proposal_dashboard_polls_path(proposal) - - within "div#poll_#{poll.id}" do - expect(page).not_to have_content("Edit survey") - end - end - - scenario "Edit poll is not allowed for expired polls" do - poll = create(:poll, :expired, related: proposal) - - visit proposal_dashboard_polls_path(proposal) - - within "div#poll_#{poll.id}" do - expect(page).not_to have_content("Edit survey") - end - end - scenario "Edit poll should allow to remove questions" do poll = create(:poll, related: proposal, starts_at: 1.week.from_now) create(:poll_question, poll: poll) @@ -224,36 +204,6 @@ describe "Polls" do expect(page).to have_content(poll.name) end - scenario "View results not available for upcoming polls" do - poll = create(:poll, related: proposal, starts_at: 1.week.from_now) - - visit proposal_dashboard_polls_path(proposal) - - within "div#poll_#{poll.id}" do - expect(page).not_to have_content("View results") - end - end - - scenario "View results available for current polls" do - poll = create(:poll, related: proposal) - - visit proposal_dashboard_polls_path(proposal) - - within "div#poll_#{poll.id}" do - expect(page).to have_content("View results") - end - end - - scenario "View results available for expired polls" do - poll = create(:poll, :expired, related: proposal) - - visit proposal_dashboard_polls_path(proposal) - - within "div#poll_#{poll.id}" do - expect(page).to have_content("View results") - end - end - scenario "View results redirects to results in public zone" do poll = create(:poll, :expired, related: proposal) @@ -276,18 +226,4 @@ describe "Polls" do expect(find_field("Show results")).not_to be_checked end - - scenario "Poll card" do - poll = create(:poll, :expired, related: proposal) - - visit proposal_dashboard_polls_path(proposal) - - within "div#poll_#{poll.id}" do - expect(page).to have_content(I18n.l(poll.starts_at.to_date)) - expect(page).to have_content(I18n.l(poll.ends_at.to_date)) - expect(page).to have_link(poll.title) - expect(page).to have_link(poll.title, href: proposal_poll_path(proposal, poll)) - expect(page).to have_link("View results", href: results_proposal_poll_path(proposal, poll)) - end - end end From de303aa1dfc04091521048e7f0a49eaee2abf911 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Tue, 26 Aug 2025 18:42:03 +0200 Subject: [PATCH 24/26] Extract component to render dashboard polls Just like we usually do when reorganizing code. --- .../dashboard/polls_component.html.erb | 5 +++ app/components/dashboard/polls_component.rb | 11 +++++ app/views/dashboard/polls/index.html.erb | 8 +--- .../dashboard/poll_component_spec.rb | 43 ++++++++----------- .../dashboard/polls_component_spec.rb | 9 ++++ 5 files changed, 43 insertions(+), 33 deletions(-) create mode 100644 app/components/dashboard/polls_component.html.erb create mode 100644 app/components/dashboard/polls_component.rb create mode 100644 spec/components/dashboard/polls_component_spec.rb diff --git a/app/components/dashboard/polls_component.html.erb b/app/components/dashboard/polls_component.html.erb new file mode 100644 index 000000000..68cb5b18a --- /dev/null +++ b/app/components/dashboard/polls_component.html.erb @@ -0,0 +1,5 @@ +
+ <% polls.each do |poll| %> + <%= render Dashboard::PollComponent.new(poll) %> + <% end %> +
diff --git a/app/components/dashboard/polls_component.rb b/app/components/dashboard/polls_component.rb new file mode 100644 index 000000000..4dad2c277 --- /dev/null +++ b/app/components/dashboard/polls_component.rb @@ -0,0 +1,11 @@ +class Dashboard::PollsComponent < ApplicationComponent + attr_reader :polls + + def initialize(polls) + @polls = polls + end + + def render? + polls.any? + end +end diff --git a/app/views/dashboard/polls/index.html.erb b/app/views/dashboard/polls/index.html.erb index ad362dd84..035874638 100644 --- a/app/views/dashboard/polls/index.html.erb +++ b/app/views/dashboard/polls/index.html.erb @@ -3,13 +3,7 @@
<%= Setting["proposals.poll_description"] %> - <% if @polls.any? %> -
- <% @polls.each do |poll| %> - <%= render Dashboard::PollComponent.new(poll) %> - <% end %> -
- <% end %> + <%= render Dashboard::PollsComponent.new(@polls) %>
diff --git a/spec/components/dashboard/poll_component_spec.rb b/spec/components/dashboard/poll_component_spec.rb index 101615e39..f31c7fd15 100644 --- a/spec/components/dashboard/poll_component_spec.rb +++ b/spec/components/dashboard/poll_component_spec.rb @@ -9,27 +9,13 @@ describe Dashboard::PollComponent do describe "Poll card content" do describe "actions visibility" do - it "shows edit link for upcoming polls" do - upcoming = create(:poll, related: proposal, starts_at: 1.week.from_now) - - render_inline Dashboard::PollComponent.new(upcoming) - - page.find("div#poll_#{upcoming.id}") do |poll_card| - expect(poll_card).to have_link "Edit survey", - href: edit_proposal_dashboard_poll_path(proposal, upcoming) - expect(poll_card).not_to have_link "View results" - end - end - it "shows results link for current polls" do current = create(:poll, related: proposal) render_inline Dashboard::PollComponent.new(current) - page.find("div#poll_#{current.id}") do |poll_card| - expect(poll_card).not_to have_link "Edit survey" - expect(poll_card).to have_link "View results", href: results_proposal_poll_path(proposal, current) - end + expect(page).not_to have_link "Edit survey" + expect(page).to have_link "View results", href: results_proposal_poll_path(proposal, current) end it "shows results link for expired polls" do @@ -37,10 +23,17 @@ describe Dashboard::PollComponent do render_inline Dashboard::PollComponent.new(expired) - page.find("div#poll_#{expired.id}") do |poll_card| - expect(poll_card).not_to have_link "Edit survey" - expect(poll_card).to have_link "View results", href: results_proposal_poll_path(proposal, expired) - end + expect(page).not_to have_link "Edit survey" + expect(page).to have_link "View results", href: results_proposal_poll_path(proposal, expired) + end + + it "shows edit link for upcoming polls" do + upcoming = create(:poll, related: proposal, starts_at: 1.week.from_now) + + render_inline Dashboard::PollComponent.new(upcoming) + + expect(page).to have_link "Edit survey", href: edit_proposal_dashboard_poll_path(proposal, upcoming) + expect(page).not_to have_link "View results" end end @@ -49,12 +42,10 @@ describe Dashboard::PollComponent do render_inline Dashboard::PollComponent.new(expired) - page.find("div#poll_#{expired.id}") do |poll_card| - expect(page).to have_content I18n.l(expired.starts_at.to_date) - expect(page).to have_content I18n.l(expired.ends_at.to_date) - expect(page).to have_link expired.title - expect(page).to have_link expired.title, href: proposal_poll_path(proposal, expired) - end + expect(page).to have_content I18n.l(expired.starts_at.to_date) + expect(page).to have_content I18n.l(expired.ends_at.to_date) + expect(page).to have_link expired.title + expect(page).to have_link expired.title, href: proposal_poll_path(proposal, expired) end end end diff --git a/spec/components/dashboard/polls_component_spec.rb b/spec/components/dashboard/polls_component_spec.rb new file mode 100644 index 000000000..2ac73f65a --- /dev/null +++ b/spec/components/dashboard/polls_component_spec.rb @@ -0,0 +1,9 @@ +require "rails_helper" + +describe Dashboard::PollsComponent do + it "is not rendered when there aren't any polls" do + render_inline Dashboard::PollsComponent.new(Poll.none) + + expect(page).not_to be_rendered + end +end From 3b08fa2e0550715f21d6eb773a9a6d467af83794 Mon Sep 17 00:00:00 2001 From: taitus Date: Mon, 30 Jun 2025 16:10:16 +0200 Subject: [PATCH 25/26] Use grid instead of Equalizer in dashboard polls --- app/assets/stylesheets/dashboard/poll.scss | 5 +- app/assets/stylesheets/dashboard/polls.scss | 7 +++ .../dashboard/poll_component.html.erb | 60 +++++++++---------- .../dashboard/polls_component.html.erb | 2 +- 4 files changed, 40 insertions(+), 34 deletions(-) create mode 100644 app/assets/stylesheets/dashboard/polls.scss diff --git a/app/assets/stylesheets/dashboard/poll.scss b/app/assets/stylesheets/dashboard/poll.scss index 9235a79e1..754194621 100644 --- a/app/assets/stylesheets/dashboard/poll.scss +++ b/app/assets/stylesheets/dashboard/poll.scss @@ -1,7 +1,8 @@ -.dashboard-poll .poll-card { +.dashboard-poll { background: #e7f3fd; border-radius: rem-calc(4); - margin-bottom: $line-height; + display: flex; + flex-direction: column; min-height: $line-height * 9; padding: $line-height; position: relative; diff --git a/app/assets/stylesheets/dashboard/polls.scss b/app/assets/stylesheets/dashboard/polls.scss new file mode 100644 index 000000000..2256e7d84 --- /dev/null +++ b/app/assets/stylesheets/dashboard/polls.scss @@ -0,0 +1,7 @@ +.dashboard-polls { + display: grid; + gap: $line-height; + grid-auto-rows: 1fr; + grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); + margin-top: $line-height; +} diff --git a/app/components/dashboard/poll_component.html.erb b/app/components/dashboard/poll_component.html.erb index 55a28d88b..0dadf4f54 100644 --- a/app/components/dashboard/poll_component.html.erb +++ b/app/components/dashboard/poll_component.html.erb @@ -1,36 +1,34 @@ -
-
-

<%= link_to poll.title, proposal_poll_path(proposal, poll) %>

- - <%= l(poll.starts_at.to_date) %> - <%= l(poll.ends_at.to_date) %> - +
+

<%= link_to poll.title, proposal_poll_path(proposal, poll) %>

+ + <%= l(poll.starts_at.to_date) %> - <%= l(poll.ends_at.to_date) %> + -

- <%= t("dashboard.polls.poll.responses", count: poll.answer_count) %> -

+

+ <%= t("dashboard.polls.poll.responses", count: poll.answer_count) %> +

-
- <% if poll.starts_at.to_date >= Date.current %> - <%= link_to t("dashboard.polls.poll.edit_poll"), - edit_proposal_dashboard_poll_path(proposal, poll), class: "button hollow" %> - <% else %> - <%= link_to t("dashboard.polls.poll.view_results"), - results_proposal_poll_path(proposal, poll), - class: "button" %> - <% end %> -
- - <%= form_for poll, remote: true, - data: { type: :json }, - url: proposal_dashboard_poll_path(proposal, poll) do |f| %> - <%= f.check_box :results_enabled, class: "js-submit-on-change" %> +
+ <% if poll.starts_at.to_date >= Date.current %> + <%= link_to t("dashboard.polls.poll.edit_poll"), + edit_proposal_dashboard_poll_path(proposal, poll), class: "button hollow" %> + <% else %> + <%= link_to t("dashboard.polls.poll.view_results"), + results_proposal_poll_path(proposal, poll), + class: "button" %> <% end %> -

<%= t("dashboard.polls.poll.show_results_help") %>

- - <%= button_to t("dashboard.polls.poll.delete"), - proposal_dashboard_poll_path(proposal, poll), - method: :delete, - "data-confirm": t("dashboard.polls.poll.alert_notice"), - class: "delete" %>
+ + <%= form_for poll, remote: true, + data: { type: :json }, + url: proposal_dashboard_poll_path(proposal, poll) do |f| %> + <%= f.check_box :results_enabled, class: "js-submit-on-change" %> + <% end %> +

<%= t("dashboard.polls.poll.show_results_help") %>

+ + <%= button_to t("dashboard.polls.poll.delete"), + proposal_dashboard_poll_path(proposal, poll), + method: :delete, + "data-confirm": t("dashboard.polls.poll.alert_notice"), + class: "delete" %>
diff --git a/app/components/dashboard/polls_component.html.erb b/app/components/dashboard/polls_component.html.erb index 68cb5b18a..9c79103e8 100644 --- a/app/components/dashboard/polls_component.html.erb +++ b/app/components/dashboard/polls_component.html.erb @@ -1,4 +1,4 @@ -
+
<% polls.each do |poll| %> <%= render Dashboard::PollComponent.new(poll) %> <% end %> From 29622dcb913777656731c07ca5d0c9ea82407f66 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Wed, 27 Aug 2025 17:31:16 +0200 Subject: [PATCH 26/26] Extract mixin to create a grid layout We were using similar code and three places. And all of them used `15rem`, which looked a lot like a magic number. So we're making it the default value of a mixin, which means replacing it with a less arbitrary value will be easier. Note that, for the column gap, we're now using the standard grid-column-gutter we use in most places. We were using `$line-height` in a couple of places only because writing it is less verbose. Since we're now, for the first time, using a very long mixin definition that we need to split in several lines, we're adding the `param` exception to the indentation rule. As far as I know, there's no way to define a rule in Stylelint that requires parameters in multiple lines to be aligned with the first parameter, which is what we define in Rubocop. --- .stylelintrc.yml | 1 + app/assets/stylesheets/dashboard/polls.scss | 5 +---- app/assets/stylesheets/dashboard/resources.scss | 5 +---- app/assets/stylesheets/mixins/layouts.scss | 9 +++++++++ app/assets/stylesheets/shared/recommended_index.scss | 12 ++++-------- 5 files changed, 16 insertions(+), 16 deletions(-) diff --git a/.stylelintrc.yml b/.stylelintrc.yml index c5ba33f96..071155eba 100644 --- a/.stylelintrc.yml +++ b/.stylelintrc.yml @@ -83,6 +83,7 @@ rules: "@stylistic/indentation": - 2 - ignore: + - param - value "@stylistic/media-feature-parentheses-space-inside": never "@stylistic/no-eol-whitespace": true diff --git a/app/assets/stylesheets/dashboard/polls.scss b/app/assets/stylesheets/dashboard/polls.scss index 2256e7d84..399bd3a73 100644 --- a/app/assets/stylesheets/dashboard/polls.scss +++ b/app/assets/stylesheets/dashboard/polls.scss @@ -1,7 +1,4 @@ .dashboard-polls { - display: grid; - gap: $line-height; - grid-auto-rows: 1fr; - grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); + @include dynamic-grid; margin-top: $line-height; } diff --git a/app/assets/stylesheets/dashboard/resources.scss b/app/assets/stylesheets/dashboard/resources.scss index 2e037e2db..48d3da8ab 100644 --- a/app/assets/stylesheets/dashboard/resources.scss +++ b/app/assets/stylesheets/dashboard/resources.scss @@ -1,9 +1,6 @@ .dashboard-resources { .resources { - display: grid; - gap: $line-height; - grid-auto-rows: 1fr; - grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); + @include dynamic-grid; .resource-card { background: #d1f5eb; diff --git a/app/assets/stylesheets/mixins/layouts.scss b/app/assets/stylesheets/mixins/layouts.scss index 27fa294f1..a54c36fcc 100644 --- a/app/assets/stylesheets/mixins/layouts.scss +++ b/app/assets/stylesheets/mixins/layouts.scss @@ -32,6 +32,15 @@ } } +@mixin dynamic-grid($min-column-width: 15rem, + $row-gap: $line-height, + $column-gap: rem-calc(map-get($grid-column-gutter, medium))) { + display: grid; + gap: $row-gap $column-gap; + grid-auto-rows: 1fr; + grid-template-columns: repeat(auto-fit, minmax($min-column-width, 1fr)); +} + @mixin full-width-cover($adjust-margin: true, $adjust-padding: false) { $global-padding: rem-calc(map-get($grid-column-gutter, medium)) * 0.5; bottom: 0; diff --git a/app/assets/stylesheets/shared/recommended_index.scss b/app/assets/stylesheets/shared/recommended_index.scss index 2c45d19b4..c8b4b7385 100644 --- a/app/assets/stylesheets/shared/recommended_index.scss +++ b/app/assets/stylesheets/shared/recommended_index.scss @@ -17,10 +17,10 @@ } ul { - display: grid; + $row-gap: calc($line-height / 4); + @include dynamic-grid($row-gap: $row-gap); + @include grid-column-gutter; font-weight: bold; - grid-auto-rows: 1fr; - grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); list-style: none; margin: 0; @@ -30,13 +30,9 @@ } } - > li, + * { @include grid-column-gutter; - } - - > li { - margin-bottom: calc($line-height / 4); + margin-top: $row-gap; } }