From 1b4e0f3300e5927c4531322a0beb1928a484a9e7 Mon Sep 17 00:00:00 2001 From: Neil Lalonde Date: Tue, 8 Mar 2016 17:50:06 -0500 Subject: [PATCH] FIX: vertical centering of header, using display: table --- .../components/header-extra-info.js.es6 | 1 + .../discourse/components/home-logo.js.es6 | 2 +- .../discourse/templates/header.hbs | 118 ++++---- .../stylesheets/common/base/header.scss | 259 ++++++++++-------- app/assets/stylesheets/desktop/header.scss | 5 + app/assets/stylesheets/mobile/header.scss | 9 + 6 files changed, 222 insertions(+), 172 deletions(-) diff --git a/app/assets/javascripts/discourse/components/header-extra-info.js.es6 b/app/assets/javascripts/discourse/components/header-extra-info.js.es6 index 2182f3ea3..9659bbf6a 100644 --- a/app/assets/javascripts/discourse/components/header-extra-info.js.es6 +++ b/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(), diff --git a/app/assets/javascripts/discourse/components/home-logo.js.es6 b/app/assets/javascripts/discourse/components/home-logo.js.es6 index c0846e268..016900803 100644 --- a/app/assets/javascripts/discourse/components/home-logo.js.es6 +++ b/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 diff --git a/app/assets/javascripts/discourse/templates/header.hbs b/app/assets/javascripts/discourse/templates/header.hbs index ad1af7352..ecf49f3b0 100644 --- a/app/assets/javascripts/discourse/templates/header.hbs +++ b/app/assets/javascripts/discourse/templates/header.hbs @@ -1,66 +1,70 @@ -
-
- {{home-logo minimized=showExtraInfo}} - {{plugin-outlet "header-after-home-logo"}} +
+
+
+ {{home-logo minimized=showExtraInfo}} + {{plugin-outlet "header-after-home-logo"}} -
- {{#unless currentUser}} - {{#if showSignUpButton}} - {{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}} - + {{plugin-outlet "header-before-dropdowns"}} + {{user-menu visible=userMenuVisible logoutAction="logout"}} + {{hamburger-menu visible=hamburgerVisible showKeyboardAction="showKeyboardShortcutsHelp"}} + {{search-menu visible=searchVisible}} +
+
- - {{#if showExtraInfo}} - {{header-extra-info topic=topic}} - {{/if}}
{{plugin-outlet "header-under-content"}} diff --git a/app/assets/stylesheets/common/base/header.scss b/app/assets/stylesheets/common/base/header.scss index 63c41255d..e2adc7310 100644 --- a/app/assets/stylesheets/common/base/header.scss +++ b/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; - 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 **/ + margin: 8px auto; + } + .d-header-row { + display: table-header-group; /* table-row doesn't work on mobile */ + } + .d-header-wrap { + padding: 0; + } + .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 { - margin: 8px 0; - } + .not-minimized { + .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 { - font-size: 1.643em; - } - - .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; + &: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; - 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 .icon { - 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; - } - } + &:active { + color: $primary; + background-color: dark-light-diff($primary, $secondary, 90%, -60%); } - [class^="fa fa-"] { - width: 32px; - height: 32px; - font-size: 1.714em; - line-height: 32px; - display: inline-block; - } - .notifications { + } + .drop-down-visible & { + .active .icon { 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; - top: -9px; - z-index: 1; - margin-left: 0; - } - .unread-notifications { - right: 0; - background-color: scale-color($tertiary, $lightness: 50%); - } - .unread-private-messages { - right: 25px; - } - .flagged-posts { - right: 65px; - } + } + [class^="fa fa-"] { + width: 32px; + height: 32px; + font-size: 1.714em; + line-height: 32px; + display: inline-block; + } + .notifications { + position: relative; + } + .badge-notification { + position: absolute; + top: -9px; + 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; + } } diff --git a/app/assets/stylesheets/desktop/header.scss b/app/assets/stylesheets/desktop/header.scss index ff74c6714..b5df37bba 100644 --- a/app/assets/stylesheets/desktop/header.scss +++ b/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 diff --git a/app/assets/stylesheets/mobile/header.scss b/app/assets/stylesheets/mobile/header.scss index 3b8e8e15f..33ab899a0 100644 --- a/app/assets/stylesheets/mobile/header.scss +++ b/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 {