From 37ccfbdb2a63a4ffe84dab056469f894d69b7b3a Mon Sep 17 00:00:00 2001 From: Sam Date: Fri, 18 Mar 2016 14:29:39 +1100 Subject: [PATCH] Revert "FIX: vertical centering of header, using display: table" This reverts commit 1b4e0f3300e5927c4531322a0beb1928a484a9e7. --- .../components/header-extra-info.js.es6 | 1 - .../discourse/components/home-logo.js.es6 | 2 +- .../discourse/templates/header.hbs | 118 ++++---- .../stylesheets/common/base/header.scss | 261 ++++++++---------- app/assets/stylesheets/desktop/header.scss | 5 - app/assets/stylesheets/mobile/header.scss | 9 - 6 files changed, 173 insertions(+), 223 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 9659bbf6a..2182f3ea3 100644 --- a/app/assets/javascripts/discourse/components/header-extra-info.js.es6 +++ b/app/assets/javascripts/discourse/components/header-extra-info.js.es6 @@ -1,7 +1,6 @@ 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 016900803..c0846e268 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({ - classNameBindings: [":title", "minimized"], + classNames: ["title"], 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 ecf49f3b0..ad1af7352 100644 --- a/app/assets/javascripts/discourse/templates/header.hbs +++ b/app/assets/javascripts/discourse/templates/header.hbs @@ -1,70 +1,66 @@ -
-
-
- {{home-logo minimized=showExtraInfo}} - {{plugin-outlet "header-after-home-logo"}} +
+
+ {{home-logo minimized=showExtraInfo}} + {{plugin-outlet "header-after-home-logo"}} - {{#if showExtraInfo}} - {{header-extra-info topic=topic}} - {{/if}} +
+ {{#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 e2adc7310..63c41255d 100644 --- a/app/assets/stylesheets/common/base/header.scss +++ b/app/assets/stylesheets/common/base/header.scss @@ -1,167 +1,136 @@ .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%; - 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; + 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 **/ } - } - .not-minimized { - .title { width: 65%; } - .panel { width: 35%; } - } - /* .minimized is different for desktop and mobile */ + .contents { + margin: 8px 0; + } - .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 { + .title { 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; + } - &:hover { - color: $primary; - background-color: dark-light-diff($primary, $secondary, 90%, -60%); + .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; 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; - } + transition: all linear .15s; + + &:hover { - border-bottom: none; + 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%); } } - } - [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; + .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; + } + } + } + [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 { + right: 65px; + } } .flagged-posts { - right: 65px; + background: $danger; } - } - .flagged-posts { - background: $danger; - } } diff --git a/app/assets/stylesheets/desktop/header.scss b/app/assets/stylesheets/desktop/header.scss index b5df37bba..ff74c6714 100644 --- a/app/assets/stylesheets/desktop/header.scss +++ b/app/assets/stylesheets/desktop/header.scss @@ -11,11 +11,6 @@ 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 33ab899a0..3b8e8e15f 100644 --- a/app/assets/stylesheets/mobile/header.scss +++ b/app/assets/stylesheets/mobile/header.scss @@ -17,10 +17,6 @@ text-overflow: clip; } - .extra-info-cell { - display: none; - } - .icons { .badge-notification { top: -5px; @@ -35,11 +31,6 @@ button.sign-up-button { display:none; } - - .not-minimized, .minimized { - .title { width: auto; } - .panel { width: auto; } - } } #main-outlet {