From 3dd638aabbbae978768ba1e3cf4f9fd29a86028d Mon Sep 17 00:00:00 2001 From: Michael Krotscheck Date: Thu, 17 Apr 2014 14:20:35 -0700 Subject: [PATCH] Moved main navigation into fixed sidebar. The more I used it and tried to design for it, the more the bootstrappy header and footer menus started to annoy me. This commit removes them, and moves primary navigation into a left-locked sidebar. This reclaims some of the bootstrap wasted whitespace, as well as giving us an option for two tiers of submenu: directly below the main menu item, or pulled to the right as a second-tier left menu. - Removed header and footer as no longer necessary. - Moved all links into main_menu and restyled. - Deleted old zombie bootstrap files, not certain where they came from. - Removed old navbar styles. - Added new navbar-fixed-left component, as well as a pilltab and link menu style. - Added margin and container adjustments for responsive sizing. - Updated body padding since we don't have top fixed menus anymore. - Updated global container widths to accomodate for 150px less space. - Removed zombie code in index.html that should never have been there. - Updated Bootstrap Change-Id: Ib84ba77ea296e7ad0c6e8482c7b1c3a31885eb03 --- bower.json | 2 +- src/app/templates/footer.html | 42 -------- src/app/templates/header.html | 114 --------------------- src/app/templates/main_menu.html | 89 +++++++++++++++++ src/index.html | 29 +----- src/theme/base/body.less | 29 ++++-- src/theme/base/bootstrap/navbar.less | 142 +++++++++++++++++++++++++++ src/theme/base/bootstrap_addons.less | 35 ------- src/theme/main.less | 2 + src/theme/storyboard/theme.less | 11 +++ 10 files changed, 270 insertions(+), 225 deletions(-) delete mode 100644 src/app/templates/footer.html delete mode 100644 src/app/templates/header.html create mode 100644 src/app/templates/main_menu.html create mode 100644 src/theme/base/bootstrap/navbar.less diff --git a/bower.json b/bower.json index 9080388d..32f0575c 100644 --- a/bower.json +++ b/bower.json @@ -7,7 +7,7 @@ "angular": "1.2.13", "angular-resource": "1.2.13", "angular-sanitize": "1.2.13", - "bootstrap": "3.1.0", + "bootstrap": "3.1.1", "angular-ui-router": "0.2.8-bowratic-tedium", "angular-bootstrap": "0.10.0", "angular-local-storage": "0.0.1" diff --git a/src/app/templates/footer.html b/src/app/templates/footer.html deleted file mode 100644 index c439bdba..00000000 --- a/src/app/templates/footer.html +++ /dev/null @@ -1,42 +0,0 @@ - -
-
-
- - Powered by Storyboard | - About - -
- -
- - Licensed under the - - Apache License, Version 2.0 - - -
-
\ No newline at end of file diff --git a/src/app/templates/header.html b/src/app/templates/header.html deleted file mode 100644 index 8db69780..00000000 --- a/src/app/templates/header.html +++ /dev/null @@ -1,114 +0,0 @@ - - -
-
- - - - - - - -
- - Storyboard - -
-
- - - - -
diff --git a/src/app/templates/main_menu.html b/src/app/templates/main_menu.html new file mode 100644 index 00000000..bb96a9ab --- /dev/null +++ b/src/app/templates/main_menu.html @@ -0,0 +1,89 @@ + + +
+ + +
+ +
+ + +
+ + + +
diff --git a/src/index.html b/src/index.html index 061446fd..85c9dc0d 100644 --- a/src/index.html +++ b/src/index.html @@ -50,35 +50,10 @@ -
+
-
-
-
-
- -

Modal title

-
-
-

One fine body…

