Merge pull request #7509 from Flaburgan/responsive-header

Improve responsive header in desktop version

Changelog.md

@@ -43,6 +43,7 @@ If so, please delete it since it will prevent the federation from working proper
 * Support direct links to comments on mobile [#7508](https://github.com/diaspora/diaspora/pull/7508)
 * Add inviter first and last name in the invitation e-mail [#7484](https://github.com/diaspora/diaspora/pull/7484)
 * Add markdown editor for comments and conversations [#7482](https://github.com/diaspora/diaspora/pull/7482)
+* Improve responsive header in desktop version [#7509](https://github.com/diaspora/diaspora/pull/7509)
 
 # 0.6.8.0
 

app/assets/javascripts/app/views/notification_dropdown_view.js

@@ -26,7 +26,6 @@ app.views.NotificationDropdown = app.views.Base.extend({
 
   toggleDropdown: function(evt){
     evt.stopPropagation();
-    if (!$("#notifications-link .entypo-bell:visible").length) { return true; }
     evt.preventDefault();
     if(this.dropdownShowing()){ this.hideDropdown(evt); }
     else{ this.showDropdown(); }

app/assets/stylesheets/color_themes/_color_theme_override_dark.scss

@@ -1,11 +1,6 @@
 // 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 {
-    color: $text-color;
-    &:hover { color: $white; }
-  }
-
   .publisher {
     form {
       #publisher_textarea_wrapper { background-color: $gray; }

app/assets/stylesheets/color_themes/dark/_style.scss

@@ -59,7 +59,8 @@ $dropdown-link-hover-color: $dropdown-link-color;
 
 //== Navbar
 $navbar-inverse-bg: $gray-darker;
-$navbar-inverse-link-hover-color: $text-color;
+$navbar-inverse-link-color: $gray-lighter;
+$navbar-inverse-link-hover-color: $white;
 $navbar-inverse-brand-hover-color: $navbar-inverse-link-hover-color;
 
 //== Tabs

app/assets/stylesheets/header.scss

@@ -1,68 +1,68 @@
+.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;
-  a:focus {outline: 0 none; }
+  a:focus { outline: 0 none; }
+
+  .in {
+    overflow-y: visible; // Avoid search result dropdown to be hidden
+  }
 
   .navbar-brand {
     font-weight: bold;
     font-size: $font-size-h3;
+    margin-left: -15px;
   }
 
-  @media (max-width: $grid-float-breakpoint-max) {
+  .header-title {
-    .navbar-header > .nav li { display: inline-block !important; }
+    margin: (($navbar-height - 32px - 2 * $navbar-padding-vertical) / 2) 0;
-    .nav-badge {
+
-      color: $navbar-inverse-link-color;
+    img {
-      padding-left: 12px;
+      height: 32px;
-      padding-right: 12px;
+      opacity: .7;
-      &:hover { color: $navbar-inverse-link-hover-color; }
-      &:hover,
-      &:focus {
-        background-color: transparent;
-      }
     }
-    #navbar-collapse {
+
-      .form-group, .twitter-typeahead  {
+    img:hover {
-        display: block !important;
+      opacity: 1;
-        margin-bottom: 0;
-        &, & input { width: 100% }
-      }
     }
   }
-  @media (min-width: $grid-float-breakpoint) {
+
-    input[type="search"] {
+  .navbar-header > ul,
-      @include transition(width);
+  .navbar-header > ul li {
-      margin-top: 2px;
+    float: left;
-      width: 200px;
+  }
-      &:not(.active) {
+
-        background-color: $navbar-inverse-bg;
+  [class^="entypo-"],
-        border-color: $gray-light;
+  [class*="entypo-"] {
-        width: 150px;
+    color: inherit;
-      }
+    font-size: $font-size-h3;
-    }
+    vertical-align: middle;
-    #user_menu {
+  }
-      &.open .dropdown-toggle { background-color: darken($navbar-inverse-bg, 7%); }
+
-      .dropdown-toggle {
+  .nav-badge {
-        margin: 0 1px;
+    padding: $navbar-padding-vertical 12px;
-        min-width: 160px;
+
-      }
+    .badge {
-      .dropdown-menu {
+      position: absolute;
-        background-color: darken($navbar-inverse-bg, 7%);
+      right: 10px;
-        border-top: none;
+      top: 10px;
-        width: 100%;
-        & > li > a {
-          color: $gray-light;
-          padding-left: 55px;
-          &:hover {
-            background-color: $brand-primary;
-            color: $gray-lighter;
-          }
-        }
-      }
     }
   }
 
   .navbar-nav:not(.nav-badges) > li > a { font-weight: bold; }
   .nav-badges {
+    margin: 0;
+
     li { height: $navbar-height; }
     .dropdown-open {
       background-color: $dropdown-bg;
@@ -118,31 +118,141 @@
       }
     }
   }
-  [class^="entypo-"], [class*="entypo-"] {
+
-    color: inherit;
+  .user-menu-dropdown {
-    font-size: $font-size-h3;
+    padding: 0;
-    vertical-align: middle;
-  }
-  .nav-badge {
-    margin-bottom: -2px;
-    .badge {
-      position: absolute;
-      right: 10px;
-      top: 10px;
-    }
   }
 
-  #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;
+  .navbar-form .form-control { display: inline-block; }
-      margin-bottom: -$navbar-padding-vertical;
+
-      margin-top: -$navbar-padding-vertical;
+  @media (max-width: $grid-float-breakpoint-max) {
-      margin-right: 10px;
+
+    .navbar-nav.hidden-xs {
+      margin: 0;
+
+      a {
+        padding-bottom: $navbar-padding-vertical;
+        padding-top: $navbar-padding-vertical;
+      }
+    }
+
+    .nav-badge {
+      color: $navbar-inverse-link-color;
+      &:hover { color: $navbar-inverse-link-hover-color; }
+      &:hover,
+      &:focus {
+        background-color: transparent;
+      }
+    }
+
+    .form-group,
+    .twitter-typeahead {
+      margin-bottom: 0;
+
+      &,
+      input { width: 100%; }
+    }
+
+    .nav-badges .dropdown-menu {
+      width: 300px;
+    }
+
+    .navbar-collapse {
+      padding-top: $navbar-padding-vertical / 2;
+
+      .navbar-nav {
+        margin-bottom: 0;
+        margin-top: 0;
+      }
+    }
+
+    .user-menu-dropdown {
+      background-color: transparent;
+      border: 0;
+      box-shadow: none;
+      display: block;
+      padding: 0;
+      position: static;
+      width: 100%;
+
+      a {
+        color: $navbar-inverse-link-color;
+        font-weight: bold;
+        padding: $nav-link-padding;
+
+        &:hover {
+          background-color: $navbar-inverse-link-hover-bg;
+          color: $navbar-inverse-link-hover-color;
+        }
+      }
+    }
+  }
+
+  @media (min-width: $grid-float-breakpoint) {
+
+    .navbar-form { // set correct margin for small inputs
+      margin-bottom: ($navbar-height - $input-height-small) / 2;
+      margin-top: ($navbar-height - $input-height-small) / 2;
+    }
+
+    [type="search"] {
+      @include transition(width);
+      width: 200px;
+
+      &:not(.active) {
+        background-color: $navbar-inverse-bg;
+        border-color: $gray-light;
+        width: 150px;
+      }
+    }
+
+    .user-menu {
+      &.open .dropdown-toggle { background-color: darken($navbar-inverse-bg, 7%); }
+      .dropdown-toggle {
+        margin: 0 1px;
+        min-width: 160px;
+      }
+    }
+
+    .user-menu-dropdown {
+      background-color: darken($navbar-inverse-bg, 7%);
+      border-top: 0;
+      width: 100%;
+
+      a {
+        color: $navbar-inverse-link-color;
+        padding-left: 55px;
+
+        &:hover {
+          background-color: $list-group-hover-bg;
+          color: $list-group-link-hover-color;
+        }
+      }
+
+      li:last-child a {
+        padding-bottom: 6px;
+      }
+    }
+  }
+
+  @media (max-width: $screen-xs-max) {
+    .nav-badges .dropdown-menu {
+      position: fixed;
+      top: $navbar-height;
+      width: 100%;
     }
   }
 }

app/assets/stylesheets/mobile/header.scss

@@ -33,10 +33,15 @@ $mobile-navbar-height: 46px;
     li { float: left; }
   }
 
-  #header-title {
+  .header-title {
     padding: 7px 15px;
     margin: 0 0 0 -15px;
     height: $mobile-navbar-height;
+
+    img {
+      height: 30px;
+      width: 30px;
+    }
   }
 
   #nav-badges {
@@ -87,12 +92,6 @@ $mobile-navbar-height: 46px;
       background-color: $red;
     }
   }
-  #header-title{
-    img {
-      height: 30px;
-      width: 30px;
-    }
-  }
 }
 
 #drawer {

app/assets/templates/header_tpl.jst.hbs

@@ -10,46 +10,24 @@
             <span class="icon-bar"></span>
           </button>
           <a href="/stream" class="navbar-brand" data-stream-title="{{t "my_stream"}}">
-            {{ podname }}
+            <span class="hidden-xs">{{ podname }}</span>
+            <div class="visible-xs-block header-title">
+              <img src="{{imageUrl 'branding/logos/asterisk_white_mobile.png'}}" alt="{{ podname }}" />
+            </div>
           </a>
-          <ul class="nav nav-badges visible-sm">
+          <ul class="nav navbar-nav hidden-xs">
-            <li>
-              <a href="/notifications" title="{{t "header.notifications"}}" class="notifications-link nav-badge">
-                <i class="entypo-bell"></i>
-                <span class="badge badge-important {{#unless current_user.notifications_count}} hidden {{/unless}}">
-                  {{current_user.notifications_count}}
-                </span>
-              </a>
-            </li>
-            <li>
-              <a href="/conversations" title="{{t "header.conversations"}}" class="conversations-link nav-badge">
-                <i class="entypo-mail"></i>
-                <span class="badge badge-important {{#unless current_user.unread_messages_count}} hidden {{/unless}}">
-                  {{current_user.unread_messages_count}}
-                </span>
-              </a>
-            </li>
-          </ul>
-        </div>
-
-        <div class="collapse navbar-collapse" id="navbar-collapse">
-          <ul class="nav navbar-nav navbar-left">
             <li><a href="/stream">{{t "my_stream"}}</a></li>
             <li><a href="/activity">{{t "my_activity"}}</a></li>
-            <li class="visible-xs"><a href="/notifications">{{t "header.notifications"}}</a></li>
-            <li class="visible-xs"><a href="/conversations">{{t "header.conversations"}}</a></li>
-            <li class="visible-sm visible-xs"><a href="/mobile/toggle">{{t "header.toggle_mobile"}}</a></li>
           </ul>
-
+          <ul class="nav navbar-nav nav-badges">
-          <ul class="nav navbar-nav navbar-left nav-badges hidden-sm hidden-xs">
             <li class="dropdown" id="notification-dropdown">
-              <a id="notifications-link" href="/notifications" title="{{t "header.notifications"}}" class="notifications-link nav-badge hidden-sm hidden-xs" role="button" data-toggle="dropdown" aria-expanded="false" data-target=" ">
+              <a id="notifications-link" href="/notifications" title="{{t "header.notifications"}}" class="notifications-link nav-badge"
+                role="button" data-toggle="dropdown" aria-expanded="false" data-target=" ">
                 <i class="entypo-bell"></i>
                 <span class="badge badge-important {{#unless current_user.notifications_count}} hidden {{/unless}}">
                   {{current_user.notifications_count}}
                 </span>
               </a>
-
               <ul class="dropdown-menu" role="menu">
                 <div class="header">
                   <div class="pull-right">
@@ -71,11 +49,9 @@
                   </a>
                 </div>
               </ul>
-
             </li>
-
             <li>
-              <a id="conversations-link" href="/conversations" title="{{t "header.conversations"}}" class="conversations-link nav-badge hidden-sm hidden-xs">
+              <a id="conversations-link" href="/conversations" title="{{t "header.conversations"}}" class="conversations-link nav-badge">
                 <i class="entypo-mail"></i>
                 <span class="badge badge-important {{#unless current_user.unread_messages_count}} hidden {{/unless}}">
                   {{current_user.unread_messages_count}}
@@ -83,10 +59,17 @@
               </a>
             </li>
           </ul>
+        </div>
+        <div class="collapse navbar-collapse" id="navbar-collapse">
+          <ul class="nav navbar-nav navbar-left visible-sm-block visible-xs-block">
+            <li class="visible-xs-block"><a href="/stream">{{t "my_stream"}}</a></li>
+            <li class="visible-xs-block"><a href="/activity">{{t "my_activity"}}</a></li>
+            <li><a href="/mobile/toggle">{{t "header.toggle_mobile"}}</a></li>
+          </ul>
 
           <ul class="nav navbar-nav navbar-right">
-            <li class="dropdown" id="user_menu">
+            <li class="dropdown user-menu" id="user-menu">
-              <a href="{{urlTo "person" current_user.guid}}" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
+              <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"}}}
                 </span>
@@ -94,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.html.haml

@@ -9,14 +9,11 @@
         .container-fluid
           .row
             .col-md-12
-              .navbar-header
+              .not-connected-menu
-                %button.navbar-toggle.collapsed{type: "button", data: {toggle: "collapse", target: "#navbar-collapse"}}
+                .navbar-header.navbar-left
-                  %span.sr-only
+                  .hidden-xs
-                    = t("layouts.header.toggle_navigation")
+                    = link_to AppConfig.settings.pod_name, root_path, class: "navbar-brand"
-                  %span.icon-bar
+                  .visible-xs-block.header-title
-                  %span.icon-bar
+                    = link_to(image_tag("branding/logos/asterisk_white_mobile.png", class: "img-responsive"),
-                  %span.icon-bar
+                        root_path, class: "navbar-brand")
-                = link_to AppConfig.settings.pod_name, root_path, class: "navbar-brand"
-
-              .collapse.navbar-collapse#navbar-collapse
                 = render "layouts/header_not_connected"

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

spec/javascripts/app/views/notifications_view_spec.js

@@ -142,18 +142,13 @@ describe("app.views.Notifications", function() {
         });
 
         it("changes the header notifications count", function() {
-          var badge1 = $(".notifications-link:eq(0) .badge");
+          var badge = $(".notifications-link .badge");
-          var badge2 = $(".notifications-link:eq(1) .badge");
 
-          expect(parseInt(badge1.text(), 10)).toBe(this.collection.unreadCount);
+          expect(parseInt(badge.text(), 10)).toBe(this.collection.unreadCount);
-          expect(parseInt(badge2.text(), 10)).toBe(this.collection.unreadCount);
 
           this.collection.unreadCount++;
           this.view.updateView();
-          expect(parseInt(badge1.text(), 10)).toBe(this.collection.unreadCount);
+          expect(parseInt(badge.text(), 10)).toBe(this.collection.unreadCount);
-
-          this.view.updateView();
-          expect(parseInt(badge2.text(), 10)).toBe(this.collection.unreadCount);
         });
 
         it("disables the mark-all-read-link button", function() {