From 5f446330e22112b5d99529833da596dabeda9ba1 Mon Sep 17 00:00:00 2001
From: fla <flaburgan@geexxx.fr>
Date: Sun, 20 Sep 2015 23:51:12 +0200
Subject: [PATCH] collapse the sidebars to the side of the screen even on big
 screens

Drop right side bar, move content to left side bar

Move user avatar and name from the left nav bar to the left of the publisher
---
 .gitignore                                    |   2 +-
 .../Readme.txt                                |   0
 .../facebook-16x16.png                        | Bin
 .../facebook-24x24.png                        | Bin
 .../facebook-32x32.png                        | Bin
 .../tumblr-16x16.png                          | Bin
 .../tumblr-24x24.png                          | Bin
 .../tumblr-32x32.png                          | Bin
 .../twitter-16x16.png                         | Bin
 .../twitter-24x24.png                         | Bin
 .../twitter-32x32.png                         | Bin
 .../wordpress-16x16.png                       | Bin
 .../wordpress-24x24.png                       | Bin
 .../wordpress-32x32.png                       | Bin
 app/assets/javascripts/app/app.js             |   4 +-
 .../app/views/aspects_list_view.js            |   2 +-
 app/assets/stylesheets/_application.scss      |   3 -
 app/assets/stylesheets/navbar_left.scss       | 103 ++++++++++----
 app/assets/stylesheets/navbar_right.scss      |  90 ------------
 app/assets/stylesheets/publisher.scss         |   3 +-
 app/assets/stylesheets/sprites.scss           |   4 +-
 app/assets/stylesheets/stream.scss            |  20 ++-
 app/helpers/publisher_helper.rb               |   2 +-
 app/views/aspects/_aspect_stream.haml         |   8 +-
 app/views/publisher/_publisher.mobile.haml    |   4 +-
 app/views/shared/_right_sections.html.haml    |  94 -------------
 app/views/streams/main_stream.html.haml       | 130 +++++++++++++++---
 features/desktop/keyboard_navigation.feature  |   2 +-
 28 files changed, 229 insertions(+), 242 deletions(-)
 rename app/assets/images/{social_media_logos => social-media-logos}/Readme.txt (100%)
 rename app/assets/images/{social_media_logos => social-media-logos}/facebook-16x16.png (100%)
 rename app/assets/images/{social_media_logos => social-media-logos}/facebook-24x24.png (100%)
 rename app/assets/images/{social_media_logos => social-media-logos}/facebook-32x32.png (100%)
 rename app/assets/images/{social_media_logos => social-media-logos}/tumblr-16x16.png (100%)
 rename app/assets/images/{social_media_logos => social-media-logos}/tumblr-24x24.png (100%)
 rename app/assets/images/{social_media_logos => social-media-logos}/tumblr-32x32.png (100%)
 rename app/assets/images/{social_media_logos => social-media-logos}/twitter-16x16.png (100%)
 rename app/assets/images/{social_media_logos => social-media-logos}/twitter-24x24.png (100%)
 rename app/assets/images/{social_media_logos => social-media-logos}/twitter-32x32.png (100%)
 rename app/assets/images/{social_media_logos => social-media-logos}/wordpress-16x16.png (100%)
 rename app/assets/images/{social_media_logos => social-media-logos}/wordpress-24x24.png (100%)
 rename app/assets/images/{social_media_logos => social-media-logos}/wordpress-32x32.png (100%)
 delete mode 100644 app/assets/stylesheets/navbar_right.scss
 delete mode 100644 app/views/shared/_right_sections.html.haml

diff --git a/.gitignore b/.gitignore
index 3fc25bd96d..82a9adb9ad 100644
--- a/.gitignore
+++ b/.gitignore
@@ -42,7 +42,7 @@ public/500.html
 app/assets/images/branding-*.png
 app/assets/images/branding/logos-*.png
 app/assets/images/icons-*.png
