Update header to make it easier to find support, guidance and where to log in #397

DilwoarH · 2018-01-08T16:50:04Z

This is part of a larger piece of work to change the homepage styling so it is easier to find things on the page and consistent with other services in the service toolkit.

Examples of other pages that use this pattern can be found under the components heading on the service toolkit. https://www.gov.uk/service-toolkit

The code for these pages can be found here: https://github.com/alphagov/product-page-example

As part of this work we will make support easier to find and remove the beta phase banner

The guidance link would go to: https://www.gov.uk/government/collections/digital-marketplace-buyers-and-suppliers-information

The GOV.UK Digital Marketplace logo would go to the digital marketplace home page.

Ticket ID: https://trello.com/c/mityCieG/106-update-header-to-make-it-easier-to-find-support-guidance-and-where-to-log-in

TheDoubleK · 2018-01-12T08:55:56Z

toolkit/templates/page-heading.html

-  <h1>
-    {{ heading }}
-  </h1>
+  {%- if heading_level == '2' -%}


The "page heading" macro is intended to be just that - the heading for a whole page - which is why it's always a h1. This makes sense to me as a toolkit macro - "this is how our top level heading on every page is styled", and that could easily change to be more than just the h1 element it is currently.

What's the need for a macro for h2 (and possibly lower) headings? The approach until now - to add heading styles to the dmspeak class - seems OK to me?

If there is a need for more heading macros then I'd be tempted to make it a new macro - "paragraph_heading" or something, rather than mixing it up with the page heading.

sorry - this got committed by accident, it was something I was testing out for another pull request. Has been removed.

idavidmcdonald

Does mean we can also remove the phase-banner component that exists in here and will no longer be used?

idavidmcdonald · 2018-01-12T15:56:01Z

VERSION.txt

@@ -1 +1 @@
-27.0.0
+28.0.0


Can we add a record to the changelog please for completeness

this has been done now

idavidmcdonald · 2018-01-12T16:07:30Z

toolkit/scss/_proposition-header.scss

