search

IATI / IATI-Pattern-Library

Web style components built in conjunction with the new IATI brand
https://iati.github.io/IATI-Pattern-Library/
MIT License
1 stars 2 forks source link

Drop down navigation #120

Closed benjamincoleman closed 2 years ago

benjamincoleman commented 5 years ago

Sketch: https://marvelapp.com/4cfjg52/screen/60425986

Designs in any page of the PL: http://iati.surge.sh/page-templates/06-1-guidance-page

Want to make this Accessible - https://github.com/IATI/IATI-Pattern-Library/issues/125

And then implement on the website.

We'll need an updated version for the current state of development - we won't have a "Get Involved" section yet, but that will still be "Community". The content would be as you can see in this sketch:

benjamincoleman commented 5 years ago

I've worked up sections for each.

Have asked for feedback from the team: https://basecamp.com/1931476/projects/15044447/messages/86931782

benjamincoleman commented 5 years ago

@BenDarby

Can we remove the margin between primary menu items, and replace it with padding so you can move through the dropdowns seamlessly?

Also content changes to these two tabs:

https://marvelapp.com/4cfjg52/screen/60802024 and https://marvelapp.com/4cfjg52/screen/60802025

benjamincoleman commented 5 years ago

I've done all these - https://github.com/IATI/IATI-Pattern-Library/commit/92260887948595d95923ed7932848e138b736710

BenDarby commented 5 years ago

This is fine, good idea :)

benjamincoleman commented 5 years ago

@BenDarby feedback from the team:

Sam: there’s something “off” in the lang/links/search row, maybe adding borders or removing them from the lang selector helps a bit? The drop down search looks good!

I think he's right, we have borders and unequal spacing in this area:

Screen Shot 2019-09-16 at 16 18 14

Amy: Liking the drop down. Where there are lists of pages just in black writing these could do with a bit more design. Could we format that similarly to how they’re laid out in the about page? E.g. with the horizontal coloured line to the left? As well as making sure the different section within the drop downs align with each other?

So I think Amy is highlighting two things

Red lines - vertical marks we use elsewhere in the design

Blue lines - differences in paragraph and line-height - if we can standardise to a set grid I think that will help. What do you think? I'm aware this might go against Typographical recommendations, so let me know if this is a bad idea.

Screen Shot 2019-09-16 at 16 19 24

benjamincoleman commented 4 years ago

@BenDarby can you update the designs for the IATI dropdown menus please? Here's the sketch changes:

Updated About dropdown: https://marvelapp.com/4cfjg52/screen/60425986

Updated Governance dropdown: https://marvelapp.com/4cfjg52/screen/64036485

Updated Community dropdown for sprint 2: https://marvelapp.com/4cfjg52/screen/64550379

For this last one, we'll want to swap this out for the "Get Involved" menu item, and change that to "Community" for Sprint 2. Then for Sprint 3 we'll want ot change it back to "Get Involved" with teh current dropdown design. Make sense? if not call me

BenDarby commented 4 years ago

@benjamincoleman I've updated Surge, let me know if this is not right. http://iati.surge.sh/page-templates/06-1-guidance-page

benjamincoleman commented 4 years ago

@BenDarby perfect

benjamincoleman commented 4 years ago

@BenDarby I spoke too soon - the Governance dropdown section headings are sometimes not links.

BenDarby commented 4 years ago

@benjamincoleman I've updated the Governance dropdown menu to show non-linked headers too.

benjamincoleman commented 4 years ago

@BenDarby a few more actions on the meganav here.

  1. The current design for the "About" dropdown is missing a link to "view all case studies" from the featured case study

  2. This new design for About needs to be commented out and kept for the future and we need to...

  3. ...bring back the old About design for Sprint 2 development as it was with the Governance section.

BenDarby commented 4 years ago

@benjamincoleman do you have the sketch for the old about dropdown as I replaced it with the new one.

benjamincoleman commented 4 years ago

@BenDarby here you go - https://marvelapp.com/4cfjg52/screen/64792005

BenDarby commented 4 years ago

@benjamincoleman added the 'view all case studies' link to new about dropdown and commented out new design to replace with older about dropdown

urlsangel commented 4 years ago

@BenDarby @benjamincoleman

I refactored this last week as part of the task to make the meganav accessible - the "Get involved" section is in the model data but set to inactive (you can't have comments in JSON).

I think we should go with a set of includes/templates that the model data defines the use of, as this is similar to what we'll need in production.

I can refactor/implement the above when @BenDarby has finished - this should help with any updates going forward.