diff --git a/app/assets/stylesheets/advanced_search.scss b/app/assets/stylesheets/advanced_search.scss index 4ea3a5fd1..9191bb83c 100644 --- a/app/assets/stylesheets/advanced_search.scss +++ b/app/assets/stylesheets/advanced_search.scss @@ -22,10 +22,10 @@ .date-filters { float: left; - width: 50%; + width: 25%; .filter { - width: 50%; + width: 100%; } .custom-date-filters { diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index 0b899e516..ffb1517de 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -29,6 +29,7 @@ @import "jquery-ui/sortable"; @import "leaflet"; @import "sticky_overrides"; +@import "tags"; @import "admin/*"; @import "sdg/**/*"; @import "sdg_management/*"; diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss index 9d122f324..daef4a5ae 100644 --- a/app/assets/stylesheets/layout.scss +++ b/app/assets/stylesheets/layout.scss @@ -927,25 +927,11 @@ footer { // 04. Tags // -------- -.tags a , .tag-cloud a, .categories a, .geozone a, -.sdg-goal-tag-list .more-goals, -.sidebar-links a, -.tags span { - background: #ececec; - border-radius: rem-calc(6); - color: $text; - display: inline-block; - font-size: $small-font-size; - margin-bottom: $line-height / 3; - padding: $line-height / 4 $line-height / 3; - text-decoration: none; - - &:hover { - background: #e0e0e0; - } +.sidebar-links a { + @extend %tag; } .categories a, diff --git a/app/assets/stylesheets/mixins.scss b/app/assets/stylesheets/mixins.scss index 906c0bc3f..3cf7945ff 100644 --- a/app/assets/stylesheets/mixins.scss +++ b/app/assets/stylesheets/mixins.scss @@ -226,3 +226,51 @@ } } } + +%sdg-goal-list { + display: flex; + flex-wrap: wrap; + list-style: none; + margin-bottom: 0; + margin-left: 0; + + li { + margin-bottom: 1ch; + margin-right: 1ch; + + &:last-child { + margin-right: 0; + } + } +} + +%tags { + margin-bottom: 0; + margin-left: 0; + + li { + display: inline-block; + margin-bottom: 0; + } + + a, + span { + @extend %tag; + } +} + +%tag { + background: #ececec; + border-radius: rem-calc(6); + color: $text; + display: inline-block; + font-size: $small-font-size; + margin-bottom: $line-height / 3; + padding: $line-height / 4 $line-height / 3; + text-decoration: none; + + &:hover { + background: #e0e0e0; + text-decoration: none; + } +} diff --git a/app/assets/stylesheets/participation.scss b/app/assets/stylesheets/participation.scss index a825c77bb..dbcea6600 100644 --- a/app/assets/stylesheets/participation.scss +++ b/app/assets/stylesheets/participation.scss @@ -408,10 +408,10 @@ } } - .tags, .geozone { li { + display: inline-block; margin-bottom: 0; } } @@ -487,8 +487,11 @@ } .tags { - display: block; - margin-bottom: 0; + @extend %tags; + } + + .tags, + .sdg-target-tag-list { a { margin-right: rem-calc(6); @@ -673,9 +676,11 @@ } .tags { - display: block; - margin-bottom: 0; + @extend %tags; + } + .tags, + .sdg-target-tag-list { a { font-size: $tiny-font-size; } diff --git a/app/assets/stylesheets/sdg/goals/filter_links.scss b/app/assets/stylesheets/sdg/goals/filter_links.scss new file mode 100644 index 000000000..914c4e7b0 --- /dev/null +++ b/app/assets/stylesheets/sdg/goals/filter_links.scss @@ -0,0 +1,6 @@ +.sdg-goal-filter-links { + + .sdg-goal-tag-list { + @extend %sdg-goal-list; + } +} diff --git a/app/assets/stylesheets/sdg/goals/index.scss b/app/assets/stylesheets/sdg/goals/index.scss index efbd855cc..1efb09297 100644 --- a/app/assets/stylesheets/sdg/goals/index.scss +++ b/app/assets/stylesheets/sdg/goals/index.scss @@ -1,21 +1,19 @@ .sdg-goals-index { .sdg-goal-list { + @extend %sdg-goal-list; @include grid-row; @include grid-column-gutter; - list-style: none; - margin-bottom: 0; max-width: 40rem; li { - display: inline-block; $spacing: 1vw; line-height: 0; margin-bottom: $spacing; - padding-left: $spacing / 2; - padding-right: $spacing / 2; - width: 1 * 100% / 6; + margin-left: $spacing / 2; + margin-right: $spacing / 2; + width: calc(100% / 6 - #{$spacing}); .sdg-goal-icon { width: 100%; diff --git a/app/assets/stylesheets/sdg/goals/tag_list.scss b/app/assets/stylesheets/sdg/goals/tag_list.scss deleted file mode 100644 index 04b2ce9e0..000000000 --- a/app/assets/stylesheets/sdg/goals/tag_list.scss +++ /dev/null @@ -1,14 +0,0 @@ -.sdg-goal-tag-list { - list-style: none; - margin-bottom: 0; - margin-left: 0; - - li { - display: inline-block; - margin-bottom: 1ch; - - &:not(:last-child) { - padding-right: 1ch; - } - } -} diff --git a/app/assets/stylesheets/sdg/related_list_selector.scss b/app/assets/stylesheets/sdg/related_list_selector.scss index 75fb5c433..db8773324 100644 --- a/app/assets/stylesheets/sdg/related_list_selector.scss +++ b/app/assets/stylesheets/sdg/related_list_selector.scss @@ -13,12 +13,9 @@ } label + ul { - list-style: none; - margin-bottom: 0; - margin-left: 0; + @extend %sdg-goal-list; li { - display: inline-block; &[aria-checked=true] img { opacity: 0.15; diff --git a/app/assets/stylesheets/sdg/tag_list.scss b/app/assets/stylesheets/sdg/tag_list.scss new file mode 100644 index 000000000..f242300df --- /dev/null +++ b/app/assets/stylesheets/sdg/tag_list.scss @@ -0,0 +1,28 @@ +.sdg-tag-list { + + .sdg-goal-tag-list { + @extend %sdg-goal-list; + + .more-goals { + @extend %tag; + } + } + + .sdg-target-tag-list { + @extend %tags; + + a:not(.more-targets) { + color: $white; + } + + @each $code, $color in $sdg-colors { + [data-code^="#{$code}"] { + background-color: $color; + + &:hover { + background-color: darken($color, 10%); + } + } + } + } +} diff --git a/app/assets/stylesheets/tags.scss b/app/assets/stylesheets/tags.scss new file mode 100644 index 000000000..b572da7a3 --- /dev/null +++ b/app/assets/stylesheets/tags.scss @@ -0,0 +1,6 @@ +ul { + + &.tags { + @extend %tags; + } +} diff --git a/app/components/concerns/sdg/goals/options_for_select.rb b/app/components/concerns/sdg/goals/options_for_select.rb deleted file mode 100644 index 559168a3a..000000000 --- a/app/components/concerns/sdg/goals/options_for_select.rb +++ /dev/null @@ -1,7 +0,0 @@ -module SDG::Goals::OptionsForSelect - extend ActiveSupport::Concern - - def goal_options(selected_code = nil) - options_from_collection_for_select(SDG::Goal.order(:code), :code, :code_and_title, selected_code) - end -end diff --git a/app/components/concerns/sdg/options_for_select.rb b/app/components/concerns/sdg/options_for_select.rb new file mode 100644 index 000000000..a077a5993 --- /dev/null +++ b/app/components/concerns/sdg/options_for_select.rb @@ -0,0 +1,13 @@ +module SDG::OptionsForSelect + extend ActiveSupport::Concern + + def goal_options(selected_code = nil) + options_from_collection_for_select(SDG::Goal.order(:code), :code, :code_and_title, selected_code) + end + + def target_options(selected_code = nil) + targets = SDG::Target.all + SDG::LocalTarget.all + + options_from_collection_for_select(targets.sort, :code, :code, selected_code) + end +end diff --git a/app/components/concerns/sdg/tag_list.rb b/app/components/concerns/sdg/tag_list.rb new file mode 100644 index 000000000..a27225370 --- /dev/null +++ b/app/components/concerns/sdg/tag_list.rb @@ -0,0 +1,50 @@ +module SDG::TagList + extend ActiveSupport::Concern + attr_reader :record_or_name, :limit + delegate :link_list, to: :helpers + + def initialize(record_or_name, limit: nil) + @record_or_name = record_or_name + @limit = limit + end + + def render? + process.enabled? + end + + def see_more_link(collection) + count = count_out_of_limit(collection) + + if count > 0 + [ + "#{count}+", + polymorphic_path(record), + class: "more-#{i18n_namespace}", title: t("sdg.#{i18n_namespace}.filter.more", count: count) + ] + end + end + + def filter_text(goal_or_target) + t("sdg.#{i18n_namespace}.filter.link", + resources: model.model_name.human(count: :other), + code: goal_or_target.code) + end + + def index_by(advanced_search) + polymorphic_path(model, advanced_search: advanced_search) + end + + def count_out_of_limit(collection) + return 0 unless limit + + collection.size - limit + end + + def process + @process ||= SDG::ProcessEnabled.new(record_or_name) + end + + def model + process.name.constantize + end +end diff --git a/app/components/sdg/goals/tag_list_component.rb b/app/components/sdg/goals/tag_list_component.rb index c7ada9593..391e07f55 100644 --- a/app/components/sdg/goals/tag_list_component.rb +++ b/app/components/sdg/goals/tag_list_component.rb @@ -1,24 +1,18 @@ class SDG::Goals::TagListComponent < ApplicationComponent - attr_reader :record_or_name, :limit - delegate :link_list, to: :helpers - - def initialize(record_or_name, limit: nil) - @record_or_name = record_or_name - @limit = limit - end - - def render? - process.enabled? - end + include SDG::TagList private + def record + record_or_name if record_or_name.respond_to?(:sdg_goals) + end + def links - [*goal_links, see_more_link] + [*goal_links, see_more_link(goals)] end def goal_links - goals.limit(limit).map do |goal| + goals.order(:code).limit(limit).map do |goal| [ render(SDG::Goals::IconComponent.new(goal)), index_by_goal(goal), @@ -28,42 +22,14 @@ class SDG::Goals::TagListComponent < ApplicationComponent end def goals - if record_or_name.respond_to?(:sdg_goals) - record_or_name.sdg_goals.order(:code) - else - SDG::Goal.order(:code) - end - end - - def see_more_link - return unless limit && count_out_of_limit > 0 - - [ - "#{count_out_of_limit}+", - polymorphic_path(record_or_name), - class: "more-goals", title: t("sdg.goals.filter.more", count: count_out_of_limit) - ] + record&.sdg_goals || SDG::Goal.all end def index_by_goal(goal) - polymorphic_path(model, advanced_search: { goal: goal.code }) + index_by(goal: goal.code) end - def filter_text(goal) - t("sdg.goals.filter.link", - resources: model.model_name.human(count: :other), - code: goal.code) - end - - def count_out_of_limit - goals.size - limit - end - - def model - process.name.constantize - end - - def process - @process ||= SDG::ProcessEnabled.new(record_or_name) + def i18n_namespace + "goals" end end diff --git a/app/components/sdg/tag_list_component.html.erb b/app/components/sdg/tag_list_component.html.erb new file mode 100644 index 000000000..54f477b4c --- /dev/null +++ b/app/components/sdg/tag_list_component.html.erb @@ -0,0 +1,4 @@ +
+ <%= render SDG::Goals::TagListComponent.new(record, limit: limit) %> + <%= render SDG::Targets::TagListComponent.new(record, limit: limit) %> +
diff --git a/app/components/sdg/tag_list_component.rb b/app/components/sdg/tag_list_component.rb new file mode 100644 index 000000000..95d15a542 --- /dev/null +++ b/app/components/sdg/tag_list_component.rb @@ -0,0 +1,8 @@ +class SDG::TagListComponent < ApplicationComponent + attr_reader :record, :limit + + def initialize(record, limit: nil) + @record = record + @limit = limit + end +end diff --git a/app/components/sdg/targets/tag_list_component.html.erb b/app/components/sdg/targets/tag_list_component.html.erb new file mode 100644 index 000000000..1c97ade36 --- /dev/null +++ b/app/components/sdg/targets/tag_list_component.html.erb @@ -0,0 +1 @@ +<%= link_list(*links, class: "sdg-target-tag-list") %> diff --git a/app/components/sdg/targets/tag_list_component.rb b/app/components/sdg/targets/tag_list_component.rb new file mode 100644 index 000000000..cb79f80b6 --- /dev/null +++ b/app/components/sdg/targets/tag_list_component.rb @@ -0,0 +1,36 @@ +class SDG::Targets::TagListComponent < ApplicationComponent + include SDG::TagList + + private + + def record + record_or_name + end + + def links + [*target_links, see_more_link(targets)] + end + + def target_links + targets.sort[0..(limit.to_i - 1)].map do |target| + [ + "#{SDG::Target.model_name.human} #{target.code}", + index_by_target(target), + title: filter_text(target), + data: { code: target.code } + ] + end + end + + def targets + record.sdg_targets + end + + def index_by_target(target) + index_by(target: target.code) + end + + def i18n_namespace + "targets" + end +end diff --git a/app/components/sdg_management/relations/index_component.rb b/app/components/sdg_management/relations/index_component.rb index 41eb4a26f..ee55fd7a7 100644 --- a/app/components/sdg_management/relations/index_component.rb +++ b/app/components/sdg_management/relations/index_component.rb @@ -1,6 +1,6 @@ class SDGManagement::Relations::IndexComponent < ApplicationComponent include Header - include SDG::Goals::OptionsForSelect + include SDG::OptionsForSelect delegate :valid_filters, :current_filter, to: :helpers attr_reader :records @@ -53,8 +53,6 @@ class SDGManagement::Relations::IndexComponent < ApplicationComponent end def target_options - targets = SDG::Target.all + SDG::LocalTarget.all - - options_from_collection_for_select(targets.sort, :code, :code, params[:target_code]) + super(params[:target_code]) end end diff --git a/app/components/shared/advanced_search_component.html.erb b/app/components/shared/advanced_search_component.html.erb index b03a371fc..903542908 100644 --- a/app/components/shared/advanced_search_component.html.erb +++ b/app/components/shared/advanced_search_component.html.erb @@ -14,20 +14,6 @@ placeholder: t("shared.advanced_search.general_placeholder") %> -
- - <%= select_tag("advanced_search[official_level]", official_level_search_options, - include_blank: t("shared.advanced_search.author_type_blank")) %> -
- - <% if sdg? %> -
- - <%= select_tag("advanced_search[goal]", goal_options, - include_blank: t("shared.advanced_search.goal_blank")) %> -
- <% end %> -
@@ -56,6 +42,25 @@
+
+ + <%= select_tag("advanced_search[official_level]", official_level_search_options, + include_blank: t("shared.advanced_search.author_type_blank")) %> +
+ + <% if sdg? %> +
+ + <%= select_tag("advanced_search[goal]", goal_options, + include_blank: t("shared.advanced_search.goal_blank")) %> +
+
+ + <%= select_tag("advanced_search[target]", target_options, + include_blank: t("shared.advanced_search.target_blank")) %> +
+ <% end %> +
<%= submit_tag t("shared.advanced_search.search"), class: "button expanded" %>
diff --git a/app/components/shared/advanced_search_component.rb b/app/components/shared/advanced_search_component.rb index a03425305..636fbdfc2 100644 --- a/app/components/shared/advanced_search_component.rb +++ b/app/components/shared/advanced_search_component.rb @@ -1,5 +1,5 @@ class Shared::AdvancedSearchComponent < ApplicationComponent - include SDG::Goals::OptionsForSelect + include SDG::OptionsForSelect private @@ -34,6 +34,10 @@ class Shared::AdvancedSearchComponent < ApplicationComponent super(advanced_search[:goal]) end + def target_options + super(advanced_search[:target]) + end + def sdg? SDG::ProcessEnabled.new(controller_path).enabled? end diff --git a/app/helpers/link_list_helper.rb b/app/helpers/link_list_helper.rb index 5042d55c5..f3e00d1bb 100644 --- a/app/helpers/link_list_helper.rb +++ b/app/helpers/link_list_helper.rb @@ -7,7 +7,7 @@ module LinkListHelper tag.li(({ "aria-current": true } if current)) do link_to text, url, link_options end - end) + end, "\n") end end end diff --git a/app/models/concerns/filterable.rb b/app/models/concerns/filterable.rb index 0c7520580..9f86e6a9a 100644 --- a/app/models/concerns/filterable.rb +++ b/app/models/concerns/filterable.rb @@ -20,7 +20,7 @@ module Filterable def allowed_filter?(filter, value) return if value.blank? - ["official_level", "date_range", "goal"].include?(filter) + ["official_level", "date_range", "goal", "target"].include?(filter) end end end diff --git a/app/views/polls/_poll_group.html.erb b/app/views/polls/_poll_group.html.erb index 95b1660aa..16da5efaa 100644 --- a/app/views/polls/_poll_group.html.erb +++ b/app/views/polls/_poll_group.html.erb @@ -47,9 +47,9 @@ <%= t("polls.index.geozone_info") %>

<% end %> -