github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-05-29 01:31:35 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

DEV: Target tablets differently for composer position tweaks (#30798)

Browse Source
This commit is contained in:
Penar Musaraj
2025-01-15 14:09:51 -05:00
committed by GitHub
parent adf098f21b
commit 35214201b8
1 changed files with 42 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
app/assets/stylesheets/common/base/compose.scss
View File

@ -629,14 +629,20 @@ div.ac-wrap {
}
}
// The composer on mobile is fixed-positioned, same as on desktop because
// goes together with the interactive-widget=resizes-content in the viewport meta tag
// for maximum browser compatibility (especially Firefox and webviews)
// Limiting to hover: none ensures we don't target touch-enabled desktops here
@media (hover: none) {
// This targets mobile/iPad/tablets and it goes together with
// the interactive-widget=resizes-content in the viewport meta tag
// for maximum browser compatibility (including Firefox on Android)
// see https://developer.chrome.com/blog/viewport-resize-behavior for context
.ipados-device,
.tablet-device,
.discourse-touch,
.mobile-device {
#reply-control {
// this might be overkill
// but on iPad with a physical keyboard the composer is shifted up on scroll
// this adds a solid box shadow below, looks cleaner
box-shadow: 0 150px 0px 0px var(--secondary);
&.open {
z-index: z("mobile-composer");
}
@ -671,6 +677,7 @@ div.ac-wrap {
bottom: calc(var(--composer-height));
}
}
}
.mobile-device {
#reply-control {
@ -684,19 +691,9 @@ div.ac-wrap {
}
}
.ipados-device {
// this might be overkill
// but on iPad with a physical keyboard the composer is shifted up on scroll
// this adds a solid box shadow below, looks cleaner
#reply-control {
box-shadow: 0 150px 0px 0px var(--secondary);
}
}
// Safari in iOS/iPad does not handle well a bottom:0 fixed-positioned element,
// especially while the software keyboard is visible, so we top-anchor it here
// and shift it using transform
.ipados-device,
.ios-device {
#reply-control {
// the two properties below are equivalent to bottom: 0