github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-01-22 21:37:30 +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
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 42 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -629,46 +629,53 @@ 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)
// see https://developer.chrome.com/blog/viewport-resize-behavior for context
.ipados-device,
.tablet-device,
.mobile-device {
#reply-control {
&.open {
z-index: z("mobile-composer");
// 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
.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");
}
&.draft,
&.saving {
z-index: z("ipad-header-nav") + 1;
padding-bottom: env(safe-area-inset-bottom);
}
.toggle-fullscreen {
display: none;
}
.submit-panel,
.composer-fields,
.d-editor-button-bar {
// this prevents touch events (i.e. accidental scrolls) from bubbling up
touch-action: none;
}
}
&.draft,
&.saving {
z-index: z("ipad-header-nav") + 1;
padding-bottom: env(safe-area-inset-bottom);
&.keyboard-visible #reply-control.open {
height: calc(var(--composer-vh, 1vh) * 100);
.grippie {
display: none;
}
}
.toggle-fullscreen {
display: none;
&.composer-open .with-topic-progress {
bottom: calc(var(--composer-height));
}
.submit-panel,
.composer-fields,
.d-editor-button-bar {
// this prevents touch events (i.e. accidental scrolls) from bubbling up
touch-action: none;
}
}
&.keyboard-visible #reply-control.open {
height: calc(var(--composer-vh, 1vh) * 100);
.grippie {
display: none;
}
}
&.composer-open .with-topic-progress {
bottom: calc(var(--composer-height));
}
}
@ -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