github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-01-18 16:52:45 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

UX: ensure header logo has dimensions, style clean-up (#20512)

Browse Source
This commit is contained in:
Kris 2023-03-08 12:50:36 -05:00 committed by GitHub
parent d78fed7dc6
commit 7b1eb080ba
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 12 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -43,9 +43,15 @@
}
.title {
--d-logo-height: 2.667em;
display: flex;
align-items: center;
height: 100%;
animation: fadein 0.5s;
// min-width acts as a placeholder if the small logo takes a while to load
// it prevents topic title from shifting after the small logo loads
// it's set to match the #site-logo height so square small logos don't resize when titles dock
min-width: var(--d-logo-height);
a,
a:visited {
color: var(--header_primary);
@ -55,14 +61,14 @@
// allows large logos to be hidden if there are too many other header elements
// this prioritizes nav elements, especially in cases of high zoom levels
overflow: hidden;
a {
min-width: 0;
}
}
}
#site-logo {
height: var(--d-logo-height);
width: auto;
max-width: 100%;
object-fit: contain;
}
#site-text-logo {
@ -119,7 +125,7 @@
.d-header-icons {
text-align: center;
margin: 0 0 0 5px;
margin: 0 0 0 0.5em;
list-style: none;
> li {
@ -288,6 +294,7 @@
// topic info in the header
.extra-info-wrapper {
flex: 1 0 0;
display: flex;
align-items: center;
height: 100%;

18
app/assets/stylesheets/mobile/header.scss
View File

@ -5,26 +5,10 @@
.d-header {
height: 3.66em;
// some protection for text-only site titles
.title {
max-width: 75%;
@include ellipsis;
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%;
}
--d-logo-height: 2.4em;
}
#site-logo {
max-height: 2.4em;
max-width: 100%;
}
#site-text-logo {
font-size: var(--font-up-1);
}