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

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
-

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

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
-

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;

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;
+  background: $sidebars-background;
-  height: 100%;
 }
 
 .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,
+  .all-aspects .hoverable.selected,
-  .followed-tags-sidebar a.hoverable.selected,
+  .followed-tags-sidebar .hoverable.selected,
-  li.selected > a.hoverable {
+  .selected > .hoverable {
     color: $white;
     background: $gray;
     border-color: $gray;
   }
 
-  #aspects_list,
+  .all-aspects ul,
-  #tags_list {
+  .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 {
+.info-bar {
-    margin-top: 25px;
+  margin-top: 25px;
 
-    .section {
+  .section {
-      margin-bottom: 20px;
+    margin-bottom: 20px;
+  }
 
-      > .title {
+  .title {
-        border-bottom: 1px solid $border-grey;
+    border-bottom: 1px solid $border-grey;
-        padding-bottom: 5px;
+    padding-bottom: 5px;
 
-        h5 {
+    h5 {
-          color: $text-dark-grey;
+      color: $text-dark-grey;
-          font-size: $font-size-base;
+      font-size: $font-size-base;
-          margin: 0;
+      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; }
-        }
-      }
     }
   }
+
+  .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; }
+  }
 }

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;
 

app/assets/stylesheets/stream.scss

@@ -1,8 +1,14 @@
-body.page-streams, body.page-photos {
+.page-streams,
-  background-color: $sidebars-sub-background;
+.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;
+  }
+}

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')}
+.stream#main_stream{title: popover_with_close_html("3. #{t('.stay_updated')}"),
-
+  "data-content" => t(".stay_updated_explanation")}
-#main_stream.stream
 
 #paginate
   %span.loader.hidden

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

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"

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)

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