Goal tabs should reflect the Goal title

Question

Goal tabs should reflect the Goal title

Closed this issue 5 years ago · 18 comments

The ‘3 Good Health and Well-being’ page shares the same page title as the home page and does not uniquely reflect the contents of page. Page titles that do not uniquely describe or introduce the page content means that some users may not be able to identify the purpose or topic of the page content. “When I activated the third goal ‘good health and wellbeing’ link, I was confused by the fact that the URL changed, even though the page title did not.
<title>U.K. Indicators For The Sustainable Development Goals</title>

Answer 1 · 2019-04-24T21:13:48.000Z

Accessibility tickets

Answer 2 · 2019-05-14T12:54:18.000Z

Description

The site Goal pages have a tab which reads 'U.K. Indicators...', whereas it should read 'Goal 3 - Education' (for example). All indicator tabs already have the format Indicator – Goal – description so it’s just a case of removing indicator - from the head.html.

Testing page: https://sdg.mango-solutions.com/a11y-goal-tab/

Screenshots

Before

After

Successfully tested on...

User feedback and problems encountered...

Chrome on Mac

The tab successfully shows Goal 1 - No poverty when a goal is selected:

However: it seems to break when an indicator is selected:

And it seems that it affects the colouring of the indicator page and also the heading image disappears (not sure if this is related):

@SavvasStephanides Yes I noticed this too. Think it occurs on all browsers. Trying to fix it now.

Answer 3 · 2019-06-13T09:45:37.000Z

Indicator pages already have a specific tab - just remove the 'Indicator .._' preface and leave the Goal details when browsing the Goal pages.

Answer 4 · 2019-06-13T13:51:32.000Z

Goal tabs should reflect the Goal title

Answer 5 · 2019-06-27T13:12:55.000Z

@brockfanning Succeeded in changing the Goal icon with your help - no details though. Any thoughts?
Test branch: https://sdg.mango-solutions.com/a11y-goal-tab/3/
bee4525
Many thanks,
Chris

Answer 6 · 2019-06-27T13:58:08.000Z

I believe that means that {{ goal_number }} and {{ goal.short }} variables do not exist on goal pages. It looks like they only get set for indicator pages, in this file. I guess that file does not get included on goal pages.

Answer 7 · 2019-06-28T11:39:09.000Z

Unable to use open-sdg remote_theme branches, so overriding _layouts/goal.html locally for now.

5c4b440 (added line 2 - {%- include indicator-variables.html -%})

Answer 8 · 2019-07-01T21:17:24.000Z

This has resulted in the Goal tab reading "Goal 2 - ".
An improvement, but I'll see if I can get the short description too.

Answer 9 · 2019-07-01T21:44:49.000Z

This is working as hoped! Ready to be tested @LucyGwilliamAdmin @SavvasStephanides

Answer 10 · 2019-07-02T12:41:54.000Z

This update also caused the indicator tab and Goal icon to break. Attempted fix: 60dada9

Answer 11 · 2019-07-02T13:03:04.000Z

This added the description but the icon is still broken and the tab number is missing. Reverting to the original tags as in #3195 fixes the indicator page but breaks the goal page. How to get both working?

Answer 12 · 2019-07-04T07:48:46.000Z

@brockfanning What is the flag that indicates that a goal page is currently open? We have page.indicator to check when an indicator page is open, but not sure about a goal page. Thanks!

Answer 13 · 2019-07-04T08:31:27.000Z

page.indicator tells us that the page has that variable. You can look at the _indicators directory. You see that it has (e.g.)

---
indicator: 1.2.1
layout: indicator
permalink: /1-2-1/
---

I wonder if a better way would be to switch (or case-when) on the page.layout variable because this always exists and is more clear in the code (IMO). So something like:

<title>
{% case page.layout %}
  {% when 'indicator' %}
    {{ page_title | escape }}
  {% when 'goal' %}
    Goal {{ page.sdg_goal }} - {{ page.short }}
  {% else %}
    {{ site.title | escape }}
{% endcase %}
</title>

Or we could make title a function somehow. Might need to capture variables, I'm not sure. We could also code this logic somewhere else so that the page_title variable always works.

Answer 14 · 2019-07-04T08:36:25.000Z

To directly answer the question as to what's the equivalent to page.indicator for a goal. I'd say page.sdg_goal. If that exists it's a goal page because that's not stored in the indicator page header. Goal headers currently look like this:

---
title: Ensure inclusive and equitable quality education and promote lifelong learning
  opportunities for all
short: Quality Education
permalink: /4/
redirect_from: /quality-education/
sdg_goal: '4'
color: '#c5192d'
layout: goal
---

Answer 15 · 2019-07-04T08:40:14.000Z

@dougmet So could we have...?
if page.sdg_goal = f4859c6 + 29b4426
elsif page.indicator = https://github.com/ONSdigital/sdg-indicators/pull/3195/files

Answer 16 · 2019-07-04T09:44:41.000Z

Thanks @dougmet, I think that answers my question. The way to do this (I think) is:

if page.indicator exists
    title = "Indicator <indicator number> - Goal <goal number>
else if page.sdg_goal exists
    title = "Goal <goal number> - <Goal description>"
else
    title = "<Site name>"

EDIT: yes I think this should have been better coded to reflect that if page.indicator means that the current page is an indicator page etc. Not sure if we can do this with capture.

Answer 17 · 2019-07-04T11:26:44.000Z

Pull request (open-sdg): open-sdg/open-sdg#231

Test: https://sdg.mango-solutions.com/test-goal-tab

Answer 18 · 2019-08-19T10:54:05.000Z

This is fixed in Open SDG v0.8.0 so closing this.