diff --git a/app/assets/stylesheets/legislation.scss b/app/assets/stylesheets/legislation.scss index b70783789..59d55daad 100644 --- a/app/assets/stylesheets/legislation.scss +++ b/app/assets/stylesheets/legislation.scss @@ -71,8 +71,13 @@ .legislation-text { margin-bottom: 1rem; + > * { + @include grid-column-gutter; + } + h3 a { color: $black; + margin-bottom: 1rem; } } diff --git a/app/assets/stylesheets/legislation_process.scss b/app/assets/stylesheets/legislation_process.scss index 792c19c1c..2103ad34d 100644 --- a/app/assets/stylesheets/legislation_process.scss +++ b/app/assets/stylesheets/legislation_process.scss @@ -16,21 +16,6 @@ .legislation-hero { - ul { - list-style: none; - margin-left: 0; - - li { - - &::before { - color: #8aa8be; - content: "■"; - padding-right: $line-height / 4; - vertical-align: text-bottom; - } - } - } - .title { font-weight: bold; text-transform: uppercase; diff --git a/app/assets/stylesheets/mixins.scss b/app/assets/stylesheets/mixins.scss index afd81ecd3..0974541c1 100644 --- a/app/assets/stylesheets/mixins.scss +++ b/app/assets/stylesheets/mixins.scss @@ -247,6 +247,10 @@ margin-top: $spacing; margin-top: $max-spacing; } + + a:hover .sdg-goal-icon { + filter: brightness(90%); + } } %sdg-goal-list { diff --git a/app/assets/stylesheets/participation.scss b/app/assets/stylesheets/participation.scss index e836c7883..9c014addc 100644 --- a/app/assets/stylesheets/participation.scss +++ b/app/assets/stylesheets/participation.scss @@ -1832,7 +1832,7 @@ padding: 0 $line-height / 2 0 0; } - img { + .image-container img { height: 100%; max-width: none; position: absolute; diff --git a/app/assets/stylesheets/sdg/tag_list.scss b/app/assets/stylesheets/sdg/tag_list.scss index f242300df..2a0018a1f 100644 --- a/app/assets/stylesheets/sdg/tag_list.scss +++ b/app/assets/stylesheets/sdg/tag_list.scss @@ -11,18 +11,23 @@ .sdg-target-tag-list { @extend %tags; - a:not(.more-targets) { + a:not(.more-targets), + span { color: $white; } @each $code, $color in $sdg-colors { - [data-code^="#{$code}"] { + a[data-code^="#{$code}"] { background-color: $color; &:hover { background-color: darken($color, 10%); } } + + span[data-code^="#{$code}"] { + background-color: $color; + } } } } diff --git a/app/components/sdg/goals/plain_tag_list_component.html.erb b/app/components/sdg/goals/plain_tag_list_component.html.erb new file mode 100644 index 000000000..b16483315 --- /dev/null +++ b/app/components/sdg/goals/plain_tag_list_component.html.erb @@ -0,0 +1,7 @@ +<% if tags.any? %> + +<% end %> diff --git a/app/components/sdg/goals/plain_tag_list_component.rb b/app/components/sdg/goals/plain_tag_list_component.rb new file mode 100644 index 000000000..8b60b692b --- /dev/null +++ b/app/components/sdg/goals/plain_tag_list_component.rb @@ -0,0 +1,33 @@ +class SDG::Goals::PlainTagListComponent < ApplicationComponent + include SDG::TagList + + private + + def record + record_or_name + end + + def tags + [*goal_tags, see_more_link].compact + end + + def see_more_link + options = super(goals) + + link_to(*options) if options.present? + end + + def goal_tags + goals.order(:code).limit(limit).map do |goal| + render SDG::Goals::IconComponent.new(goal) + end + end + + def goals + record.sdg_goals + end + + 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 index 54f477b4c..3c9a5d7b5 100644 --- a/app/components/sdg/tag_list_component.html.erb +++ b/app/components/sdg/tag_list_component.html.erb @@ -1,4 +1,4 @@
- <%= render SDG::Goals::TagListComponent.new(record, limit: limit) %> - <%= render SDG::Targets::TagListComponent.new(record, limit: limit) %> + <%= goals_list %> + <%= targets_list %>
diff --git a/app/components/sdg/tag_list_component.rb b/app/components/sdg/tag_list_component.rb index 95d15a542..55b72c833 100644 --- a/app/components/sdg/tag_list_component.rb +++ b/app/components/sdg/tag_list_component.rb @@ -1,8 +1,27 @@ class SDG::TagListComponent < ApplicationComponent - attr_reader :record, :limit + attr_reader :record, :limit, :linkable - def initialize(record, limit: nil) + def initialize(record, limit: nil, linkable: true) @record = record @limit = limit + @linkable = linkable end + + private + + def goals_list + if linkable + render SDG::Goals::TagListComponent.new(record, limit: limit) + else + render SDG::Goals::PlainTagListComponent.new(record, limit: limit) + end + end + + def targets_list + if linkable + render SDG::Targets::TagListComponent.new(record, limit: limit) + else + render SDG::Targets::PlainTagListComponent.new(record, limit: limit) + end + end end diff --git a/app/components/sdg/targets/plain_tag_list_component.html.erb b/app/components/sdg/targets/plain_tag_list_component.html.erb new file mode 100644 index 000000000..ab0c51246 --- /dev/null +++ b/app/components/sdg/targets/plain_tag_list_component.html.erb @@ -0,0 +1,7 @@ +<% if tags.any? %> + +<% end %> diff --git a/app/components/sdg/targets/plain_tag_list_component.rb b/app/components/sdg/targets/plain_tag_list_component.rb new file mode 100644 index 000000000..b24792cb2 --- /dev/null +++ b/app/components/sdg/targets/plain_tag_list_component.rb @@ -0,0 +1,37 @@ +class SDG::Targets::PlainTagListComponent < ApplicationComponent + include SDG::TagList + + private + + def record + record_or_name + end + + def tags + [*target_tags, see_more_link].compact + end + + def see_more_link + options = super(targets) + + link_to(*options) if options.present? + end + + def target_tags + targets.sort[0..(limit.to_i - 1)].map do |target| + tag.span(text(target), data: { code: target.code }) + end + end + + def targets + record.sdg_targets + end + + def text(target) + "#{SDG::Target.model_name.human} #{target.code}" + end + + def i18n_namespace + "targets" + end +end diff --git a/app/views/legislation/processes/_header_full.html.erb b/app/views/legislation/processes/_header_full.html.erb index 6af30975c..08a0205aa 100644 --- a/app/views/legislation/processes/_header_full.html.erb +++ b/app/views/legislation/processes/_header_full.html.erb @@ -3,6 +3,8 @@ <%= markdown @process.description %> <% end %> +<%= render SDG::TagListComponent.new(@process, linkable: false) %> + <% if @process.additional_info.present? %>