From 5575172e8d45a6897166ffdb759b386051bea698 Mon Sep 17 00:00:00 2001 From: Alex Wolfe Date: Wed, 4 Mar 2015 20:27:30 -0800 Subject: [PATCH] mobile nav --- public/_includes/_main-nav.jade | 4 +- public/resources/css/_state.scss | 4 +- public/resources/css/main.scss | 2 +- public/resources/css/module/_dropdown.scss | 3 +- .../module/{_top-nav.scss => _main-nav.scss} | 61 +++++++++++++------ public/resources/js/site.js | 19 ++++-- 6 files changed, 66 insertions(+), 27 deletions(-) rename public/resources/css/module/{_top-nav.scss => _main-nav.scss} (64%) diff --git a/public/_includes/_main-nav.jade b/public/_includes/_main-nav.jade index 0cc5b680c1..8f7fe1e9b3 100644 --- a/public/_includes/_main-nav.jade +++ b/public/_includes/_main-nav.jade @@ -2,7 +2,9 @@ md-toolbar(class="main-nav background-regal l-pinned-top l-layer-5") nav h1 Angular by Google - ul + button(class="main-nav-button main-nav-mobile-trigger l-right" aria-label="View Menu" ng-click="toggleMainMenu($event)" md-button) Site Menu + + ul(ng-class="showMainNav ? 'is-visible' : ''") li.l-left Features li.l-left Docs li.l-left About diff --git a/public/resources/css/_state.scss b/public/resources/css/_state.scss index ad84a0bb2e..92e8899394 100644 --- a/public/resources/css/_state.scss +++ b/public/resources/css/_state.scss @@ -1,6 +1,6 @@ .is-hidden { display: none !important; } -.hide { - display: none; +.is-visible { + display: block !important; } \ No newline at end of file diff --git a/public/resources/css/main.scss b/public/resources/css/main.scss index 581465495c..bfb4e69698 100644 --- a/public/resources/css/main.scss +++ b/public/resources/css/main.scss @@ -16,7 +16,7 @@ * */ -@import 'module/top-nav'; +@import 'module/main-nav'; @import 'module/side-nav'; @import 'module/footer'; @import 'module/dropdown'; diff --git a/public/resources/css/module/_dropdown.scss b/public/resources/css/module/_dropdown.scss index 12594469f0..f60cc9c73e 100644 --- a/public/resources/css/module/_dropdown.scss +++ b/public/resources/css/module/_dropdown.scss @@ -1,6 +1,6 @@ .dropdown { position: relative; - z-index: $layer-5; + z-index: $layer-1; .dropdown-button { background: rgba($snow, .1); @@ -11,6 +11,7 @@ padding: 0px ($unit * 4) 0px ($unit * 2); cursor: pointer; position: relative; + z-index: $layer-1; .icon { position: absolute; diff --git a/public/resources/css/module/_top-nav.scss b/public/resources/css/module/_main-nav.scss similarity index 64% rename from public/resources/css/module/_top-nav.scss rename to public/resources/css/module/_main-nav.scss index f24e37dd7b..12842cdde0 100644 --- a/public/resources/css/module/_top-nav.scss +++ b/public/resources/css/module/_main-nav.scss @@ -30,6 +30,28 @@ margin: 0px 0px 0px 0px; } + .main-nav-button { + @media handheld and (max-width: $phone-breakpoint), + screen and (max-device-width: $phone-breakpoint), + screen and (max-width: $tablet-breakpoint) { + display: block; + float: none; + line-height: $unit * 6; + text-align: left; + font-size: 14px; + padding: 0px ($unit * 5); + + &.has-icon { + padding: 0px ($unit * 5); + position: static; + } + + .icon { + display: none; + } + } + } + @media handheld and (max-width: $phone-breakpoint), screen and (max-device-width: $phone-breakpoint), screen and (max-width: $tablet-breakpoint) { @@ -38,8 +60,8 @@ position: absolute; top: 0px; right: $unit; - z-index: $layer-1; - background: $regal; + z-index: $layer-6; + background: $ocean; display: none; li { @@ -49,6 +71,8 @@ } } + + // NAV BUTTON STYLES .main-nav-button { line-height: 56px; display: inline-block; @@ -59,6 +83,10 @@ font-family: $brand-font; font-weight: 300; font-size: 16px; + border: none; + background: none; + border-radius: 0; + position: relative; &:hover { background: $ocean; @@ -77,25 +105,24 @@ left: ($unit * 2); z-index: $layer-1; } + } + + // DROPDOWN TRIGGER BUTTON + .main-nav-mobile-trigger { + display: none; + padding-right: 30px + ($unit * 2); + + .icon { + left: auto; + right: ($unit * 2); + opacity: .56; + } @media handheld and (max-width: $phone-breakpoint), screen and (max-device-width: $phone-breakpoint), screen and (max-width: $tablet-breakpoint) { - display: block; - float: none; - line-height: $unit * 6; - text-align: left; - font-size: 14px; - padding: 0px ($unit * 4); - - &.has-icon { - padding: 0px ($unit * 4); - position: static; - } - - .icon { - display: none; - } + display: inline-block; + float: right; } } } \ No newline at end of file diff --git a/public/resources/js/site.js b/public/resources/js/site.js index d13fbc4df4..707e73b53f 100644 --- a/public/resources/js/site.js +++ b/public/resources/js/site.js @@ -15,17 +15,26 @@ var angularIO = angular.module('angularIOApp', ['ngMaterial']) }); -angularIO.controller('AppCtrl', ['$scope', '$mdSidenav', '$mdDialog', function($scope, $mdSidenav, $mdDialog){ - $scope.toggleSidenav = function(menuId) { - $mdSidenav(menuId).toggle(); +/* +* Apllication Controller +* +*/ + +angularIO.controller('AppCtrl', ['$scope', '$mdDialog', function($scope, $mdDialog){ + + // TOGGLE MAIN NAV (TOP) ON MOBILE + $scope.toggleMainMenu = function(event) { + $scope.showMainNav = !$scope.showMainNav; }; + + // TOGGLE DOCS VERSION & LANGUAGE $scope.toggleVersionMenu = function(event) { $scope.showMenu = !$scope.showMenu; - - item.toggleClass('is-hidden'); }; + + // SHOW FULL ABOUT US PAGE BIO $scope.showBio = function (event) { var bio = angular.element(event.currentTarget).text(); console.log(bio);