-app/assets/images/social_media_logos-*.png
+app/assets/images/social-media-logos-*.png
 
 # Documentation
 .yardoc/
diff --git a/app/assets/images/social_media_logos/Readme.txt b/app/assets/images/social-media-logos/Readme.txt
similarity index 100%
rename from app/assets/images/social_media_logos/Readme.txt
rename to app/assets/images/social-media-logos/Readme.txt
diff --git a/app/assets/images/social_media_logos/facebook-16x16.png b/app/assets/images/social-media-logos/facebook-16x16.png
similarity index 100%
rename from app/assets/images/social_media_logos/facebook-16x16.png
rename to app/assets/images/social-media-logos/facebook-16x16.png
diff --git a/app/assets/images/social_media_logos/facebook-24x24.png b/app/assets/images/social-media-logos/facebook-24x24.png
similarity index 100%
rename from app/assets/images/social_media_logos/facebook-24x24.png
rename to app/assets/images/social-media-logos/facebook-24x24.png
diff --git a/app/assets/images/social_media_logos/facebook-32x32.png b/app/assets/images/social-media-logos/facebook-32x32.png
similarity index 100%
rename from app/assets/images/social_media_logos/facebook-32x32.png
rename to app/assets/images/social-media-logos/facebook-32x32.png
diff --git a/app/assets/images/social_media_logos/tumblr-16x16.png b/app/assets/images/social-media-logos/tumblr-16x16.png
similarity index 100%
rename from app/assets/images/social_media_logos/tumblr-16x16.png
rename to app/assets/images/social-media-logos/tumblr-16x16.png
diff --git a/app/assets/images/social_media_logos/tumblr-24x24.png b/app/assets/images/social-media-logos/tumblr-24x24.png
similarity index 100%
rename from app/assets/images/social_media_logos/tumblr-24x24.png
rename to app/assets/images/social-media-logos/tumblr-24x24.png
diff --git a/app/assets/images/social_media_logos/tumblr-32x32.png b/app/assets/images/social-media-logos/tumblr-32x32.png
similarity index 100%
rename from app/assets/images/social_media_logos/tumblr-32x32.png
rename to app/assets/images/social-media-logos/tumblr-32x32.png
diff --git a/app/assets/images/social_media_logos/twitter-16x16.png b/app/assets/images/social-media-logos/twitter-16x16.png
similarity index 100%
rename from app/assets/images/social_media_logos/twitter-16x16.png
rename to app/assets/images/social-media-logos/twitter-16x16.png
diff --git a/app/assets/images/social_media_logos/twitter-24x24.png b/app/assets/images/social-media-logos/twitter-24x24.png
similarity index 100%
rename from app/assets/images/social_media_logos/twitter-24x24.png
rename to app/assets/images/social-media-logos/twitter-24x24.png
diff --git a/app/assets/images/social_media_logos/twitter-32x32.png b/app/assets/images/social-media-logos/twitter-32x32.png
similarity index 100%
rename from app/assets/images/social_media_logos/twitter-32x32.png
rename to app/assets/images/social-media-logos/twitter-32x32.png
diff --git a/app/assets/images/social_media_logos/wordpress-16x16.png b/app/assets/images/social-media-logos/wordpress-16x16.png
similarity index 100%
rename from app/assets/images/social_media_logos/wordpress-16x16.png
rename to app/assets/images/social-media-logos/wordpress-16x16.png
diff --git a/app/assets/images/social_media_logos/wordpress-24x24.png b/app/assets/images/social-media-logos/wordpress-24x24.png
similarity index 100%
rename from app/assets/images/social_media_logos/wordpress-24x24.png
rename to app/assets/images/social-media-logos/wordpress-24x24.png
diff --git a/app/assets/images/social_media_logos/wordpress-32x32.png b/app/assets/images/social-media-logos/wordpress-32x32.png
similarity index 100%
rename from app/assets/images/social_media_logos/wordpress-32x32.png
rename to app/assets/images/social-media-logos/wordpress-32x32.png
diff --git a/app/assets/javascripts/app/app.js b/app/assets/javascripts/app/app.js
index cd6ebbd684..f1762da847 100644
--- a/app/assets/javascripts/app/app.js
+++ b/app/assets/javascripts/app/app.js
@@ -104,9 +104,9 @@ var app = {
       evt.preventDefault();
       var link = $(this);
       if(link.data("stream-title") && link.data("stream-title").length) {
-        $(".stream_title").text(link.data("stream-title"));
+        $(".stream-title").text(link.data("stream-title"));
       } else {
-        $(".stream_title").text(link.text());
+        $(".stream-title").text(link.text());
       }
 
       $("html, body").animate({scrollTop: 0});
diff --git a/app/assets/javascripts/app/views/aspects_list_view.js b/app/assets/javascripts/app/views/aspects_list_view.js
index 321132857b..0138c20c12 100644
--- a/app/assets/javascripts/app/views/aspects_list_view.js
+++ b/app/assets/javascripts/app/views/aspects_list_view.js
@@ -59,7 +59,7 @@ app.views.AspectsList = app.views.Base.extend({
   },
 
   updateStreamTitle: function() {
-    $('.stream_title').text(this.collection.toSentence());
+    $(".stream-title").text(this.collection.toSentence());
   },
 
   updateAspectList: function() {
diff --git a/app/assets/stylesheets/_application.scss b/app/assets/stylesheets/_application.scss
index f7542f9505..ad90623bff 100644
--- a/app/assets/stylesheets/_application.scss
+++ b/app/assets/stylesheets/_application.scss
@@ -87,9 +87,6 @@
 @import 'oembed';
 @import 'post-content';
 
-/* right bar */
-@import 'navbar_right';
-
 /* contacts */
 @import 'contacts';
 @import 'navbar_left';
diff --git a/app/assets/stylesheets/navbar_left.scss b/app/assets/stylesheets/navbar_left.scss
index 35896974ed..aad0a35dd1 100644
--- a/app/assets/stylesheets/navbar_left.scss
+++ b/app/assets/stylesheets/navbar_left.scss
@@ -40,6 +40,7 @@
 
     &:hover, &:hover a, &:hover [class^="entypo"] {
       background-color: $blue;
+      border-color: $blue;
       color: $white;
     }
   }
@@ -49,9 +50,11 @@
   li.selected > a.hoverable {
     color: $white;
     background: $gray;
+    border-color: $gray;
   }
 
-  #aspects_list, #tags_list {
+  #aspects_list,
+  #tags_list {
     background: $left-navbar-drawer-background;
     li { padding: 0; }
     .entypo-check { visibility: hidden; }
@@ -71,30 +74,6 @@
     .hoverable:hover > .action { visibility: visible; }
   }
 
-  #home_user_badge {
-    min-height: 90px;
-    padding: 20px;
-    margin: 0 -15px;
-
-    .avatar {
-      float: left;
-      height: 50px;
-      width: 50px;
-    }
-
-    h4 {
-      margin: 0 0 0 60px;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      line-height: 25px;
-
-      a {
-        color: $black;
-        font-weight: normal;
-      }
-    }
-  }
-
   #tags_list {
     #new_tag_following {
       padding: 10px 20px 10px 30px;
