diff --git a/app/assets/stylesheets/mixins.scss b/app/assets/stylesheets/mixins.scss index f6a5bef0e..d5dd96113 100644 --- a/app/assets/stylesheets/mixins.scss +++ b/app/assets/stylesheets/mixins.scss @@ -244,10 +244,12 @@ width: calc(100% + #{$spacing}); width: calc(100% + #{$max-spacing}); - > * { + > *, + > .tabs-title { margin-bottom: 0; margin-left: $spacing; margin-left: $max-spacing; + margin-right: 0; margin-top: $spacing; margin-top: $max-spacing; } @@ -261,6 +263,33 @@ @include sdg-goal-list; } +%sdg-goal-list-expanded { + $spacing: 0.5%; + @include sdg-goal-list($spacing); + + label, + li { + min-width: $sdg-icon-min-width; + width: calc(100% / 17 - #{$spacing}); + + &:hover { + cursor: pointer; + } + + .sdg-goal-icon { + width: 100%; + } + + a:focus { + outline: none; + + img { + outline: $outline-focus; + } + } + } +} + %tags { margin-bottom: 0; margin-left: 0; diff --git a/app/assets/stylesheets/sdg/goals/targets.scss b/app/assets/stylesheets/sdg/goals/targets.scss index f4b061462..ec9fb307c 100644 --- a/app/assets/stylesheets/sdg/goals/targets.scss +++ b/app/assets/stylesheets/sdg/goals/targets.scss @@ -1,4 +1,4 @@ -.sdg-goal-show .targets { +.sdg-goal-targets { dt, dd { display: inline; diff --git a/app/assets/stylesheets/sdg/help.scss b/app/assets/stylesheets/sdg/help.scss new file mode 100644 index 000000000..0d9b94df1 --- /dev/null +++ b/app/assets/stylesheets/sdg/help.scss @@ -0,0 +1,14 @@ +.sdg-help-content { + @include grid-column-gutter; + + > .tabs { + @extend %sdg-goal-list-expanded; + + li { + + &:focus { + outline: $outline-focus; + } + } + } +} diff --git a/app/assets/stylesheets/sdg/related_list_selector.scss b/app/assets/stylesheets/sdg/related_list_selector.scss index 9e4f8c0ad..9f2b2a2a8 100644 --- a/app/assets/stylesheets/sdg/related_list_selector.scss +++ b/app/assets/stylesheets/sdg/related_list_selector.scss @@ -17,27 +17,17 @@ } .goals { - $spacing: 0.5%; - @include sdg-goal-list($spacing); + @extend %sdg-goal-list-expanded; + + + label { + @include element-invisible; + } legend { font-weight: normal; font-style: italic; } - label { - min-width: $sdg-icon-min-width; - width: calc(100% / 17 - #{$spacing}); - - &:hover { - cursor: pointer; - } - - .sdg-goal-icon { - width: 100%; - } - } - input { @include element-invisible; @@ -51,9 +41,10 @@ } } - label { + .help-text { font-weight: normal; font-style: italic; + font-size: $base-font-size; } .input-section { diff --git a/app/components/sdg/goals/help_page_component.html.erb b/app/components/sdg/goals/help_page_component.html.erb new file mode 100644 index 000000000..43be5ac17 --- /dev/null +++ b/app/components/sdg/goals/help_page_component.html.erb @@ -0,0 +1,29 @@ +<% provide(:title) { t("sdg.goals.help.title") } %> + +<% content_for :canonical do %> + <%= render "shared/canonical", href: sdg_help_url %> +<% end %> + +
+

<%= t("sdg.goals.help.title") %>

+

<%= t("sdg.goals.help.description") %>

+ + +
+ <% @goals.each do |goal| %> +
+

<%= goal.code_and_title %>

+

<%= sanitize t("sdg.goals.goal_#{goal.code}.description") %>

+ <%= render SDG::Goals::TargetsComponent.new(goal) %> +
+ <% end %> +
+
diff --git a/app/components/sdg/goals/help_page_component.rb b/app/components/sdg/goals/help_page_component.rb new file mode 100644 index 000000000..470bdf5e6 --- /dev/null +++ b/app/components/sdg/goals/help_page_component.rb @@ -0,0 +1,17 @@ +class SDG::Goals::HelpPageComponent < ApplicationComponent + attr_reader :goals + + def initialize(goals) + @goals = goals + end + + def render? + feature?("sdg") + end + + private + + def is_active?(goal) + "is-active" if goal.code == 1 + end +end diff --git a/app/components/sdg/goals/targets_component.html.erb b/app/components/sdg/goals/targets_component.html.erb index d6030e8c6..7fa66cad8 100644 --- a/app/components/sdg/goals/targets_component.html.erb +++ b/app/components/sdg/goals/targets_component.html.erb @@ -1,15 +1,15 @@ -
-