github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-05-28 22:47:46 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

DEV: Consolidate mobile positioning strategies on mobile and iPad (#30241)

Browse Source 
This removes some longstanding Safari iOS positioning hacks and refactors the mobile positioning strategy across Safari, Chrome and Firefox. See PR descriptions for more details. 

Co-authored-by: Joffrey JAFFEUX <j.jaffeux@gmail.com>
This commit is contained in:
Penar Musaraj
2025-01-10 11:00:15 -05:00
committed by GitHub
parent ce97e51b63
commit 07e5f8907e
24 changed files with 282 additions and 524 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
plugins/discourse-presence/assets/javascripts/discourse/connectors/topic-navigation-bottom/presence.hbs
View File

@ -1 +0,0 @@
<TopicPresenceDisplay @topic={{@outletArgs.model}} />

47
plugins/discourse-presence/assets/stylesheets/presence.scss
View File

@ -1,5 +1,5 @@
.topic-above-footer-buttons-outlet.presence {
min-height: 1.8em; // height of the avatars, prevents layout shift
min-height: 2.5em; // height of the avatars, prevents layout shift
margin: var(--below-topic-margin) 0;
}
@ -7,6 +7,9 @@
background-color: var(--secondary);
color: var(--primary-medium);
display: flex;
padding: 0.5em;
padding-left: 0;
border-radius: var(--d-border-radius);
span.presence-text {
align-items: center;
@ -54,16 +57,8 @@
}
}
.composer-fields .presence-users {
overflow: hidden;
flex-shrink: 1;
.presence-avatars {
flex-wrap: nowrap;
}
}
.mobile-view .composer-fields .presence-users .description {
display: none;
.reply-to .presence-users {
padding: unset;
}
// TMP: RTL overrides
@ -71,18 +66,6 @@
span.presence-text {
margin-right: 8px;
}
.composer-fields .presence-users {
right: unset;
left: 95px;
}
&.mobile-view {
.composer-fields .presence-users {
right: unset;
left: 65px;
}
}
}
// Always hide the "Topic Presence" in the topic timeline
@ -90,14 +73,12 @@
display: none;
}
// Hide the "Topic Presence" in the topic footer when the timeline is hidden
body:has(.topic-navigation.with-topic-progress)
.topic-above-footer-buttons-outlet.presence {
display: none;
}
.topic-navigation-bottom-outlet.presence {
margin: var(--below-topic-margin) auto 0 0;
min-height: 1.8em; // height of the avatars, prevents layout shift
order: -1;
// 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 (max-width: 924px) {
body:has(.topic-navigation.with-topic-progress)
.topic-above-footer-buttons-outlet.presence {
margin-top: -3.2em;
margin-right: 8em;
}
}