From c8ba4f061e543fa2484d9e9529a85ea61154ef78 Mon Sep 17 00:00:00 2001
From: Pablo Cuadrado <pablocuadrado@gmail.com>
Date: Wed, 17 Jun 2015 09:12:12 -0300
Subject: [PATCH 01/11] polishing of the right sidebar

---
 app/assets/stylesheets/colors.scss         |  2 ++
 app/assets/stylesheets/sidebar.scss        | 15 +++++++++++----
 app/views/shared/_right_sections.html.haml |  7 -------
 app/views/streams/main_stream.html.haml    |  5 +++--
 4 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/app/assets/stylesheets/colors.scss b/app/assets/stylesheets/colors.scss
index 272821cc7..98120d44a 100644
--- a/app/assets/stylesheets/colors.scss
+++ b/app/assets/stylesheets/colors.scss
@@ -25,6 +25,8 @@ $red: #A80000;
 $blue: #3F8FBA;
 $dark-blue: darken(#0984C8,10%);
 
+$right-sidebar-background: #f0f0f0;
+
 /* colors : http://www.colourlovers.com/palette/2134203/Awezome_in_argyle */
 $cyan : rgb(8,204,249);
 $yellow : rgb(242,244,9);
diff --git a/app/assets/stylesheets/sidebar.scss b/app/assets/stylesheets/sidebar.scss
index ecf57eb35..2837ac62d 100644
--- a/app/assets/stylesheets/sidebar.scss
+++ b/app/assets/stylesheets/sidebar.scss
@@ -1,21 +1,28 @@
+#right-sidebar-fixed-background {
+  height: 100%;
+  background: $right-sidebar-background;
+  position: fixed;
+  right: 0;
+}
 .rightBar {
   padding-top: 20px;
+  background: $right-sidebar-background;
 
   .section {
     margin-bottom: 20px;
 
     > .title {
       border-bottom: 1px solid $border-grey;
-      padding-bottom: 2px;
+      padding-bottom: 5px;
 
       &.no_icon { padding-left: 8px; }
 
       h5 {
         color: $text-dark-grey;
-        font-weight: bold;
+        font-weight: normal;
         font-size: $font-size-base;
         margin: 0;
-        &.title-header { margin-left: 5px; }
+        text-transform: uppercase;
       }
     }
 
@@ -23,7 +30,7 @@
       color: $text-grey;
       font-size: $font-size-small;
       line-height: 18px;
-      padding: 5px;
+      padding: 10px 0;
 
       p, ul { margin: 0; }
 
diff --git a/app/views/shared/_right_sections.html.haml b/app/views/shared/_right_sections.html.haml
index 82af44da1..967c5354a 100644
--- a/app/views/shared/_right_sections.html.haml
+++ b/app/views/shared/_right_sections.html.haml
@@ -7,7 +7,6 @@
   .section
     .title
       %h5.title-header
-        %i.entypo-plus
         = t('shared.invitations.invite_your_friends')
     .content
       = render "shared/invitations"
@@ -15,7 +14,6 @@
 .section
   .title
     %h5.title-header
-      %i.entypo-users
       = t('aspects.index.new_here.title')
   .content
     != t('aspects.index.new_here.follow', link: link_to("#"+t('shared.publisher.new_user_prefill.newhere'), tag_path(name: t('shared.publisher.new_user_prefill.newhere'))))
@@ -25,7 +23,6 @@
 .section
   .title
     %h5.title-header
-      %i.entypo-circled-help
       = t('aspects.index.help.need_help')
   .content
     %p
@@ -49,7 +46,6 @@
   .section
     .title
       %h5.title-header
-        %i.entypo-cog
         = t('aspects.index.services.heading')
     .content
       %div
@@ -64,7 +60,6 @@
 .section
   .title
     %h5.title-header
-      %i.entypo-bookmark
       = t('bookmarklet.heading')
   .content
     != t('bookmarklet.explanation', :link => link_to(t('bookmarklet.post_something'), bookmarklet_code))
@@ -73,7 +68,6 @@
   .section
     .title
       %h5.title-header
-        %i.entypo-heart
         = t('aspects.index.donate')
     .content
       %p
@@ -84,7 +78,6 @@
   .section
     .title
       %h5.title-header
-        %i.entypo-mail
         = t('aspects.index.help.any_problem')
     .content
       %p
diff --git a/app/views/streams/main_stream.html.haml b/app/views/streams/main_stream.html.haml
index 1effeb5b1..466876b9b 100644
--- a/app/views/streams/main_stream.html.haml
+++ b/app/views/streams/main_stream.html.haml
@@ -21,6 +21,7 @@
             = link_to '&times;'.html_safe, getting_started_completed_path, id: "gs-skip-x", class: "close"
 
 %div.container-fluid
+  #right-sidebar-fixed-background.col-md-3.hidden-sm.hidden-xs
   .row
     .col-md-offset-1.col-md-2#leftNavBar
       #home_user_badge
@@ -44,9 +45,9 @@
       #aspect_stream_container.stream_container
         = render 'aspects/aspect_stream', stream: @stream
 
-    .col-md-2.rightBar
+    .col-md-3.rightBar
       #selected_aspect_contacts.section
-        .title.no_icon
+        .title
           %h5.stream_title
             = @stream.title
         .content

From 9bd7ceb722cd82224bde4a39703f17336990def4 Mon Sep 17 00:00:00 2001
From: Pablo Cuadrado <pablocuadrado@gmail.com>
Date: Wed, 17 Jun 2015 22:06:14 -0300
Subject: [PATCH 02/11] removing uppercase to prevent l18n issues

---
 app/assets/stylesheets/sidebar.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/app/assets/stylesheets/sidebar.scss b/app/assets/stylesheets/sidebar.scss
index 2837ac62d..5c6ccf387 100644
--- a/app/assets/stylesheets/sidebar.scss
+++ b/app/assets/stylesheets/sidebar.scss
@@ -22,7 +22,6 @@
         font-weight: normal;
         font-size: $font-size-base;
         margin: 0;
-        text-transform: uppercase;
       }
     }
 

From 754d8107a865082508ef8d15e6e7d80eabf1a314 Mon Sep 17 00:00:00 2001
From: Pablo Cuadrado <pablocuadrado@gmail.com>
Date: Mon, 22 Jun 2015 19:32:41 -0300
Subject: [PATCH 03/11] reasonable max-width for right sidebar