@@ -135,4 +114,78 @@
     }
     /* ---- end override app/stylesheets/vendor/autoSuggest.css ---- */
   }
+
+  .info-bar {
+    margin-top: 25px;
+
+    .section {
+      margin-bottom: 20px;
+
+      > .title {
+        border-bottom: 1px solid $border-grey;
+        padding-bottom: 5px;
+
+        h5 {
+          color: $text-dark-grey;
+          font-size: $font-size-base;
+          margin: 0;
+        }
+      }
+
+      .content {
+        color: $text-grey;
+        font-size: $font-size-small;
+        line-height: 18px;
+        padding: 10px 0;
+
+        p,
+        ul {
+          margin: 0;
+        }
+
+        ul {
+          margin-bottom: 5px;
+          padding-left: 0;
+          li { list-style: none; }
+        }
+
+        .btn-link {
+          font-size: $font-size-small;
+          padding-left: 0;
+        }
+
+        > #invite_code {
+          box-sizing: border-box;
+          font-size: $font-size-small;
+          height: 30px;
+          width: 100%;
+        }
+
+        > .right-service-icons {
+          padding: 10px {
+            bottom: 0;
+          }
+          text-align: center;
+
+          .social-media-logos-facebook-24x24,
+          .social-media-logos-twitter-24x24,
+          .social-media-logos-tumblr-24x24,
+          .social-media-logos-wordpress-24x24 {
+            height: 24px;
+            width: 24px;
+          }
+
+          a {
+            display: inline-block;
+          }
+        }
+
+        .stream-faces {
+          display: flex;
+          flex-flow: row wrap;
+          img { margin: 1px; }
+        }
+      }
+    }
+  }
 }
