Add code to goal title
The same way it's done in UN official SDG pages.
This commit is contained in:
@@ -31,6 +31,11 @@
|
|||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
letter-spacing: -1px;
|
letter-spacing: -1px;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
|
|
||||||
|
.goal-code {
|
||||||
|
letter-spacing: -0.1em;
|
||||||
|
margin-right: rem-calc(10);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@each $code, $color in $sdg-colors {
|
@each $code, $color in $sdg-colors {
|
||||||
|
|||||||
@@ -5,7 +5,7 @@
|
|||||||
|
|
||||||
<article class="sdg-goal sdg-goal-<%= goal.code %>">
|
<article class="sdg-goal sdg-goal-<%= goal.code %>">
|
||||||
<header>
|
<header>
|
||||||
<h1><%= goal.title %></h1>
|
<h1><%= heading %></h1>
|
||||||
</header>
|
</header>
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
|
|||||||
@@ -15,4 +15,8 @@ class SDG::Goals::ShowComponent < ApplicationComponent
|
|||||||
def processes_feed
|
def processes_feed
|
||||||
feeds.find { |feed| feed.kind == "processes" }
|
feeds.find { |feed| feed.kind == "processes" }
|
||||||
end
|
end
|
||||||
|
|
||||||
|
def heading
|
||||||
|
safe_join([tag.span(goal.code, class: "goal-code"), tag.span(goal.title, class: "goal-title")], " ")
|
||||||
|
end
|
||||||
end
|
end
|
||||||
|
|||||||
@@ -47,7 +47,7 @@ describe "SDG Goals", :js do
|
|||||||
scenario "shows the SDG and its related content" do
|
scenario "shows the SDG and its related content" do
|
||||||
visit sdg_goal_path(15)
|
visit sdg_goal_path(15)
|
||||||
|
|
||||||
within(".sdg-goal header") { expect(page).to have_content "LIFE ON LAND" }
|
within(".sdg-goal header") { expect(page).to have_content "15 LIFE ON LAND" }
|
||||||
|
|
||||||
within ".feed-proposals" do
|
within ".feed-proposals" do
|
||||||
expect(page).to have_content "Animal farm"
|
expect(page).to have_content "Animal farm"
|
||||||
|
|||||||
Reference in New Issue
Block a user