FIX: vertical centering of header, using display: table

app/assets/javascripts/discourse/components/header-extra-info.js.es6

@@ -1,6 +1,7 @@
 import DiscourseURL from 'discourse/lib/url';
 
 const TopicCategoryComponent = Ember.Component.extend({
+  classNames: ['extra-info-cell'],
   needsSecondRow: Ember.computed.gt('secondRowItems.length', 0),
   secondRowItems: function() { return []; }.property(),
 

app/assets/javascripts/discourse/components/home-logo.js.es6

@@ -2,7 +2,7 @@ import DiscourseURL from 'discourse/lib/url';
 import { setting } from 'discourse/lib/computed';
 
 export default Ember.Component.extend({
-  classNames: ["title"],
+  classNameBindings: [":title", "minimized"],
 
   targetUrl: function() {
     // For overriding by customizations

app/assets/javascripts/discourse/templates/header.hbs

@@ -1,66 +1,70 @@
-<div class='wrap'>
+<div {{bind-attr class=":wrap :d-header-wrap showExtraInfo:minimized:not-minimized"}}>
-  <div class='contents clearfix'>
+  <div class='d-header-table contents clearfix'>
-    {{home-logo minimized=showExtraInfo}}
+    <div class="d-header-row">
-    {{plugin-outlet "header-after-home-logo"}}
+      {{home-logo minimized=showExtraInfo}}
+      {{plugin-outlet "header-after-home-logo"}}
 
-    <div class='panel clearfix'>
+      {{#if showExtraInfo}}
-      {{#unless currentUser}}
+        {{header-extra-info topic=topic}}
-        {{#if showSignUpButton}}
+      {{/if}}
-          {{d-button action="showCreateAccount" class="btn-primary btn-small sign-up-button" label="sign_up"}}
-        {{/if}}
-        {{d-button action="showLogin" class="btn-primary btn-small login-button" icon="user" label="log_in"}}
-      {{/unless}}
-      <ul class='icons clearfix' role='navigation'>
-        {{#if currentUser}}
-          {{plugin-outlet "header-before-notifications"}}
-        {{/if}}
 
-        {{#header-dropdown iconId="search-button"
+      <div class='panel clearfix'>
-                           icon="search"
+        {{#unless currentUser}}
-                           action="toggleSearch"
+          {{#if showSignUpButton}}
-                           toggleVisible=searchVisible
+            {{d-button action="showCreateAccount" class="btn-primary btn-small sign-up-button" label="sign_up"}}
-                           mobileAction="fullPageSearch"
-                           loginAction="showLogin"
-                           title="search.title"
-                           path="/search"}}
-        {{/header-dropdown}}
-
-        {{#header-dropdown iconId="toggle-hamburger-menu"
-                           icon="bars"
-                           toggleVisible=hamburgerVisible
-                           loginAction="showLogin"
-                           title="hamburger_menu"}}
-          {{#if flaggedPostsCount}}
-            <a href='/admin/flags/active' title='{{i18n 'notifications.total_flagged'}}' class='badge-notification flagged-posts'>{{flaggedPostsCount}}</a>
           {{/if}}
-        {{/header-dropdown}}
+          {{d-button action="showLogin" class="btn-primary btn-small login-button" icon="user" label="log_in"}}
+        {{/unless}}
+        <div class="d-header-nav">
+          <ul class='icons clearfix' role='navigation'>
+            {{#if currentUser}}
+              {{plugin-outlet "header-before-notifications"}}
+            {{/if}}
 
-        {{#if currentUser}}
+            {{#header-dropdown iconId="search-button"
-          {{#header-dropdown iconId="current-user"
+                               icon="search"
-                             class="current-user"
+                               action="toggleSearch"
-                             showUser="true"
+                               toggleVisible=searchVisible
-                             toggleVisible=userMenuVisible
+                               mobileAction="fullPageSearch"
-                             loginAction="showLogin"
+                               loginAction="showLogin"
-                             title="user.avatar.header_title"}}
+                               title="search.title"
-            {{#if currentUser.unread_notifications}}
+                               path="/search"}}
-              <a href {{action "showUserMenu"}} class='badge-notification unread-notifications'>{{currentUser.unread_notifications}}</a>
+            {{/header-dropdown}}
+
+            {{#header-dropdown iconId="toggle-hamburger-menu"
+                               icon="bars"
+                               toggleVisible=hamburgerVisible
+                               loginAction="showLogin"
+                               title="hamburger_menu"}}
+              {{#if flaggedPostsCount}}
+                <a href='/admin/flags/active' title='{{i18n 'notifications.total_flagged'}}' class='badge-notification flagged-posts'>{{flaggedPostsCount}}</a>
+              {{/if}}
+            {{/header-dropdown}}
+
+            {{#if currentUser}}
+              {{#header-dropdown iconId="current-user"
+                                 class="current-user"
+                                 showUser="true"
+                                 toggleVisible=userMenuVisible
+                                 loginAction="showLogin"
+                                 title="user.avatar.header_title"}}
+                {{#if currentUser.unread_notifications}}
+                  <a href {{action "showUserMenu"}} class='badge-notification unread-notifications'>{{currentUser.unread_notifications}}</a>
+                {{/if}}
+                {{#if currentUser.unread_private_messages}}
+                  <a href {{action "showUserMenu"}} class='badge-notification unread-private-messages'>{{currentUser.unread_private_messages}}</a>
+                {{/if}}
+                {{plugin-outlet "header-notifications"}}
+              {{/header-dropdown}}
             {{/if}}
-            {{#if currentUser.unread_private_messages}}
+          </ul>
-              <a href {{action "showUserMenu"}} class='badge-notification unread-private-messages'>{{currentUser.unread_private_messages}}</a>
+          {{plugin-outlet "header-before-dropdowns"}}
-            {{/if}}
+          {{user-menu visible=userMenuVisible logoutAction="logout"}}
-            {{plugin-outlet "header-notifications"}}
+          {{hamburger-menu visible=hamburgerVisible showKeyboardAction="showKeyboardShortcutsHelp"}}
-          {{/header-dropdown}}
+          {{search-menu visible=searchVisible}}
-        {{/if}}
+        </div>
-      </ul>
+      </div>
-        {{plugin-outlet "header-before-dropdowns"}}
-        {{user-menu visible=userMenuVisible logoutAction="logout"}}
-        {{hamburger-menu visible=hamburgerVisible showKeyboardAction="showKeyboardShortcutsHelp"}}
-        {{search-menu visible=searchVisible}}
     </div>
-
-    {{#if showExtraInfo}}
-      {{header-extra-info topic=topic}}
-    {{/if}}
   </div>
 </div>
 {{plugin-outlet "header-under-content"}}

app/assets/stylesheets/common/base/header.scss

@@ -1,136 +1,167 @@
 .d-header {
+  width: 100%;
+  position: absolute;
+  top: 0;
+  z-index: 1001;
+  background-color: $header_background;
+  box-shadow: 0 2px 4px -1px rgba(0,0,0, .25);
+
+  .docked & {
+    position: fixed;
+    backface-visibility: hidden;  /** do magic for scrolling performance **/
+  }
+
+  .d-header-table {
+    display: table;
+    table-layout: fixed; /* or else long topic titles break everything */
     width: 100%;
-    position: absolute;
+    margin: 8px auto;
-    top: 0;
+  }
-    z-index: 1001;
+  .d-header-row {
-    background-color: $header_background;
+    display: table-header-group; /* table-row doesn't work on mobile */
-    box-shadow: 0 2px 4px -1px rgba(0,0,0, .25);
+  }
-
+  .d-header-wrap {
-    .docked & {
+    padding: 0;
-      position: fixed;
+  }
-      backface-visibility: hidden;  /** do magic for scrolling performance **/
+  .title, .extra-info-cell, .panel {
+    display: table-cell;
+  }
+  .title {
+    vertical-align: middle;
+    padding-left: 8px;
+    overflow: hidden;
+    width: 65%;
+  }
+  .extra-info-cell {
+    vertical-align: middle;
+    padding-left: 8px;
+  }
+  .panel {
+    width:35%;
+    text-align: right;
+    position: relative;
+    .menu-panel {
+      text-align: left;
     }
+  }
 
-    .contents {
+  .not-minimized {
-      margin: 8px 0;
+    .title { width: 65%; }
-    }
+    .panel { width: 35%; }
+  }
+  /* .minimized is different for desktop and mobile */
 
-    .title {
+  .d-header-nav {
+    position: relative;
+    float: right;
+  }
+
+  #site-logo {
+    max-height: 40px;
+  }
+
+  .fa-home {
+    font-size: 1.643em;
+  }
+
+  .login-button, button.sign-up-button {
+    float: none;
+    margin-top: 7px;
+    padding: 6px 10px;
+    .fa { margin-right: 3px; }
+  }
+
+  button.login-button {
+    margin-left: 7px;
+  }
+
+  .icons {
+    text-align: center;
+    margin: 0 0 0 5px;
+    list-style: none;
+
+    > li {
       float: left;
     }
+    .icon {
+      display: block;
+      padding: 3px;
+      color: dark-light-choose(scale-color($header_primary, $lightness: 50%), $header_primary);
+      text-decoration: none;
+      cursor: pointer;
+      border-top: 1px solid transparent;
+      border-left: 1px solid transparent;
+      border-right: 1px solid transparent;
+      transition: all linear .15s;
 
-    #site-logo {
-      max-height: 40px;
-    }
 
-    .fa-home {
+      &:hover {
-      font-size: 1.643em;
+        color: $primary;
-    }
+        background-color:  dark-light-diff($primary, $secondary, 90%, -60%);
-
-    .panel {
-      float: right;
-      position: relative;
-    }
-
-    .login-button, button.sign-up-button {
-      float: left;
-      margin-top: 7px;
-      padding: 6px 10px;
-      .fa { margin-right: 3px; }
-    }
-
-    button.login-button {
-      margin-left: 7px;
-    }
-
-    .icons {
-      float: left;
-      text-align: center;
-      margin: 0 0 0 5px;
-      list-style: none;
-
-      > li {
-        float: left;
-      }
-      .icon {
-        display: block;
-        padding: 3px;
-        color: dark-light-choose(scale-color($header_primary, $lightness: 50%), $header_primary);
-        text-decoration: none;
-        cursor: pointer;
         border-top: 1px solid transparent;
         border-left: 1px solid transparent;
         border-right: 1px solid transparent;
-        transition: all linear .15s;
-
-
-        &:hover {
-          color: $primary;
-          background-color:  dark-light-diff($primary, $secondary, 90%, -60%);
-          border-top: 1px solid transparent;
-          border-left: 1px solid transparent;
-          border-right: 1px solid transparent;
-        }
-        &:active {
-          color: $primary;
-          background-color: dark-light-diff($primary, $secondary, 90%, -60%);
-        }
       }
-      .drop-down-visible & {
+      &:active {
-        .active .icon {
+        color: $primary;
-          position: relative;
+        background-color: dark-light-diff($primary, $secondary, 90%, -60%);
-          color: #7b7b7b;
-          background-color: $secondary;
-          cursor: default;
-          border-top: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
-          border-left: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
-          border-right: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
-          &:after {
-            display: block;
-            position: absolute;
-            top: 100%;
-            left: 0;
-            z-index: 1101;
-            width: 100%;
-            height: 0;
-            content: "";
-            border-top: 1px solid $secondary;
-          }
-          &:hover {
-            border-bottom: none;
-          }
-        }
       }
-      [class^="fa fa-"] {
+    }
-        width: 32px;
+    .drop-down-visible & {
-        height: 32px;
+      .active .icon {
-        font-size: 1.714em;
-        line-height: 32px;
-        display: inline-block;
-      }
-      .notifications {
         position: relative;
+        color: #7b7b7b;
+        background-color: $secondary;
+        cursor: default;
+        border-top: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
+        border-left: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
+        border-right: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
+        &:after {
+          display: block;
+          position: absolute;
+          top: 100%;
+          left: 0;
+          z-index: 1101;
+          width: 100%;
+          height: 0;
+          content: "";
+          border-top: 1px solid $secondary;
+        }
+        &:hover {
+          border-bottom: none;
+        }
       }
-      .badge-notification {
+    }
-        position: absolute;
+    [class^="fa fa-"] {
-        top: -9px;
+      width: 32px;
-        z-index: 1;
+      height: 32px;
-        margin-left: 0;
+      font-size: 1.714em;
-      }
+      line-height: 32px;
-      .unread-notifications {
+      display: inline-block;
-        right: 0;
+    }
-        background-color: scale-color($tertiary, $lightness: 50%);
+    .notifications {
-      }
+      position: relative;
-      .unread-private-messages {
+    }
-        right: 25px;
+    .badge-notification {
-      }
+      position: absolute;
-      .flagged-posts {
+      top: -9px;
-        right: 65px;
+      z-index: 1;
-      }
+      margin-left: 0;
+    }
+    .unread-notifications {
+      right: 0;
+      background-color: scale-color($tertiary, $lightness: 50%);
+    }
+    .unread-private-messages {
+      right: 25px;
     }
     .flagged-posts {
-      background: $danger;
+      right: 65px;
     }
+  }
+  .flagged-posts {
+    background: $danger;
+  }
 }
 
 

app/assets/stylesheets/desktop/header.scss

@@ -11,6 +11,11 @@
     padding:8px;
     font-size: 2.1em;
   }
+  .minimized {
+    .title           { width: 40px; vertical-align: baseline; }
+    .extra-info-cell { width: 74%; }
+    .panel           { width: 25%; }
+  }
 }
 
 @media all

app/assets/stylesheets/mobile/header.scss

@@ -17,6 +17,10 @@
     text-overflow: clip;
   }
 
+  .extra-info-cell {
+    display: none;
+  }
+
   .icons {
     .badge-notification {
       top: -5px;
@@ -31,6 +35,11 @@
   button.sign-up-button {
     display:none;
   }
+
+  .not-minimized, .minimized {
+    .title { width: auto; }
+    .panel { width: auto; }
+  }
 }
 
 #main-outlet {