Skip to content

[Website]: Add new site designs 🌈#1274

Merged
rogeruiz merged 173 commits into
stagingfrom
add-new-designs
Jul 12, 2016
Merged

[Website]: Add new site designs 🌈#1274
rogeruiz merged 173 commits into
stagingfrom
add-new-designs

Conversation

@maya

@maya maya commented Jun 17, 2016

Copy link
Copy Markdown
Contributor

Description

Adds new site designs.

See it live: https://standards-staging-new-design.apps.cloud.gov/

Tasks [pt 1]:

  • New dark header designs ( to be verified by @juliaelman )
  • New light footer designs ( to be verified by @juliaelman )
  • Reduce disclaimer text size ( to be verified by @juliaelman )
  • Add page navigation links above footer on mobile ( to be verified by @rogeruiz)
  • Add download buttons above footer on mobile ( to be verified by @rogeruiz )
  • Open menu from the right ( to be verified by @rogeruiz )
  • Add secondary nav ( to be verified by @rogeruiz )
  • Add new pages and content ( to be verified by @juliaelman )
  • Add new subheadings to pages ( to be verified by @juliaelman )
  • Assign new sidenavs to new pages ( to be verified by @juliaelman )
  • Build new mobile navigation ( to be verified by @rogeruiz )
  • Add usa-current class to nested pages and overview pages when it's the current page (sidenav desktop and mobile sidenav) ( to be verified by @juliaelman )
  • Add full layout for Design principles page ( to be verified by @rogeruiz )
  • Add download page ( to be verified by @rogeruiz )
  • Add sticky behavior to secondary nav and ensure it behaves properly ( to be verified by @rogeruiz )

Tasks [pt 2]:

  • Remove sticky nav JS from mobile view — ( to be verified by @juliaelman )
  • Add component maturity labels. Fixes [Website] Component Labeling - Lifecycle Stage #1239. ( to be verified by @juliaelman )
  • Make sure prism.js is working on code samples ( to be verified by @juliaelman )
  • Add design files to download page — @ericadeahl + @rogeruiz (to help automate) ( to be verified by @juliaelman )
  • Add Google Analytics to download buttons - main header button and download page — @bradnunnally ( to be verified by @rogeruiz )

Resolves: #1227, #1228, #1229, #1231, #1232, #1233, #564.

@maya maya changed the title [WIP] [Website]: Add new site designs [WIP] [Website]: Add new site designs 🌈 Jun 17, 2016
@maya maya added [Status] In progress Affects: Documentation Relates to documentation. Should this be in uswds-site? labels Jun 17, 2016
@rogeruiz rogeruiz self-assigned this Jun 21, 2016
@maya maya force-pushed the add-new-designs branch 2 times, most recently from a51ff15 to d87e527 Compare June 21, 2016 23:06

var originalNavigationHeight = $nav.outerHeight(true);
var bannerHeight = $('.usa-site-header').outerHeight(true) - originalNavigationHeight * 0.5;
var bannerHeight = $('.usa-site-header').outerHeight(true) - originalNavigationHeight * 0.5 - 50;

@maya maya Jun 23, 2016

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@rogeruiz I updated the scroll location to pick it up at the right spot (it was 50px short before or activating at the end of the secondary nav instead of the beginning (expected)), but it doesn't scroll back up properly. We need site-navbar to show again after scrolling up.

jessieay added a commit to 18F/micropurchase that referenced this pull request Jun 27, 2016
jessieay added a commit to 18F/micropurchase that referenced this pull request Jun 27, 2016
@maya

maya commented Jun 29, 2016

Copy link
Copy Markdown
Contributor Author

Prism.js does not seem to be working cc: @rogeruiz

See:
screen shot 2016-06-28 at 5 03 20 pm

Should be:
screen shot 2016-06-28 at 5 04 05 pm

update: this is fixed in 3fe7087

@maya

maya commented Jul 8, 2016

Copy link
Copy Markdown
Contributor Author

@juliaelman notes below...

  1. We should probably do another rebase with the latest state of staging. I'll ping you about pairing on that.

OK!

  1. New homepage content: Looks like the text is not displaying to full width on the new homepage, see Screenshot A below. It might be a limitation of our grid combined with the new updates, but wanted to point it out just in case.

It's not supposed to, it's using our max width for lead text for optimal reading.

  1. Top nav: "Download code and design files" and "View on Github" buttons not flush aligned at 1096px+ in Firefox, see Screenshot B

ok will look into it, thanks

  1. Footer: The layout in the design files differs from the implementation, see Screenshots C1 and C2.

C1 = full width page layout Design Principles
C2 = layout with sidenav on the left

@maya

maya commented Jul 11, 2016

Copy link
Copy Markdown
Contributor Author

@juliaelman Firefox bug fixed in 08b102b.

@juliasolorzano

Copy link
Copy Markdown

NOTE: The sticky nav removal for mobile view is not to remove the sticky nav entirely. The fix in this pull request refers to removing the stickyness of the site-nav-secondary on scroll. You can see the solve in this commit: 0543037

@juliasolorzano

Copy link
Copy Markdown

The following UI Components need be changed from Alpha to Beta:

  • Typesetting
  • Lists
  • Text accessibility
  • Labels
  • Tables
  • Alerts
  • Text inputs and area
  • Checkboxes
  • Radio buttons
  • Search bar

@ericadeahl

Copy link
Copy Markdown

@juliaelman I believe the components are all labeled correctly now (there were two different versions of this and we decided to go with the one where most things are in alpha)

@juliasolorzano

Copy link
Copy Markdown

@ericadeahl thanks! The doc I was pointed to for reference had them labeled differently. thanks for clarifying what they should be for this release.

@maya

maya commented Jul 11, 2016

Copy link
Copy Markdown
Contributor Author

@juliaelman if you scroll all the way to the right of the spreadsheet, you'll see the labels we're using - I believe @ericadeahl already planned this with @bradnunnally.

@juliasolorzano

Copy link
Copy Markdown

@maya thank you! Looks like I was given the wrong direction and appreciate the clarification 🎉

@juliasolorzano

Copy link
Copy Markdown

@maya checked all of the tasks assigned to me and everything looks 👍 - nice work!

@rogeruiz

Copy link
Copy Markdown
Contributor

@maya verified all of the tasks assigned to me & everything looks 💯 - great job!

@ericadeahl

Copy link
Copy Markdown

@maya Re: component maturity scale — please change "Labels" from alpha to beta then we're good to go. (@bradnunnally and I had different interpretations on that, sorry for the change!)

@maya

maya commented Jul 11, 2016

Copy link
Copy Markdown
Contributor Author

@ericadeahl done in b8ebf8b.

@rogeruiz

Copy link
Copy Markdown
Contributor

Woo! 💯

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Affects: Documentation Relates to documentation. Should this be in uswds-site?

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants