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
This commit is contained in:
Michael Krotscheck
parent
e3071cc725
commit
3dd638aabb
@ -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"
|
||||
|
||||
@ -1,42 +0,0 @@
|
||||
<!--
|
||||
~ Copyright (c) 2013 Hewlett-Packard Development Company, L.P.
|
||||
~
|
||||
~ Licensed under the Apache License, Version 2.0 (the "License"); you may
|
||||
~ not use this file except in compliance with the License. You may obtain
|
||||
~ a copy of the License at
|
||||
~
|
||||
~ http://www.apache.org/licenses/LICENSE-2.0
|
||||
~
|
||||
~ Unless required by applicable law or agreed to in writing, software
|
||||
~ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
|
||||
~ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
|
||||
~ License for the specific language governing permissions and limitations
|
||||
~ under the License.
|
||||
-->
|
||||
<div class="row text-muted">
|
||||
<hr/>
|
||||
<div class="col-sm-6">
|
||||
<small>
|
||||
Powered by Storyboard |
|
||||
<a href="#!/page/about">About</a>
|
||||
</small>
|
||||
</div>
|
||||
<div class="col-sm-6 text-right hidden-xs">
|
||||
<small>
|
||||
Licensed under the
|
||||
<a href="http://www.apache.org/licenses/LICENSE-2.0"
|
||||
target="_blank">
|
||||
Apache License, Version 2.0
|
||||
</a>
|
||||
</small>
|
||||
</div>
|
||||
<div class="col-xs-12 visible-xs">
|
||||
<small>
|
||||
Licensed under the
|
||||
<a href="http://www.apache.org/licenses/LICENSE-2.0"
|
||||
target="_blank">
|
||||
Apache License, Version 2.0
|
||||
</a>
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,114 +0,0 @@
|
||||
<!--
|
||||
~ Copyright (c) 2013 Hewlett-Packard Development Company, L.P.
|
||||
~
|
||||
~ Licensed under the Apache License, Version 2.0 (the "License"); you may
|
||||
~ not use this file except in compliance with the License. You may obtain
|
||||
~ a copy of the License at
|
||||
~
|
||||
~ http://www.apache.org/licenses/LICENSE-2.0
|
||||
~
|
||||
~ Unless required by applicable law or agreed to in writing, software
|
||||
~ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
|
||||
~ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
|
||||
~ License for the specific language governing permissions and limitations
|
||||
~ under the License.
|
||||
-->
|
||||
|
||||
<div class="container" ng-controller="HeaderController">
|
||||
<div class="navbar-header">
|
||||
<!-- Expand menu button, only visible in mobile view. -->
|
||||
<button class="navbar-toggle" type="button" data-toggle="collapse"
|
||||
data-target=".sb-navbar-collapse">
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
|
||||
<!-- New story button for the mobile view -->
|
||||
<button type="button"
|
||||
ng-click="newStory()"
|
||||
class="visible-xs new-story-button btn btn-primary btn-sm navbar-btn pull-right"
|
||||
>
|
||||
<i class="fa fa-plus"></i>
|
||||
New Story
|
||||
</button>
|
||||
|
||||
<!-- Brand logo -->
|
||||
<div class="navbar-brand">
|
||||
<a href="#!/">
|
||||
<i class="icon icon_openstack"></i> Storyboard
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="nav navbar-nav collapse navbar-collapse sb-navbar-collapse">
|
||||
|
||||
<!-- User name, visible in XS only -->
|
||||
<li class="visible-xs">
|
||||
<p class="navbar-text" ng-show="isLoggedIn">
|
||||
<i class="fa fa-user"></i>
|
||||
{{currentUser.full_name}}
|
||||
</p>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="#!/" active-path="^\/$">Overview</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#!/project" active-path="^\/project\/*">Projects</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#!/story" active-path="^\/story.*">Stories</a>
|
||||
</li>
|
||||
|
||||
<!-- Divider, XS only -->
|
||||
<li class="visible-xs">
|
||||
<hr/>
|
||||
</li>
|
||||
|
||||
<li class="visible-xs">
|
||||
<a href="#!/profile/preferences" ng-show="isLoggedIn"
|
||||
active-path="^\/profile\/preferences*">Preferences</a>
|
||||
</li>
|
||||
<!-- Login/Logout button, XS only. -->
|
||||
<li class="visible-xs">
|
||||
<a href="#!/auth/authorize" ng-hide="isLoggedIn">
|
||||
Log in
|
||||
</a>
|
||||
<a href="" ng-click="logout()" ng-show="isLoggedIn">
|
||||
Log out
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!-- User dropdown menu for non-mobile views -->
|
||||
<ul class="nav navbar-nav navbar-right hidden-xs">
|
||||
<li>
|
||||
<button type="button"
|
||||
ng-click="newStory()"
|
||||
class="hidden-xs btn btn-primary btn-sm navbar-btn">
|
||||
<i class="fa fa-plus"></i>
|
||||
New Story
|
||||
</button>
|
||||
</li>
|
||||
<!-- Username and logout, non-XS only. -->
|
||||
<li ng-show="isLoggedIn">
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
|
||||
<i class="fa fa-user"></i>
|
||||
{{currentUser.full_name}}
|
||||
<i class="fa fa-caret-down"></i>
|
||||
</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li>
|
||||
<a href="#!/profile/preferences">Preferences</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="" ng-click="logout()">Logout</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<!-- Login, non-XS only. -->
|
||||
<li ng-hide="isLoggedIn">
|
||||
<a href="#!/auth/authorize">Log in</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
89
src/app/templates/main_menu.html
Normal file
89
src/app/templates/main_menu.html
Normal file
@ -0,0 +1,89 @@
|
||||
<!--
|
||||
~ Copyright (c) 2013 Hewlett-Packard Development Company, L.P.
|
||||
~
|
||||
~ Licensed under the Apache License, Version 2.0 (the "License"); you may
|
||||
~ not use this file except in compliance with the License. You may obtain
|
||||
~ a copy of the License at
|
||||
~
|
||||
~ http://www.apache.org/licenses/LICENSE-2.0
|
||||
~
|
||||
~ Unless required by applicable law or agreed to in writing, software
|
||||
~ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
|
||||
~ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
|
||||
~ License for the specific language governing permissions and limitations
|
||||
~ under the License.
|
||||
-->
|
||||
|
||||
<div ng-controller="HeaderController">
|
||||
|
||||
<!-- New story button for the mobile view -->
|
||||
<div class="container-fluid">
|
||||
<button type="button"
|
||||
ng-click="newStory()"
|
||||
class="new-story-button btn btn-sm btn-primary btn-block">
|
||||
<i class="fa fa-plus"></i>
|
||||
<span class="hidden-xs">New Story</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<ul class="nav nav-pilltabs nav-stacked">
|
||||
<li active-path="^\/$">
|
||||
<a href="#!/">
|
||||
<span class="hidden-xs">Overview</span>
|
||||
<i class="fa fa-home visible-xs"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li active-path="^\/project\/*">
|
||||
<a href="#!/project">
|
||||
<span class="hidden-xs">Projects</span>
|
||||
<i class="fa fa-briefcase visible-xs"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li active-path="^\/story.*">
|
||||
<a href="#!/story">
|
||||
<span class="hidden-xs">Stories</span>
|
||||
<i class="fa fa-file visible-xs"></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<hr/>
|
||||
<ul class="nav nav-pilltabs nav-stacked">
|
||||
<li active-path="^\/profile\/preferences*">
|
||||
<a href="#!/profile/preferences" ng-show="isLoggedIn">
|
||||
<span class="hidden-xs">{{currentUser.full_name}}</span>
|
||||
<i class="fa fa-user visible-xs"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#!/auth/authorize" ng-hide="isLoggedIn">
|
||||
<span class="hidden-xs">Log in</span>
|
||||
<i class="fa fa-sign-in visible-xs"></i>
|
||||
</a>
|
||||
<a href="" ng-click="logout()" ng-show="isLoggedIn">
|
||||
<span class="hidden-xs">Log out</span>
|
||||
<i class="fa fa-sign-out visible-xs"></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="nav nav-links nav-stacked navbar-bottom nav-small hidden-xs">
|
||||
<li active-path="^\/page\/about.*$" class="text-right">
|
||||
<a href="#!/page/about">
|
||||
<span class="hidden-xs">About</span>
|
||||
<i class="fa fa-question-circle visible-xs"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li class="text-right">
|
||||
<a href="http://www.apache.org/licenses/LICENSE-2.0"
|
||||
target="_blank">
|
||||
<span class="hidden-xs">License</span>
|
||||
<i class="fa fa-exclamation-circle visible-xs"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li class="text-center">
|
||||
<small class="text-muted">
|
||||
Powered by StoryBoard
|
||||
</small>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@ -50,35 +50,10 @@
|
||||
<script src="js/templates.js"></script>
|
||||
</head>
|
||||
<body ng-class="{'logged-in' : isLoggedIn}">
|
||||
<header class="navbar navbar-default navbar-fixed-top"
|
||||
ng-include src="'app/templates/header.html'">
|
||||
<header class="navbar navbar-default navbar-fixed-left"
|
||||
ng-include src="'app/templates/main_menu.html'">
|
||||
</header>
|
||||
<div ui-view class="main"></div>
|
||||
<div class="modal fade">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal"
|
||||
aria-hidden="true">×</button>
|
||||
<h4 class="modal-title">Modal title</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>One fine body…</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-default"
|
||||
data-dismiss="modal">Close
|
||||
</button>
|
||||
<button type="button" class="btn btn-primary">Save changes
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.modal-content -->
|
||||
</div>
|
||||
<!-- /.modal-dialog -->
|
||||
</div>
|
||||
<!-- /.modal -->
|
||||
<footer class="container" ng-include src="'app/templates/footer.html'">
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
142
src/theme/base/bootstrap/navbar.less
Normal file
142
src/theme/base/bootstrap/navbar.less
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
35
src/theme/base/bootstrap_addons.less
vendored
35
src/theme/base/bootstrap_addons.less
vendored
@ -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;
|
||||
|
||||
|
||||
@ -22,6 +22,8 @@
|
||||
*/
|
||||
// Library inclusions
|
||||
@import './bootstrap.less';
|
||||
@import './base/bootstrap/navbar.less';
|
||||
|
||||
// Theme
|
||||
@import './theme.less';
|
||||
// Addons to the bootstrap theme.
|
||||
|
||||
@ -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;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user