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 1/8] 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            |  26 +++-
 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, 232 insertions(+), 245 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 3fc25bd96..82a9adb9a 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 cd6ebbd68..f1762da84 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 321132857..0138c20c1 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 f7542f950..ad90623bf 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 35896974e..aad0a35dd 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 134123d30..000000000
--- 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 93a7637fd..242c59fcb 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 bef149df9..981e20cc3 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 355ff8e9a..09edd9a61 100644
--- a/app/assets/stylesheets/stream.scss
+++ b/app/assets/stylesheets/stream.scss
@@ -1,6 +1,22 @@
-.stream_container {
-  #publisher {
-    margin-bottom: 15px;
-  }
-  .well#ignore-info { text-align: center; }
+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-left: 65px;
+  }
 }
diff --git a/app/helpers/publisher_helper.rb b/app/helpers/publisher_helper.rb
index 4afe09c4a..3935bc52c 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 69999e701..f26a2dd17 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 8040a152d..4399b7c13 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 e8fd5b013..000000000
--- 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 cb3bb5d5f..539600275 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
 
-    .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'
+        - 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"
+
+    .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 aed65c3f6..a5061a3e3 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

From 76f74ebc0becff1f62938e7f31095fd44efd6191 Mon Sep 17 00:00:00 2001
From: fla <flaburgan@geexxx.fr>
Date: Wed, 11 Nov 2015 23:48:12 +0100
Subject: [PATCH 2/8] remove dark gray left column on tag page

---
 app/views/tags/show.haml | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/app/views/tags/show.haml b/app/views/tags/show.haml
index f40a6f889..ce9588663 100644
--- a/app/views/tags/show.haml
+++ b/app/views/tags/show.haml
@@ -10,16 +10,14 @@
 
 .container-fluid#tags_show
   .row
-    .col-lg-1.visible-lg.left-navbar-fixed-sub-background
-    .col-lg-offset-1.col-lg-3.col-md-4.hidden-sm.hidden-xs.left-navbar-fixed-background
-    .col-lg-offset-1.col-lg-3.col-md-4
+    .col-md-3.hidden-xs
       %h4
         = t('.tagged_people', count: @stream.tagged_people_count, tag: @stream.display_tag_name)
 
       .side_stream.stream
         = render partial: 'people/index', locals: {people: @stream.tagged_people}
 
-    .col-lg-7.col-md-8
+    .col-md-9
       .stream_container
         #author_info
           %h2
@@ -33,8 +31,6 @@
         #paginate
           %span.loader.hidden
             .spinner
-
-    .col-lg-1.visible-lg.right-sidebar-fixed-sub-background
-
+            
       %a.back-to-top#back-to-top{title: "#{t('layouts.application.back_to_top')}", href: "#"}
         &#8679;

From 3c2bc54061f205565581fe90eae6f24372147bb5 Mon Sep 17 00:00:00 2001
From: Flaburgan <flaburgan@geexxx.fr>
Date: Thu, 12 Nov 2015 14:52:46 +0100
Subject: [PATCH 3/8] Fix getting started help

Add temp max-width to the streams

Back to white bg for left menu

Fix invitation code selection

fix pronto errors
---
 .../views/publisher/getting_started_view.js   |   6 +-
 .../javascripts/app/views/publisher_view.js   |   2 +-
 app/assets/javascripts/app/views/sidebar.js   |   3 +-
 app/assets/stylesheets/getting-started.scss   |   4 +-
 app/assets/stylesheets/navbar_left.scss       | 162 +++++++++---------
 app/assets/stylesheets/publisher.scss         |   3 +-
 app/assets/stylesheets/stream.scss            |  19 +-
 app/views/aspects/_aspect_stream.haml         |   7 +-
 app/views/publisher/_publisher.html.haml      |   2 +-
 app/views/streams/main_stream.html.haml       |   2 +-
 app/views/tags/show.haml                      |   1 +
 features/step_definitions/aspects_steps.rb    |   2 +-
 12 files changed, 109 insertions(+), 104 deletions(-)