diff --git a/app/assets/stylesheets/navbar_right.scss b/app/assets/stylesheets/navbar_right.scss
deleted file mode 100644
index 134123d308..0000000000
--- a/app/assets/stylesheets/navbar_right.scss
+++ /dev/null
@@ -1,90 +0,0 @@
-.right-sidebar-fixed-background {
-  height: 100%;
-  border-left: 1px solid $light-grey;
-  background: $sidebars-background;
-  position: fixed;
-  right: 0;
-}
-.right-sidebar-fixed-sub-background {
-  height: 100%;
-  background: $sidebars-sub-background;
-  position: fixed;
-  right: 0;
-}
-
-.right-sidebar-padder {
-  max-width: 400px;
-}
-.rightbar {
-  padding-top: 20px;
-  border-left: 1px solid $light-grey;
-  background: $sidebars-background;
-
-  .section {
-    margin-bottom: 20px;
-
-    > .title {
-      border-bottom: 1px solid $border-grey;
-      padding-bottom: 5px;
-
-      &.no_icon { padding-left: 8px; }
-
-      h5 {
-        color: $text-dark-grey;
-        font-weight: normal;
-        font-size: $font-size-base;
-        margin: 0;
-      }
-    }
-
-    .content {
-      color: $text-grey;
-      font-size: $font-size-small;
-      line-height: 18px;
-      padding: 10px 0;
-
-      p, ul { margin: 0; }
-
-      ul {
-        margin-bottom: 5px;
-        padding-left: 0;
-        li { list-style: none; }
-      }
-
-      .btn-link {
-        font-size: $font-size-small;
-        padding-left: 0;
-      }
-
-      & > #invite_code {
-        box-sizing: border-box;
-        font-size: $font-size-small;
-        height: 30px;
-        width: 100%;
-      }
-
-      & > #right_service_icons {
-        text-align: center;
-        padding: 10px {
-          bottom: 0;
-        };
-        .social_media_logos-facebook-24x24,
-        .social_media_logos-twitter-24x24,
-        .social_media_logos-tumblr-24x24,
-        .social_media_logos-wordpress-24x24 {
-          height: 24px;
-          width: 24px;
-        }
-        a {
-          display: inline-block;
-        }
-      }
-    }
-  }
-}
-
-@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/assets/stylesheets/publisher.scss b/app/assets/stylesheets/publisher.scss
index 93a7637fd5..242c59fcb6 100644
--- a/app/assets/stylesheets/publisher.scss
+++ b/app/assets/stylesheets/publisher.scss
@@ -2,6 +2,7 @@
   z-index: 1;
   color: $text-grey;
   margin: 0;
