search

mozilla / network-pulse

A stream of assets from peers across the Mozilla Network
https://mozillapulse.org
36 stars 41 forks source link

Implement nav ui alignment #731

Closed kristinashu closed 6 years ago

kristinashu commented 6 years ago

From alignment work in mozilla/network#582 and to align better with new brand, mozilla.org, Network site, and IRH sites.

https://redpen.io/fv1d606e85be529df4

pulse home 2x

Updates include:

Mobile:

Similar to https://network.mozilla.org/

Medium width

screen shot 2017-10-06 at 4 27 19 pm

Narrow width

screen shot 2017-10-06 at 4 41 10 pm

cc @mmmavis

xmatthewx commented 6 years ago

@mmmavis – I expect that this work will take a bit of time and focus. In terms of priorities, let's stick to Profile related things first. I discussed with Jesse, and we want to make sure we ship that stuff well first, and then add this UI polish. I don't want you to feel overwhelmed given your other MozFest duties.

Make sense? Let me know if you have any questions or want to discuss.

When ready, we should also connect with Gavin to align how we handle the hamburger yum yum. Again, I think you don't need to worry about this unless you're blocked on profile related things. cc @alanmoo

mmmavis commented 6 years ago

@kristinashu are we removing "Featured" from nav bar?

kristinashu commented 6 years ago

No, you can keep Featured.

kristinashu commented 6 years ago

Cross linking this with the Network site nav updates https://github.com/mozilla/network/issues/820

xmatthewx commented 6 years ago

When we implement this, let's make sure we remove the old event tracking: https://github.com/mozilla/network-pulse/blob/c0bb8bc04a062623a249ca87186b2fe21992e167/components/nav-link/nav-link.jsx#L13-L14

note: this is not critical. just clutter.

mmmavis commented 6 years ago

@kristinashu this is ready for QA on staging: https://network-pulse-staging.herokuapp.com Things are not pixel perfect as I found some inconsistency in existing elements between Sketch file and production site. Please take a look at the staging site and let me know if anything needs changing. 😃

kristinashu commented 6 years ago

Exciting! Thanks @mmmavis!

Few updates to make it more like the comp and Foundation site:

Bug: (maybe open a new ticket for this?)

If open the menu at a narrow screen width and then make it wide, the menu looks like this (seems ok on Foundation site):

screen shot 2017-11-14 at 8 59 09 am
mmmavis commented 6 years ago

@kristinashu

Tweaks will be up on http://network-pulse-staging.herokuapp.com/ in about 10 mins (currently being deployed)

Addressed the following items on https://github.com/mozilla/network-pulse/issues/731#issuecomment-344330899

  • reduce height of the entire header (about from 220px to 180px)
  • make '+' icon hover state smooth like on Foundation site, rather than sudden jump
  • selected state for menu item should be underlined
  • link the little 'm' to the Feature page (like the full logo)

Didn't get addressed

  • here's the logo in black pulse-logo.svg.zip

Not sure what this file is for. Might be for logo hover state? I checked a few Mozilla sites and none of them inverses logo colour on hover state. --- let's discuss this further in a followup ticket.

Bug: (maybe open a new ticket for this?) If open the menu at a narrow screen width and then make it wide, the menu looks like this (seems ok on Foundation site):

This is probably not worth fixing as it is a rare case and there's probably no "clean" way of fixing it (without JS or duplicated DOM elements).

kristinashu commented 6 years ago

Awesome! Looks good!