914634 - Build revised nav into all pages and routes

Status: RESOLVED FIXED

(Webmaker Graveyard :: webmaker.org, defect)

Description

[Cassie McDaniel [:cassiemc]]

This is based on the homepage redesign. Would like to see interactions for how the nav works at multiple sizes, including considered hover and on states, and tap vs. click.

Comment 2

[inactivate account for kate]

Designs:
https://bugzilla.mozilla.org/show_bug.cgi?id=914187

Comment 3

[inactivate account for kate]

Here's a starting point prototype -- http://webmaker-914634.herokuapp.com/

Comment 4

[Cassie McDaniel [:cassiemc]]

This is great Kate!! You got a lot further than I expected! Maybe we can try to hop on vidyo today?

Comment 5

[Brett Gaylor [:brett]]

Prototyping is done, morphing this into a ticket for pages other than homepage.

Comment 6

[inactivate account for kate]

Attachment: https://github.com/mozilla/webmaker.org/pull/407

Quite a few design changes here, more simple breadcrumbs style, mobile styles, icons with hover states.

Design review done with Gavin yesterday.

http://webmaker-sandbox.herokuapp.com - Live version

Comment 7

[Matthew Schranz [:mjschranz]]

Comment on attachment 813134 [details] [review]
https://github.com/mozilla/webmaker.org/pull/407

Don't shoot the messenger here, but just bring up UI quirks I'm noticing.

- Seems weird to notice that when I hover over this section there's a gap between it and "Explore. Correction, this happens when mousing over anything to the left/right of the selected tab/section. https://dl.dropboxusercontent.com/spa/qxpeeqhhsjhcqcf/7w_ihsdw.png

- http://webmaker-sandbox.herokuapp.com/en-US/blog doesn't point to anything right now. Will this point to something in the future or will it be temporarily turned off?

- Is it known that the footer on /login is broken? https://dl.dropboxusercontent.com/spa/qxpeeqhhsjhcqcf/44_m5c8p.png

- Your nav bar isn't localized https://dl.dropboxusercontent.com/spa/qxpeeqhhsjhcqcf/tlk0s7gn.png

Anyway, code review incoming.

Comment 8

[Matthew Schranz [:mjschranz]]

Code review done.

Comment 9

[Gavin Suntop [:gvn]]

Comment on attachment 813134 [details] [review]
https://github.com/mozilla/webmaker.org/pull/407

Code looks good. A few nits noted.

Design-wise it seems like things lose fidelity beyond 1540px wide. The content block is constrained to 1540, but the header isn't, which feels non-gridded. I'd suggest setting a 1540 max width on webmaker-outer-wrapper and margin "auto" to start.

There is also some header edge cropping around 900px window width.

Other than that, looking awesome!

Comment 10

[inactivate account for kate]

Ok sweet, updated the grid on the header. Also noticed some problems with header/logo for mobile safari which i touched up while i was there

Comment 11

[Matthew Schranz [:mjschranz]]

On second thought, I think fixing the events nit would be easy enough, at least to make it not feel janky.

https://dl.dropboxusercontent.com/spa/qxpeeqhhsjhcqcf/6r50yw9r.png

I guess just expand the map container to fill the rest of the space.

Comment 12

[[github robot]]

Commit pushed to master at https://github.com/mozilla/webmaker.org

https://github.com/mozilla/webmaker.org/commit/f724e8a80b61bc8a2846e7152f8777fb79961ff2
bug 914634 - New navigation with mobile styles