+  margin-bottom: 20px;
 
   &.closed {
     #button_container,
@@ -46,7 +47,7 @@
         .service_icon { padding: 6px 5px; }
         .btn.btn-link.question_mark:hover .entypo-cog { color: $black; }
         .dim { opacity: 0.3; }
-        .social_media_logos-wordpress-16x16 {
+        .social-media-logos-wordpress-16x16 {
           display: inline-block;
           height: 16px;
           width: 16px;
diff --git a/app/assets/stylesheets/sprites.scss b/app/assets/stylesheets/sprites.scss
index bef149df97..981e20cc36 100644
--- a/app/assets/stylesheets/sprites.scss
+++ b/app/assets/stylesheets/sprites.scss
@@ -1,5 +1,5 @@
 /* ===== sprites ===== */
 @import 'branding/logos/*.png';
-@import 'social_media_logos/*.png';
+@import 'social-media-logos/*.png';
 @include all-logos-sprites;
-@include all-social_media_logos-sprites;
+@include all-social-media-logos-sprites;
diff --git a/app/assets/stylesheets/stream.scss b/app/assets/stylesheets/stream.scss
index 355ff8e9af..09edd9a61a 100644
--- a/app/assets/stylesheets/stream.scss
+++ b/app/assets/stylesheets/stream.scss
@@ -1,6 +1,22 @@
+body.page-streams, body.page-photos {
+  background-color: $sidebars-sub-background;
+}
+
 .stream_container {
+  .stream-title {
+    margin: 12px 0;
+  }
+}
+
+.main-stream-publisher {
+  padding: 0;
+
+  .avatar {
+    height: 50px;
+    width: 50px;
+  }
+
   #publisher {
-    margin-bottom: 15px;
+    margin-left: 65px;
   }
-  .well#ignore-info { text-align: center; }
 }
diff --git a/app/helpers/publisher_helper.rb b/app/helpers/publisher_helper.rb
index 4afe09c4ab..3935bc52cd 100644
--- a/app/helpers/publisher_helper.rb
+++ b/app/helpers/publisher_helper.rb
@@ -19,7 +19,7 @@ module PublisherHelper
                 maxchar: "#{service.class::MAX_CHARACTERS}",
                 data:    {toggle: "tooltip", placement: "bottom"} do
       if service.provider == "wordpress"
-        content_tag(:span, "", class: "social_media_logos-wordpress-16x16")
+        content_tag(:span, "", class: "social-media-logos-wordpress-16x16")
       else
         content_tag(:i, "", class: "entypo-social-#{ service.provider } small")
       end
diff --git a/app/views/aspects/_aspect_stream.haml b/app/views/aspects/_aspect_stream.haml
index 69999e7013..f26a2dd174 100644
--- a/app/views/aspects/_aspect_stream.haml
+++ b/app/views/aspects/_aspect_stream.haml
@@ -3,10 +3,14 @@
 -#   the COPYRIGHT file.
 
 - if user_signed_in? && @person != current_user.person
-  %h3#aspect_stream_header.stream_title
+  %h3.stream-title
     = stream.title
 
-= render 'publisher/publisher', publisher_aspects_for(stream)
+.container-fluid.main-stream-publisher
+  .pull-left
+    = owner_image_link
+  = render "publisher/publisher", publisher_aspects_for(stream)
+= render "aspects/no_posts_message"
 
 #gs-shim{:title => popover_with_close_html("3. #{t('.stay_updated')}"), 'data-content' => t('.stay_updated_explanation')}
 
diff --git a/app/views/publisher/_publisher.mobile.haml b/app/views/publisher/_publisher.mobile.haml
index 8040a152d8..4399b7c13b 100644
--- a/app/views/publisher/_publisher.mobile.haml
+++ b/app/views/publisher/_publisher.mobile.haml
@@ -11,7 +11,9 @@
     %span#publisher-service-icons
       - if current_user.services
         - for service in current_user.services
-          = image_tag "social_media_logos/#{service.provider}-32x32.png", title: service.provider.titleize, class: "service_icon dim", id:"#{service.provider}", maxchar: "#{service.class::MAX_CHARACTERS}"
+          = image_tag "social-media-logos/#{service.provider}-32x32.png",
+            title: service.provider.titleize, class: "service_icon dim",
+            id: "#{service.provider}", maxchar: "#{service.class::MAX_CHARACTERS}"
 
     %select{id: "aspect_ids_", class: "form-control", name: "aspect_ids[]"}
       %option{value: 'public'}
diff --git a/app/views/shared/_right_sections.html.haml b/app/views/shared/_right_sections.html.haml
deleted file mode 100644
index e8fd5b013d..0000000000
--- a/app/views/shared/_right_sections.html.haml
+++ /dev/null
@@ -1,94 +0,0 @@
--#   Copyright (c) 2010-2011, Diaspora Inc.  This file is
--#   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"
-
-  .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')
-      .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}"
-
-  .section
-    .title
-    .content
-      %ul
-        = render "shared/links"
-
diff --git a/app/views/streams/main_stream.html.haml b/app/views/streams/main_stream.html.haml
index cb3bb5d5fd..539600275c 100644
--- a/app/views/streams/main_stream.html.haml
+++ b/app/views/streams/main_stream.html.haml
@@ -20,16 +20,10 @@
           .pull-right
             = link_to '&times;'.html_safe, getting_started_completed_path, id: "gs-skip-x", class: "close"
 
-%div.container-fluid
+.container-fluid
   .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
-    .left-navbar.col-lg-offset-1.col-lg-2.col-md-3
-      #home_user_badge
-        = owner_image_link
-        %h4
-          = link_to current_user.first_name, local_or_remote_person_path(current_user.person)
-
+    .left-navbar-fixed-background.col-lg-2.col-sm-3.hidden-sm.hidden-xs
+    .left-navbar.col-lg-2.col-sm-3
       %ul#stream_selection
         %li{data: {stream: "stream"}}
           = link_to t("streams.multi.title"), stream_path, rel: "backbone", class: "hoverable"
@@ -44,14 +38,118 @@
         %li{data: {stream: "public"}}
           = link_to t("streams.public.title"), public_stream_path, rel: "backbone", class: "hoverable"
 
-    .col-md-6
-      #aspect_stream_container.stream_container
-        = render 'aspects/aspect_stream', stream: @stream
+      .info-bar.hidden-xs
+        .section#selected_aspect_contacts
+          .title
+            %h5.stream-title
+              = @stream.title
+          .content
+
+        - if AppConfig.settings.invitations.open?
+          .section
+            .title
+              %h5.title-header
+                = t("shared.invitations.invite_your_friends")
+            .content
+              = render "shared/invitations"
+
+        .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")
+            .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}"
+
+        .section
+          .title
+          .content
+            %ul
+              = render "shared/links"
 
-    .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
-      = render 'shared/right_sections'
+    .col-lg-10.col-sm-9
+      .stream_container#aspect_stream_container
+        = render "aspects/aspect_stream", stream: @stream
 
       %a.back-to-top#back-to-top{title: "#{t('layouts.application.back_to_top')}", href: "#"}
         &#8679;
diff --git a/features/desktop/keyboard_navigation.feature b/features/desktop/keyboard_navigation.feature
index aed65c3f65..a5061a3e32 100644
--- a/features/desktop/keyboard_navigation.feature
+++ b/features/desktop/keyboard_navigation.feature
@@ -25,7 +25,7 @@ Feature: Keyboard navigation
   Scenario: navigate downwards after changing the stream
     When I go to the activity stream page
     And I click on selector "[data-stream='stream'] a"
-    Then I should see "Stream" within ".stream_title"
+    Then I should see "Stream" within ".stream-title"
 
     When I press the "J" key somewhere
     Then post 1 should be highlighted
-- 
GitLab