Refactor ids to classes, reorder css properties, css selectors depth

app/assets/stylesheets/color_themes/_color_theme_override_dark.scss

@@ -1,7 +1,7 @@
 // Only overriding existing selectors here, so disable some lint rules
 // scss-lint:disable IdSelector, SelectorFormat, NestingDepth, SelectorDepth, QualifyingElement
 body {
-  .navbar.navbar-fixed-top #user_menu .dropdown-menu > li > a {
+  .navbar.navbar-fixed-top #user-menu .dropdown-menu > li > a {
     color: $text-color;
     &:hover { color: $white; }
   }

app/assets/stylesheets/header.scss

@@ -1,3 +1,14 @@
+.not-connected-menu {
+  .navbar-left {
+    float: left;
+  }
+
+  .navbar-right,
+  .navbar-right li {
+    float: right;
+  }
+}
+
 .navbar.navbar-fixed-top {
   border-bottom: none;
   box-shadow: 1px 0 2px $black;
@@ -13,13 +24,14 @@
     margin-left: -15px;
   }
 
-  #header-title {
+  .header-title {
     margin-top: -7px;
 
     img {
       height: 32px;
       opacity: .7;
     }
+
     img:hover {
       opacity: 1;
     }
@@ -107,28 +119,17 @@
     }
   }
 
-  #user_menu {
+  .user-avatar {
+    height: $navbar-height;
+    margin-bottom: -$navbar-padding-vertical;
+    margin-right: 10px;
+    margin-top: -$navbar-padding-vertical;
+    padding: ($navbar-height - 30px) / 2 0;
+
     .avatar {
       height: 30px;
       width: 30px;
     }
-    .user-avatar {
-      height: $navbar-height;
-      padding: ($navbar-height - 30px)/2 0;
-      margin-bottom: -$navbar-padding-vertical;
-      margin-top: -$navbar-padding-vertical;
-      margin-right: 10px;
-    }
-  }
-
-  .not-connected-menu {
-    .navbar-left {
-      float: left;
-    }
-    .navbar-right,
-    .navbar-right li {
-      float: right;
-    }
   }
 
   @media (max-width: $grid-float-breakpoint-max) {
@@ -147,30 +148,27 @@
       }
     }
 
-    #navbar-collapse {
+    .form-group,
-      .form-group,
+    .twitter-typeahead {
-      .twitter-typeahead {
+      margin-bottom: 0;
-        display: block !important;
-        margin-bottom: 0;
 
-        &,
+      &,
-        input { width: 100%; }
+      input { width: 100%; }
-      }
     }
 
     .nav-badges .dropdown-menu {
       width: 300px;
     }
 
-    #user_menu .dropdown-menu {
+    .user-menu-dropdown {
+      background-color: transparent;
+      border: 0;
+      box-shadow: none;
       display: block;
+      margin-top: -8px; // To compensate parent ul margin
+      padding: 0;
       position: static;
       width: 100%;
-      background-color: transparent;
-      box-shadow: none;
-      border: 0;
-      padding: 0;
-      margin-top: -8px; // To compensate parent ul margin
 
       a {
         color: #9d9d9d;
@@ -178,8 +176,8 @@
         padding: 10px 15px;
 
         &:hover {
-          color: #fff;
           background-color: transparent;
+          color: #fff;
         }
       }
     }
@@ -199,26 +197,26 @@
       }
     }
 
-    #user_menu {
+    #user-menu {
       &.open .dropdown-toggle { background-color: darken($navbar-inverse-bg, 7%); }
       .dropdown-toggle {
         margin: 0 1px;
         min-width: 160px;
       }
+    }
 
