Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Tweaks for ipados

This commit is contained in:
Penar Musaraj 2024-12-12 22:08:11 -05:00
parent 5c76692dc1
commit 255f29978e
2 changed files with 15 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
app/assets/javascripts/discourse/app/components/d-virtual-height.gjs
View File

@ -117,19 +117,10 @@ export default class DVirtualHeight extends Component {
} else {
let viewportWindowDiff =
this.windowInnerHeight - window.visualViewport.height;
const IPAD_HARDWARE_KEYBOARD_TOOLBAR_HEIGHT = 71.5;
if (viewportWindowDiff > IPAD_HARDWARE_KEYBOARD_TOOLBAR_HEIGHT) {
const MIN_THRESHOLD = 20;
if (viewportWindowDiff > MIN_THRESHOLD) {
keyboardVisible = true;
}
// adds bottom padding when using a hardware keyboard and the accessory bar is visible
// accessory bar height is 55px, using 75 allows a small buffer
if (this.capabilities.isIpadOS) {
docEl.style.setProperty(
"--composer-ipad-padding",
`${viewportWindowDiff < 75 ? viewportWindowDiff : 0}px`
);
}
}
this.appEvents.trigger("keyboard-visibility-change", keyboardVisible);
@ -141,9 +132,11 @@ export default class DVirtualHeight extends Component {
if (docEl.classList.contains("composer-open")) {
disableBodyScroll(document.querySelector("#reply-control"), {
reserveScrollBarGap: true,
allowTouchMove: (el) => el.closest("#reply-control"),
allowTouchMove: (el) =>
el.tagName === "TEXTAREA" || el.tagName === "LI" || el.closest(".d-editor-preview-wrapper"),
});
}
keyboardVisible
? docEl.classList.add("keyboard-visible")
: docEl.classList.remove("keyboard-visible");

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

@ -38,26 +38,28 @@ html.composer-open.not-mobile-device {
min-width: 0;
}
z-index: z("composer", "content");
transition: height 250ms ease, background 250ms ease, transform 250ms ease,
max-width 250ms ease, padding-bottom 250ms ease, bottom 250ms ease;
transition: height 150ms ease, transform 150ms ease, max-width 150ms ease,
padding-bottom 150ms ease, bottom 150ms ease;
background-color: var(--secondary);
box-shadow: var(--shadow-composer);
.touch & {
// We override values set in base/compose.scss so that on mobile/tablet, the composer is top-anchored.
// This is not ideal, but it is much better than bottom-anchoring.
// Safari in iOS/iPad and Firefox/Android do not handle well a bottom/fixed-positioned element,
// especially while the software keyboard is visible.
// We override values set above so that on mobile + iPad, the composer is top-anchored.
// This is not ideal, but it is much better than bottom-anchoring.
// Safari in iOS/iPad and Firefox/Android do not handle well a bottom/fixed-positioned element,
// especially while the software keyboard is visible.
.ipados-device &,
.mobile-device & {
top: 0;
height: 100%;
z-index: -1;
max-height: unset;
min-height: unset;
visibility: hidden;
touch-action: manipulation; // slightly faster single-tap actions on iOS
&.open,
&.fullscreen {
visibility: visible;
z-index: z("ipad-header-nav") + 1;
z-index: z("mobile-composer");
height: calc(var(--composer-vh, 1vh) * 100);
}