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] 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 %>