---
 app/assets/stylesheets/sidebar.scss        |   3 +
 app/views/shared/_right_sections.html.haml | 143 +++++++++++----------
 2 files changed, 75 insertions(+), 71 deletions(-)

diff --git a/app/assets/stylesheets/sidebar.scss b/app/assets/stylesheets/sidebar.scss
index 5c6ccf387..27d3b0675 100644
--- a/app/assets/stylesheets/sidebar.scss
+++ b/app/assets/stylesheets/sidebar.scss
@@ -4,6 +4,9 @@
   position: fixed;
   right: 0;
 }
+.right-sidebar-padder {
+  max-width: 300px;
+}
 .rightBar {
   padding-top: 20px;
   background: $right-sidebar-background;
diff --git a/app/views/shared/_right_sections.html.haml b/app/views/shared/_right_sections.html.haml
index 967c5354a..dc1ec229d 100644
--- a/app/views/shared/_right_sections.html.haml
+++ b/app/views/shared/_right_sections.html.haml
@@ -2,92 +2,93 @@
 -#   licensed under the Affero General Public License version 3 or later.  See
 -#   the COPYRIGHT file.
 
+.right-sidebar-padder
+
+  - if AppConfig.settings.invitations.open?
+    .section
+      .title
+        %h5.title-header
+          = t('shared.invitations.invite_your_friends')
+      .content
+        = render "shared/invitations"
 
-- if AppConfig.settings.invitations.open?
   .section
     .title
       %h5.title-header
-        = t('shared.invitations.invite_your_friends')
+        = t('aspects.index.new_here.title')
     .content
-      = render "shared/invitations"
+      != t('aspects.index.new_here.follow', link: link_to("#"+t('shared.publisher.new_user_prefill.newhere'), tag_path(name: t('shared.publisher.new_user_prefill.newhere'))))
+      %br
+      = link_to(t('aspects.index.new_here.learn_more'), "http://wiki.diasporafoundation.org/Welcoming_Committee")
 
-.section
-  .title
-    %h5.title-header
-      = t('aspects.index.new_here.title')
-  .content
-    != t('aspects.index.new_here.follow', link: link_to("#"+t('shared.publisher.new_user_prefill.newhere'), tag_path(name: t('shared.publisher.new_user_prefill.newhere'))))
-    %br
-    = link_to(t('aspects.index.new_here.learn_more'), "http://wiki.diasporafoundation.org/Welcoming_Committee")
-
-.section
-  .title
-    %h5.title-header
-      = t('aspects.index.help.need_help')
-  .content
-    %p
-      = t('aspects.index.help.here_to_help')
-    %p
-      = t('aspects.index.help.do_you')
-    %ul
-      %li
-        != t('aspects.index.help.have_a_question', :link => link_to("#"+t('aspects.index.help.tag_question'), tag_path(:name => t('aspects.index.help.tag_question'))))
-      %li
-        != t('aspects.index.help.find_a_bug', :link => link_to("#"+t('aspects.index.help.tag_bug'), tag_path(:name => t('aspects.index.help.tag_bug'))))
-      %li
-        != t('aspects.index.help.feature_suggestion', :link => link_to("#"+t('aspects.index.help.tag_feature'), tag_path(:name => t('aspects.index.help.tag_feature'))))
-    %p
-      != t('aspects.index.help.tutorials_and_wiki',
-           :faq => link_to(t('_help'), help_path),
-           :tutorial => link_to(t('aspects.index.help.tutorial_link_text'), "https://diasporafoundation.org/tutorials", :target => '_blank'),
-           :wiki => link_to('Wiki','http://wiki.diasporafoundation.org', :target => '_blank'), :target => '_blank')
-
-- unless AppConfig.configured_services.blank? || all_services_connected?
   .section
     .title
       %h5.title-header
-        = t('aspects.index.services.heading')
-    .content
-      %div
-        = t('aspects.index.services.content')
-
-      #right_service_icons
-        - AppConfig.configured_services.each do |service|
-          - if AppConfig.show_service?(service, current_user)
-            - unless current_user.services.any?{|x| x.provider == service}
-              = link_to(content_tag(:div, nil, :class => "social_media_logos-#{service.to_s.downcase}-24x24", :title => service.to_s.titleize), "/auth/#{service}")
-
-.section
-  .title
-    %h5.title-header
-      = t('bookmarklet.heading')
-  .content
-    != t('bookmarklet.explanation', :link => link_to(t('bookmarklet.post_something'), bookmarklet_code))
-
-- if AppConfig.settings.paypal_donations.enable? || AppConfig.bitcoin_donation_address
-  .section
-    .title
-      %h5.title-header
-        = t('aspects.index.donate')
+        = t('aspects.index.help.need_help')
     .content
       %p
-        = t('aspects.index.keep_pod_running', :pod => AppConfig.pod_uri.host)
-      = render 'shared/donatepod'
+        = t('aspects.index.help.here_to_help')
+      %p
+        = t('aspects.index.help.do_you')
+      %ul
+        %li
+          != t('aspects.index.help.have_a_question', :link => link_to("#"+t('aspects.index.help.tag_question'), tag_path(:name => t('aspects.index.help.tag_question'))))
+        %li
+          != t('aspects.index.help.find_a_bug', :link => link_to("#"+t('aspects.index.help.tag_bug'), tag_path(:name => t('aspects.index.help.tag_bug'))))
+        %li
+          != t('aspects.index.help.feature_suggestion', :link => link_to("#"+t('aspects.index.help.tag_feature'), tag_path(:name => t('aspects.index.help.tag_feature'))))
+      %p
+        != t('aspects.index.help.tutorials_and_wiki',
+             :faq => link_to(t('_help'), help_path),
+             :tutorial => link_to(t('aspects.index.help.tutorial_link_text'), "https://diasporafoundation.org/tutorials", :target => '_blank'),
+             :wiki => link_to('Wiki','http://wiki.diasporafoundation.org', :target => '_blank'), :target => '_blank')
+
+  - unless AppConfig.configured_services.blank? || all_services_connected?
+    .section
+      .title
+        %h5.title-header
+          = t('aspects.index.services.heading')
+      .content
+        %div
+          = t('aspects.index.services.content')
+
+        #right_service_icons
+          - AppConfig.configured_services.each do |service|
+            - if AppConfig.show_service?(service, current_user)
+              - unless current_user.services.any?{|x| x.provider == service}
+                = link_to(content_tag(:div, nil, :class => "social_media_logos-#{service.to_s.downcase}-24x24", :title => service.to_s.titleize), "/auth/#{service}")
 
-- if AppConfig.admins.podmin_email.present?
   .section
     .title
       %h5.title-header
-        = t('aspects.index.help.any_problem')
+        = t('bookmarklet.heading')
     .content
-      %p
-        = t('aspects.index.help.contact_podmin')
-      %p
-        = link_to t('aspects.index.help.mail_podmin'), "mailto:#{AppConfig.admins.podmin_email}", :class => "button"
+      != t('bookmarklet.explanation', :link => link_to(t('bookmarklet.post_something'), bookmarklet_code))
 
-.section
-  .title
-  .content
-    %ul
-      = render "shared/links"
+  - if AppConfig.settings.paypal_donations.enable? || AppConfig.bitcoin_donation_address
+    .section
+      .title
+        %h5.title-header
+          = t('aspects.index.donate')
+      .content
+        %p
+          = t('aspects.index.keep_pod_running', :pod => AppConfig.pod_uri.host)
+        = render 'shared/donatepod'
+
+  - if AppConfig.admins.podmin_email.present?
+    .section
+      .title
+        %h5.title-header
+          = t('aspects.index.help.any_problem')
+      .content
+        %p
+          = t('aspects.index.help.contact_podmin')
+        %p
+          = link_to t('aspects.index.help.mail_podmin'), "mailto:#{AppConfig.admins.podmin_email}", :class => "button"
+
+  .section
+    .title
+    .content
+      %ul
+        = render "shared/links"
 

From c38da4c78763f59d750180e6b8b1d0cbadac96b0 Mon Sep 17 00:00:00 2001
From: Pablo Cuadrado <pablocuadrado@gmail.com>
Date: Mon, 22 Jun 2015 20:35:12 -0300
Subject: [PATCH 04/11] controlling right sidebar behaviour on large screens

---
 app/assets/stylesheets/colors.scss      |  1 +
 app/assets/stylesheets/sidebar.scss     | 14 +++++++++++++-
 app/views/streams/main_stream.html.haml |  5 +++--
 3 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/app/assets/stylesheets/colors.scss b/app/assets/stylesheets/colors.scss
index 98120d44a..23026e05a 100644
--- a/app/assets/stylesheets/colors.scss
+++ b/app/assets/stylesheets/colors.scss
@@ -26,6 +26,7 @@ $blue: #3F8FBA;
 $dark-blue: darken(#0984C8,10%);
 
 $right-sidebar-background: #f0f0f0;
+$right-sidebar-sub-background: darken($right-sidebar-background, 12%);
 
 /* colors : http://www.colourlovers.com/palette/2134203/Awezome_in_argyle */
 $cyan : rgb(8,204,249);
diff --git a/app/assets/stylesheets/sidebar.scss b/app/assets/stylesheets/sidebar.scss
index 27d3b0675..16f0ac3b4 100644
--- a/app/assets/stylesheets/sidebar.scss
+++ b/app/assets/stylesheets/sidebar.scss
@@ -4,8 +4,14 @@
   position: fixed;
   right: 0;
 }
+#right-sidebar-fixed-sub-background {
+  height: 100%;
+  background: $right-sidebar-sub-background;
+  position: fixed;
+  right: 0;
+}
 .right-sidebar-padder {
-  max-width: 300px;
+  max-width: 400px;
 }
 .rightBar {
   padding-top: 20px;
@@ -78,3 +84,9 @@
     }
   }
 }