+
+            .header-title {
+                float: left;
+                font-family: "nta", Arial, sans-serif;


Can we be making use of our variables here? Above is using $toolkit-font-stack;

idavidmcdonald · 2018-01-12T16:07:45Z

toolkit/scss/_proposition-header.scss

+                }
+
+                a {
+                    color: #fff;


Can we use $white?

TheDoubleK · 2018-01-15T10:02:32Z

Has this had a any product sign-off at all? Feels like too big a thing for us to just push out as "some firebreak stuff" - Tobi is on the card but hasn't said anything on there, and I don't know that she ever saw this version of the header?

I think making the guidance link more prominent should definitely be good, but I think the link text overall might be confusing - "Guidance Help Log in"... as a user I'm thinking "what's the difference between guidance and help"? Why did we decide against "Support" as I think I saw in a previous version (at least for the URL)? To me "Support" is much more clearly "I need to talk to a person" than "Help!", which could be anything.

DilwoarH · 2018-01-15T11:28:56Z

@constancecerf - could you help answer Kev's question please?

DilwoarH · 2018-01-15T11:43:26Z

@idavidmcdonald

"Does mean we can also remove the phase-banner component that exists in here and will no longer be used?"

Yes - I believe this can now be removed.

idavidmcdonald · 2018-01-16T08:55:26Z

@DilwoarH

Just so I'm clear, does that mean you will be removing the phase-banner component as part of this PR or were you just acknowledging that it can be removed?

idavidmcdonald · 2018-01-16T09:09:20Z

I've been playing around in different browser window sizes and here are some screenshots for us compared to PaaS. You'll notice that unlike the other components our name and phase tag can separate when at some small screen sizes. I think some of the other components also reduce the font size slightly of the product name when at small screen sizes so things fit in nicely.

DilwoarH · 2018-01-17T14:59:54Z

@idavidmcdonald - I was just acknowledging that this could be removed. I think if everyone agrees that it can be removed then I am happy to do so.

idavidmcdonald · 2018-01-17T15:14:19Z

Yeah I think it can be removed and if we both agree then let's do it now.

DilwoarH · 2018-02-01T11:28:13Z

@idavidmcdonald - I have updated the toolkit:

idavidmcdonald · 2018-02-01T13:43:08Z

Can we remove the phase-banner component from the toolkit too please

idavidmcdonald · 2018-02-01T14:29:47Z

Just had a play with it on my local - nice work on sorting the mobile resolution stuff.

I spotted one thing that a designer might care about (I don't know if it's Laurence or Jeremy working with you on this one).

On one of the mid sized resolutions (between desktop and mobile) you can get a header that looks like that. Should the Digital Marketplace have a slightly larger margin so it aligns horizontally with the crown logo?

idavidmcdonald

Few minor comments

idavidmcdonald · 2018-02-01T13:47:25Z

toolkit/templates/proposition-header.html

+        </li>
+        {% if (current_user.is_authenticated() if logged_in is not defined else logged_in) %} {% if (role or current_user.role) == 'buyer' %}
+        <li>
+          <a href="/buyers">View your account</a>


Do we have external routes for /buyers and /suppliers and user/login?

idavidmcdonald · 2018-02-01T14:33:12Z

CHANGELOG.md

+### What changed
+
+- Changes existing header to product page style header.
+- Product page Github: https://github.com/alphagov/product-page-example


Could we have in here what changes someone would need to make to a frontend app to bring this new version of the toolkit in? As in, I assume if one of the FE apps just bumped to this toolkit version without any other changes then things would break/look wrong?

E.g. mention the changes that you are currently having to make in the buyer FE.
For example does the FE need a certain version of utils pulled in?
Removal of phase banner
Adding of inside-header block
That type of stuff

I have updated the instructions below

DilwoarH · 2018-02-01T15:33:40Z

@idavidmcdonald - I have created the phase banner tickets for our next sprint:
https://trello.com/c/8xMrtTs0/346-fix-jenkin-job-for-frontend-toolkit-documentation
https://trello.com/c/MhnOmevf/347-remove-phase-banner

Regarding the responsiveness, I have updated it so that the padding is always right now.

risicle · 2018-02-01T17:28:18Z

For bonus points, roll this dependency out to the frontend apps one by one so that half of our pages don't match each other for a period of a few weeks.

DilwoarH · 2018-02-06T13:59:20Z

@risicle - I am going to try and roll it out all in one go if possible.

laurenceberry · 2018-02-07T15:47:33Z

How does this look on the static pages (404 etc)?

lauraflannery · 2018-02-07T16:12:04Z

Hey @DilwoarH I'm happy to approve the new header.

cc @laurenceberry

In future when there are things like this being discussed in github which aren't on a team's Trello board please can you copy a product manager into the conversation so one of us has oversight? Thank you. :)

DilwoarH · 2018-02-15T10:52:00Z

@laurenceberry - this is how the 404 page looks

DilwoarH · 2018-02-15T10:52:39Z

@idavidmcdonald - everyone has signed off the changes. Could I get this approved so I can move across everything?

Update header to make it easier to find support, guidance and where to log in This is part of a larger piece of work to change the homepage styling so it is easier to find things on the page and consistent with other services in the service toolkit. Examples of other pages that use this pattern can be found under the components heading on the service toolkit. https://www.gov.uk/service-toolkit The code for these pages can be found here: https://github.com/alphagov/product-page-example As part of this work we will make support easier to find and remove the beta phase banner The guidance link would go to: https://www.gov.uk/government/collections/digital-marketplace-buyers-and-suppliers-information The GOV.UK Digital Marketplace logo would go to the digital marketplace home page. Ticket ID: https://trello.com/c/mityCieG/106-update-header-to-make-it-easier-to-find-support-guidance-and-where-to-log-in

idavidmcdonald

Woo great work Dilwoar!

DilwoarH · 2018-02-15T11:24:20Z

🎉 FINALLY !

TheDoubleK reviewed Jan 12, 2018

View reviewed changes

DilwoarH force-pushed the dh-106-update-header-to-make-it-easier-to-find-support-guidance-and-where-to-log-in branch 6 times, most recently from d5f9873 to d82246f Compare January 12, 2018 11:06

DilwoarH changed the title ~~[WIP] Adds in proposition header~~ Update header to make it easier to find support, guidance and where to log in Jan 12, 2018

DilwoarH requested a review from idavidmcdonald January 12, 2018 15:47

idavidmcdonald reviewed Jan 12, 2018

View reviewed changes