diff --git a/app/assets/javascripts/app/views/publisher/getting_started_view.js b/app/assets/javascripts/app/views/publisher/getting_started_view.js
index 25b1dacfd..02a025e0a 100644
--- a/app/assets/javascripts/app/views/publisher/getting_started_view.js
+++ b/app/assets/javascripts/app/views/publisher/getting_started_view.js
@@ -20,15 +20,13 @@ app.views.PublisherGettingStarted = Backbone.View.extend({
   show: function() {
     this._addPopover(this.firstMessage, {
       trigger: "manual",
-      offset: 30,
       id: "first_message_explain",
-      placement: "right",
+      placement: "left",
       html: true,
       container: "body"
     }, 600);
     this._addPopover(this.visibility, {
       trigger: "manual",
-      offset: 10,
       id: "message_visibility_explain",
       placement: "bottom",
       html: true,
@@ -36,7 +34,6 @@ app.views.PublisherGettingStarted = Backbone.View.extend({
     }, 1000);
     this._addPopover(this.stream, {
       trigger: "manual",
-      offset: -5,
       id: "stream_explain",
       placement: "left",
       html: true,
@@ -77,4 +74,3 @@ app.views.PublisherGettingStarted = Backbone.View.extend({
   }
 });
 // @license-end
-
diff --git a/app/assets/javascripts/app/views/publisher_view.js b/app/assets/javascripts/app/views/publisher_view.js
index 5446a972f..609c29c4c 100644
--- a/app/assets/javascripts/app/views/publisher_view.js
+++ b/app/assets/javascripts/app/views/publisher_view.js
@@ -121,7 +121,7 @@ app.views.Publisher = Backbone.View.extend({
     this.viewGettingStarted = new app.views.PublisherGettingStarted({
       firstMessageEl:  this.inputEl,
       visibilityEl: this.$(".public_toggle .aspect_dropdown > .dropdown-toggle"),
-      streamEl:     $("#gs-shim")
+      streamEl:     $("#main_stream")
     });
 
     this.viewUploader = new app.views.PublisherUploader({
diff --git a/app/assets/javascripts/app/views/sidebar.js b/app/assets/javascripts/app/views/sidebar.js
index 446137bb0..04892aa57 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: ".info-bar",
 
   events: {
     "click input#invite_code": "selectInputText"
@@ -12,4 +12,3 @@ app.views.Sidebar = app.views.Base.extend({
   }
 });
 // @license-end
-
diff --git a/app/assets/stylesheets/getting-started.scss b/app/assets/stylesheets/getting-started.scss
index 16cc1bff7..32b416449 100644
--- a/app/assets/stylesheets/getting-started.scss
+++ b/app/assets/stylesheets/getting-started.scss
@@ -45,10 +45,8 @@
 #welcome-to-diaspora {
   background: orange;
   box-shadow: inset 0 -2px 10px rgba(0,0,0,0.35);
-  margin-bottom: 20px;
-  margin-top: -40px;
   padding-bottom: 30px;
-  padding-top: 60px;
+  padding-top: 20px;
 
   h1,h3 {
     color: $white;
diff --git a/app/assets/stylesheets/navbar_left.scss b/app/assets/stylesheets/navbar_left.scss
index aad0a35dd..6a3b99184 100644
--- a/app/assets/stylesheets/navbar_left.scss
+++ b/app/assets/stylesheets/navbar_left.scss
@@ -5,19 +5,14 @@
   height: 100%;
 }
 
+.left-navbar,
 .left-navbar-fixed-background {
-  background: $sidebars-background;
   border-right: 1px solid $light-grey;
-  position: fixed;
-  height: 100%;
+  background: $sidebars-background;
 }
 
 .left-navbar {
-  background: $sidebars-background;
-  border-right: 1px solid $light-grey;
   a {
-    color: $link-grey;
-    font-weight: bold;
     text-decoration: none;
     outline: 0;
   }
@@ -32,11 +27,14 @@
   }
 
   .hoverable {
-    border-bottom: 1px solid $border-grey;
     color: $link-grey;
     display: block;
-    font-weight: normal;
     padding: 10px 20px;
+    font-weight: bold;
+
+    a {
+      color: $link-grey;
+    }
 
     &:hover, &:hover a, &:hover [class^="entypo"] {
       background-color: $blue;
@@ -45,16 +43,16 @@
     }
   }
 
-  .all_aspects a.hoverable.selected,
-  .followed-tags-sidebar a.hoverable.selected,
-  li.selected > a.hoverable {
+  .all-aspects .hoverable.selected,
+  .followed-tags-sidebar .hoverable.selected,
+  .selected > .hoverable {
     color: $white;
     background: $gray;
     border-color: $gray;
   }
 
-  #aspects_list,
-  #tags_list {
+  .all-aspects ul,
+  .followed-tags-sidebar ul {
     background: $left-navbar-drawer-background;
     li { padding: 0; }
     .entypo-check { visibility: hidden; }
@@ -114,78 +112,78 @@
     }
     /* ---- end override app/stylesheets/vendor/autoSuggest.css ---- */
   }
+}
 
-  .info-bar {
-    margin-top: 25px;
+.info-bar {
+  margin-top: 25px;
 
-    .section {
-      margin-bottom: 20px;
+  .section {
+    margin-bottom: 20px;
+  }
 
-      > .title {
-        border-bottom: 1px solid $border-grey;
-        padding-bottom: 5px;
+  .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; }
-        }
-      }
+    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 {
+      list-style: none;
+      margin-bottom: 5px;
+      padding-left: 0;
+    }
+
+    .btn-link {
+      font-size: $font-size-small;
+      padding-left: 0;
+    }
+
+    > [name="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/publisher.scss b/app/assets/stylesheets/publisher.scss
index 242c59fcb..df04cf349 100644
--- a/app/assets/stylesheets/publisher.scss
+++ b/app/assets/stylesheets/publisher.scss
@@ -1,4 +1,4 @@
-#publisher {
+.publisher {
   z-index: 1;
   color: $text-grey;
   margin: 0;
@@ -36,6 +36,7 @@
 
     .options_and_submit {
       padding: 10px 0;
+
       #publisher-service-icons {
         text-decoration: none;
 
diff --git a/app/assets/stylesheets/stream.scss b/app/assets/stylesheets/stream.scss
index 09edd9a61..9176d4b26 100644
--- a/app/assets/stylesheets/stream.scss
+++ b/app/assets/stylesheets/stream.scss
@@ -1,8 +1,14 @@
-body.page-streams, body.page-photos {
-  background-color: $sidebars-sub-background;
+.page-streams,
+.page-people,
+.page-photos,
+.page-tags {
+  background-color: $sidebars-background;
 }
 
 .stream_container {
+  margin: auto;
+  max-width: 900px;
+
   .stream-title {
     margin: 12px 0;
   }
@@ -16,7 +22,14 @@ body.page-streams, body.page-photos {
     width: 50px;
   }
 
-  #publisher {
+  .publisher {
     margin-left: 65px;
   }
 }
+
+@media(max-width: $screen-xs) {
+
+  .publisher {
+    margin-left: 0;
+  }
+}
diff --git a/app/views/aspects/_aspect_stream.haml b/app/views/aspects/_aspect_stream.haml
index f26a2dd17..b4cf0ce4f 100644
--- a/app/views/aspects/_aspect_stream.haml
+++ b/app/views/aspects/_aspect_stream.haml
@@ -7,14 +7,13 @@
     = stream.title
 
 .container-fluid.main-stream-publisher
-  .pull-left
+  .pull-left.hidden-xs
     = 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')}
-
-#main_stream.stream
+.stream#main_stream{title: popover_with_close_html("3. #{t('.stay_updated')}"),
+  "data-content" => t(".stay_updated_explanation")}
 
 #paginate
   %span.loader.hidden
diff --git a/app/views/publisher/_publisher.html.haml b/app/views/publisher/_publisher.html.haml
index 70d386ce5..3ecec1f40 100644
--- a/app/views/publisher/_publisher.html.haml
+++ b/app/views/publisher/_publisher.html.haml
@@ -4,7 +4,7 @@
         if( app.publisher ) app.publisher.triggerGettingStarted();
       });
 
-.row#publisher{class: ((aspect == :profile || publisher_open) ? "mention_popup" : "closed")}
+.row.publisher#publisher{class: ((aspect == :profile || publisher_open) ? "mention_popup" : "closed")}
   .content_creation
     = form_for(StatusMessage.new) do |status|
       = status.error_messages
diff --git a/app/views/streams/main_stream.html.haml b/app/views/streams/main_stream.html.haml
index 539600275..3fe7e0165 100644
--- a/app/views/streams/main_stream.html.haml
+++ b/app/views/streams/main_stream.html.haml
@@ -31,7 +31,7 @@
           = link_to t("streams.activity.title"), activity_stream_path, rel: "backbone", class: "hoverable"
         %li{data: {stream: "mentions"}}
           = link_to t("streams.mentions.title"), mentioned_stream_path, rel: "backbone", class: "hoverable"
-        %li.all_aspects
+        %li.all-aspects
           = render "aspects/aspect_listings", stream: @stream
         %li.followed-tags-sidebar
           = render "tags/followed_tags_listings"
diff --git a/app/views/tags/show.haml b/app/views/tags/show.haml
index ce9588663..490516768 100644
--- a/app/views/tags/show.haml
+++ b/app/views/tags/show.haml
@@ -10,6 +10,7 @@
 
 .container-fluid#tags_show
   .row
+    .col-lg-3.hidden-xs.left-navbar-fixed-background
     .col-md-3.hidden-xs
       %h4
         = t('.tagged_people', count: @stream.tagged_people_count, tag: @stream.display_tag_name)
diff --git a/features/step_definitions/aspects_steps.rb b/features/step_definitions/aspects_steps.rb
index 0cfeb8242..b51284dcc 100644
--- a/features/step_definitions/aspects_steps.rb
+++ b/features/step_definitions/aspects_steps.rb
@@ -34,7 +34,7 @@ end
 World(AspectCukeHelpers)
 
 When /^I click on "([^"]*)" aspect edit icon$/ do |aspect_name|
-  within(".all_aspects") do
+  within(".all-aspects") do
     li = find('li', text: aspect_name)
     li.hover
     li.find('.modify_aspect').click

From d0d3df05eb64b4ad5f42db469572464c22f4e1a5 Mon Sep 17 00:00:00 2001
From: fla <flaburgan@geexxx.fr>
Date: Fri, 29 Jan 2016 16:23:40 +0100
Subject: [PATCH 4/8] Fix original white theme

---
 app/assets/stylesheets/color-variables.scss                   | 4 ++--
 .../stylesheets/color_themes/original_white/_style.scss       | 2 +-
 app/assets/stylesheets/navbar_left.scss                       | 3 +--
 app/assets/stylesheets/stream.scss                            | 2 +-
 app/views/tags/show.haml                                      | 2 +-
 5 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/app/assets/stylesheets/color-variables.scss b/app/assets/stylesheets/color-variables.scss
index a4c9f7e41..d3862a09d 100644
--- a/app/assets/stylesheets/color-variables.scss
+++ b/app/assets/stylesheets/color-variables.scss
@@ -26,8 +26,8 @@ $light-green: lighten($green, 20%);
 $red: #a80000;
 $blue: #3f8fba;
 
-$sidebars-background: #f0f0f0 !default;
-$sidebars-sub-background: darken($sidebars-background, 12%) !default;
+$main-background: #f0f0f0 !default;
+$sidebars-background: $background-white !default;
 $left-navbar-drawer-background: darken($sidebars-background, 6%);
 
 $card-shadow: 0 1px 2px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12) !default;
diff --git a/app/assets/stylesheets/color_themes/original_white/_style.scss b/app/assets/stylesheets/color_themes/original_white/_style.scss
index 5997151c8..7f702bcaf 100644
--- a/app/assets/stylesheets/color_themes/original_white/_style.scss
+++ b/app/assets/stylesheets/color_themes/original_white/_style.scss
@@ -7,8 +7,8 @@ $main-color-dark: darken($main-color, 15%);
 
 // Variables
 $header-background-color: $main-color-dark;
+$main-background: $background;
 $sidebars-background: $background;
-$sidebars-sub-background: $background;
 $card-shadow: none;
 
 @import 'color_themes/color_theme_override_origwhite';
diff --git a/app/assets/stylesheets/navbar_left.scss b/app/assets/stylesheets/navbar_left.scss
index 6a3b99184..9d91ae065 100644
--- a/app/assets/stylesheets/navbar_left.scss
+++ b/app/assets/stylesheets/navbar_left.scss
@@ -1,6 +1,5 @@
 /* Fixed backgrounds are a common practice to avoid height issues */
-.left-navbar-fixed-sub-background {
-  background: $sidebars-sub-background;
+.left-navbar-fixed-background {
   position: fixed;
   height: 100%;
 }
diff --git a/app/assets/stylesheets/stream.scss b/app/assets/stylesheets/stream.scss
index 9176d4b26..3af6bf168 100644
--- a/app/assets/stylesheets/stream.scss
+++ b/app/assets/stylesheets/stream.scss
@@ -2,7 +2,7 @@
 .page-people,
 .page-photos,
 .page-tags {
-  background-color: $sidebars-background;
+  background-color: $main-background;
 }
 
 .stream_container {
diff --git a/app/views/tags/show.haml b/app/views/tags/show.haml
index 490516768..90026b495 100644
--- a/app/views/tags/show.haml
+++ b/app/views/tags/show.haml
@@ -32,6 +32,6 @@
         #paginate
           %span.loader.hidden
             .spinner
-            
+
       %a.back-to-top#back-to-top{title: "#{t('layouts.application.back_to_top')}", href: "#"}
         &#8679;

From 70140259ba8ac15a9af912779115a6eaa76e64c1 Mon Sep 17 00:00:00 2001
From: fla <flaburgan@geexxx.fr>
Date: Sun, 21 Feb 2016 20:43:19 +0100
Subject: [PATCH 5/8] Max-width for the whole content

---
 app/assets/stylesheets/base.scss              |   8 +-
 app/assets/stylesheets/navbar_left.scss       |  27 +--
 app/assets/stylesheets/sidebar.scss           |   3 +-
 app/assets/stylesheets/stream.scss            |  12 +-
 app/assets/stylesheets/tag.scss               |   5 +-
 .../user_applications/index.html.haml         |   2 +-
 app/views/aspects/_aspect_stream.haml         |   3 +-
 app/views/conversations/index.haml            |   2 +-
 app/views/profiles/edit.haml                  |   2 +-
 app/views/services/index.html.haml            |   2 +-
 app/views/shared/_settings_nav.haml           |   5 +-
 app/views/streams/main_stream.html.haml       | 208 +++++++++---------
 app/views/tags/show.haml                      |  11 +-
 13 files changed, 124 insertions(+), 166 deletions(-)

diff --git a/app/assets/stylesheets/base.scss b/app/assets/stylesheets/base.scss
index 114298043..1e7f268d1 100644
--- a/app/assets/stylesheets/base.scss
+++ b/app/assets/stylesheets/base.scss
@@ -5,11 +5,6 @@ body {
 
 .container-fluid { max-width: $screen-lg-min; }
 
-.page-streams,
-.page-tags.action-show {
-  > .container-fluid { max-width: 100%; }
-}
-
 // These names are generated by a rails controller
 // scss-lint:disable SelectorFormat
 .page-contacts,
@@ -22,10 +17,11 @@ body {
 .page-profiles.action-edit,
 .page-services.action-index,
 .page-streams,
+.page-tags,
 .page-user_applications,
 .page-users.action-edit,
 .page-users.action-privacy_settings {
-  background-color: $sidebars-background;
+  background-color: $main-background;
 }
 // scss-lint:enable SelectorFormat
 
diff --git a/app/assets/stylesheets/navbar_left.scss b/app/assets/stylesheets/navbar_left.scss
index 9d91ae065..99d0719a7 100644
--- a/app/assets/stylesheets/navbar_left.scss
+++ b/app/assets/stylesheets/navbar_left.scss
@@ -1,16 +1,6 @@
-/* Fixed backgrounds are a common practice to avoid height issues */
-.left-navbar-fixed-background {
-  position: fixed;
-  height: 100%;
-}
-
-.left-navbar,
-.left-navbar-fixed-background {
-  border-right: 1px solid $light-grey;
-  background: $sidebars-background;
-}
-
 .left-navbar {
+  padding: 0;
+
   a {
     text-decoration: none;
     outline: 0;
@@ -20,9 +10,6 @@
     margin: 0;
     padding: 0;
     list-style: none;
-    &#stream_selection {
-      margin: 0px -15px; /* -15px overrides Bootstrap's default gutter width */
-    }
   }
 
   .hoverable {
@@ -114,10 +101,10 @@
 }
 
 .info-bar {
-  margin-top: 25px;
+  padding: 0 20px;
 
   .section {
-    margin-bottom: 20px;
+    margin-top: 20px;
   }
 
   .title {
@@ -179,10 +166,4 @@
       display: inline-block;
     }
   }
-
-  .stream-faces {
-    display: flex;
-    flex-flow: row wrap;
-    img { margin: 1px; }
-  }
 }
diff --git a/app/assets/stylesheets/sidebar.scss b/app/assets/stylesheets/sidebar.scss
index 9242840e6..1df833b42 100644
--- a/app/assets/stylesheets/sidebar.scss
+++ b/app/assets/stylesheets/sidebar.scss
@@ -2,9 +2,8 @@
 .framed-content {
   background-color: $white;
   border: 1px solid $light-grey;
+  border-top: 0;
   box-shadow: $card-shadow;
-  margin-top: -10px;
-  padding-top: 10px;
 
   .header,
   .sidebar-header {
diff --git a/app/assets/stylesheets/stream.scss b/app/assets/stylesheets/stream.scss
index 3af6bf168..f6000eb96 100644
--- a/app/assets/stylesheets/stream.scss
+++ b/app/assets/stylesheets/stream.scss
@@ -1,14 +1,4 @@
-.page-streams,
-.page-people,
-.page-photos,
-.page-tags {
-  background-color: $main-background;
-}
-
 .stream_container {
-  margin: auto;
-  max-width: 900px;
-
   .stream-title {
     margin: 12px 0;
   }
@@ -29,7 +19,7 @@
 
 @media(max-width: $screen-xs) {
 
-  .publisher {
+  .main-stream-publisher .publisher {
     margin-left: 0;
   }
 }
diff --git a/app/assets/stylesheets/tag.scss b/app/assets/stylesheets/tag.scss
index 037cc1c70..bce8ad6c6 100644
--- a/app/assets/stylesheets/tag.scss
+++ b/app/assets/stylesheets/tag.scss
@@ -23,11 +23,8 @@ h1.tag {
   }
 }
 .page-tags {
-  background-color: $sidebars-background;
-  .left-navbar-fixed-background { border-right: 0; }
   #tags_show {
     .col-md-3 {
-      h4 { margin: 25px 0 15px; }
       .side_stream #people_stream {
         .name { display: block; }
         .name, .diaspora_handle {
@@ -37,7 +34,7 @@ h1.tag {
         }
       }
     }
-    .col-md-7 {
+    .col-md-9 {
       .tag-following-action {
         max-width: 100%;
         input[type="submit"] {
diff --git a/app/views/api/openid_connect/user_applications/index.html.haml b/app/views/api/openid_connect/user_applications/index.html.haml
index 667abc218..b90082995 100644
--- a/app/views/api/openid_connect/user_applications/index.html.haml
+++ b/app/views/api/openid_connect/user_applications/index.html.haml
@@ -7,7 +7,7 @@
       .sidebar
         = render "shared/settings_nav"
     .col-md-9
-      .framed-content
+      .framed-content.clearfix
         %h3= t(".title")
         .row
           .col-md-12
diff --git a/app/views/aspects/_aspect_stream.haml b/app/views/aspects/_aspect_stream.haml
index b4cf0ce4f..abee4ac83 100644
--- a/app/views/aspects/_aspect_stream.haml
+++ b/app/views/aspects/_aspect_stream.haml
@@ -10,9 +10,8 @@
   .pull-left.hidden-xs
     = owner_image_link
   = render "publisher/publisher", publisher_aspects_for(stream)
-= render "aspects/no_posts_message"
 
-.stream#main_stream{title: popover_with_close_html("3. #{t('.stay_updated')}"),
+.stream#main_stream{:title => popover_with_close_html("3. #{t('.stay_updated')}"),
   "data-content" => t(".stay_updated_explanation")}
 
 #paginate
diff --git a/app/views/conversations/index.haml b/app/views/conversations/index.haml
index 47c1e76d6..31297c79e 100644
--- a/app/views/conversations/index.haml
+++ b/app/views/conversations/index.haml
@@ -34,7 +34,7 @@
       - else
         .stream_container.hidden
           #conversation_show
-        .framed-content#conversation_new
+        .framed-content.clearfix#conversation_new
           .new-conversation
             %h3.text-center
               = t("conversations.index.new_conversation")
diff --git a/app/views/profiles/edit.haml b/app/views/profiles/edit.haml
index 8eee45d2a..043cbfe88 100644
--- a/app/views/profiles/edit.haml
+++ b/app/views/profiles/edit.haml
@@ -8,7 +8,7 @@
       .sidebar
         = render "shared/settings_nav"
     .col-md-9
-      .framed-content
+      .framed-content.clearfix
         - content_for :submit_block do
           = link_to t("cancel"), local_or_remote_person_path(current_user.person), class: "btn btn-default"
           = submit_tag t(".update_profile"), class: "btn btn-primary pull-right", id: "update_profile"
diff --git a/app/views/services/index.html.haml b/app/views/services/index.html.haml
index 3828b102f..432dafdb3 100644
--- a/app/views/services/index.html.haml
+++ b/app/views/services/index.html.haml
@@ -11,7 +11,7 @@
       .sidebar
         = render "shared/settings_nav"
     .col-md-9
-      .framed-content
+      .framed-content.clearfix
         %h3= t(".title")
         .row
           .col-md-12
diff --git a/app/views/shared/_settings_nav.haml b/app/views/shared/_settings_nav.haml
index 7c4b74460..53794791e 100644
--- a/app/views/shared/_settings_nav.haml
+++ b/app/views/shared/_settings_nav.haml
@@ -1,6 +1,7 @@
 #section_header
-  %h3.sidebar-header
-    = t("settings")
+  .sidebar-header.clearfix
+    %h3
+      = t("settings")
   .list-group#settings_nav
     = link_to t("profile"), edit_profile_path,
       class: current_page?(edit_profile_path) ? "list-group-item active" : "list-group-item"
diff --git a/app/views/streams/main_stream.html.haml b/app/views/streams/main_stream.html.haml
index 3fe7e0165..a31fb85c8 100644
--- a/app/views/streams/main_stream.html.haml
+++ b/app/views/streams/main_stream.html.haml
@@ -22,132 +22,126 @@
 
 .container-fluid
   .row
-    .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"
-        %li{data: {stream: "activity"}}
-          = link_to t("streams.activity.title"), activity_stream_path, rel: "backbone", class: "hoverable"
-        %li{data: {stream: "mentions"}}
-          = 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
-          = render "tags/followed_tags_listings"
-        %li{data: {stream: "public"}}
-          = link_to t("streams.public.title"), public_stream_path, rel: "backbone", class: "hoverable"
+    .col-md-3
+      .sidebar.left-navbar
+        %ul#stream_selection
+          %li{data: {stream: "stream"}}
+            = link_to t("streams.multi.title"), stream_path, rel: "backbone", class: "hoverable"
+          %li{data: {stream: "activity"}}
+            = link_to t("streams.activity.title"), activity_stream_path, rel: "backbone", class: "hoverable"
+          %li{data: {stream: "mentions"}}
+            = 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
+            = render "tags/followed_tags_listings"
+          %li{data: {stream: "public"}}
+            = link_to t("streams.public.title"), public_stream_path, rel: "backbone", class: "hoverable"
 
-      .info-bar.hidden-xs
-        .section#selected_aspect_contacts
-          .title
-            %h5.stream-title
-              = @stream.title
-          .content
+        .info-bar.hidden-xs
+          - 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}"
+              != 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"
 
-    .col-lg-10.col-sm-9
+          - 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"
+
+    .col-md-9
       .stream_container#aspect_stream_container
         = render "aspects/aspect_stream", stream: @stream
 
diff --git a/app/views/tags/show.haml b/app/views/tags/show.haml
index 90026b495..ebb468b28 100644
--- a/app/views/tags/show.haml
+++ b/app/views/tags/show.haml
@@ -10,13 +10,14 @@
 
 .container-fluid#tags_show
   .row
-    .col-lg-3.hidden-xs.left-navbar-fixed-background
     .col-md-3.hidden-xs
-      %h4
-        = t('.tagged_people', count: @stream.tagged_people_count, tag: @stream.display_tag_name)
+      .sidebar
+        .sidebar-header.clearfix
+          %h3
+            = t(".tagged_people", count: @stream.tagged_people_count, tag: @stream.display_tag_name)
 
-      .side_stream.stream
-        = render partial: 'people/index', locals: {people: @stream.tagged_people}
+        .side_stream.stream
+          = render partial: "people/index", locals: {people: @stream.tagged_people}
 
     .col-md-9
       .stream_container

From a10601f9a94c26a6131d84b74217e0110bd70626 Mon Sep 17 00:00:00 2001
From: fla <flaburgan@geexxx.fr>
Date: Sun, 28 Feb 2016 19:57:40 +0100
Subject: [PATCH 6/8] collapse left navbar sections

---
 app/assets/javascripts/app/views/sidebar.js |  7 +++-
 app/assets/stylesheets/mobile/mobile.scss   |  2 +-
 app/assets/stylesheets/navbar_left.scss     | 20 +++++++++-
 app/assets/stylesheets/tag.scss             |  7 +++-
 app/views/streams/main_stream.html.haml     | 43 ++++++++++++++-------
 5 files changed, 59 insertions(+), 20 deletions(-)

diff --git a/app/assets/javascripts/app/views/sidebar.js b/app/assets/javascripts/app/views/sidebar.js
index 04892aa57..f5ce24b80 100644
--- a/app/assets/javascripts/app/views/sidebar.js
+++ b/app/assets/javascripts/app/views/sidebar.js
@@ -4,11 +4,16 @@ app.views.Sidebar = app.views.Base.extend({
   el: ".info-bar",
 
   events: {
-    "click input#invite_code": "selectInputText"
+    "click input#invite_code": "selectInputText",
+    "click .section .title": "toggleSection"
   },
 
   selectInputText: function(event) {
     event.target.select();
+  },
+
+  toggleSection: function(e) {
+    $(e.target).closest(".section").toggleClass("collapsed");
   }
 });
 // @license-end
diff --git a/app/assets/stylesheets/mobile/mobile.scss b/app/assets/stylesheets/mobile/mobile.scss
index 6b59d01b2..8b01ce88c 100644
--- a/app/assets/stylesheets/mobile/mobile.scss
+++ b/app/assets/stylesheets/mobile/mobile.scss
@@ -29,7 +29,7 @@ code {
   }
 
 body {
-  background-color: $sidebars-background;
+  background-color: $main-background;
   padding: 0;
 }
 
diff --git a/app/assets/stylesheets/navbar_left.scss b/app/assets/stylesheets/navbar_left.scss
index 99d0719a7..51adb58ea 100644
--- a/app/assets/stylesheets/navbar_left.scss
+++ b/app/assets/stylesheets/navbar_left.scss
@@ -101,19 +101,35 @@
 }
 
 .info-bar {
+  border-top: 1px solid $border-grey;
   padding: 0 20px;
 
   .section {
-    margin-top: 20px;
+    margin-top: 10px;
+
+    &:last-child {
+      margin-bottom: 10px;
+    }
+
+    &:not(.collapsed) .entypo-triangle-right,
+    &.collapsed .entypo-triangle-down,
+    &.collapsed .content {
+      display: none;
+    }
+
+    &.collapsed .title h5 {
+      font-weight: normal;
+    }
   }
 
   .title {
-    border-bottom: 1px solid $border-grey;
+    cursor: pointer;
     padding-bottom: 5px;
 
     h5 {
       color: $text-dark-grey;
       font-size: $font-size-base;
+      font-weight: bold;
       margin: 0;
     }
   }
diff --git a/app/assets/stylesheets/tag.scss b/app/assets/stylesheets/tag.scss
index bce8ad6c6..c18102ae8 100644
--- a/app/assets/stylesheets/tag.scss
+++ b/app/assets/stylesheets/tag.scss
@@ -24,7 +24,12 @@ h1.tag {
 }
 .page-tags {
   #tags_show {
-    .col-md-3 {
+    .sidebar {
+      h3 {
+        font-size: 13px;
+        line-height: 1.1;
+      }
+
       .side_stream #people_stream {
         .name { display: block; }
         .name, .diaspora_handle {
diff --git a/app/views/streams/main_stream.html.haml b/app/views/streams/main_stream.html.haml
index a31fb85c8..51fdc5c06 100644
--- a/app/views/streams/main_stream.html.haml
+++ b/app/views/streams/main_stream.html.haml
@@ -9,14 +9,14 @@
 
 - if current_user.getting_started?
   #welcome-to-diaspora
-    .container
+    .container-fluid
       .row
-        .col-md-8.offset1
+        .col-md-9
           %h1
             = t('aspects.index.welcome_to_diaspora', name: current_user.first_name)
           %h3
             = t('aspects.index.introduce_yourself')
-        .col-md-2
+        .col-md-3
           .pull-right
             = link_to '&times;'.html_safe, getting_started_completed_path, id: "gs-skip-x", class: "close"
 
@@ -40,16 +40,20 @@
 
         .info-bar.hidden-xs
           - if AppConfig.settings.invitations.open?
-            .section
+            .section.collapsed
               .title
                 %h5.title-header
+                  .entypo-triangle-right
+                  .entypo-triangle-down
                   = t("shared.invitations.invite_your_friends")
               .content
                 = render "shared/invitations"
 
-          .section
+          .section.collapsed
             .title
               %h5.title-header
+                .entypo-triangle-right
+                .entypo-triangle-down
                 = t("aspects.index.new_here.title")
             .content
               != t("aspects.index.new_here.follow",
@@ -59,9 +63,11 @@
               = link_to(t("aspects.index.new_here.learn_more"),
                 "http://wiki.diasporafoundation.org/Welcoming_Committee")
 
-          .section
+          .section.collapsed
             .title
               %h5.title-header
+                .entypo-triangle-right
+                .entypo-triangle-down
                 = t("aspects.index.help.need_help")
             .content
               %p
@@ -91,9 +97,11 @@
                   target: "_blank")
 
           - unless AppConfig.configured_services.blank? || all_services_connected?
-            .section
+            .section.collapsed
               .title
                 %h5.title-header
+                  .entypo-triangle-right
+                  .entypo-triangle-down
                   = t("aspects.index.services.heading")
               .content
                 %div
@@ -107,17 +115,21 @@
                           class: "social-media-logos-#{service.to_s.downcase}-24x24",
                           title: service.to_s.titleize), "/auth/#{service}")
 
-          .section
+          .section.collapsed
             .title
               %h5.title-header
+                .entypo-triangle-right
+                .entypo-triangle-down
                 = 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
+            .section.collapsed
               .title
                 %h5.title-header
+                  .entypo-triangle-right
+                  .entypo-triangle-down
                   = t("aspects.index.donate")
               .content
                 %p
@@ -125,9 +137,11 @@
                 = render "shared/donatepod"
 
           - if AppConfig.admins.podmin_email.present?
-            .section
+            .section.collapsed
               .title
                 %h5.title-header
+                  .entypo-triangle-right
+                  .entypo-triangle-down
                   = t("aspects.index.help.any_problem")
               .content
                 %p
@@ -135,11 +149,10 @@
                 %p
                   = link_to t("aspects.index.help.mail_podmin"), "mailto:#{AppConfig.admins.podmin_email}"
 
-          .section
-            .title
-            .content
-              %ul
-                = render "shared/links"
+        .info-bar
+          .content
+            %ul
+              = render "shared/links"
 
     .col-md-9
       .stream_container#aspect_stream_container

From 5ff085affff8f1528e5b6e88df98a281a7fa0344 Mon Sep 17 00:00:00 2001
From: Flaburgan <flaburgan@geexxx.fr>
Date: Tue, 8 Mar 2016 17:18:01 +0100
Subject: [PATCH 7/8] Fix tests

---
 app/assets/stylesheets/single-post-view.scss | 8 ++++++--
 features/desktop/donations.feature           | 2 ++
 features/desktop/invitations.feature         | 2 ++
 features/step_definitions/stream_steps.rb    | 6 ++++++
 4 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/app/assets/stylesheets/single-post-view.scss b/app/assets/stylesheets/single-post-view.scss
index 03767b997..e0cb2894e 100644
--- a/app/assets/stylesheets/single-post-view.scss
+++ b/app/assets/stylesheets/single-post-view.scss
@@ -4,9 +4,8 @@
 
 #single-post-content {
   .head {
-    padding-bottom: 10px;
-    padding-top: 5px;
     border-bottom: 1px solid $border-grey;
+    padding: 10px 0;
     #post-info {
       .author{ color: $grey; }
       .info {
@@ -108,6 +107,11 @@
 }
 
 #single-post-interactions {
+
+  > .framed-content {
+    padding-top: 10px;
+  }
+
   .no-comments { text-align: center; }
 
   a {
diff --git a/features/desktop/donations.feature b/features/desktop/donations.feature
index 9bf0b2818..0985ff132 100644
--- a/features/desktop/donations.feature
+++ b/features/desktop/donations.feature
@@ -13,4 +13,6 @@ Feature: donations
   Scenario: Bitcoin donations
     Given I have configured a Bitcoin address
     And I go to the home page
+    Then I should see "Donate" within ".info-bar"
+    And I click on "Donate" navbar title
     Then I should see the Bitcoin address
diff --git a/features/desktop/invitations.feature b/features/desktop/invitations.feature
index 74ce102fc..76ce98902 100644
--- a/features/desktop/invitations.feature
+++ b/features/desktop/invitations.feature
@@ -37,11 +37,13 @@ Feature: Invitations
     And I close the publisher
     And I log out
     And I sign in as "alice@alice.alice"
+    And I click on "Invite your friends" navbar title
     And I click on selector "#invitations-button"
     Then I should see one less invite
 
   Scenario: sends an invitation
     When I sign in as "alice@alice.alice"
+    And I click on "Invite your friends" navbar title
     And I click on selector "#invitations-button"
     And I fill in the following:
       | email_inviter_emails         | alex@example.com    |
diff --git a/features/step_definitions/stream_steps.rb b/features/step_definitions/stream_steps.rb
index 830d9de82..22c285439 100644
--- a/features/step_definitions/stream_steps.rb
+++ b/features/step_definitions/stream_steps.rb
@@ -21,3 +21,9 @@ end
 Then /^I should have (\d+) nsfw posts$/ do |num_posts|
   page.should have_css(".nsfw-shield", count: num_posts.to_i)
 end
+
+When /^(?:|I )click on "([^"]*)" navbar title$/ do |title|
+  with_scope(".info-bar") do
+    find("h5", text: title).click
+  end
+end

From 847fdb0de9087a8bdb9bba9ac2fe43baf8541ad0 Mon Sep 17 00:00:00 2001
From: Flaburgan <flaburgan@geexxx.fr>
Date: Mon, 21 Mar 2016 15:24:03 +0100
Subject: [PATCH 8/8] split left column

---
 app/assets/stylesheets/navbar_left.scss |  11 +-
 app/assets/stylesheets/stream.scss      |   2 +-
 app/views/aspects/_aspect_stream.haml   |   7 +-
 app/views/streams/main_stream.html.haml | 176 ++++++++++++------------
 4 files changed, 103 insertions(+), 93 deletions(-)

diff --git a/app/assets/stylesheets/navbar_left.scss b/app/assets/stylesheets/navbar_left.scss
index 51adb58ea..df6df71ee 100644
--- a/app/assets/stylesheets/navbar_left.scss
+++ b/app/assets/stylesheets/navbar_left.scss
@@ -1,5 +1,6 @@
 .left-navbar {
   padding: 0;
+  padding-bottom: 10px;
 
   a {
     text-decoration: none;
@@ -101,8 +102,14 @@
 }
 
 .info-bar {
-  border-top: 1px solid $border-grey;
-  padding: 0 20px;
+  margin-top: 20px;
+  padding: 10px 20px 0;
+
+  .info-links {
+    border-top: 1px solid $border-grey;
+    margin-top: 10px;
+    padding: 5px;
+  }
 
   .section {
     margin-top: 10px;
diff --git a/app/assets/stylesheets/stream.scss b/app/assets/stylesheets/stream.scss
index f6000eb96..622e4272b 100644
--- a/app/assets/stylesheets/stream.scss
+++ b/app/assets/stylesheets/stream.scss
@@ -17,7 +17,7 @@
   }
 }
 
-@media(max-width: $screen-xs) {
+@media(max-width: $screen-xs-max) {
 
   .main-stream-publisher .publisher {
     margin-left: 0;
diff --git a/app/views/aspects/_aspect_stream.haml b/app/views/aspects/_aspect_stream.haml
index abee4ac83..7aa104d13 100644
--- a/app/views/aspects/_aspect_stream.haml
+++ b/app/views/aspects/_aspect_stream.haml
@@ -11,8 +11,11 @@
     = owner_image_link
   = render "publisher/publisher", publisher_aspects_for(stream)
 
-.stream#main_stream{:title => popover_with_close_html("3. #{t('.stay_updated')}"),
-  "data-content" => t(".stay_updated_explanation")}
+- if current_user.getting_started?
+  .stream#main_stream{:title => popover_with_close_html("3. #{t('.stay_updated')}"),
+    "data-content" => t(".stay_updated_explanation")}
+- else
+  .stream#main_stream
 
 #paginate
   %span.loader.hidden
diff --git a/app/views/streams/main_stream.html.haml b/app/views/streams/main_stream.html.haml
index 51fdc5c06..25c4155c5 100644
--- a/app/views/streams/main_stream.html.haml
+++ b/app/views/streams/main_stream.html.haml
@@ -38,118 +38,118 @@
           %li{data: {stream: "public"}}
             = link_to t("streams.public.title"), public_stream_path, rel: "backbone", class: "hoverable"
 
-        .info-bar.hidden-xs
-          - if AppConfig.settings.invitations.open?
-            .section.collapsed
-              .title
-                %h5.title-header
-                  .entypo-triangle-right
-                  .entypo-triangle-down
-                  = t("shared.invitations.invite_your_friends")
-              .content
-                = render "shared/invitations"
-
+      .sidebar.info-bar.hidden-xs
+        - if AppConfig.settings.invitations.open?
           .section.collapsed
             .title
               %h5.title-header
                 .entypo-triangle-right
                 .entypo-triangle-down
-                = t("aspects.index.new_here.title")
+                = t("shared.invitations.invite_your_friends")
             .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")
+              = render "shared/invitations"
 
+        .section.collapsed
+          .title
+            %h5.title-header
+              .entypo-triangle-right
+              .entypo-triangle-down
+              = 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.collapsed
+          .title
+            %h5.title-header
+              .entypo-triangle-right
+              .entypo-triangle-down
+              = 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.collapsed
             .title
               %h5.title-header
                 .entypo-triangle-right
                 .entypo-triangle-down
-                = t("aspects.index.help.need_help")
+                = t("aspects.index.services.heading")
             .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")
+              %div
+                = t("aspects.index.services.content")
 
-          - unless AppConfig.configured_services.blank? || all_services_connected?
-            .section.collapsed
-              .title
-                %h5.title-header
-                  .entypo-triangle-right
-                  .entypo-triangle-down
-                  = 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}")
 
-                .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.collapsed
+          .title
+            %h5.title-header
+              .entypo-triangle-right
+              .entypo-triangle-down
+              = 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.collapsed
             .title
               %h5.title-header
                 .entypo-triangle-right
                 .entypo-triangle-down
-                = t("bookmarklet.heading")
+                = t("aspects.index.donate")
             .content
-              != t("bookmarklet.explanation", link: link_to(t("bookmarklet.post_something"), bookmarklet_code))
+              %p
+                = t("aspects.index.keep_pod_running", pod: AppConfig.pod_uri.host)
+              = render "shared/donatepod"
 
-          - if AppConfig.settings.paypal_donations.enable? || AppConfig.bitcoin_donation_address
-            .section.collapsed
-              .title
-                %h5.title-header
-                  .entypo-triangle-right
-                  .entypo-triangle-down
-                  = 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.collapsed
+            .title
+              %h5.title-header
+                .entypo-triangle-right
+                .entypo-triangle-down
+                = 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}"
 
-          - if AppConfig.admins.podmin_email.present?
-            .section.collapsed
-              .title
-                %h5.title-header
-                  .entypo-triangle-right
-                  .entypo-triangle-down
-                  = 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}"
-
-        .info-bar
+        .info-links
           .content
             %ul
               = render "shared/links"