From d8fcd5ef3dd344c603ae0ac5a7b35c8d0c0ceae8 Mon Sep 17 00:00:00 2001 From: Eric Jimenez Date: Thu, 28 Apr 2016 15:31:38 -0400 Subject: [PATCH] feat(nav reorg): reorganize footer and top nav --- public/_includes/_footer.jade | 27 ++++++++++++---------- public/_includes/_hero-home.jade | 3 +-- public/_includes/_main-nav.jade | 8 +++---- public/resources/css/_theme.scss | 4 ++++ public/resources/css/module/_footer.scss | 5 +++- public/resources/css/module/_main-nav.scss | 11 ++++++--- 6 files changed, 35 insertions(+), 23 deletions(-) diff --git a/public/_includes/_footer.jade b/public/_includes/_footer.jade index 2fd238dc06..59c2430275 100644 --- a/public/_includes/_footer.jade +++ b/public/_includes/_footer.jade @@ -8,16 +8,18 @@ else - var styleguide = "/docs/ts/latest/styleguide.html" .main-footer - nav.background-silver.grid-fluid + nav.background-blue-grey-900.grid-fluid .c3.main-footer-branding .logo-inverse-large .c2 - h3.text-headline LIBRARIES + h3.text-headline RESOURCES ul.text-body - li Angular 2.0 + li Press Kit + // TODO: (ericjim) make a libraries page to showcase all angular 2 libraries + //li Libraries li Angular 1 for JS li Angular Material li AngularFire @@ -26,25 +28,26 @@ else h3.text-headline LEARN ul.text-body - li 5 Min Quickstart - li Step by Step Guide - li Full API - li Resources - li Design Docs & Notes + li Docs + li Basics + li Videos and Posts + //li Design Docs & Notes .c2 h3.text-headline HELP ul.text-body - li Google Group - li Chat Room - li Report an Issue + li Contribute + li Support Page + li File a Ticket + li Product Feedback .c3 h3.text-headline COMMUNITY ul.text-body - li Blog + li Events & Meetups + li Google Group li Google+ li Twitter li GitHub diff --git a/public/_includes/_hero-home.jade b/public/_includes/_hero-home.jade index 314f1ec67f..0eaa1a6cce 100644 --- a/public/_includes/_hero-home.jade +++ b/public/_includes/_hero-home.jade @@ -3,8 +3,7 @@ header(class="background-sky") h1.text-headline.hero-logo #{title}
#{subtitle} .hero-cta - a(href="/docs/ts/latest/quickstart.html" class="md-raised button button-large button-plain" - md-button) Get Started + a(href="/docs/ts/latest/quickstart.html" class="md-raised button button-large button-plain" md-button) Get Started .banner.is-centered .banner-ng-annoucement diff --git a/public/_includes/_main-nav.jade b/public/_includes/_main-nav.jade index c349d46d13..bb727b5010 100644 --- a/public/_includes/_main-nav.jade +++ b/public/_includes/_main-nav.jade @@ -10,9 +10,7 @@ md-toolbar(class="main-nav background-regal l-pinned-top l-layer-5",scroll-y-off ul(ng-class="appCtrl.showMainNav ? 'is-visible' : ''") li.l-left Features li.l-left Docs - li.l-left About - li.l-left Contribute - li.l-left Support - li.l-left News li.l-left Events - li.l-right.feedback-button feedback + li.l-left Blog + li.l-left About + li.l-right Get Started diff --git a/public/resources/css/_theme.scss b/public/resources/css/_theme.scss index 0783d735b4..3e40af70a0 100644 --- a/public/resources/css/_theme.scss +++ b/public/resources/css/_theme.scss @@ -30,6 +30,10 @@ color: $snow; } +.background-blue-grey-900 { + background: #263238; + color: $snow; +} /* * Background Images diff --git a/public/resources/css/module/_footer.scss b/public/resources/css/module/_footer.scss index 5382613d8e..33e6824386 100644 --- a/public/resources/css/module/_footer.scss +++ b/public/resources/css/module/_footer.scss @@ -9,6 +9,10 @@ .main-footer { nav { + h3 { + font-size: 21px; + } + padding: $unit * 6; @media handheld and (max-width: $phone-breakpoint), @@ -63,7 +67,6 @@ display: block; text-decoration: none; padding: 0px ($unit * 2); - background: $steel; margin-bottom: $unit; border-radius: 3px; line-height: $unit * 5; diff --git a/public/resources/css/module/_main-nav.scss b/public/resources/css/module/_main-nav.scss index df25e277a9..0b4f135283 100644 --- a/public/resources/css/module/_main-nav.scss +++ b/public/resources/css/module/_main-nav.scss @@ -56,7 +56,8 @@ .main-nav-button { @media handheld and (max-width: $phone-breakpoint), screen and (max-device-width: $phone-breakpoint), - screen and (max-width: $tablet-breakpoint) { + screen and (max-width: $tablet-breakpoint), + screen and (max-width: 960px) { display: block; float: none; line-height: $unit * 6; @@ -75,9 +76,11 @@ } } + // Make main nav icons disappear in favor of site map menu @media handheld and (max-width: $phone-breakpoint), screen and (max-device-width: $phone-breakpoint), - screen and (max-width: $tablet-breakpoint) { + screen and (max-width: $tablet-breakpoint), + screen and (max-width: 960px) { box-shadow: 0px 2px 5px rgba(0, 0, 0, .3); float: none; position: absolute; @@ -146,9 +149,11 @@ opacity: .56; } + // Show sitemap menu @media handheld and (max-width: $phone-breakpoint), screen and (max-device-width: $phone-breakpoint), - screen and (max-width: $tablet-breakpoint) { + screen and (max-width: $tablet-breakpoint), + screen and (max-width: 960px) { display: inline-block; } }