github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-06-20 18:21:38 +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
2 changed files with 12 additions and 21 deletions
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 { .title {
--d-logo-height: 2.667em;
display: flex; display: flex;
align-items: center; align-items: center;
height: 100%; 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,
a:visited { a:visited {
color: var(--header_primary); color: var(--header_primary);
@ -55,14 +61,14 @@
// allows large logos to be hidden if there are too many other header elements // 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 // this prioritizes nav elements, especially in cases of high zoom levels
overflow: hidden; overflow: hidden;
a {
min-width: 0;
}
} }
} }
#site-logo { #site-logo {
height: var(--d-logo-height);
width: auto; width: auto;
max-width: 100%;
object-fit: contain;
} }
#site-text-logo { #site-text-logo {
@ -119,7 +125,7 @@
.d-header-icons { .d-header-icons {
text-align: center; text-align: center;
margin: 0 0 0 5px; margin: 0 0 0 0.5em;
list-style: none; list-style: none;
> li { > li {
@ -288,6 +294,7 @@
// topic info in the header // topic info in the header
.extra-info-wrapper { .extra-info-wrapper {
flex: 1 0 0;
display: flex; display: flex;
align-items: center; align-items: center;
height: 100%; height: 100%;

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

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