toolkit/scss/_proposition-header.scss Outdated

}

a {

color: #fff;

Copy link

Contributor

idavidmcdonald Jan 12, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we use $white?

DilwoarH force-pushed the dh-106-update-header-to-make-it-easier-to-find-support-guidance-and-where-to-log-in branch from 9d281a6 to 5372dca Compare January 15, 2018 11:39

DilwoarH force-pushed the dh-106-update-header-to-make-it-easier-to-find-support-guidance-and-where-to-log-in branch 2 times, most recently from b1f2f5c to eadeb74 Compare February 1, 2018 11:27

idavidmcdonald reviewed Feb 1, 2018

View reviewed changes

DilwoarH force-pushed the dh-106-update-header-to-make-it-easier-to-find-support-guidance-and-where-to-log-in branch 3 times, most recently from 014e83e to 938a4d5 Compare February 15, 2018 10:24

DilwoarH force-pushed the dh-106-update-header-to-make-it-easier-to-find-support-guidance-and-where-to-log-in branch from 5d867c5 to 5524e15 Compare February 15, 2018 11:12

idavidmcdonald approved these changes Feb 15, 2018

View reviewed changes

DilwoarH merged commit 62e640e into master Feb 15, 2018

DilwoarH deleted the dh-106-update-header-to-make-it-easier-to-find-support-guidance-and-where-to-log-in branch February 15, 2018 11:24

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update header to make it easier to find support, guidance and where to log in #397

Update header to make it easier to find support, guidance and where to log in #397

DilwoarH commented Jan 8, 2018 •

edited

Loading

TheDoubleK Jan 12, 2018

DilwoarH Jan 12, 2018

idavidmcdonald left a comment

idavidmcdonald Jan 12, 2018

DilwoarH Jan 15, 2018

idavidmcdonald Jan 12, 2018

idavidmcdonald Jan 12, 2018

TheDoubleK commented Jan 15, 2018 •

edited

Loading

DilwoarH commented Jan 15, 2018

DilwoarH commented Jan 15, 2018

idavidmcdonald commented Jan 16, 2018

idavidmcdonald commented Jan 16, 2018

DilwoarH commented Jan 17, 2018

idavidmcdonald commented Jan 17, 2018

DilwoarH commented Feb 1, 2018

idavidmcdonald commented Feb 1, 2018

idavidmcdonald commented Feb 1, 2018

idavidmcdonald left a comment

idavidmcdonald Feb 1, 2018

idavidmcdonald Feb 1, 2018

DilwoarH Feb 15, 2018

DilwoarH commented Feb 1, 2018

risicle commented Feb 1, 2018

DilwoarH commented Feb 6, 2018

laurenceberry commented Feb 7, 2018

lauraflannery commented Feb 7, 2018

DilwoarH commented Feb 15, 2018

DilwoarH commented Feb 15, 2018

idavidmcdonald left a comment

DilwoarH commented Feb 15, 2018

		@@ -1 +1 @@
		27.0.0
		28.0.0

Update header to make it easier to find support, guidance and where to log in #397

Update header to make it easier to find support, guidance and where to log in #397

Conversation

DilwoarH commented Jan 8, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

idavidmcdonald left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

TheDoubleK commented Jan 15, 2018 • edited Loading

DilwoarH commented Jan 15, 2018

DilwoarH commented Jan 15, 2018

idavidmcdonald commented Jan 16, 2018

idavidmcdonald commented Jan 16, 2018

DilwoarH commented Jan 17, 2018

idavidmcdonald commented Jan 17, 2018

DilwoarH commented Feb 1, 2018

idavidmcdonald commented Feb 1, 2018

idavidmcdonald commented Feb 1, 2018

idavidmcdonald left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

DilwoarH commented Feb 1, 2018

risicle commented Feb 1, 2018

DilwoarH commented Feb 6, 2018

laurenceberry commented Feb 7, 2018

lauraflannery commented Feb 7, 2018

DilwoarH commented Feb 15, 2018

DilwoarH commented Feb 15, 2018

idavidmcdonald left a comment

Choose a reason for hiding this comment

DilwoarH commented Feb 15, 2018

DilwoarH commented Jan 8, 2018 •

edited

Loading

TheDoubleK commented Jan 15, 2018 •

edited

Loading