From 267d98f132089db1eb1b8c72108e18d7a2de6488 Mon Sep 17 00:00:00 2001
From: Pablo Cuadrado <pablocuadrado@gmail.com>
Date: Wed, 17 Jun 2015 06:53:01 -0300
Subject: [PATCH] leftnavbar with full sized clickable anchors, better padding,
 weight font reduced, overall looks polished fixed background added for
 contrast, hideable on SM or XS bootstrap-based sizes.

---
 app/assets/stylesheets/colors.scss      |  3 +
 app/assets/stylesheets/leftnavbar.scss  | 88 ++++++++++++++++++++-----
 app/assets/stylesheets/stream.scss      |  1 -
 app/views/streams/main_stream.html.haml |  3 +-
 4 files changed, 77 insertions(+), 18 deletions(-)

diff --git a/app/assets/stylesheets/colors.scss b/app/assets/stylesheets/colors.scss
index 23026e05a..83f416c3b 100644
--- a/app/assets/stylesheets/colors.scss
+++ b/app/assets/stylesheets/colors.scss
@@ -36,3 +36,6 @@ $lime-green : rgb(143, 199,10);
 $orange : rgb(237, 165, 13);
 $turquoise : rgb(8, 224, 173);
 $sand : rgb(245, 239, 237);
+
+$left-navbar-background: #f0f0f0;
+$left-navbar-drawer-background: darken($left-navbar-background, 6%);
\ No newline at end of file
diff --git a/app/assets/stylesheets/leftnavbar.scss b/app/assets/stylesheets/leftnavbar.scss
index 7d1ceacd1..3630e8f15 100644
--- a/app/assets/stylesheets/leftnavbar.scss
+++ b/app/assets/stylesheets/leftnavbar.scss
@@ -1,14 +1,26 @@
+/* Fixed backgrounds are a common practice to avoid height issues */
+#left-navbar-fixed-background {
+  background: $left-navbar-background;
+  position: fixed;
+  height: 100%;
+}
+
 #leftNavBar {
+  background: $left-navbar-background;
   a {
     color: $link-grey;
     font-weight: bold;
     text-decoration: none;
+    outline: 0;
   }
 
   ul {
     margin: 0px;
     padding: 0px;
     list-style: none;
+    &#stream_selection {
+      margin: 0px -15px; /* -15px overrides Bootstrap's default gutter width */
+    }
   }
 
   .selected { color: $black; }
@@ -16,21 +28,36 @@
 
   .hoverable {
     display: block;
-    margin-right: 6px;
-    padding: 4px;
-    &:hover { background-color: $background-blue; }
+    &.selected a, &.selected a:hover {
+      color: white;
+      background: #666;
+    }
+  }
+
+  .all_aspects a.hoverable.selected {
+    color: white;
+    background: #666;
+  }
+
+  .hoverable a, .all_aspects a.hoverable, .followed_tags_sidebar a.hoverable {
+    padding: 10px 20px;
+    display: block;
+    font-weight: normal;
+    color: $link-grey;
+    border-bottom: 1px solid #ddd;
+    &:hover { 
+      background-color: $background-blue;
+      color: $black;
+    }
   }
 
   .selectable {
     display: block;
-    margin-left: 21px;
     overflow: hidden;
     text-overflow: ellipsis;
   }
 
   #home_user_badge {
-    border-bottom: 1px dashed $border-grey;
-    margin-bottom: 10px;
     min-height: 50px;
     padding-bottom: 20px;
     padding-left: 4px;
@@ -51,27 +78,47 @@
     }
   }
 
-  #stream_selection {
-    & > li {
-      margin-bottom: 5px;
+  #aspects_list {
+    .hoverable {
+      position: relative;
+    }
+    .selectable {
+      padding-left: 40px;
     }
   }
 
   #aspects_list, #tags_list {
+    background: $left-navbar-drawer-background;
     .hoverable > .action {
       visibility: hidden;
-      margin: 0 3px;
+      margin: 0;
+      position: absolute;
+      right: 0;
+      top: 0;
+      z-index: 200;
+      padding: 10px 15px;
+      border: none;
     }
-    .hoverable:hover  > .action {
+    .hoverable:hover > .action {
       visibility: visible;
+      background: none;
     }
   }
 
   #aspects_list {
-    .entypo-check {
-      float: left;
+    .selectable {
+      padding-right: 40px;
+    }
+    .entypo.check {
       visibility: hidden;
-      &.selected { visibility: visible; }
+      margin: 0;
+      position: absolute;
+      left: 20px;
+      top: 10px;
+      z-index: 200;
+      &.selected { 
+        visibility: visible; 
+      }
     }
     .selected + a {
       color: #333333;
@@ -79,14 +126,23 @@
   }
 
   #tags_list {
+
+    li {
+      position: relative;
+    }
+
+    .selectable {
+      padding-left: 30px;
+      padding-right: 30px;
+    }
+
     .delete_tag_following {
       font-size: 20px;
       line-height: 15px;
     }
 
     #new_tag_following {
-      margin-left: 20px;
-      margin-top: 5px;
+      padding: 10px 20px 10px 30px;
     }
 
     /* ---- override app/stylesheets/vendor/autoSuggest.css ---- */
diff --git a/app/assets/stylesheets/stream.scss b/app/assets/stylesheets/stream.scss
index 55545d529..69a5b900b 100644
--- a/app/assets/stylesheets/stream.scss
+++ b/app/assets/stylesheets/stream.scss
@@ -1,5 +1,4 @@
 .stream_container {
-	border-left: 1px solid $border-grey;
 	padding-left: 10px;
 	padding-top: 20px;
 	margin-left: -10px;
diff --git a/app/views/streams/main_stream.html.haml b/app/views/streams/main_stream.html.haml
index 498b525d7..6d246d9fe 100644
--- a/app/views/streams/main_stream.html.haml
+++ b/app/views/streams/main_stream.html.haml
@@ -24,6 +24,7 @@
   #right-sidebar-fixed-sub-background.col-md-3.visible-lg
   #right-sidebar-fixed-background.col-md-3.col-lg-2.hidden-sm.hidden-xs
   .row
+    #left-navbar-fixed-background.col-md-offset-1.col-md-2.hidden-sm.hidden-xs
     .col-md-offset-1.col-md-2#leftNavBar
       #home_user_badge
         = owner_image_link
@@ -39,7 +40,7 @@
           = link_to t("streams.mentions.title"), mentioned_stream_path, rel: "backbone", class: "hoverable"
         %li.all_aspects
           = render "aspects/aspect_listings", stream: @stream
-        %li
+        %li.followed_tags_sidebar
           = render "tags/followed_tags_listings"
 
     .col-md-6