+
+@media screen and (min-width: 1200px) {
+  #right-sidebar-fixed-background {
+    margin-right: 8.33333%; /* Only for LARGE screens, same as lg-offset-1 class, BS3 does not provide right side offsetting */
+  }
+}
diff --git a/app/views/streams/main_stream.html.haml b/app/views/streams/main_stream.html.haml
index 466876b9b..498b525d7 100644
--- a/app/views/streams/main_stream.html.haml
+++ b/app/views/streams/main_stream.html.haml
@@ -21,7 +21,8 @@
             = link_to '&times;'.html_safe, getting_started_completed_path, id: "gs-skip-x", class: "close"
 
 %div.container-fluid
-  #right-sidebar-fixed-background.col-md-3.hidden-sm.hidden-xs
+  #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
     .col-md-offset-1.col-md-2#leftNavBar
       #home_user_badge
@@ -45,7 +46,7 @@
       #aspect_stream_container.stream_container
         = render 'aspects/aspect_stream', stream: @stream
 
-    .col-md-3.rightBar
+    .col-md-3.col-lg-2.rightBar
       #selected_aspect_contacts.section
         .title
           %h5.stream_title

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 05/11] 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

From b34f0e792f76506c6b9e23a1be2d15f578ad4d11 Mon Sep 17 00:00:00 2001
From: Pablo Cuadrado <pablocuadrado@gmail.com>
Date: Wed, 17 Jun 2015 07:28:48 -0300
Subject: [PATCH 06/11] followed tags selected state was missing

---
 app/assets/stylesheets/leftnavbar.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/assets/stylesheets/leftnavbar.scss b/app/assets/stylesheets/leftnavbar.scss
index 3630e8f15..5f6bff168 100644
--- a/app/assets/stylesheets/leftnavbar.scss
+++ b/app/assets/stylesheets/leftnavbar.scss
@@ -34,7 +34,7 @@
     }
   }
 
-  .all_aspects a.hoverable.selected {
+  .all_aspects a.hoverable.selected, .followed_tags_sidebar a.hoverable.selected {
     color: white;
     background: #666;
   }

From b787db13ba654999f74e6afd108de8600de35de9 Mon Sep 17 00:00:00 2001
From: Pablo Cuadrado <pablocuadrado@gmail.com>
Date: Wed, 17 Jun 2015 21:29:11 -0300
Subject: [PATCH 07/11] minor css polishing for the username trying a new set
 of responsive grid rules

---
 app/assets/stylesheets/leftnavbar.scss  | 15 +++++++++------
 app/views/streams/main_stream.html.haml |  4 ++--
 2 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/app/assets/stylesheets/leftnavbar.scss b/app/assets/stylesheets/leftnavbar.scss
index 5f6bff168..0b0c01330 100644
--- a/app/assets/stylesheets/leftnavbar.scss
+++ b/app/assets/stylesheets/leftnavbar.scss
@@ -58,9 +58,9 @@
   }
 
   #home_user_badge {
