Refactor and minor styling

app/assets/javascripts/app/views/aspects_list_view.js

@@ -31,7 +31,7 @@ app.views.AspectsList = app.views.Base.extend({
   },
 
   appendAspect: function(aspect) {
-    $("#aspects_list > *:last").before(new app.views.Aspect({
+    $("#aspects_list > .hoverable:last").before(new app.views.Aspect({
       model: aspect, attributes: {'data-aspect_id': aspect.get('id')}
     }).render().el);
   },

app/assets/javascripts/app/views/sidebar.js

@@ -1,10 +1,10 @@
 // @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: ".rightbar",
 
   events: {
-    'click input#invite_code': 'selectInputText'
+    "click input#invite_code": "selectInputText"
   },
 
   selectInputText: function(event) {

app/assets/stylesheets/_application.scss

@@ -80,11 +80,11 @@
 @import 'post-content';
 
 /* right bar */
-@import 'sidebar';
+@import 'navbar_right';
 
 /* contacts */
 @import 'contacts';
-@import 'leftnavbar';
+@import 'navbar_left';
 
 /* code */
 @import 'new_styles/code';

app/assets/stylesheets/colors.scss

@@ -25,8 +25,9 @@ $red: #A80000;
 $blue: #3F8FBA;
 $dark-blue: darken(#0984C8,10%);
 
-$right-sidebar-background: #f0f0f0;
+$sidebars-background: #f0f0f0;
-$right-sidebar-sub-background: darken($right-sidebar-background, 12%);
+$sidebars-sub-background: darken($sidebars-background, 12%);
+$left-navbar-drawer-background: darken($sidebars-background, 6%);
 
 /* colors : http://www.colourlovers.com/palette/2134203/Awezome_in_argyle */
 $cyan : rgb(8,204,249);
@@ -36,7 +37,3 @@ $lime-green : rgb(143, 199,10);
 $orange : rgb(237, 165, 13);
 $turquoise : rgb(8, 224, 173);
 $sand : rgb(245, 239, 237);
-
-$left-navbar-background: #f0f0f0;
-$left-navbar-drawer-background: darken($left-navbar-background, 6%);
-$left-navbar-sub-background: darken($left-navbar-background, 12%); /* Only visible in large screens (BS3: visible-lg) */

app/assets/stylesheets/navbar_left.scss

@@ -1,18 +1,20 @@
 /* Fixed backgrounds are a common practice to avoid height issues */
 #left-navbar-fixed-sub-background {
-  background: $left-navbar-sub-background;
+  background: $sidebars-sub-background;
   position: fixed;
   height: 100%;
 }
 
 #left-navbar-fixed-background {
-  background: $left-navbar-background;
+  background: $sidebars-background;
+  border-right: 1px solid $light-grey;
   position: fixed;
   height: 100%;
 }
 
 #left-navbar {
-  background: $left-navbar-background;
+  background: $sidebars-background;
+  border-right: 1px solid $light-grey;
   a {
     color: $link-grey;
     font-weight: bold;

app/assets/stylesheets/navbar_right.scss

@@ -1,21 +1,24 @@
 #right-sidebar-fixed-background {
   height: 100%;
-  background: $right-sidebar-background;
+  border-left: 1px solid $light-grey;
+  background: $sidebars-background;
   position: fixed;
   right: 0;
 }
 #right-sidebar-fixed-sub-background {
   height: 100%;
-  background: $right-sidebar-sub-background;
+  background: $sidebars-sub-background;
   position: fixed;
   right: 0;
 }
+
 .right-sidebar-padder {
   max-width: 400px;
 }
 .rightbar {
   padding-top: 20px;
-  background: $right-sidebar-background;
+  border-left: 1px solid $light-grey;
+  background: $sidebars-background;
 
   .section {
     margin-bottom: 20px;

app/assets/templates/aspects-list_tpl.jst.hbs

@@ -7,5 +7,5 @@
   <a href="#" class="selectable new_aspect" data-toggle="modal" data-target="#newAspectModal">
     {{ t "aspect_navigation.add_an_aspect" }}
   </a>
-  <div id="newAspectContainer"></div>
 </li>
+<div id="newAspectContainer"></div>

app/views/streams/main_stream.html.haml

@@ -21,8 +21,6 @@
             = link_to '×'.html_safe, getting_started_completed_path, id: "gs-skip-x", class: "close"
 
 %div.container-fluid
-  #right-sidebar-fixed-sub-background.col-md-3.visible-lg
-  #right-sidebar-fixed-background.col-md-3.col-lg-2.hidden-sm.hidden-xs
   .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
@@ -48,6 +46,8 @@
       #aspect_stream_container.stream_container
         = render 'aspects/aspect_stream', stream: @stream
 
+    #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
       #selected_aspect_contacts.section
         .title

features/step_definitions/aspects_steps.rb

@@ -42,10 +42,10 @@ When /^I click on "([^"]*)" aspect edit icon$/ do |aspect_name|
 end
 
 When /^I select only "([^"]*)" aspect$/ do |aspect_name|
-  click_link 'My aspects'
+  click_link "My aspects"
-  within('#aspects_list') do
+  within("#aspects_list") do
-    click_link 'Deselect all'
+    all(".selected").each {|node| node.find(:xpath, "..").click }
-    current_scope.should have_no_css '.selected'
+    expect(current_scope).to have_no_css ".selected"
   end
   step %Q(I select "#{aspect_name}" aspect as well)
 end

features/step_definitions/tag_steps.rb

@@ -1,8 +1,8 @@
 When(/^I unfollow the "(.*?)" tag$/) do |tag|
   within("#tags_list") do
-    li = find('li', text: tag)
+    li = find("li", text: tag)
     li.hover
-    li.find('.delete-tag-following').click
+    li.find(".delete-tag-following").click
   end
-  step 'I confirm the alert'
+  step "I confirm the alert"
 end

spec/javascripts/app/views/aspects_list_view_spec.js

@@ -18,9 +18,9 @@ describe("app.views.AspectsList", function(){
       this.view.render();
     });
 
-    it('should show the corresponding aspects selected', function(){
+    it("should show the corresponding aspects selected", function(){
-      expect(this.view.$('.selected').length).toBe(1);
+      expect(this.view.$(".selected").length).toBe(1);
-      expect(this.view.$('.selected').parent().text()).toMatch('Work');
+      expect(this.view.$(".selected").parent().text()).toMatch("Work");
     });
 
     it("should show all the aspects", function(){