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] 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