-      .dropdown-menu {
+    .user-menu-dropdown {
-        background-color: darken($navbar-inverse-bg, 7%);
+      background-color: darken($navbar-inverse-bg, 7%);
-        border-top: 0;
+      border-top: 0;
-        width: 100%;
+      width: 100%;
 
-        > li > a {
+      a {
-          color: $gray-light;
+        color: $gray-light;
-          padding-left: 55px;
+        padding-left: 55px;
 
-          &:hover {
+        &:hover {
-            background-color: $brand-primary;
+          background-color: $brand-primary;
-            color: $gray-lighter;
+          color: $gray-lighter;
-          }
         }
       }
     }

app/assets/stylesheets/mobile/header.scss

@@ -33,7 +33,7 @@ $mobile-navbar-height: 46px;
     li { float: left; }
   }
 
-  #header-title {
+  .header-title {
     padding: 7px 15px;
     margin: 0 0 0 -15px;
     height: $mobile-navbar-height;

app/assets/templates/header_tpl.jst.hbs

@@ -11,7 +11,7 @@
           </button>
           <a href="/stream" class="navbar-brand" data-stream-title="{{t "my_stream"}}">
             <span class="hidden-xs">{{ podname }}</span>
-            <span id="header-title" class="visible-xs">
+            <span class="visible-xs header-title">
               <img src="/assets/branding/logos/asterisk_white_mobile.png" alt="{{ podname }}" />
             </span>
           </a>
@@ -68,7 +68,7 @@
           </ul>
 
           <ul class="nav navbar-nav navbar-right">
-            <li class="dropdown" id="user_menu">
+            <li class="dropdown" id="user-menu">
               <a href="{{urlTo "person" current_user.guid}}" class="dropdown-toggle hidden-xs hidden-sm" data-toggle="dropdown" role="button" aria-expanded="false">
                 <span class="user-avatar pull-left">
                   {{{personImage current_user "small"}}}
@@ -77,7 +77,7 @@
                 <span class="caret"></span>
               </a>
 
-              <ul class="dropdown-menu" role="menu">
+              <ul class="dropdown-menu user-menu-dropdown" role="menu">
                 <li><a href="/people/{{current_user.guid}}">{{t "header.profile"}}</a></li>
                 <li><a href="/contacts">{{t "header.contacts"}}</a></li>
                 <li><a href="/user/edit">{{t "header.settings"}}</a></li>

app/views/layouts/_header.mobile.haml

@@ -2,7 +2,7 @@
   .container-fluid
     .navbar
       = link_to(image_tag("branding/logos/asterisk_white_mobile.png", class: "img-responsive"),
-          stream_path, id: "header-title", class: "navbar-brand")
+          stream_path, class: "navbar-brand header-title")
 
       - if user_signed_in?
         %ul.nav.navbar-nav#nav-badges

features/mobile/drawer.feature

@@ -9,7 +9,7 @@ Feature: Navigate between pages using the header menu and the drawer
 
   Scenario: navigate to the stream page
     When I go to the activity stream page
-    And I click on selector "#header-title"
+    And I click on selector ".header-title"
     Then I should be on the stream page
 
   Scenario: navigate to the notification page

features/support/user_cuke_helpers.rb

@@ -47,7 +47,7 @@ module UserCukeHelpers
     if mobile
       expect(page).to have_css "#menu-badge"
     else
-      expect(find("#user_menu")).to have_content "#{@me.first_name} #{@me.last_name}"
+      expect(find("#user-menu")).to have_content "#{@me.first_name} #{@me.last_name}"
     end
   end
 
@@ -58,8 +58,8 @@ module UserCukeHelpers
 
   # go to user menu, expand it, and click logout
   def manual_logout
-    find("#user_menu .dropdown-toggle").click
+    find("#user-menu .dropdown-toggle").click
-    find("#user_menu li:last-child a").click
+    find("#user-menu li:last-child a").click
   end
 
   def manual_logout_mobile

spec/javascripts/app/views/header_view_spec.js

@@ -44,13 +44,13 @@ describe("app.views.Header", function() {
       it("displays if the current user is an admin", function(){
         loginAs(_.extend(this.userAttrs, {admin : true}));
         this.view.render();
-        expect(this.view.$("#user_menu").html()).toContain("/admins");
+        expect(this.view.$("#user-menu").html()).toContain("/admins");
       });
 
       it("does not display if the current user is not an admin", function(){
         loginAs(_.extend(this.userAttrs, {admin : false}));
         this.view.render();
-        expect(this.view.$("#user_menu").html()).not.toContain("/admins");
+        expect(this.view.$("#user-menu").html()).not.toContain("/admins");
       });
     });
   });