-
-
- - -
-
- -
- -
- - \ No newline at end of file diff --git a/src/theme/base/body.less b/src/theme/base/body.less index c751a760..157f7418 100644 --- a/src/theme/base/body.less +++ b/src/theme/base/body.less @@ -18,13 +18,30 @@ */ body { - margin-top: 70px; - padding-bottom: 20px; - .main { - // Min height set so that the footer doesn't bounce around as much, - // but there's only so much we can do. - min-height: 500px; +} + +@media (max-width: @screen-xs-max) { + body { + margin-left: @navbar-fixed-left-width-xs; + } +} + +@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { + body { + margin-left: @navbar-fixed-left-width-sm; + } +} + +@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { + body { + margin-left: @navbar-fixed-left-width-md; + } +} + +@media (min-width: @screen-lg-min) { + body { + margin-left: @navbar-fixed-left-width-lg; } } diff --git a/src/theme/base/bootstrap/navbar.less b/src/theme/base/bootstrap/navbar.less new file mode 100644 index 00000000..474b0ca2 --- /dev/null +++ b/src/theme/base/bootstrap/navbar.less @@ -0,0 +1,142 @@ +/** + * A side-locked navbar. + */ +.navbar { + + &.navbar-fixed-left { + + @media (max-width: @screen-xs-max) { + width: @navbar-fixed-left-width-xs; + + .container-fluid { + padding-right: 10px; + padding-left: 10px; + } + } + @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { + width: @navbar-fixed-left-width-sm; + } + @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { + width: @navbar-fixed-left-width-md; + } + @media (min-width: @screen-lg-min) { + width: @navbar-fixed-left-width-lg; + } + + overflow: hidden; + border-radius: 0px; + border: none; + + position: fixed; + + box-shadow: inset -2px 0px 10px @gray-light; + top: 0px; + left: 0px; + bottom: 0px; + margin: 0px; + + .nav:first-of-type { + margin-top: 5px; + } + + .navbar-header { + float: none; + text-align: center; + line-height: @line-height-large; + box-shadow: 2px 0px 8px @gray-light; + background: @gray-lighter; + > a { + color: @brand-primary; + } + } + + .navbar-brand { + float: none; + display: inline-block; + } + + .navbar-bottom { + position: absolute; + bottom: 5px; + left: 0px; + right: 0px; + } + + hr { + margin: 5px; + } + + .nav-pilltabs, .nav-links { + margin-left: 5px; + } + + .container-fluid { + margin-top: 10px; + } + } + + .nav-small { + font-size: @font-size-small; + li > a { + padding: @padding-small-vertical @padding-small-horizontal; + } + } + + .nav-links { + li { + + & > a:hover { + text-decoration: underline; + } + + & > a { + &, + &:hover, + &:focus { + background: none; + } + } + + &.active > a { + font-weight: bold; + + &:before { + font-family: FontAwesome; + content: "\f0da"; + } + } + } + } + + .nav-pilltabs { + + li { + margin-top: 5px; + text-align: right; + + > a { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + + &:hover { + border-radius: @nav-pills-border-radius 0 0 @nav-pills-border-radius; + box-shadow: 0px 0px 8px @gray-light; + background-color: white; + text-align: right; + } + } + + // Active state + &.active > a { + &, + &:hover, + &:focus { + border-radius: @nav-pills-border-radius 0 0 @nav-pills-border-radius; + box-shadow: 0px 0px 8px @gray-light; + background-color: @body-bg; + } + } + } + } +} diff --git a/src/theme/base/bootstrap_addons.less b/src/theme/base/bootstrap_addons.less index 896ed9a0..7a891cbf 100644 --- a/src/theme/base/bootstrap_addons.less +++ b/src/theme/base/bootstrap_addons.less @@ -52,41 +52,6 @@ h1 { border-bottom: 2px solid @gray-lighter; } -.navbar { - #gradient > .vertical(@white, @gray-lighter); - .box-shadow(0 1px 3px rgba(0, 0, 0, .25)); - - // The new story button in the mobile view needs a little additional margin. - .new-story-button { - margin-right: 5px; - } - - .navbar-nav { - li { - .active { - @media (max-width: @screen-sm) { - border-left: 5px solid @brand-primary; - color: @gray-darker; - } - - @media (min-width: @screen-sm) { - border-bottom: 3px solid @brand-primary; - margin-bottom: -2px; - padding-bottom: (@navbar-padding-vertical - 2); - color: @gray-darker; - } - } - - &.visible-xs { - hr { - border-top: 1px solid @gray-light; - margin: 5px 10px 5px 10px; - } - } - } - } -} - .navbar-brand { color: @brand-primary; diff --git a/src/theme/main.less b/src/theme/main.less index 5d50a5b5..c3f14b10 100644 --- a/src/theme/main.less +++ b/src/theme/main.less @@ -22,6 +22,8 @@ */ // Library inclusions @import './bootstrap.less'; +@import './base/bootstrap/navbar.less'; + // Theme @import './theme.less'; // Addons to the bootstrap theme. diff --git a/src/theme/storyboard/theme.less b/src/theme/storyboard/theme.less index 272bb2da..2b2029d4 100644 --- a/src/theme/storyboard/theme.less +++ b/src/theme/storyboard/theme.less @@ -6,11 +6,22 @@ @white: #FFFFFF; @black: #000000; +// Sizes for the left navbar at different container sizes. +@navbar-fixed-left-width-xs: 50px; +@navbar-fixed-left-width-sm: 150px; +@navbar-fixed-left-width-md: 150px; +@navbar-fixed-left-width-lg: 200px; + // ============================== Bootstrap Overrides ========================== // Brand colors // ------------------------- @brand-primary: #C43422; +// == Container sizes +@container-tablet: ((720px + @grid-gutter-width - @navbar-fixed-left-width-sm)); +@container-desktop: ((940px + @grid-gutter-width - @navbar-fixed-left-width-md)); +@container-large-desktop: ((1140px + @grid-gutter-width - @navbar-fixed-left-width-lg)); + // Typography // ------------------------- @font-family-title: "Helvetica Neue", Helvetica, Arial, sans-serif;