Remove the side menu and put all menu entries in the top bar.

This commit is contained in:
Tim Buckley 2015-09-09 14:29:11 -06:00
parent ded76115c3
commit aedb4d1f8f
4 changed files with 36 additions and 49 deletions

View File

@ -10,29 +10,17 @@
<link rel="stylesheet" href="css/main.css">
</head>
<body class="ng-cloak" ng-controller="MainCtrl">
<nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">StackViz</a>
<header class="navbar navbar-default navbar-fixed-top navbar-inner">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" ui-sref="home">StackViz</a>
</div>
<nav ng-include="'menu.html'"></nav>
</div>
<!-- /.navbar-header -->
<ul class="nav navbar-top-links navbar-right">
</ul>
<!-- /.navbar-top-links -->
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav sidebar-collapse" ng-include="'menu.html'"></div>
</div>
<!-- /.navbar-static-side -->
</nav>
</header>
<div role="main" ui-view></div>

View File

@ -6,6 +6,7 @@
body {
background-color: #f8f8f8;
padding-top: 50px;
}
#wrapper {
@ -18,15 +19,6 @@ div[role=main] {
background-color: #fff;
}
@media(min-width:768px) {
div[role=main] {
position: inherit;
margin: 0 0 0 250px;
padding: 0 30px;
border-left: 1px solid #e7e7e7;
}
}
.navbar-top-links {
margin-right: 0;
}

View File

@ -1,15 +1,18 @@
<div class="row">
<div class="col-lg-12">
<header class="bs-header">
<div class="container">
<h1 class="page-header">{{ home.title }}</h1>
</div>
</div>
</header>
<div class="row">
<div class="col-lg-12">
<h3 class="heading -medium">Here is a fancy number served up courtesy of Angular: <span class="number-example">{{ home.number }}</span></h3>
<div class="container">
<div class="row">
<div class="col-lg-12">
<h3 class="heading -medium">Here is a fancy number served up courtesy of Angular: <span class="number-example">{{ home.number }}</span></h3>
<img src="images/angular.png" height="100" example-directive />
<img src="images/gulp.png" height="100" />
<img src="images/browserify.png" height="100" />
<img src="images/angular.png" height="100" example-directive />
<img src="images/gulp.png" height="100" />
<img src="images/browserify.png" height="100" />
</div>
</div>
</div>

View File

@ -1,28 +1,32 @@
<ul class="nav" id="side-menu">
<ul class="nav navbar-top-links navbar-right">
<li>
<a href="#"><fa name="pie-chart" fw></fa> Overview</a>
<a ui-sref="home"><fa name="pie-chart" fw></fa> Overview</a>
</li>
<li>
<a href="#"><fa name="bar-chart-o" fw></fa> Tempest<span class="fa arrow"></span></a>
<ul class="nav nav-second-level">
<li dropdown>
<a href dropdown-toggle>
<fa name="bar-chart-o" fw></fa> Tempest <fa name="caret-down"></fa>
</a>
<ul class="dropdown-menu">
<li>
<a href="#">
<fa name="clock-o" fw></fa> Sunburst
</a>
</li>
<li>
<a href="#">
<a ui-sref="timeline">
<fa name="calendar" fw></fa> Timeline
</a>
</li>
<li class="online">
<li>
<a href="#"><fa name="bar-chart-o" fw></fa> Aggregate Results</a>
</li>
</ul>
</li>
<li class="online">
<a href="#"><fa name="bar-chart-o" fw></fa> Upstream<span class="fa arrow"></span></a>
<ul class="nav nav-second-level">
<li dropdown>
<a href dropdown-toggle>
<fa name="bar-chart-o" fw></fa> Upstream <fa name="caret-down"></fa>
</a>
<ul class="dropdown-menu">
<li>
<a href="#"><fa name="bar-chart-o" fw></fa> Test Stats</a>
</li>