redoing UI and finishing up sidebar

2 files changed, 82 insertions, 51 deletions

diff --git a/src/web/static/css/one-page-app.css b/src/web/static/css/one-page-app.css
new file mode 100644
index 00000000..5a3444c2
--- /dev/null
+++ b/src/web/static/css/one-page-app.css
@@ -0,0 +1,82 @@
+#menu {
+  position: fixed;
+  top: 51px;
+  bottom: 0px;
+  left: 0px;
+  z-index: 1000;
+  display: block;
+  padding: 10px;
+  overflow-x: hidden;
+  overflow-y: auto;
+  background-color: #F5F5F5;
+  border-right: 1px solid #EEE;
+  color: #555;
+}
+#menu div.nav.btn-group {
+  margin-bottom: 10px;
+}
+#menu li {
+  padding: 2px;
+  cursor: pointer;
+  border-radius: 6px;
+}
+#menu li.nav-feed {
+  margin-left: 15px;
+  margin-bottom: 3px;
+  max-height: 22px;
+  overflow: hidden;
+}
+#menu li.nav-feed > span.badge {
+  top: 2px;
+  position: absolute;
+  right: 2px;
+}
+#menu li.nav-feed > span.title {
+  margin-left: 3px;
+}
+#menu li.bg-primary.bg-danger {
+  color: #fff;
+  background-color: orangered;
+}
+#menu li.bg-primary.bg-warning {
+  color: #fff;
+  background-color: gold;
+}
+#menu li:hover {
+  color: #000;
+  background-color: #e8e8e8;
+}
+#menu li.bg-primary:hover {
+  color: #fff;
+  background-color: #62a9e6;
+}
+#menu li.bg-warning:hover {
+  background-color: #f3f0da;
+}
+#menu li.bg-danger:hover {
+  background-color: #f6cab6;
+}
+#menu li > h4 {
+  padding-left: 5px;
+  margin: 2px;
+  display: inline;
+}
+#middle-panel {
+  padding-left: 20px;
+  padding-top: 10px;
+  padding-right: 20px;
+  position: fixed;
+  top: 51px;
+  bottom: 0px;
+  left: 0px;
+  z-index: 1000;
+  display: block;
+  overflow-x: hidden;
+  overflow-y: auto;
+  background-color: #F5F5F5;
+  border-right: 1px solid #EEE;
+}
+#middle-panel .btn-group {
+  margin-right: 10px;
+  margin-bottom: 10px;
+}
diff --git a/src/web/static/css/side-nav.css b/src/web/static/css/side-nav.css
deleted file mode 100644
index 5128c766..00000000
--- a/src/web/static/css/side-nav.css
+++ /dev/null
@@ -1,51 +0,0 @@
-/* First level of nav */
-.sidenav {
-    margin-top: 0px;
-    margin-bottom: 0px;
-    padding-top:    10px;
-    padding-bottom: 0px;
-    overflow-y: auto;
-    height: 90%;
-    z-index: 1000;
-    background-color: #FFFFFF;
-    border-radius: 2px;
-    font-size: 100%;
-}
-/* All levels of nav */
-.sidebar .nav > li > a {
-    display: block;
-    color: #3572B0;
-    padding: 5px 20px;
-}
-.sidebar .nav > li > a:hover,
-.sidebar .nav > li > a:focus {
-    text-decoration: none;
-    background-color: #F0FFFF;
-}
-
-.sidebar .nav > .active > a,
-.sidebar .nav > .active:hover > a,
-.sidebar .nav > .active:focus > a {
-    font-weight: bold;
-    color: #3572B0;
-    background-color: transparent;
-}
-
-.badge {
-    background-color: #3572B0;
-}
-
-/* Nav: second level */
-.sidebar .nav .nav {
-    margin-bottom: 8px;
-}
-.sidebar .nav .nav > li > a {
-    padding-top:    3px;
-    padding-bottom: 3px;
-    font-size: 80%;
-}
-
-li.feed-commands {display: none; text-align: right;}
-li.feed-commands > span > a {margin-right: 10px;}
-li.feed-menu:hover + li.feed-commands, li.feed-commands:hover {display: block;}
-.glyphicon.delete, .glyphicon.like, .glyphicon.readed { cursor: pointer; }