-    min-height: 50px;
-    padding-bottom: 20px;
-    padding-left: 4px;
+    min-height: 90px;
+    padding: 20px;
+    margin: 0 -15px;
 
     .avatar {
       float: left;
@@ -69,12 +69,15 @@
     }
 
     h4 {
-      margin-left: 60px;
-      padding-top: 15px;
+      margin: 0 0 0 60px;
       overflow: hidden;
       text-overflow: ellipsis;
+      line-height: 25px;
 
-      a { color: $black; }
+      a { 
+        color: $black; 
+        font-weight: normal;
+      }
     }
   }
 
diff --git a/app/views/streams/main_stream.html.haml b/app/views/streams/main_stream.html.haml
index 6d246d9fe..eeeac4f1c 100644
--- a/app/views/streams/main_stream.html.haml
+++ b/app/views/streams/main_stream.html.haml
@@ -24,8 +24,8 @@
   #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
+    #left-navbar-fixed-background.col-lg-offset-1.col-lg-2.col-md-3.hidden-sm.hidden-xs
+    .col-lg-offset-1.col-lg-2.col-md-3#leftNavBar
       #home_user_badge
         = owner_image_link
         %h4

From 37e3a2749f24f4207715cbc691c3f6dc4ea03b84 Mon Sep 17 00:00:00 2001
From: Pablo Cuadrado <pablocuadrado@gmail.com>
Date: Mon, 22 Jun 2015 19:55:46 -0300
Subject: [PATCH 08/11] - left background to the far left of the screen - large
 screen breakpoints from BS3 - hover color is the same of link color (variable
 $blue)

---
 app/assets/stylesheets/leftnavbar.scss  |  6 +++---
 app/assets/templates/aspect_tpl.jst.hbs | 16 ++++++++++------
 app/views/streams/main_stream.html.haml |  2 +-
 3 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/app/assets/stylesheets/leftnavbar.scss b/app/assets/stylesheets/leftnavbar.scss
index 0b0c01330..e96a93ae6 100644
--- a/app/assets/stylesheets/leftnavbar.scss
+++ b/app/assets/stylesheets/leftnavbar.scss
@@ -45,9 +45,9 @@
     font-weight: normal;
     color: $link-grey;
     border-bottom: 1px solid #ddd;
-    &:hover { 
-      background-color: $background-blue;
-      color: $black;
+    &:hover, &:hover .entypo.check, &:hover + .action .entypo { 
+      background-color: $blue;
+      color: $white;
     }
   }
 
