github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-06-07 21:16:02 +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

31
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 // Limiting to hover: none ensures we don't target touch-enabled desktops here
// goes together with the interactive-widget=resizes-content in the viewport meta tag @media (hover: none) {
// for maximum browser compatibility (especially Firefox and webviews) // This targets mobile/iPad/tablets and it goes together with
// see https://developer.chrome.com/blog/viewport-resize-behavior for context // the interactive-widget=resizes-content in the viewport meta tag
.ipados-device, // for maximum browser compatibility (including Firefox on Android)
.tablet-device, // see https://developer.chrome.com/blog/viewport-resize-behavior for context
.mobile-device { .discourse-touch,
.mobile-device {
#reply-control { #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 { &.open {
z-index: z("mobile-composer"); z-index: z("mobile-composer");
} }
@ -670,6 +676,7 @@ div.ac-wrap {
&.composer-open .with-topic-progress { &.composer-open .with-topic-progress {
bottom: calc(var(--composer-height)); bottom: calc(var(--composer-height));
} }
}
} }
.mobile-device { .mobile-device {
@ -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, // 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 // especially while the software keyboard is visible, so we top-anchor it here
// and shift it using transform // and shift it using transform
.ipados-device,
.ios-device { .ios-device {
#reply-control { #reply-control {
// the two properties below are equivalent to bottom: 0 // the two properties below are equivalent to bottom: 0