Studio - Help Links Addition and Small UI Revisions to Main Navigation

[talbs]

This PR covers the following things:

• adds in an additional group of help-related links to Studio's main navigation
• replaces working Studio logo with new working logo
• revises navigation/drop down navigation styles supported in the main navigation
• simplifies some naming conventions and markup around Studio's main navigation

[talbs]

@frrrances, @marcotuts, and @markchang - mind reviewing/testing this before merging?

[marcotuts]

👍

looks great! my only comment/thought was that some of the dropdowns felt wider than they needed to be, though I understand they were likely synced to the ones near them to have consistent sizing. More specifically, the Content and Tools dropdowns are sized to match the Settings width (I think) and the Profile dropdown is also wider.

[frrrances]

I just came across a few small things that need tweaking:

1. The last elements in the nav-account and nav-course are getting bumped down in small windows. You know the grid better than I do, but it looks like you can bump info-course width down a hair, and nav-course and -account widths up a hair (the are nav-course is 31.9% and nav-account is 23.4% and info-course is 23.4% but if they are 32.9% and 24.4% and 22.4% then everything fits on smallest window.) I leave it to you to tweak though…

1. It looks like the nav-account is escaping the box a bit:

[talbs]

Thanks, @frrrances and @marcotuts. I've made a few tweaks:

1. I've removed the flex-grid mixin references and just used % widths for the nav's components - not great that we had to bail on our grid framework, but its isolated enough for now.
2. I removed the relative positioning hack I was using to try to completely right justify the account nav dropdown. Not worth the bugginess for alignment IMHO

@marcotuts all of the dropdown menus have a fixed width, I just customized it for the help dropdown since the titles were forced to two lines. Rather than customize for each one, I'm fine with leaving them mostly consistent if you are.

[talbs]

Also, some other things to note:

1. I didn't want to waste time putting the new logo on the welcome screen (lots to sync up). Does the current text-based treatment work for you guys (see - http://cl.ly/image/0t3t160d1101)?
2. The color of the new logo more matches the official edX blue. Studio has historically used a more true/less electric blue everywhere. Here's what it looks like app-wise if I replace that historic blue with the true edX blue - http://cl.ly/image/3j1Q360X200t and http://cl.ly/image/3d230A0J1M3G. Should I sync up the colors or leave the two blues?
3. I'm a bit worried about the length of user/account names - a long one can cause a second line with the new nav now. I've tried to bullet proof it but it requires a fixed width on that dropdown nav item which I don't want to do. Any concerns or ideas?

@markchang, feel free to chime in on these, especially #2 since it causes an app-wide change.

[marcotuts]

I think it makes sense to move to a single edX blue, am ok with the width staying the same on the menus, and all other changes made sense to me. 👍

[talbs]

Thanks for the comments here and in-person, @marcotuts and @frrrances.

@frrrances, I think I resolved all of the layout issues you brought up (wrapped the two sides of the nav in wrappers and floated them). Would you mind taking one more spin through and checking things out?

@markchang mind reviewing this and giving approval before I merge?

[frrrances]

nice work, brian. just one last thing... I think the user nav is stacking on small screen for me because my name is 12 characters long. maybe we should put a max-width on that as well? and/or bump down the spacing between nav items to accomodate more characters.

[talbs]

@frrrances, thanks for the continued proofing - I think I've got the long username case covered now (truncating with ellipses in browsers that support that). Sadly, the only other thing I can do is bump down the font size (currently at 16rem vs. 14rem, what our current Studio nav is displayed at).

Let me know what you think and thanks again.

[markchang]

@talbs

1. what do you think about removing the "Studio Help" link inside the user dropdown? redundant?
   
2. what about updating the click region to include the space in between the two class description rows?
   
3. the in-page header for "Course Content" is inconsistent with the menu now -- should it be just "Content"?
   
4. are all these blues the same blue?
   

[talbs]

@markchang thanks for all of the comments. I've addressed all of them:

1. Help has been removed from a user's account-based nav dropdown.
2. The entirety of the course name is now clickable (the wrapping anchor tag is displayed as a block-level element).
3. "Course" has been removed from all of the Content-related page's subheaders.
4. the blue values have been double-checked and synced up across all of the UI.

Let me know if there's anything else I should address before rolling this in.

[markchang]

Thumbsup.