diff --git a/app/assets/templates/aspect_tpl.jst.hbs b/app/assets/templates/aspect_tpl.jst.hbs
index 07e4209ad..fae49f3b7 100644
--- a/app/assets/templates/aspect_tpl.jst.hbs
+++ b/app/assets/templates/aspect_tpl.jst.hbs
@@ -1,9 +1,13 @@
+<a href="/aspects/query" class="selectable" data-guid="{{id}}"> 
+	{{#if selected}}
+	  <i class="entypo check selected"></i>
+	{{else}}
+	  <div class="entypo check"></div>
+	{{/if}}
+
+	{{name}} 
+
+</a>
 <a href="/contacts?a_id={{id}}" class="action modify_aspect pull-right">
   <i class="entypo-pencil"></i>
 </a>
-{{#if selected}}
-  <i class="entypo-check selected"></i>
-{{else}}
-  <div class="entypo-check"></div>
-{{/if}}
-<a href="/aspects/query" class="selectable" data-guid="{{id}}"> {{name}} </a>
diff --git a/app/views/streams/main_stream.html.haml b/app/views/streams/main_stream.html.haml
index eeeac4f1c..4712a3a61 100644
--- a/app/views/streams/main_stream.html.haml
+++ b/app/views/streams/main_stream.html.haml
@@ -24,7 +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-lg-offset-1.col-lg-2.col-md-3.hidden-sm.hidden-xs
+    #left-navbar-fixed-background.col-md-3.hidden-sm.hidden-xs
     .col-lg-offset-1.col-lg-2.col-md-3#leftNavBar
       #home_user_badge
         = owner_image_link

From bc1b6bd44d80f1b5e2c03b22544467f9975d55a9 Mon Sep 17 00:00:00 2001
From: Pablo Cuadrado <pablocuadrado@gmail.com>
Date: Mon, 22 Jun 2015 20:12:53 -0300
Subject: [PATCH 09/11] polishing the sidebar on large (lg on BS3) screens

---
 app/assets/stylesheets/colors.scss      | 3 ++-
 app/assets/stylesheets/leftnavbar.scss  | 6 ++++++
 app/views/streams/main_stream.html.haml | 3 ++-
 3 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/app/assets/stylesheets/colors.scss b/app/assets/stylesheets/colors.scss
index 83f416c3b..a202c4d8f 100644
--- a/app/assets/stylesheets/colors.scss
+++ b/app/assets/stylesheets/colors.scss
@@ -38,4 +38,5 @@ $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
+$left-navbar-drawer-background: darken($left-navbar-background, 6%);
+$left-navbar-sub-background: darken($left-navbar-background, 12%); /* Only visible in large screens (BS3: visible-lg) */
\ No newline at end of file
diff --git a/app/assets/stylesheets/leftnavbar.scss b/app/assets/stylesheets/leftnavbar.scss
index e96a93ae6..7d570d549 100644
--- a/app/assets/stylesheets/leftnavbar.scss
+++ b/app/assets/stylesheets/leftnavbar.scss
@@ -1,4 +1,10 @@
 /* Fixed backgrounds are a common practice to avoid height issues */
+#left-navbar-fixed-sub-background {
+  background: $left-navbar-sub-background;
+  position: fixed;
+  height: 100%;
+}
+
 #left-navbar-fixed-background {
   background: $left-navbar-background;
   position: fixed;
diff --git a/app/views/streams/main_stream.html.haml b/app/views/streams/main_stream.html.haml
index 4712a3a61..07e52296f 100644
--- a/app/views/streams/main_stream.html.haml
+++ b/app/views/streams/main_stream.html.haml
@@ -24,7 +24,8 @@
   #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-3.hidden-sm.hidden-xs
+    #left-navbar-fixed-sub-background.col-lg-1.visible-lg
+    #left-navbar-fixed-background.col-lg-offset-1.col-lg-2.col-md-3.hidden-sm.hidden-xs
     .col-lg-offset-1.col-lg-2.col-md-3#leftNavBar
       #home_user_badge
         = owner_image_link

From 281d1a9161140d031ef7a23f24dc37e085f02ffd Mon Sep 17 00:00:00 2001
From: augier <christophe@c-henry.fr>
Date: Sun, 9 Aug 2015 14:39:23 +0200
Subject: [PATCH 10/11] Rebasing and fixing tests

---
 .../javascripts/app/views/aspect_view.js      |   2 +-
 app/assets/javascripts/app/views/sidebar.js   |   2 +-
 .../app/views/tag_following_view.js           |   4 +-
 .../color_themes/_color_theme_override.scss   |   2 +-
 app/assets/stylesheets/leftnavbar.scss        | 108 +++++-------------
 app/assets/stylesheets/rtl.scss               |   2 +-
 app/assets/stylesheets/sidebar.scss           |   2 +-
 app/assets/templates/aspect_tpl.jst.hbs       |  10 +-
 .../templates/tag_following_tpl.jst.hbs       |   4 +-
 app/views/streams/main_stream.html.haml       |   6 +-
 features/step_definitions/tag_steps.rb        |   2 +-
 .../javascripts/app/views/aspect_view_spec.js |   2 +-
 .../app/views/aspects_list_view_spec.js       |   4 +-
 13 files changed, 48 insertions(+), 102 deletions(-)

diff --git a/app/assets/javascripts/app/views/aspect_view.js b/app/assets/javascripts/app/views/aspect_view.js
index ef6a8c205..69367a6eb 100644
--- a/app/assets/javascripts/app/views/aspect_view.js
+++ b/app/assets/javascripts/app/views/aspect_view.js
@@ -8,7 +8,7 @@ app.views.Aspect = app.views.Base.extend({
   className: 'hoverable',
 
   events: {
-    "click .entypo-check+a": "toggleAspect"
+    "click .aspect-item": "toggleAspect"
   },
 
   toggleAspect: function(evt) {
diff --git a/app/assets/javascripts/app/views/sidebar.js b/app/assets/javascripts/app/views/sidebar.js
index d73dbf100..9a9f7d49e 100644
--- a/app/assets/javascripts/app/views/sidebar.js
+++ b/app/assets/javascripts/app/views/sidebar.js
@@ -1,7 +1,7 @@
 // @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-v3-or-Later
 
 app.views.Sidebar = app.views.Base.extend({
-  el: '.rightBar',
+  el: '.rightbar',
 
   events: {
     'click input#invite_code': 'selectInputText'
diff --git a/app/assets/javascripts/app/views/tag_following_view.js b/app/assets/javascripts/app/views/tag_following_view.js
index 838fd896d..ef6d08e5d 100644
--- a/app/assets/javascripts/app/views/tag_following_view.js
+++ b/app/assets/javascripts/app/views/tag_following_view.js
@@ -9,7 +9,7 @@ app.views.TagFollowing = app.views.Base.extend({
   tagName: "li",
 
   events : {
-    "click .delete_tag_following": "destroyModel"
+    "click .delete-tag-following": "destroyModel"
   },
 
   initialize : function(){
@@ -31,6 +31,6 @@ app.views.TagFollowing = app.views.Base.extend({
       tag : this.model
     });
   }
-  
+
 });
 // @license-end
diff --git a/app/assets/stylesheets/color_themes/_color_theme_override.scss b/app/assets/stylesheets/color_themes/_color_theme_override.scss
index c9c0385a7..acdde2690 100644
--- a/app/assets/stylesheets/color_themes/_color_theme_override.scss
+++ b/app/assets/stylesheets/color_themes/_color_theme_override.scss
@@ -24,7 +24,7 @@ body {
     }
   }
 
-  #leftNavBar .hoverable:hover { background-color: $main-color-essence; }
+  #left-navbar .hoverable:hover { background-color: $main-color-essence; }
 
   .poll_form .progress .bar { background-color: $main-color-dark; }
 
diff --git a/app/assets/stylesheets/leftnavbar.scss b/app/assets/stylesheets/leftnavbar.scss
index 7d570d549..548405ce6 100644
--- a/app/assets/stylesheets/leftnavbar.scss
+++ b/app/assets/stylesheets/leftnavbar.scss
@@ -11,7 +11,7 @@
   height: 100%;
 }
 
-#leftNavBar {
+#left-navbar {
   background: $left-navbar-background;
   a {
     color: $link-grey;
@@ -21,46 +21,54 @@
   }
 
   ul {
-    margin: 0px;
-    padding: 0px;
+    margin: 0;
+    padding: 0;
     list-style: none;
     &#stream_selection {
       margin: 0px -15px; /* -15px overrides Bootstrap's default gutter width */
     }
   }
 
-  .selected { color: $black; }
-  .selected a { color: $black; }
+  .selected, .selected a { color: $black; }
 
   .hoverable {
     display: block;
-    &.selected a, &.selected a:hover {
+    &.selected a, &.selected a:hover,
+    .followed-tags-sidebar a.hoverable.selected {
       color: white;
       background: #666;
     }
   }
 
-  .all_aspects a.hoverable.selected, .followed_tags_sidebar a.hoverable.selected {
-    color: white;
-    background: #666;
-  }
-
-  .hoverable a, .all_aspects a.hoverable, .followed_tags_sidebar a.hoverable {
+  a.hoverable, li.hoverable {
     padding: 10px 20px;
     display: block;
     font-weight: normal;
     color: $link-grey;
     border-bottom: 1px solid #ddd;
-    &:hover, &:hover .entypo.check, &:hover + .action .entypo { 
+    &:hover, &:hover a,
+    &:hover .entypo-check{
       background-color: $blue;
       color: $white;
     }
+    &:not(:hover) [class^="entypo"] { visibility: hidden; }
+    .entypo-check.selected { visibility: visible; }
   }
 
-  .selectable {
-    display: block;
-    overflow: hidden;
-    text-overflow: ellipsis;
+  #aspects_list, #tags_list {
+    background: $left-navbar-drawer-background;
+    li { padding: 0; }
+    .selectable {
+      display: block;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      padding: 10px 20px 10px 40px;
+    }
+    .action.modify_aspect, .action.delete-tag-following {
+      position: relative;
+      bottom: 30px;
+      right: 20px;
+    }
   }
 
   #home_user_badge {
@@ -80,76 +88,14 @@
       text-overflow: ellipsis;
       line-height: 25px;
 
-      a { 
-        color: $black; 
+      a {
+        color: $black;
         font-weight: normal;
       }
     }
   }
 
-  #aspects_list {
-    .hoverable {
-      position: relative;
-    }
-    .selectable {
-      padding-left: 40px;
-    }
-  }
-
-  #aspects_list, #tags_list {
-    background: $left-navbar-drawer-background;
-    .hoverable > .action {
-      visibility: hidden;
-      margin: 0;
-      position: absolute;
-      right: 0;
-      top: 0;
-      z-index: 200;
-      padding: 10px 15px;
-      border: none;
-    }
-    .hoverable:hover > .action {
-      visibility: visible;
-      background: none;
-    }
-  }
-
-  #aspects_list {
-    .selectable {
-      padding-right: 40px;
-    }
-    .entypo.check {
-      visibility: hidden;
-      margin: 0;
-      position: absolute;
-      left: 20px;
-      top: 10px;
-      z-index: 200;
-      &.selected { 
-        visibility: visible; 
-      }
-    }
-    .selected + a {
-      color: #333333;
-    }
-  }
-
   #tags_list {
-
-    li {
-      position: relative;
-    }
-
-    .selectable {
-      padding-left: 30px;
-      padding-right: 30px;
-    }
-
-    .delete_tag_following {
-      font-size: 20px;
-      line-height: 15px;
-    }
-
     #new_tag_following {
       padding: 10px 20px 10px 30px;
     }
diff --git a/app/assets/stylesheets/rtl.scss b/app/assets/stylesheets/rtl.scss
index dc1e6c5e0..b54d18fe6 100644
--- a/app/assets/stylesheets/rtl.scss
+++ b/app/assets/stylesheets/rtl.scss
@@ -59,7 +59,7 @@ footer ul#footer_nav {
   right: auto;
 }
 
-.rightBar .right {
+.rightbar .right {
   margin-right: 70px;
 }
 
diff --git a/app/assets/stylesheets/sidebar.scss b/app/assets/stylesheets/sidebar.scss
index 16f0ac3b4..ea146ba3a 100644
--- a/app/assets/stylesheets/sidebar.scss
+++ b/app/assets/stylesheets/sidebar.scss
@@ -13,7 +13,7 @@
 .right-sidebar-padder {
   max-width: 400px;
 }
-.rightBar {
+.rightbar {
   padding-top: 20px;
   background: $right-sidebar-background;
 
diff --git a/app/assets/templates/aspect_tpl.jst.hbs b/app/assets/templates/aspect_tpl.jst.hbs
index fae49f3b7..38c23ec22 100644
--- a/app/assets/templates/aspect_tpl.jst.hbs
+++ b/app/assets/templates/aspect_tpl.jst.hbs
@@ -1,12 +1,10 @@
-<a href="/aspects/query" class="selectable" data-guid="{{id}}"> 
+<a href="/aspects/query" class="selectable aspect-item" data-guid="{{id}}">
 	{{#if selected}}
-	  <i class="entypo check selected"></i>
+	  <i class="entypo-check selected"></i>
 	{{else}}
-	  <div class="entypo check"></div>
+	  <div class="entypo-check"></div>
 	{{/if}}
-
-	{{name}} 
-
+	{{name}}
 </a>
 <a href="/contacts?a_id={{id}}" class="action modify_aspect pull-right">
   <i class="entypo-pencil"></i>
diff --git a/app/assets/templates/tag_following_tpl.jst.hbs b/app/assets/templates/tag_following_tpl.jst.hbs
index 61b564c9d..5733c7273 100644
--- a/app/assets/templates/tag_following_tpl.jst.hbs
+++ b/app/assets/templates/tag_following_tpl.jst.hbs
@@ -1,4 +1,6 @@
-<a href="#" id="unfollow_{{name}}" rel="nofollow" class="action delete_tag_following pull-right" title="{{t "delete"}}">&times;</a>
 <a href="/tags/{{name}}" class="selectable">
   #{{ name }}
 </a>
+<a href="#" id="unfollow_{{name}}" rel="nofollow" class="action delete-tag-following pull-right" title="{{t "delete"}}">
+  <i class="entypo-cross"></i>
+</a>
diff --git a/app/views/streams/main_stream.html.haml b/app/views/streams/main_stream.html.haml
index 07e52296f..ca71ebab8 100644
--- a/app/views/streams/main_stream.html.haml
+++ b/app/views/streams/main_stream.html.haml
@@ -26,7 +26,7 @@
   .row
     #left-navbar-fixed-sub-background.col-lg-1.visible-lg
     #left-navbar-fixed-background.col-lg-offset-1.col-lg-2.col-md-3.hidden-sm.hidden-xs
-    .col-lg-offset-1.col-lg-2.col-md-3#leftNavBar
+    #left-navbar.col-lg-offset-1.col-lg-2.col-md-3
       #home_user_badge
         = owner_image_link
         %h4
@@ -41,14 +41,14 @@
           = link_to t("streams.mentions.title"), mentioned_stream_path, rel: "backbone", class: "hoverable"
         %li.all_aspects
           = render "aspects/aspect_listings", stream: @stream
-        %li.followed_tags_sidebar
+        %li.followed-tags-sidebar
           = render "tags/followed_tags_listings"
 
     .col-md-6
       #aspect_stream_container.stream_container
         = render 'aspects/aspect_stream', stream: @stream
 
-    .col-md-3.col-lg-2.rightBar
+    .col-md-3.col-lg-2.hidden-xs.hidden-sm.rightbar
       #selected_aspect_contacts.section
         .title
           %h5.stream_title
diff --git a/features/step_definitions/tag_steps.rb b/features/step_definitions/tag_steps.rb
index c1a6bc46c..ce8916fcb 100644
--- a/features/step_definitions/tag_steps.rb
+++ b/features/step_definitions/tag_steps.rb
@@ -2,7 +2,7 @@ When(/^I unfollow the "(.*?)" tag$/) do |tag|
   within("#tags_list") do
     li = find('li', text: tag)
     li.hover
-    li.find('.delete_tag_following').click
+    li.find('.delete-tag-following').click
   end
   step 'I confirm the alert'
 end
diff --git a/spec/javascripts/app/views/aspect_view_spec.js b/spec/javascripts/app/views/aspect_view_spec.js
index 254a89ab5..09f6eb7bd 100644
--- a/spec/javascripts/app/views/aspect_view_spec.js
+++ b/spec/javascripts/app/views/aspect_view_spec.js
@@ -10,7 +10,7 @@ describe("app.views.Aspect", function(){
     });
 
     it("should show the aspect selected", function(){
-      expect(this.view.$el.children(".entypo-check").hasClass("selected")).toBeTruthy();
+      expect(this.view.$el.find(".entypo-check").hasClass("selected")).toBeTruthy();
     });
 
     it('should show the name of the aspect', function(){
diff --git a/spec/javascripts/app/views/aspects_list_view_spec.js b/spec/javascripts/app/views/aspects_list_view_spec.js
index 0e2715da2..d7228ea83 100644
--- a/spec/javascripts/app/views/aspects_list_view_spec.js
+++ b/spec/javascripts/app/views/aspects_list_view_spec.js
@@ -20,11 +20,11 @@ describe("app.views.AspectsList", function(){
 
     it('should show the corresponding aspects selected', function(){
       expect(this.view.$('.selected').length).toBe(1);
-      expect(this.view.$('.selected + a.selectable').text()).toMatch('Work');
+      expect(this.view.$('.selected').parent().text()).toMatch('Work');
     });
 
     it("should show all the aspects", function(){
-      var aspectSelectors = this.view.$(".entypo-check + a.selectable");
+      var aspectSelectors = this.view.$(".entypo-check").parent();
       expect(aspectSelectors.length).toBe(3);
       expect(aspectSelectors[0].text).toMatch("Work");
       expect(aspectSelectors[1].text).toMatch("Friends");

From 450bf4f4ba085ac8f197d927af4fee0bc4f530f0 Mon Sep 17 00:00:00 2001
From: augier <christophe@c-henry.fr>
Date: Fri, 14 Aug 2015 18:40:09 +0200
Subject: [PATCH 11/11] Refactor and minor styling

---
 app/assets/javascripts/app/views/aspects_list_view.js    | 2 +-
 app/assets/javascripts/app/views/sidebar.js              | 4 ++--
 app/assets/stylesheets/_application.scss                 | 4 ++--
 app/assets/stylesheets/colors.scss                       | 9 +++------
 .../stylesheets/{leftnavbar.scss => navbar_left.scss}    | 8 +++++---
 .../stylesheets/{sidebar.scss => navbar_right.scss}      | 9 ++++++---
 app/assets/templates/aspects-list_tpl.jst.hbs            | 2 +-
 app/views/streams/main_stream.html.haml                  | 4 ++--
 features/step_definitions/aspects_steps.rb               | 8 ++++----
 features/step_definitions/tag_steps.rb                   | 6 +++---
 spec/javascripts/app/views/aspects_list_view_spec.js     | 6 +++---
 11 files changed, 32 insertions(+), 30 deletions(-)
 rename app/assets/stylesheets/{leftnavbar.scss => navbar_left.scss} (93%)
 rename app/assets/stylesheets/{sidebar.scss => navbar_right.scss} (90%)

diff --git a/app/assets/javascripts/app/views/aspects_list_view.js b/app/assets/javascripts/app/views/aspects_list_view.js
index d6575e3fb..321132857 100644
--- a/app/assets/javascripts/app/views/aspects_list_view.js
+++ b/app/assets/javascripts/app/views/aspects_list_view.js
@@ -31,7 +31,7 @@ app.views.AspectsList = app.views.Base.extend({
   },
 
   appendAspect: function(aspect) {
-    $("#aspects_list > *:last").before(new app.views.Aspect({
+    $("#aspects_list > .hoverable:last").before(new app.views.Aspect({
       model: aspect, attributes: {'data-aspect_id': aspect.get('id')}
     }).render().el);
   },
diff --git a/app/assets/javascripts/app/views/sidebar.js b/app/assets/javascripts/app/views/sidebar.js
index 9a9f7d49e..446137bb0 100644
--- a/app/assets/javascripts/app/views/sidebar.js
+++ b/app/assets/javascripts/app/views/sidebar.js
@@ -1,10 +1,10 @@
 // @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-v3-or-Later
 
 app.views.Sidebar = app.views.Base.extend({
-  el: '.rightbar',
+  el: ".rightbar",
 
   events: {
-    'click input#invite_code': 'selectInputText'
+    "click input#invite_code": "selectInputText"
   },
 
   selectInputText: function(event) {
diff --git a/app/assets/stylesheets/_application.scss b/app/assets/stylesheets/_application.scss
index a0b6d7d0c..41c4766db 100644
--- a/app/assets/stylesheets/_application.scss
+++ b/app/assets/stylesheets/_application.scss
@@ -80,11 +80,11 @@
 @import 'post-content';
 
 /* right bar */
-@import 'sidebar';
+@import 'navbar_right';
 
 /* contacts */
 @import 'contacts';
-@import 'leftnavbar';
+@import 'navbar_left';
 
 /* code */
 @import 'new_styles/code';
diff --git a/app/assets/stylesheets/colors.scss b/app/assets/stylesheets/colors.scss
index a202c4d8f..b36b09f6b 100644
--- a/app/assets/stylesheets/colors.scss
+++ b/app/assets/stylesheets/colors.scss
@@ -25,8 +25,9 @@ $red: #A80000;
 $blue: #3F8FBA;
 $dark-blue: darken(#0984C8,10%);
 
-$right-sidebar-background: #f0f0f0;
-$right-sidebar-sub-background: darken($right-sidebar-background, 12%);
+$sidebars-background: #f0f0f0;
+$sidebars-sub-background: darken($sidebars-background, 12%);
+$left-navbar-drawer-background: darken($sidebars-background, 6%);
 
 /* colors : http://www.colourlovers.com/palette/2134203/Awezome_in_argyle */
 $cyan : rgb(8,204,249);
@@ -36,7 +37,3 @@ $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%);
-$left-navbar-sub-background: darken($left-navbar-background, 12%); /* Only visible in large screens (BS3: visible-lg) */
\ No newline at end of file
diff --git a/app/assets/stylesheets/leftnavbar.scss b/app/assets/stylesheets/navbar_left.scss
similarity index 93%
rename from app/assets/stylesheets/leftnavbar.scss
rename to app/assets/stylesheets/navbar_left.scss
index 548405ce6..282136518 100644
--- a/app/assets/stylesheets/leftnavbar.scss
+++ b/app/assets/stylesheets/navbar_left.scss
@@ -1,18 +1,20 @@
 /* Fixed backgrounds are a common practice to avoid height issues */
 #left-navbar-fixed-sub-background {
-  background: $left-navbar-sub-background;
+  background: $sidebars-sub-background;
   position: fixed;
   height: 100%;
 }
 
 #left-navbar-fixed-background {
-  background: $left-navbar-background;
+  background: $sidebars-background;
+  border-right: 1px solid $light-grey;
   position: fixed;
   height: 100%;
 }
 
 #left-navbar {
-  background: $left-navbar-background;
+  background: $sidebars-background;
+  border-right: 1px solid $light-grey;
   a {
     color: $link-grey;
     font-weight: bold;
diff --git a/app/assets/stylesheets/sidebar.scss b/app/assets/stylesheets/navbar_right.scss
similarity index 90%
rename from app/assets/stylesheets/sidebar.scss
rename to app/assets/stylesheets/navbar_right.scss
index ea146ba3a..4a75bd450 100644
--- a/app/assets/stylesheets/sidebar.scss
+++ b/app/assets/stylesheets/navbar_right.scss
@@ -1,21 +1,24 @@
 #right-sidebar-fixed-background {
   height: 100%;
-  background: $right-sidebar-background;
+  border-left: 1px solid $light-grey;
+  background: $sidebars-background;
   position: fixed;
   right: 0;
 }
 #right-sidebar-fixed-sub-background {
   height: 100%;
-  background: $right-sidebar-sub-background;
+  background: $sidebars-sub-background;
   position: fixed;
   right: 0;
 }
+
 .right-sidebar-padder {
   max-width: 400px;
 }
 .rightbar {
   padding-top: 20px;
-  background: $right-sidebar-background;
+  border-left: 1px solid $light-grey;
+  background: $sidebars-background;
 
   .section {
     margin-bottom: 20px;
diff --git a/app/assets/templates/aspects-list_tpl.jst.hbs b/app/assets/templates/aspects-list_tpl.jst.hbs
index 9883ad5b3..63c34834d 100644
--- a/app/assets/templates/aspects-list_tpl.jst.hbs
+++ b/app/assets/templates/aspects-list_tpl.jst.hbs
@@ -7,5 +7,5 @@
   <a href="#" class="selectable new_aspect" data-toggle="modal" data-target="#newAspectModal">
     {{ t "aspect_navigation.add_an_aspect" }}
   </a>
-  <div id="newAspectContainer"></div>
 </li>
+<div id="newAspectContainer"></div>
diff --git a/app/views/streams/main_stream.html.haml b/app/views/streams/main_stream.html.haml
index ca71ebab8..6c9479bd2 100644
--- a/app/views/streams/main_stream.html.haml
+++ b/app/views/streams/main_stream.html.haml
@@ -21,8 +21,6 @@
             = link_to '&times;'.html_safe, getting_started_completed_path, id: "gs-skip-x", class: "close"
 
 %div.container-fluid
-  #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-sub-background.col-lg-1.visible-lg
     #left-navbar-fixed-background.col-lg-offset-1.col-lg-2.col-md-3.hidden-sm.hidden-xs
@@ -48,6 +46,8 @@
       #aspect_stream_container.stream_container
         = render 'aspects/aspect_stream', stream: @stream
 
+    #right-sidebar-fixed-sub-background.col-lg-3.visible-lg
+    #right-sidebar-fixed-background.col-md-3.col-lg-2.hidden-sm.hidden-xs
     .col-md-3.col-lg-2.hidden-xs.hidden-sm.rightbar
       #selected_aspect_contacts.section
         .title
diff --git a/features/step_definitions/aspects_steps.rb b/features/step_definitions/aspects_steps.rb
index b29946ece..4bc883209 100644
--- a/features/step_definitions/aspects_steps.rb
+++ b/features/step_definitions/aspects_steps.rb
@@ -42,10 +42,10 @@ When /^I click on "([^"]*)" aspect edit icon$/ do |aspect_name|
 end
 
 When /^I select only "([^"]*)" aspect$/ do |aspect_name|
-  click_link 'My aspects'
-  within('#aspects_list') do
-    click_link 'Deselect all'
-    current_scope.should have_no_css '.selected'
+  click_link "My aspects"
+  within("#aspects_list") do
+    all(".selected").each {|node| node.find(:xpath, "..").click }
+    expect(current_scope).to have_no_css ".selected"
   end
   step %Q(I select "#{aspect_name}" aspect as well)
 end
diff --git a/features/step_definitions/tag_steps.rb b/features/step_definitions/tag_steps.rb
index ce8916fcb..2f4cf160d 100644
--- a/features/step_definitions/tag_steps.rb
+++ b/features/step_definitions/tag_steps.rb
@@ -1,8 +1,8 @@
 When(/^I unfollow the "(.*?)" tag$/) do |tag|
   within("#tags_list") do
-    li = find('li', text: tag)
+    li = find("li", text: tag)
     li.hover
-    li.find('.delete-tag-following').click
+    li.find(".delete-tag-following").click
   end
-  step 'I confirm the alert'
+  step "I confirm the alert"
 end
diff --git a/spec/javascripts/app/views/aspects_list_view_spec.js b/spec/javascripts/app/views/aspects_list_view_spec.js
index d7228ea83..25e87b0ec 100644
--- a/spec/javascripts/app/views/aspects_list_view_spec.js
+++ b/spec/javascripts/app/views/aspects_list_view_spec.js
@@ -18,9 +18,9 @@ describe("app.views.AspectsList", function(){
       this.view.render();
     });
 
-    it('should show the corresponding aspects selected', function(){
-      expect(this.view.$('.selected').length).toBe(1);
-      expect(this.view.$('.selected').parent().text()).toMatch('Work');
+    it("should show the corresponding aspects selected", function(){
+      expect(this.view.$(".selected").length).toBe(1);
+      expect(this.view.$(".selected").parent().text()).toMatch("Work");
     });
 
     it("should show all the aspects", function(){