Use body scroll and full-height composer on all touch devices
Maybe a big hammer, but fixes issues on iPad
This commit is contained in:
parent
4f77903e60
commit
d6ed5e498b
|
@ -141,7 +141,7 @@ export default class DVirtualHeight extends Component {
|
|||
// we have to do this because we're positioning the composer with
|
||||
// position: fixed and top: 0 and scrolling would move the composer halfway out of the viewport
|
||||
// we can't use bottom: 0, it is very unreliable with keyboard visible
|
||||
if (docEl.classList.contains("composer-open") && !this.capabilities.isIpadOS) {
|
||||
if (docEl.classList.contains("composer-open")) {
|
||||
disableBodyScroll(document.querySelector("#reply-control"));
|
||||
}
|
||||
}
|
||||
|
|
|
@ -39,10 +39,34 @@ html.composer-open.not-mobile-device {
|
|||
}
|
||||
z-index: z("composer", "content");
|
||||
transition: height 250ms ease, background 250ms ease, transform 250ms ease,
|
||||
max-width 250ms ease, padding-bottom 250ms ease;
|
||||
max-width 250ms ease, padding-bottom 250ms ease, bottom 250ms 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.
|
||||
top: 0;
|
||||
height: 100%;
|
||||
z-index: -1;
|
||||
max-height: unset;
|
||||
min-height: unset;
|
||||
visibility: hidden;
|
||||
&.open,
|
||||
&.fullscreen {
|
||||
visibility: visible;
|
||||
z-index: z("ipad-header-nav") + 1;
|
||||
height: calc(var(--composer-vh, 1vh) * 100);
|
||||
}
|
||||
|
||||
.grippie,
|
||||
.toggle-fullscreen {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.reply-area {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
@ -96,6 +120,14 @@ html.composer-open.not-mobile-device {
|
|||
}
|
||||
}
|
||||
|
||||
.touch &.draft,
|
||||
.touch &.saving {
|
||||
top: auto;
|
||||
z-index: z("ipad-header-nav") + 1;
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
&.draft {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
|
|
|
@ -42,12 +42,11 @@
|
|||
|
||||
.with-topic-progress {
|
||||
position: sticky;
|
||||
bottom: 0px;
|
||||
bottom: calc(env(safe-area-inset-bottom) + var(--composer-height, 0px));
|
||||
z-index: z("timeline");
|
||||
}
|
||||
|
||||
#topic-progress-wrapper {
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
&.docked {
|
||||
.toggle-admin-menu {
|
||||
display: none;
|
||||
|
|
|
@ -20,7 +20,10 @@ html.footer-nav-visible {
|
|||
}
|
||||
|
||||
.with-topic-progress {
|
||||
bottom: var(--footer-nav-height);
|
||||
bottom: calc(
|
||||
var(--footer-nav-height) + env(safe-area-inset-bottom) +
|
||||
var(--composer-height, 0px)
|
||||
);
|
||||
}
|
||||
|
||||
.posts-filtered-notice {
|
||||
|
@ -87,12 +90,12 @@ html.footer-nav-ipad {
|
|||
padding-bottom: 0; // resets safe-area-inset-bottom
|
||||
}
|
||||
|
||||
#reply-control,
|
||||
#reply-control.fullscreen {
|
||||
z-index: z("ipad-header-nav") + 1;
|
||||
}
|
||||
|
||||
.d-header-wrap {
|
||||
top: var(--footer-nav-height);
|
||||
}
|
||||
|
||||
#reply-control.open {
|
||||
height: calc(var(--composer-vh, 1vh) * 100 - var(--footer-nav-height));
|
||||
top: var(--footer-nav-height);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -7,17 +7,6 @@
|
|||
}
|
||||
|
||||
#reply-control {
|
||||
// We override values set in base/compose.scss so that on mobile, the composer is top-anchored.
|
||||
// This is not ideal, but it is much better than bottom-anchoring.
|
||||
// Mobile browsers (especially Safari and Firefox/Android) do not handle well
|
||||
// a bottom/fixed-positioned element, especially while the software keyboard is visible.
|
||||
top: 0;
|
||||
// With height and z-index: -1, the composer jitters a lot less
|
||||
height: 100%;
|
||||
z-index: -1;
|
||||
max-height: unset;
|
||||
min-height: unset;
|
||||
|
||||
.reply-area {
|
||||
padding: 6px;
|
||||
padding-bottom: unquote("max(env(safe-area-inset-bottom), 6px)");
|
||||
|
@ -25,15 +14,11 @@
|
|||
}
|
||||
|
||||
&.open {
|
||||
display: flex;
|
||||
z-index: z("mobile-composer");
|
||||
height: calc(var(--composer-vh, 1vh) * 100);
|
||||
}
|
||||
|
||||
.keyboard-visible &.open {
|
||||
.reply-area {
|
||||
padding-bottom: 6px;
|
||||
}
|
||||
.keyboard-visible &.open .reply-area {
|
||||
padding-bottom: 6px;
|
||||
}
|
||||
|
||||
.reply-to {
|
||||
|
@ -70,10 +55,6 @@
|
|||
}
|
||||
|
||||
&.draft {
|
||||
top: calc(100% - 40px);
|
||||
z-index: z("footer-nav") + 1;
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
|
||||
.toggle-toolbar,
|
||||
.toggle-minimize {
|
||||
top: 6px;
|
||||
|
|
Loading…
Reference in New Issue