mirror of
https://github.com/discourse/discourse.git
synced 2026-08-14 13:58:53 +08:00
791908bf7bConcerns the presence indicator at the bottom of topics, "replying..." seen here: <img width="294" height="198" alt="image" src="https://github.com/user-attachments/assets/3997ecee-eacd-4cf7-9754-4306434da1bc" /> Previously we've had cases where the min-height of this element had regressed and ends up causing unwanted layout shift on appearance. (See https://github.com/discourse/discourse/pull/33022) Rather than relying on having the correct magic number here, I've centralized the avatar size in a variable. This then gets translated to a CSS variable and also passed to the component that renders the avatar. This ensures that `min-height: calc(var(--avatar-min-height) + 1px);` will be larger than the avatar and we won't have to worry about our CSS falling out of sync.
86 lines
1.7 KiB
SCSS
Vendored
86 lines
1.7 KiB
SCSS
Vendored
.topic-above-footer-buttons-outlet.presence {
|
|
// slightly larger than avatars to prevent layout shift
|
|
min-height: calc(var(--avatar-min-height) + 1px);
|
|
padding: var(--space-2) var(--space-2) var(--space-2) 0;
|
|
margin: var(--below-topic-margin) 0;
|
|
}
|
|
|
|
.presence-users {
|
|
// ideally you don't want to add padding or margin here,
|
|
// because you may cause a layout shift on presence appearance
|
|
color: var(--primary-medium);
|
|
display: flex;
|
|
border-radius: var(--d-border-radius);
|
|
|
|
span.presence-text {
|
|
align-items: center;
|
|
display: flex;
|
|
flex: 0 0 auto;
|
|
margin-left: 8px;
|
|
}
|
|
|
|
.presence-avatars {
|
|
display: flex;
|
|
overflow: hidden;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.wave {
|
|
display: inline-flex;
|
|
flex: 0 0 auto;
|
|
|
|
.dot {
|
|
display: inline-block;
|
|
|
|
@media (prefers-reduced-motion: no-preference) {
|
|
animation: wave 1.8s linear infinite;
|
|
}
|
|
|
|
&:nth-child(2) {
|
|
animation-delay: -1.6s;
|
|
}
|
|
|
|
&:nth-child(3) {
|
|
animation-delay: -1.4s;
|
|
}
|
|
}
|
|
}
|
|
|
|
@keyframes wave {
|
|
0%,
|
|
60%,
|
|
100% {
|
|
transform: initial;
|
|
}
|
|
|
|
30% {
|
|
transform: translateY(-0.2em);
|
|
}
|
|
}
|
|
}
|
|
|
|
.reply-to .presence-users {
|
|
padding: unset;
|
|
}
|
|
|
|
// TMP: RTL overrides
|
|
.rtl {
|
|
span.presence-text {
|
|
margin-right: 8px;
|
|
}
|
|
}
|
|
|
|
// Always hide the "Topic Presence" in the topic timeline
|
|
.topic-navigation.with-timeline .topic-navigation-bottom-outlet.presence {
|
|
display: none;
|
|
}
|
|
|
|
// When topic progress is visible in the posts grid area and is sticky,
|
|
// adjust positioning so presence is on the same line
|
|
@media screen and (width <= 924px) {
|
|
body:has(.topic-navigation.with-topic-progress)
|
|
.topic-above-footer-buttons-outlet.presence {
|
|
margin-top: -3.2em;
|
|
margin-right: 8em;
|
|
}
|
|
}
|
