From 10eda605d804409c422ff24e2bdcf1782814e165 Mon Sep 17 00:00:00 2001 From: Hannu Pelkonen Date: Tue, 7 Apr 2015 08:53:17 +0300 Subject: [PATCH] Implement horizontal navigation bar --- gulpfile.js | 1 - lib/app/js/controllers/main.js | 12 +- lib/app/sass/_styleguide_variables.scss | 1 + lib/app/sass/app.scss | 254 ++++++++------------- lib/app/views/main.html | 87 ++++--- test/angular/unit/controllers/main.test.js | 34 ++- 6 files changed, 181 insertions(+), 208 deletions(-) diff --git a/gulpfile.js b/gulpfile.js index 9f4f35db..173af6cb 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -129,7 +129,6 @@ gulp.task('dev', ['dev:static', 'dev:applystyles', 'dev:generate'], function() { }); gulp.watch('README.md', ['dev:generate']); gulp.watch('lib/styleguide.js', ['dev:generate']); - gulp.watch('lib/app/**', ['dev:generate']); }); gulp.task('build', ['sass', 'js:app', 'js:vendor', 'html', 'assets']); diff --git a/lib/app/js/controllers/main.js b/lib/app/js/controllers/main.js index dde937f0..c408c669 100644 --- a/lib/app/js/controllers/main.js +++ b/lib/app/js/controllers/main.js @@ -20,10 +20,18 @@ angular.module('sgApp') $scope.socketService = Socket; // Check if section is a main section - $scope.filterMainSections = function(section) { - return /^[0-9]+$/.test(section.reference); + $scope.filterMainSections = function() { + return function(section) { + return !!section.reference && /^[A-Za-z0-9_-]+$/.test(section.reference); + } }; + $scope.filterSubsections = function(parentSection) { + return function(section) { + return new RegExp('^' + parentSection.reference + '\.').test(section.reference); + } + } + // Toggle all markup boxes visible/hidden state $scope.toggleMarkup = function() { $scope.markupSection.isVisible = !$scope.markupSection.isVisible; diff --git a/lib/app/sass/_styleguide_variables.scss b/lib/app/sass/_styleguide_variables.scss index f02a11b7..8c5477e6 100644 --- a/lib/app/sass/_styleguide_variables.scss +++ b/lib/app/sass/_styleguide_variables.scss @@ -19,3 +19,4 @@ $content-margin: 30px; $designer-tool-width: 30%; $designer-tool-width-mobile: 90%; $header-height: 90px; +$menu-height: 40px; \ No newline at end of file diff --git a/lib/app/sass/app.scss b/lib/app/sass/app.scss index 7df21c06..6bf44418 100644 --- a/lib/app/sass/app.scss +++ b/lib/app/sass/app.scss @@ -12,7 +12,7 @@ $fa-font-path: '../assets/fonts'; $footer-padding: 2em; $footer-logo-height: 42px; -$wrapper-vertical-padding: 2em; +$wrapper-vertical-padding: 60px; html, body.sg { @@ -291,8 +291,8 @@ input.sg { // .sg.wrapper acts as a container for .sg.nav and .sg.body // // markup: +//
Header
//
-//
Navigation
//
Body
//
// @@ -319,11 +319,9 @@ $mobile: new-breakpoint(max-width 768px); } .sg.body { - @include span-columns(9); + @include span-columns(12); @include media($mobile) { padding: 0.25em; - - @include span-columns(12); } // Remove top margin from first header in markdown @@ -370,8 +368,8 @@ $mobile: new-breakpoint(max-width 768px); .sg.header { width: 100%; - height: $header-height; padding-left: $min-content-margin; + padding-right: $min-content-margin; color: rgba(#fff, 1); background: rgba($primary-color, 1); @@ -380,13 +378,21 @@ $mobile: new-breakpoint(max-width 768px); } .inner { + padding-top: 20px; height: 100%; - + padding-right: $content-margin - $min-content-margin; @include outer-container; + @include media($mobile) { + padding-right: 0; + } } .title { + padding-bottom: 20px; + white-space: nowrap; + padding-left: $min-content-margin; height: 100%; + line-height: 1.8em; @include span-columns(6); @@ -402,10 +408,7 @@ $mobile: new-breakpoint(max-width 768px); font-style: normal; font-size: 1.8em; font-weight: 100; - line-height: $header-height; - margin: 0; - color: rgba(#fff, 1); @include span-columns(5 of 6); @@ -423,7 +426,18 @@ $mobile: new-breakpoint(max-width 768px); &.designerToolVisible .inner { margin-right: $designer-tool-width; - padding-right: 30px; + } +} + +.sg.search-field { + box-sizing : border-box; + float: right; + margin-top: 0; + @include media($mobile) { + margin-left: 0; + margin-right: 0; + float: none; + width: 100%; } } @@ -459,7 +473,6 @@ $mobile: new-breakpoint(max-width 768px); font-size: 18px; color: #fff; - text-shadow: 0 1px 1px rgba(0,0,0, .3); } .sg.footer .logo { @@ -468,8 +481,6 @@ $mobile: new-breakpoint(max-width 768px); margin-top: -5px; vertical-align: middle; - - -webkit-filter: drop-shadow(0 1px 1px rgba(0,0,0, .3)); } // Side nav @@ -477,22 +488,17 @@ $mobile: new-breakpoint(max-width 768px); // Side nav can be used in views where sub-navigation is needed // // markup: -// +// // // Styleguide 3.3 @@ -504,155 +510,93 @@ $mobile: new-breakpoint(max-width 768px); // // markup: //
  • -// Item +// 1.0 First section //
    • // // sg-wrapper: -// +// // // Styleguide 3.3.1 -.sg.side-nav-toggle { - font-family: $secondary-font; - font-style: normal; - - position: absolute; - top: 2.0em; - left: -1.0em; - - cursor: pointer; - - color: rgba($primary-color, .2); - border-radius: 5px; - - @include user-select(none); - @include transition(color .3s ease-in); - - &:before { - position: absolute; - top: -1.5em; - left: -6em; - - width: 10em; - - content: 'Toggle navigation'; - - opacity: 0; - color: rgba($primary-color, .2); - - @include transition(opacity .3s ease-in); - } - - &:hover { - color: rgba($primary-color, .7); - &:before { - opacity: 1; - } - } +.sg.top-nav { + clear: both; + z-index: 8000; } -.sg.side-nav { - height: 100%; - padding-left: $min-content-margin; - vertical-align: top; - - ul { - list-style: none; - margin: 2em 0 0 0; - padding: 0; - background: rgba(#fff, 1); - } +.sg.top-nav-menu { + padding: 0; + margin: 0; + list-style-type: none; + @include default-font; li { - margin-bottom: .3em; + background-color: $primary-color; + float:left; } - li a { - font-family: $secondary-font; - line-height: 2em; - - position: relative; - + padding: 0 20px; display: block; + text-decoration: none; + } + & > li > a { + color: lighten($default-action-color, 10); - width: 100%; - height: 100%; - padding: .5em; - - color: rgba(#888, 1); - - - &:before { - position: absolute; - top: 0; - left: -1em; - - display: block; - - width: 5px; - height: 100%; - - content: ''; - - background: lighten($primary-color, 75%); - - @include transition(all .4s ease-out); + &:hover, &.active { + color: white; + background: $default-action-color } - - &:after { - position: absolute; - bottom: -.25em; - left: 0; - - display: block; - - width: 100%; - height: 1px; - - content: ''; - - background: rgba($secondary-color, 1); + line-height: $menu-height; + .ref { + color: $secondary-color; } + } - &:hover, - &.active { - &:before { - background: $primary-color; - } + /* Submenu */ + ul { + z-index: 8000; + position: absolute; + left: -9999px; + top: -9999px; + list-style-type: none; + } + li:hover { + position:relative; + background: $secondary-color; + ul { + left: 0px; + top: $menu-height; + padding: 0px; + } + .ref { + color: darken($default-action-color, 10); } } - .option a { + li:hover ul li a, li ul li a.active { + background: $secondary-color; + padding-top: 5px; + padding-bottom: 5px; display: block; - - padding: .8em; - } - - .search-section { - opacity: 1; - - @include transform( translate3d(0, 0, 0) ); - @include transition(all .2s ease); - - label { - font-family: $secondary-font; - line-height: 2.5em; - - color: rgba(#000, .5); + width: 260px; + border-top: 1px solid white; + .ref { + color: darken($default-action-color, 10); } + } - input { - width: 100%; - margin: 0; + a:hover, a.active, li:hover ul li a:hover, li ul li a.active { + color: white; + background: $default-action-color; + .ref { + color: white; } - &.ng-hide { - opacity: 0; + } - @include transform( translate3d(-5em, 0, 0)); + @include media($mobile) { + li { + float: none; } } } @@ -902,7 +846,7 @@ $mobile: new-breakpoint(max-width 768px); .sg.label { @include default-font; position: absolute; - z-index: 8000; + z-index: 7000; top: 0; right: 0; diff --git a/lib/app/views/main.html b/lib/app/views/main.html index fcf89c5e..4406cdaa 100644 --- a/lib/app/views/main.html +++ b/lib/app/views/main.html @@ -10,55 +10,46 @@

    Error: {{status.error.name}}

    {{status.error.message}}
    + +
    -
    - {{ isNavCollapsed ? ">>" : "<<" }} -
    - -
    @@ -67,6 +58,10 @@

    Error: {{status.error.name}}