Styled new header and notifications.

Styled new header and notifications.

As per the new mockups here: https://docs.google.com/a/canonical.com/file/d/0B9WMKNMU_KomMWUtUWdfVGR1WVk/edit?usp=drive_web

https://code.launchpad.net/~huwshimi/juju-gui/masthead-update/+merge/191370

(do not edit description out of merge proposal)

[huwshimi, 2013-10-16 10:55:02]

Please take a look.

[bac, 2013-10-16 13:38:07]

Hi Huw,

This isn't a full review, just observations on the behavior I've seen wrt the
import/export icons.

From initial state, I see that the export icon is default, it changes when
hovered, and then goes to the active state when clicked and the export file is
downloaded.

The icon remains in the clicked state even after the pointer is moved away. 
Hovering again does not change it, and clicking on it does not do a download but
does reset it to the inactive icon.

So the net result is download only happen on every other click and the state of
the icon is wrong for half the time.

I just checked on comingsoon.jujucharms.com and files do export with each click.

[rharding, 2013-10-16 14:32:50]

As Brad mentions, the :active is a deal-breaker. Not all browsers will clear
:active once the click is over. It's a bit like :blur. It's 'got' the focus of
the browser until something else gets it. 

If you remove the :active state it works fine. 

That said: 

There's nothing resetting .normal back to display block. Adding this though,
does not get around the above problem.

I verified that the order of :link, :visited, :hover, :active is correct. I also
tried adding a :link version to no effect. 

Related material: 
http://stackoverflow.com/questions/12417727/pseudo-class-active-not-working-c...

From accessibility docs:

"For folks without the ability to use a mouse, they still need some visual
indicator that they currently have a link active"

Typically it's a flash because the page loads/changes. In our case though, it
stays set as :active.

Honestly, the active state is a bit of a 'why?' since it's only going to show
for the instant the mouse is down and you're going to be getting download
notifications from the browser at the same time. The user will not notice it.
I'd just remove it. 

If we must proceed though, I think we'd have to move this logic to JS to make
sure we can reset the styles after the click occurs.

[huwshimi, 2013-10-17 01:07:09]

Please take a look.

[huwshimi, 2013-10-17 01:11:05]

On 2013/10/16 14:32:50, rharding wrote:
> As Brad mentions, the :active is a deal-breaker. Not all browsers will clear
> :active once the click is over. It's a bit like :blur. It's 'got' the focus of
> the browser until something else gets it. 
> 
> If you remove the :active state it works fine. 
> 
> That said: 
> 
> There's nothing resetting .normal back to display block. Adding this though,
> does not get around the above problem.
> 
> I verified that the order of :link, :visited, :hover, :active is correct. I
also
> tried adding a :link version to no effect. 
> 
> Related material: 
>
http://stackoverflow.com/questions/12417727/pseudo-class-active-not-working-c...
> 
> From accessibility docs:
> 
> "For folks without the ability to use a mouse, they still need some visual
> indicator that they currently have a link active"
> 
> Typically it's a flash because the page loads/changes. In our case though, it
> stays set as :active.
> 
> Honestly, the active state is a bit of a 'why?' since it's only going to show
> for the instant the mouse is down and you're going to be getting download
> notifications from the browser at the same time. The user will not notice it.
> I'd just remove it. 
> 
> If we must proceed though, I think we'd have to move this logic to JS to make
> sure we can reset the styles after the click occurs.

I think we can do without. I've pushed some new changes to remove the active
state. I also made the links anchors for better browser handling.

[rharding, 2013-10-17 12:52:56]

Code looks ok, qa'ing.

https://codereview.appspot.com/14739045/diff/6001/lib/views/stylesheet.less
File lib/views/stylesheet.less (right):

https://codereview.appspot.com/14739045/diff/6001/lib/views/stylesheet.less#n...
lib/views/stylesheet.less:50: @navbar-height: 60px;
woot! smaller header yay!

[rharding, 2013-10-17 12:56:20]

LGTM, the notifications look odd now in the middle but understand it's part of
the path to the design.