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

@@ -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/

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});

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() {

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';

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; }
+        }
+      }
+    }
+  }
 }

app/assets/stylesheets/navbar_right.scss

-.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 */
-  }
-}

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;