mirror of
https://github.com/codeninjasllc/discourse.git
synced 2024-12-17 19:12:37 -05:00
FIX: vertical centering of header, using display: table
This commit is contained in:
Neil Lalonde
parent
213950e4cf
commit
1b4e0f3300
6 changed files with 222 additions and 172 deletions
|
|
@ -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(),
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -1,66 +1,70 @@
|
|||
<div class='wrap'>
|
||||
<div class='contents clearfix'>
|
||||
{{home-logo minimized=showExtraInfo}}
|
||||
{{plugin-outlet "header-after-home-logo"}}
|
||||
<div {{bind-attr class=":wrap :d-header-wrap showExtraInfo:minimized:not-minimized"}}>
|
||||
<div class='d-header-table contents clearfix'>
|
||||
<div class="d-header-row">
|
||||
{{home-logo minimized=showExtraInfo}}
|
||||
{{plugin-outlet "header-after-home-logo"}}
|
||||
|
||||
<div class='panel clearfix'>
|
||||
{{#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}}
|
||||
<ul class='icons clearfix' role='navigation'>
|
||||
{{#if currentUser}}
|
||||
{{plugin-outlet "header-before-notifications"}}
|
||||
{{/if}}
|
||||
{{#if showExtraInfo}}
|
||||
{{header-extra-info topic=topic}}
|
||||
{{/if}}
|
||||
|
||||
{{#header-dropdown iconId="search-button"
|
||||
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>
|
||||
<div class='panel clearfix'>
|
||||
{{#unless currentUser}}
|
||||
{{#if showSignUpButton}}
|
||||
{{d-button action="showCreateAccount" class="btn-primary btn-small sign-up-button" label="sign_up"}}
|
||||
{{/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="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>
|
||||
{{#header-dropdown iconId="search-button"
|
||||
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 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}}
|
||||
</ul>
|
||||
{{plugin-outlet "header-before-dropdowns"}}
|
||||
{{user-menu visible=userMenuVisible logoutAction="logout"}}
|
||||
{{hamburger-menu visible=hamburgerVisible showKeyboardAction="showKeyboardShortcutsHelp"}}
|
||||
{{search-menu visible=searchVisible}}
|
||||
</ul>
|
||||
{{plugin-outlet "header-before-dropdowns"}}
|
||||
{{user-menu visible=userMenuVisible logoutAction="logout"}}
|
||||
{{hamburger-menu visible=hamburgerVisible showKeyboardAction="showKeyboardShortcutsHelp"}}
|
||||
{{search-menu visible=searchVisible}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{#if showExtraInfo}}
|
||||
{{header-extra-info topic=topic}}
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
{{plugin-outlet "header-under-content"}}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
Loading…
Reference in a new issue