From 451f14934f16a80bc1af7ab94919002b7cb9a13a Mon Sep 17 00:00:00 2001 From: Junaid Rasheed Date: Fri, 1 Apr 2016 11:45:54 +0300 Subject: [PATCH 01/10] side nav added --- README.md | 2 + gulpfile.babel.js | 1 + lib/app/css/styleguide-app.css | 272 +++++++++++++++++++++++++---- lib/app/index.html | 2 +- lib/app/js/controllers/main.js | 24 ++- lib/app/js/controllers/sections.js | 3 + lib/app/views/main.html | 89 ++++++++-- lib/modules/cli/argv.js | 1 + lib/modules/cli/styleguide-cli.js | 1 + lib/modules/common.js | 1 + lib/styleguide.js | 3 +- 11 files changed, 348 insertions(+), 51 deletions(-) diff --git a/README.md b/README.md index f15e437c..7c4266b4 100644 --- a/README.md +++ b/README.md @@ -10,6 +10,7 @@ using KSS notation. It can be used as a command line utility, gulp task or Grunt + - [Usage](#usage) - [Prerequisites](#prerequisites) - [With gulp](#with-gulp) @@ -29,6 +30,7 @@ using KSS notation. It can be used as a command line utility, gulp task or Grunt - [Providing additional CSS](#providing-additional-css) - [Providing additional JavaScript](#providing-additional-javascript) - [onRendered event](#onrendered-event) + - [Adding new section in between](#adding-new-section-in-between) - [Demo](#demo) diff --git a/gulpfile.babel.js b/gulpfile.babel.js index 392ddb7e..1176a580 100644 --- a/gulpfile.babel.js +++ b/gulpfile.babel.js @@ -80,6 +80,7 @@ gulp.task('dev:generate', () => { return gulp.src(['lib/app/css/*.css']) .pipe(styleguide.generate({ title: 'SC5 Styleguide', + sideNav: true, server: true, rootPath: outputPath, overviewPath: 'README.md', diff --git a/lib/app/css/styleguide-app.css b/lib/app/css/styleguide-app.css index 7a8810bb..c59561db 100644 --- a/lib/app/css/styleguide-app.css +++ b/lib/app/css/styleguide-app.css @@ -23,9 +23,10 @@ html, body.sg { width: 100%; height: 100%; + overflow: auto; } -.sg.sg-view-index { +.sg.view-index { height: 100%; } @@ -344,40 +345,208 @@ markup: Styleguide 3.1.1 */ - +.sg.full-height { + min-height: 100vh; +} .sg.sg-wrapper { position: relative; - padding: var(--wrapper-vertical-padding) var(--content-margin) var(--wrapper-vertical-padding) var(--min-content-margin); + max-width: 68em; + margin: 0 auto; padding: $wrapper-vertical-padding $content-margin $wrapper-vertical-padding $min-content-margin; - max-width: $content-max-width; - margin-left: auto; - margin-right: auto; - + @media (--mobile) { + padding-top: 0; + } &.designerToolVisible { margin-right: var(--designer-tool-width); margin-right: $designer-tool-width; } -} -.sg.full-height { - min-height: 100vh; -} + .sg.sg-body { + display: inline-block; + width: 70%; + min-height: 680px; + height: 100%; + @media (--mobile) { + padding: 0.25em; + width: 100%; + } + // Remove top margin from first header in markdown + .sg.sg-heading:nth-of-type(1) { + margin-top: 0; + padding-top: 0; + } + } -.sg.sg-body { - width: 100%; - height: 100%; - @media (--mobile) { - padding: 0.25em; + .sg.full-width { + width: 100%; } - // Remove top margin from first header in markdown - .sg.sg-heading:nth-of-type(1) { - margin-top: 0; - padding-top: 0; + .sg.sg-side-nav { + float: left; + display: inline-block; + width: 30%; + @media (--mobile) { + width: 100%; + } + + li { + list-style: none; + } + + & .sg-nav-section { + list-style: none; + margin: 2em 0 0 0; + padding: 0; + background: rgba(#fff, 1); + & .sg-nav-subsection:before { + position: absolute; + top: 0; + left: -1em; + + display: block; + + width: 5px; + height: 100%; + + content: ''; + + background: lighten($primary-color, 75%); + + transition: all .4s ease-out; + } + } + + & .sg-nav-subsection .plus { + &:before { + position: absolute; + margin-top: 0; + margin-left: -1em; + display: block; + + width: 5px; + height: 100%; + + content: '+'; + + background: lighten($primary-color, 75%); + + transition: all .4s ease-out; + } + } + + & .sg-nav-subsection .minus { + &:before { + position: absolute; + margin-top: 0; + margin-left: -1em; + display: block; + + width: 5px; + height: 100%; + + content: '-'; + + background: lighten($primary-color, 75%); + + transition: all .4s ease-out; + } + } + + .sg-nav-subsubsection { + padding-left: 10px; + } + + & .sg-nav-section li { + margin-bottom: .3em; + } + + & .sg-nav-section > li > a { + font-family: $secondary-font; + line-height: 2em; + + position: relative; + + display: block; + + width: 100%; + height: 100%; + padding: .5em; + + &:before { + position: absolute; + top: 0; + left: -1em; + + display: block; + + width: 5px; + height: 100%; + + content: ''; + + background: lighten($primary-color, 75%); + + transition: all .4s ease-out; + } + + &:after { + position: absolute; + bottom: -.25em; + left: 0; + + display: block; + + width: 100%; + height: 1px; + + content: ''; + + background: rgba($secondary-color, 1); + } + + &:hover, + &.active { + &:before { + background: $primary-color; + } + } + } } -} + .sg.side-nav-toggle { + font-family: var(--secondary-font); + font-style: normal; + position: absolute; + top: 2.0em; + cursor: pointer; + color: rgba(var(--primary-color), .2); + border-radius: 5px; + user-select: none; + transition: color .3s ease-in; + display: block; + @media (--mobile) { + display: none; + } + + &:before { + position: absolute; + top: -1.5em; + width: 10em; + content: 'Toggle navigation'; + opacity: 0; + color: rgba($primary-color, .2); + transition: opacity .3s ease-in; + } + + &:hover { + color: rgba($primary-color, .7); + &:before { + opacity: 1; + } + } + } +} /* Header and footer @@ -408,8 +577,6 @@ Styleguide 3.2.1 .sg.sg-header { - height: var(--header-height); - height: $header-height; width: 100%; padding: 0; color: #fff; @@ -484,19 +651,56 @@ Styleguide 3.2.1 @media (--mobile) { height: auto; } -} -.sg.sg-search-field { - margin-top: var(--header-height)/2 - 18px; - margin-top: $header-height/2 - 18px; - box-sizing : border-box; - float: right; - @media (--mobile) { - margin-left: 0; - margin-right: 0; - float: none; - width: 100%; + .sg.sg-search-container { + + @media (--mobile) { + clear: both; + } + .sg-hamburger { + display: none; + float: left; + cursor: pointer; + + @media (--mobile) { + display: inline-block; + padding-bottom: 12px; + } + + &-item { + width: 40px; + height: 5px; + background: white; + margin-bottom: 9px; + } + } + + .sg.sg-search-field { + margin-top: var(--header-height)/2 - 18px; + margin-top: $header-height/2 - 18px; + box-sizing : border-box; + float: right; + @media (--mobile) { + margin-left: 0; + margin-right: 0; + float: none; + width: 100%; + } + } } + .sg.side-nav-search .sg.sg-search-field { + margin-top: var(--header-height)/2 - 18px; + margin-top: $header-height/2 - 18px; + box-sizing : border-box; + float: right; + @media (--mobile) { + margin-left: 24px; + margin-right: 0; + float: left; + width: auto; + } + } + } /* diff --git a/lib/app/index.html b/lib/app/index.html index 888b354d..9eec5215 100644 --- a/lib/app/index.html +++ b/lib/app/index.html @@ -30,9 +30,9 @@ if (typeof head.createShadowRoot !== 'function' || _styleguideConfig.disableEncapsulation) { userStyleFiles.forEach(addCssLink); } - addCssLink('{{{appRoot}}}/styleguide_at_rules.css'); addCssLink('{{{appRoot}}}/styleguide-app.css', {noReload: true}); + window.sideNav = {{{sideNav}}}; }()); {{#socketIo}} diff --git a/lib/app/js/controllers/main.js b/lib/app/js/controllers/main.js index 85784fd1..f0c9f493 100644 --- a/lib/app/js/controllers/main.js +++ b/lib/app/js/controllers/main.js @@ -15,12 +15,13 @@ angular.module('sgApp') $scope.config = Styleguide.config; $scope.status = Styleguide.status; $scope.variables = Variables.variables; - $scope.showMenu = false; + $scope.toggleMenu = false; + + $scope.toggleBool = function(toggleMenu) { + $scope.toggleMenu = !toggleMenu; + return $scope.toggleMenu; + }; - $scope.toggleMenu = function(showMenu) { - $scope.showMenu = !showMenu; - return $scope.showMenu; - } // Bind variable to scope to wait for data to be resolved $scope.socketService = Socket; diff --git a/lib/app/views/main.html b/lib/app/views/main.html index bf2a9a9d..715f6a30 100644 --- a/lib/app/views/main.html +++ b/lib/app/views/main.html @@ -11,7 +11,7 @@

Error: {{status.error.name}}

{{status.error.message}}
-
+
@@ -58,16 +58,16 @@

Error: {{status.error.name}}

-
+
-
-
- {{ showMenu ? ">>" : "<<" }} +
+
+ {{ toggleMenu ? ">>" : "<<" }}
-
From 1268f4c82db43b2cc7fe0d36238916ebcc0153c9 Mon Sep 17 00:00:00 2001 From: Junaid Rasheed Date: Tue, 12 Apr 2016 23:56:33 +0300 Subject: [PATCH 08/10] test coverage added --- lib/app/js/controllers/main.js | 2 +- lib/app/views/main.html | 2 +- test/angular/unit/controllers/main.test.js | 11 +++++++++++ 3 files changed, 13 insertions(+), 2 deletions(-) diff --git a/lib/app/js/controllers/main.js b/lib/app/js/controllers/main.js index f0c9f493..54404c28 100644 --- a/lib/app/js/controllers/main.js +++ b/lib/app/js/controllers/main.js @@ -38,7 +38,7 @@ angular.module('sgApp') }; }; - $scope.hasSubSubsections = function(parentSection) { + $scope.hasSubsections = function(parentSection) { var result = false; angular.forEach($scope.sections.data, function(section) { if(parentSection.reference === section.parentReference) { diff --git a/lib/app/views/main.html b/lib/app/views/main.html index 715f6a30..514f4350 100644 --- a/lib/app/views/main.html +++ b/lib/app/views/main.html @@ -90,7 +90,7 @@

Error: {{status.error.name}}

ng-class="currentSection === subsection.reference ? 'active' : ''" ng-click="clearSearch(); showSub = !showSub;" ui-sref="app.index.section({section: subsection.reference})"> - {{ subsection.reference }} + {{ subsection.reference }}
  • diff --git a/test/angular/unit/controllers/main.test.js b/test/angular/unit/controllers/main.test.js index 4d7e91a1..69df9804 100644 --- a/test/angular/unit/controllers/main.test.js +++ b/test/angular/unit/controllers/main.test.js @@ -77,6 +77,13 @@ describe('Controller: MainCtrl', function() { expect(scope.markupSection.isVisible).to.eql(true); }); + describe('toggle navigation', function() { + it('should toggle navigation by inversing bool', function() { + scope.showMenu = true; + expect(scope.toggleBool(scope.showMenu)).to.eql(false); + }); + }); + it('should change markup visibility when toggling state', function() { scope.toggleMarkup(); expect(scope.markupSection.isVisible).to.eql(false); @@ -108,6 +115,10 @@ describe('Controller: MainCtrl', function() { expect(scope.filterMainSections()({reference: '1.1.2'})).to.eql(false); }); + it('should return true if section has sub section', function() { + expect(scope.hasSubsections({reference: '1'})).to.eql(true); + }); + it('should return false for undefined reference', function() { expect(scope.filterMainSections()({})).to.eql(false); }); From 2194fb05076d41c7b89213459311aafb1882b4fa Mon Sep 17 00:00:00 2001 From: Junaid Rasheed Date: Wed, 13 Apr 2016 10:48:09 +0300 Subject: [PATCH 09/10] side nav option documented --- README.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/README.md b/README.md index 7c4266b4..4b924d7a 100644 --- a/README.md +++ b/README.md @@ -204,6 +204,11 @@ This string is used as a page title and in the page header These HTML elements are injected inside the style guide head-tag. + +**sideNav** (boolean, optional, default: false) + +Enables side navigation. When this option parameter is enabled, style guide will switch to side navbar. + **beforeBody** (array or string, optional) From 5c034d46150a6d094b19cf7967334c21453eed31 Mon Sep 17 00:00:00 2001 From: Junaid Rasheed Date: Tue, 19 Apr 2016 19:38:35 +0300 Subject: [PATCH 10/10] refactoring code --- gulpfile.babel.js | 2 +- lib/app/css/styleguide-app.css | 6 +++--- lib/app/index.html | 2 +- lib/app/views/main.html | 4 ++-- 4 files changed, 7 insertions(+), 7 deletions(-) diff --git a/gulpfile.babel.js b/gulpfile.babel.js index 1176a580..9c258fd1 100644 --- a/gulpfile.babel.js +++ b/gulpfile.babel.js @@ -80,7 +80,7 @@ gulp.task('dev:generate', () => { return gulp.src(['lib/app/css/*.css']) .pipe(styleguide.generate({ title: 'SC5 Styleguide', - sideNav: true, + sideNav: false, server: true, rootPath: outputPath, overviewPath: 'README.md', diff --git a/lib/app/css/styleguide-app.css b/lib/app/css/styleguide-app.css index 2759cfbb..b3a797a2 100644 --- a/lib/app/css/styleguide-app.css +++ b/lib/app/css/styleguide-app.css @@ -26,7 +26,7 @@ body.sg { overflow: auto; } -.sg.sg-view-index { +.sg.view-index { height: 100%; } @@ -395,7 +395,7 @@ Styleguide 3.1.1 z-index: 99999; background: #8b8b8b; overflow: scroll; - transition: opacity 400ms cubic-bezier(0.000, 0.995, 0.990, 1.000); + transition: opacity .4s cubic-bezier(0.000, 0.995, 0.990, 1.000); } .sg.option { @@ -484,7 +484,7 @@ Styleguide 3.1.1 & .sg-nav-section li a { @media (--mobile) { - color: white; + color: $header-text-color; margin-left: 5px; } } diff --git a/lib/app/index.html b/lib/app/index.html index 2c248da2..888b354d 100644 --- a/lib/app/index.html +++ b/lib/app/index.html @@ -53,7 +53,7 @@ {{{beforeBody}}} -
    +
    {{#socketIo}} diff --git a/lib/app/views/main.html b/lib/app/views/main.html index 514f4350..02d97c7b 100644 --- a/lib/app/views/main.html +++ b/lib/app/views/main.html @@ -33,7 +33,7 @@

    Error: {{status.error.name}}

  • Overview @@ -41,7 +41,7 @@

    Error: {{status.error.name}}

  • {{ section.reference }}