mirror of
https://github.com/discourse/discourse.git
synced 2025-02-07 00:58:46 +08:00
6d7c0c8f13
This refactor addresses the following issues: 1- Moves all relevant logic to the discourse-topic component (matches desktop) 2- Fixes the flicker issue discussed here 3- Fixes a rare occurring issue where tags wrap to a third line if a topic has long category names and lots of tags 4- Fixes header icon jitter on iOS 5- Fixes an issue where sliding out user / hamburger menus on Android leaves the user in a mid-state with half a title and the header panel visible - swiping will now open the menus but have no effect on the header. 6- adds min-width to the small-logo to act as placeholder so that the title doesn't shift if the logo takes a while to load. Other than that, everything should look and act the same.
87 lines
1.9 KiB
SCSS
87 lines
1.9 KiB
SCSS
// --------------------------------------------------
|
|
// Discourse header
|
|
// --------------------------------------------------
|
|
|
|
.d-header {
|
|
height: 3.66em;
|
|
|
|
// some protection for text-only site titles
|
|
.title {
|
|
max-width: 75%;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
-webkit-animation: fadein 0.5s;
|
|
animation: fadein 0.5s;
|
|
// This acts as a placeholder if for some reason the small logo takes a while
|
|
// to load - prevents topic title from shifting after the small logo loads.
|
|
// It's hardcoded to 36px because that's the width we use inline for the small
|
|
// logo in the home-logo widget.
|
|
min-width: 36px;
|
|
a {
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
#site-logo {
|
|
max-height: 2.4em;
|
|
max-width: 100%;
|
|
}
|
|
#site-text-logo {
|
|
margin: 0;
|
|
font-size: $font-up-1;
|
|
}
|
|
.extra-info-wrapper {
|
|
.extra-info {
|
|
// header title should not be centered if there's no tags / categories
|
|
&:not(.two-rows) {
|
|
min-height: 2.25em;
|
|
}
|
|
h1 {
|
|
font-size: $font-0;
|
|
}
|
|
.private-message-glyph-wrapper {
|
|
float: left;
|
|
}
|
|
}
|
|
}
|
|
button.sign-up-button {
|
|
display: none;
|
|
}
|
|
|
|
// Hide header avatar + icons while topic title is visible in mobile header
|
|
.extra-info-wrapper + .panel {
|
|
flex: 0;
|
|
min-width: 0;
|
|
}
|
|
// Fade in header avatar + icons if topic title is not visible in mobile header
|
|
.panel {
|
|
animation: fadein 0.5s;
|
|
}
|
|
// A rendering bug in safari causes header SVGs to jitter after animations.
|
|
// translateZ() forces gpu rendering which fixes the issue.
|
|
.d-header-icons {
|
|
-webkit-transform: translateZ(0);
|
|
}
|
|
}
|
|
|
|
.d-header-icons {
|
|
.d-icon {
|
|
line-height: $line-height-medium;
|
|
}
|
|
.active .icon {
|
|
&:after {
|
|
margin-top: -1px;
|
|
}
|
|
}
|
|
}
|
|
|
|
#main-outlet {
|
|
padding-top: 4.2857em;
|
|
}
|
|
|
|
.search-link .badge-category {
|
|
display: none;
|
|
}
|