github-mirror/discourse
github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-03-27 10:45:39 +08:00
Code Issues Actions1 Packages Projects Releases Wiki Activity

UX: Improving header scalability for large font themes

Browse Source
This commit is contained in:
Kris 2018-02-16 15:58:10 -05:00
parent 61930e092a
commit 35a49a240a
3 changed files with 24 additions and 22 deletions
app/assets/stylesheets
common/base
header.scssmenu-panel.scss
desktop
header.scss

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

@ -4,7 +4,7 @@
top: 0; top: 0;
z-index: z("header"); z-index: z("header");
background-color: $header_background; background-color: $header_background;
box-shadow: 0 2px 4px -1px rgba(0,0,0, .25); box-shadow: 0 2px 4px -1px rgba(0, 0, 0, .25);
.docked & { .docked & {
position: fixed; position: fixed;
@ -33,11 +33,11 @@
.panel { .panel {
float: right; float: right;
position: relative; position: relative;
display: flex;
align-items: center;
} }
.login-button, button.sign-up-button { .login-button, button.sign-up-button {
float: left;
margin-top: 7px;
padding: 6px 10px; padding: 6px 10px;
.fa { margin-right: 3px; } .fa { margin-right: 3px; }
} }
@ -62,14 +62,17 @@
margin: 0 0 0 5px; margin: 0 0 0 5px;
list-style: none; list-style: none;
> li { > li {
float: left; float: left;
} }
.icon { .icon {
position: relative; position: relative;
display: block; display: flex;
padding: 3px; align-items: center;
justify-content: center;
width: 2.2857em;
height: 2.2857em;
padding: .2143em;
color: dark-light-choose(scale-color($header_primary, $lightness: 50%), $header_primary); color: dark-light-choose(scale-color($header_primary, $lightness: 50%), $header_primary);
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;
@ -77,11 +80,13 @@
border-left: 1px solid transparent; border-left: 1px solid transparent;
border-right: 1px solid transparent; border-right: 1px solid transparent;
transition: all linear .15s; transition: all linear .15s;
img.avatar {
width: 2.2857em;
height: 2.2857em;
}
&:hover { &:hover {
color: $primary; color: $primary;
background-color: $primary-low; background-color: $primary-low;
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;
@ -119,8 +124,7 @@
} }
.d-icon { .d-icon {
width: 32px; width: 100%;
height: 32px;
font-size: $font-up-4; font-size: $font-up-4;
line-height: $line-height-large; line-height: $line-height-large;
display: inline-block; display: inline-block;

9
app/assets/stylesheets/common/base/menu-panel.scss

@ -19,7 +19,7 @@
.menu-panel { .menu-panel {
border: 1px solid $primary-low; border: 1px solid $primary-low;
box-shadow: 0 2px 2px rgba(0,0,0, .25); box-shadow: 0 2px 2px rgba(0, 0, 0, .25);
background-color: $secondary; background-color: $secondary;
z-index: z("header"); z-index: z("header");
padding: 0.5em; padding: 0.5em;
@ -44,7 +44,6 @@
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
} }
} }
.menu-links.columned { .menu-links.columned {
@ -69,7 +68,6 @@
margin-left: 0.5em; margin-left: 0.5em;
color: dark-light-choose($primary-medium, $secondary-medium); color: dark-light-choose($primary-medium, $secondary-medium);
} }
} }
li.category-link { li.category-link {
@ -77,7 +75,7 @@
background-color: transparent; background-color: transparent;
display: inline-flex; display: inline-flex;
margin: 0.25em 0.5em; margin: 0.25em 0.5em;
width: 44%; width: 43%;
.badge-notification { .badge-notification {
color: dark-light-choose($primary-medium, $secondary-medium); color: dark-light-choose($primary-medium, $secondary-medium);
background-color: transparent; background-color: transparent;
@ -90,7 +88,6 @@
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
display: inline-block; display: inline-block;
max-width: 80%;
&.bar, &.bullet { &.bar, &.bullet {
color: $primary; color: $primary;
} }
@ -100,7 +97,7 @@
padding-top: 2px; padding-top: 2px;
} }
span { span {
z-index: z("base") * -1; z-index: z("base") * -1;
} }
} }
} }

11
app/assets/stylesheets/desktop/header.scss

@ -5,9 +5,9 @@
.d-header { .d-header {
left: 0; left: 0;
padding-top: 3px; padding-top: 3px;
height: 60px; height: 4.2857em;
.d-icon-home { .d-icon-home {
padding:8px; padding: 8px;
font-size: $font-up-5; font-size: $font-up-5;
} }
@ -17,9 +17,10 @@
} }
} }
@media all @media all and (max-width: 570px) {
and (max-width : 570px) { .extra-info-wrapper {
.extra-info-wrapper {display: none;} display: none;
}
} }
#main { #main {