mirror of
https://github.com/discourse/discourse.git
synced 2025-09-06 10:50:21 +08:00
Revert "FIX: vertical centering of header, using display: table"
This reverts commit 1b4e0f3300.
This commit is contained in:
Sam
parent
ebcf8970b3
commit
37ccfbdb2a
6 changed files with 173 additions and 223 deletions
|
|
@ -1,7 +1,6 @@
|
||||||
import DiscourseURL from 'discourse/lib/url';
|
import DiscourseURL from 'discourse/lib/url';
|
||||||
|
|
||||||
const TopicCategoryComponent = Ember.Component.extend({
|
const TopicCategoryComponent = Ember.Component.extend({
|
||||||
classNames: ['extra-info-cell'],
|
|
||||||
needsSecondRow: Ember.computed.gt('secondRowItems.length', 0),
|
needsSecondRow: Ember.computed.gt('secondRowItems.length', 0),
|
||||||
secondRowItems: function() { return []; }.property(),
|
secondRowItems: function() { return []; }.property(),
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,7 @@ import DiscourseURL from 'discourse/lib/url';
|
||||||
import { setting } from 'discourse/lib/computed';
|
import { setting } from 'discourse/lib/computed';
|
||||||
|
|
||||||
export default Ember.Component.extend({
|
export default Ember.Component.extend({
|
||||||
classNameBindings: [":title", "minimized"],
|
classNames: ["title"],
|
||||||
|
|
||||||
targetUrl: function() {
|
targetUrl: function() {
|
||||||
// For overriding by customizations
|
// For overriding by customizations
|
||||||
|
|
|
||||||
|
|
@ -1,70 +1,66 @@
|
||||||
<div {{bind-attr class=":wrap :d-header-wrap showExtraInfo:minimized:not-minimized"}}>
|
<div class='wrap'>
|
||||||
<div class='d-header-table contents clearfix'>
|
<div class='contents clearfix'>
|
||||||
<div class="d-header-row">
|
{{home-logo minimized=showExtraInfo}}
|
||||||
{{home-logo minimized=showExtraInfo}}
|
{{plugin-outlet "header-after-home-logo"}}
|
||||||
{{plugin-outlet "header-after-home-logo"}}
|
|
||||||
|
|
||||||
{{#if showExtraInfo}}
|
<div class='panel clearfix'>
|
||||||
{{header-extra-info topic=topic}}
|
{{#unless currentUser}}
|
||||||
{{/if}}
|
{{#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}}
|
||||||
|
<ul class='icons clearfix' role='navigation'>
|
||||||
|
{{#if currentUser}}
|
||||||
|
{{plugin-outlet "header-before-notifications"}}
|
||||||
|
{{/if}}
|
||||||
|
|
||||||
<div class='panel clearfix'>
|
{{#header-dropdown iconId="search-button"
|
||||||
{{#unless currentUser}}
|
icon="search"
|
||||||
{{#if showSignUpButton}}
|
action="toggleSearch"
|
||||||
{{d-button action="showCreateAccount" class="btn-primary btn-small sign-up-button" label="sign_up"}}
|
toggleVisible=searchVisible
|
||||||
|
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}}
|
{{/if}}
|
||||||
{{d-button action="showLogin" class="btn-primary btn-small login-button" icon="user" label="log_in"}}
|
{{/header-dropdown}}
|
||||||
{{/unless}}
|
|
||||||
<div class="d-header-nav">
|
{{#if currentUser}}
|
||||||
<ul class='icons clearfix' role='navigation'>
|
{{#header-dropdown iconId="current-user"
|
||||||
{{#if currentUser}}
|
class="current-user"
|
||||||
{{plugin-outlet "header-before-notifications"}}
|
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}}
|
||||||
|
{{#if currentUser.unread_private_messages}}
|
||||||
{{#header-dropdown iconId="search-button"
|
<a href {{action "showUserMenu"}} class='badge-notification unread-private-messages'>{{currentUser.unread_private_messages}}</a>
|
||||||
icon="search"
|
|
||||||
action="toggleSearch"
|
|
||||||
toggleVisible=searchVisible
|
|
||||||
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}}
|
|
||||||
|
|
||||||
{{#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}}
|
||||||
</ul>
|
{{plugin-outlet "header-notifications"}}
|
||||||
{{plugin-outlet "header-before-dropdowns"}}
|
{{/header-dropdown}}
|
||||||
{{user-menu visible=userMenuVisible logoutAction="logout"}}
|
{{/if}}
|
||||||
{{hamburger-menu visible=hamburgerVisible showKeyboardAction="showKeyboardShortcutsHelp"}}
|
</ul>
|
||||||
{{search-menu visible=searchVisible}}
|
{{plugin-outlet "header-before-dropdowns"}}
|
||||||
</div>
|
{{user-menu visible=userMenuVisible logoutAction="logout"}}
|
||||||
</div>
|
{{hamburger-menu visible=hamburgerVisible showKeyboardAction="showKeyboardShortcutsHelp"}}
|
||||||
|
{{search-menu visible=searchVisible}}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{{#if showExtraInfo}}
|
||||||
|
{{header-extra-info topic=topic}}
|
||||||
|
{{/if}}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{{plugin-outlet "header-under-content"}}
|
{{plugin-outlet "header-under-content"}}
|
||||||
|
|
|
||||||
|
|
@ -1,167 +1,136 @@
|
||||||
.d-header {
|
.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%;
|
width: 100%;
|
||||||
margin: 8px auto;
|
position: absolute;
|
||||||
}
|
top: 0;
|
||||||
.d-header-row {
|
z-index: 1001;
|
||||||
display: table-header-group; /* table-row doesn't work on mobile */
|
background-color: $header_background;
|
||||||
}
|
box-shadow: 0 2px 4px -1px rgba(0,0,0, .25);
|
||||||
.d-header-wrap {
|
|
||||||
padding: 0;
|
.docked & {
|
||||||
}
|
position: fixed;
|
||||||
.title, .extra-info-cell, .panel {
|
backface-visibility: hidden; /** do magic for scrolling performance **/
|
||||||
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;
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.not-minimized {
|
.contents {
|
||||||
.title { width: 65%; }
|
margin: 8px 0;
|
||||||
.panel { width: 35%; }
|
}
|
||||||
}
|
|
||||||
/* .minimized is different for desktop and mobile */
|
|
||||||
|
|
||||||
.d-header-nav {
|
.title {
|
||||||
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;
|
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 {
|
.fa-home {
|
||||||
color: $primary;
|
font-size: 1.643em;
|
||||||
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-top: 1px solid transparent;
|
||||||
border-left: 1px solid transparent;
|
border-left: 1px solid transparent;
|
||||||
border-right: 1px solid transparent;
|
border-right: 1px solid transparent;
|
||||||
}
|
transition: all linear .15s;
|
||||||
&: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 {
|
&: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%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
.drop-down-visible & {
|
||||||
[class^="fa fa-"] {
|
.active .icon {
|
||||||
width: 32px;
|
position: relative;
|
||||||
height: 32px;
|
color: #7b7b7b;
|
||||||
font-size: 1.714em;
|
background-color: $secondary;
|
||||||
line-height: 32px;
|
cursor: default;
|
||||||
display: inline-block;
|
border-top: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
|
||||||
}
|
border-left: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
|
||||||
.notifications {
|
border-right: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
|
||||||
position: relative;
|
&:after {
|
||||||
}
|
display: block;
|
||||||
.badge-notification {
|
position: absolute;
|
||||||
position: absolute;
|
top: 100%;
|
||||||
top: -9px;
|
left: 0;
|
||||||
z-index: 1;
|
z-index: 1101;
|
||||||
margin-left: 0;
|
width: 100%;
|
||||||
}
|
height: 0;
|
||||||
.unread-notifications {
|
content: "";
|
||||||
right: 0;
|
border-top: 1px solid $secondary;
|
||||||
background-color: scale-color($tertiary, $lightness: 50%);
|
}
|
||||||
}
|
&:hover {
|
||||||
.unread-private-messages {
|
border-bottom: none;
|
||||||
right: 25px;
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
[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 {
|
.flagged-posts {
|
||||||
right: 65px;
|
background: $danger;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
.flagged-posts {
|
|
||||||
background: $danger;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -11,11 +11,6 @@
|
||||||
padding:8px;
|
padding:8px;
|
||||||
font-size: 2.1em;
|
font-size: 2.1em;
|
||||||
}
|
}
|
||||||
.minimized {
|
|
||||||
.title { width: 40px; vertical-align: baseline; }
|
|
||||||
.extra-info-cell { width: 74%; }
|
|
||||||
.panel { width: 25%; }
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all
|
@media all
|
||||||
|
|
|
||||||
|
|
@ -17,10 +17,6 @@
|
||||||
text-overflow: clip;
|
text-overflow: clip;
|
||||||
}
|
}
|
||||||
|
|
||||||
.extra-info-cell {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icons {
|
.icons {
|
||||||
.badge-notification {
|
.badge-notification {
|
||||||
top: -5px;
|
top: -5px;
|
||||||
|
|
@ -35,11 +31,6 @@
|
||||||
button.sign-up-button {
|
button.sign-up-button {
|
||||||
display:none;
|
display:none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.not-minimized, .minimized {
|
|
||||||
.title { width: auto; }
|
|
||||||
.panel { width: auto; }
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#main-outlet {
|
#main-outlet {
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue
