869204 - Webmaker.org Header and Footer

Status: RESOLVED DUPLICATE of bug 873608

(Webmaker Graveyard :: webmaker.org, defect)

Description

[Dale Karp (:daleee)]

As per Cassie's specs in Google Drive: https://docs.google.com/file/d/0BzfN9sXlOXt1YmpnTEhma2dKVzQ/edit?usp=sharing

Comment 1

[Cassie McDaniel [:cassiemc]]

I'm looking at http://glacial-atoll-9380.herokuapp.com/.

At initial glance, here's my feedback for the header (excluding responsiveness and logged out view):

• I like the way the header is now full-width. Woot!
• Profile picture should be in a circle with a thin rule: #b5b5b5
• The profile text ("Hi cassiemc. Dashboard / sign out) is a little too big
• missing Tabzilla
• Nav text seems slightly too big.
• There should be an on-states for the nav text: #b6b7b9. So on the homepage, the Make! should have the on state activated.
• Off states for nav text should be: #55575c
• Hover states for nav text should be the same cyan blue as the dashboard and sign out links
• The mag glass looks like a different icon than in the psd... how is this being rendered? It should also be the same grey as the off states for the nav text
• There should be a dropshadow underneath the header bkg, not a rule.
• Bkg color for the page should be #e3eaee

Comment 2

[Cassie McDaniel [:cassiemc]]

Now looking at: http://glacial-atoll-9380.herokuapp.com/

• Text is still too big. There are some sizing differences between photoshop and browsers, so let's just try to get it to match visually. Right now it looks like the sign in line should be 2-4 sizes smaller, and the nav text should be 4-6 sizes smaller. If you want, we can match sit together and match it in person.
• Glad to see the gradient below the header. It is too tall though. Should be a shorter shadow. It also looks a little too grey, can you use #ced4d8? Same though, we should maybe try to match it together.
• Can tabzilla have a more contrasty shadow? Right now, the drop on that is very faint, but I don't know if that can be changed.
• Will need to shrink the mag glass as well. It should be no more than 18px tall.

Getting there! How's the rest of the page styling coming along?

Comment 3

[Dale Karp (:daleee)]

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

Looking for:
- Code feedback from Ross & Jen
- Design feedback from Cassie

Comment 4

[David Humphrey (:humph)]

Drive-by review...Dale, you have some really odd indentation issues throughout this patch, tabs vs. spaces?  We use 2-space indents.

Comment 5

[David Humphrey (:humph)]

Also, Travis doesn't like this:

>> .border-box is undefined in headerfooter.less
>> 10. margin-bottom: 16px;
>> 11. .border-box;
>> 12. .box-shadow(0, 1px, 10px, #a9a9a9);

Comment 6

[Dale Karp (:daleee)]

Fixed that 'undefined' thing Travis + Grunt were complaining about. Although LESS states:

> Importing and imported files share all mixins, namespaces, variables and other structures.
(http://lesscss.org/#-importing)

So technically it should be legal, as the mixins are declared in style.less, which imports headerfooter.less.

Sorry about the spacing, I've been told to use 4 space tabs. I shall fix!

Comment 7

[Dale Karp (:daleee)]

Indenting should be fixed.

Comment 8

[[github robot]]

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

https://github.com/mozilla/webmaker.org/commit/33e1c96189ee8ed5f2d501158da65a82a42ee2cb
[Bug 869204] Webmaker.org Header & Footer

Comment 9

[Cassie McDaniel [:cassiemc]]

Some more design QA:

Header
* Sign up button still has jaggies - bug 870967
* Sign in, sign out and dashboard text links will need hover states. Use same colour as on the make detail page – Currently is #056c97
* Sign up button needs a hover state. This will be mocked up in homepage redesign. bug 868591
* Hover on "Make" in the nav needs to show the dropdown. Design is in bug 869596
* sign-in & sign-up need to be hooked up to Persona etc. At which point we'll need to see the front end for the logged in view.

Footer
* Footer links need hover states. This entire footer (in the grey area) is being redesigned in bug 873532. CTA content is being created in bug 873563.
* Height of the blue CTA bar needs to increase to accommodate 3 lines of text. Height should now be 125px.
* Can entire cta box be clickable? Want to make this action easy and fast.
* line height on the description text should be slightly larger. 20px looks good.
* Insert 2 more px of space between the circle images and the text to the right of them. This may mean you need to adjust width of "make-footer-item".
* CTAs should be spaced out evenly between the four column grid and take up the whole width of that bar (based on 1020 width). So, if "make-footer-item" had a margin-right: 10px; width 245px; that looks good to me.
* CTAs carousel should be implemented – bug 873602