collapse left navbar sections

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

app/assets/stylesheets/mobile/mobile.scss

@@ -29,7 +29,7 @@ code {
   }
 
 body {
-  background-color: $sidebars-background;
+  background-color: $main-background;
   padding: 0;
 }
 

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

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 {

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 '×'.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,8 +149,7 @@
                 %p
                   = link_to t("aspects.index.help.mail_podmin"), "mailto:#{AppConfig.admins.podmin_email}"
 
-          .section
+        .info-bar
-            .title
           .content
             %ul
               = render "shared/links"