From 84e7f463fa3be6e125d739555907726f581abe4a Mon Sep 17 00:00:00 2001
From: Kyle Johnson <kjohnson@gnulnx.net>
Date: Fri, 27 Feb 2015 09:32:27 -0500
Subject: [PATCH] Add styling for vertical (stacked) tabs.

This commits adds some styling for the stacked tabs in the Options
and Monitors views.
---
 web/css/skin.css               | 28 ++++++++++++++++++++++++++--
 web/views/monitor.detail.html  | 12 ++++++------
 web/views/options/options.html |  4 ++--
 3 files changed, 34 insertions(+), 10 deletions(-)

diff --git a/web/css/skin.css b/web/css/skin.css
index 204e4fc44..05132a5d7 100644
--- a/web/css/skin.css
+++ b/web/css/skin.css
@@ -1,4 +1,7 @@
-body { padding-top: 70px; }
+body {
+	padding-top: 70px;
+	background-color: #F5F5F5;
+}
 
 #footer {
 	position: absolute;
@@ -79,6 +82,27 @@ body { padding-top: 70px; }
 	padding-left: 5px;
 }
 
-body {
+#optionsView .form-group {
+	margin-bottom: 5px;
+}
+
+.nav-tabs {
+	border-right: 1px solid #DDD;
+	border-bottom: 0;
+}
+
+.nav-tabs > li > a {
+	border-radius: 0;
+	margin-right: -1px;
+}
+
+.nav-tabs > li > a, .nav-tabs > li > a:hover, .nav-tabs > li > a:focus {
+	border-bottom: none;
+	border-right: 1px solid #DDD;
+	background-color: transparent;
+}
+
+.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
+	border-color: #DDD transparent #DDD #DDD;
 	background-color: #F5F5F5;
 }
diff --git a/web/views/monitor.detail.html b/web/views/monitor.detail.html
index 2a1c97a1b..3f8d422b7 100644
--- a/web/views/monitor.detail.html
+++ b/web/views/monitor.detail.html
@@ -4,12 +4,12 @@
 <div class="row">
 		<form ng-submit="submitMonitor(formMonitor.$valid)" name="formMonitor" novalidate>
 			<div class="col-md-2">
-				<ul class="nav nav-pills nav-stacked">
-					<li><a ui-sref="monitor.detail.general">General</a></li>
-					<li><a ui-sref="monitor.detail.source">Source</a></li>
-					<li><a ui-sref="monitor.detail.timestamps">Timestamps</a></li>
-					<li><a ui-sref="monitor.detail.buffers">Buffers</a></li>
-					<li><a ui-sref="monitor.detail.misc">Misc</a></li>
+				<ul class="nav nav-tabs nav-stacked">
+					<li ui-sref-active="active"><a ui-sref="monitor.detail.general">General</a></li>
+					<li ui-sref-active="active"><a ui-sref="monitor.detail.source">Source</a></li>
+					<li ui-sref-active="active"><a ui-sref="monitor.detail.timestamps">Timestamps</a></li>
+					<li ui-sref-active="active"><a ui-sref="monitor.detail.buffers">Buffers</a></li>
+					<li ui-sref-active="active"><a ui-sref="monitor.detail.misc">Misc</a></li>
 				</ul>
 
 				<button type="submit" class="btn btn-success btn-block" ng-disabled="formMonitor.$invalid">Save</button>
diff --git a/web/views/options/options.html b/web/views/options/options.html
index 375c2a97b..ef5940f92 100644
--- a/web/views/options/options.html
+++ b/web/views/options/options.html
@@ -1,7 +1,7 @@
 <div class="container" ng-controller="ConfigController">
   <div class="row">
     <div class="col-md-2">
-      <ul class="nav nav-pills nav-stacked" role="tablist">
+      <ul class="nav nav-tabs nav-stacked" role="tablist">
         <li ui-sref-active="active"><a ui-sref="options.images"
         aria-controls="images" role="tab">images</a></li>
 
@@ -53,7 +53,7 @@
     </div><!-- End .col-md-2 -->
 
     <div class="col-md-10">
-      <div ui-view class="form-horizontal"></div>
+      <div id="optionsView" ui-view class="form-horizontal"></div>
     </div><!-- End .col-md-10 -->
   </div><!-- End .row -->
 </div>