github-mirror/discourse
github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-04-02 22:09:40 +08:00
Code Issues Actions 1 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
app/assets/stylesheets/common/base/header.scss
View File

@ -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,8 +80,10 @@
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;
@ -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;

5
app/assets/stylesheets/common/base/menu-panel.scss
View File

@ -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;
} }

9
app/assets/stylesheets/desktop/header.scss
View File

@ -5,7 +5,7 @@
.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 {