diff --git a/app/assets/javascripts/discourse/components/footer-nav.js.es6 b/app/assets/javascripts/discourse/components/footer-nav.js.es6 index 2e932686c92..7ac143225a1 100644 --- a/app/assets/javascripts/discourse/components/footer-nav.js.es6 +++ b/app/assets/javascripts/discourse/components/footer-nav.js.es6 @@ -2,7 +2,6 @@ import MountWidget from "discourse/components/mount-widget"; import MobileScrollDirection from "discourse/mixins/mobile-scroll-direction"; import Scrolling from "discourse/mixins/scrolling"; import { observes } from "ember-addons/ember-computed-decorators"; -import { isiPad } from "discourse/lib/utilities"; import { isAppWebview, postRNWebviewMessage } from "discourse/lib/utilities"; const MOBILE_SCROLL_DIRECTION_CHECK_THROTTLE = 150; @@ -37,7 +36,7 @@ const FooterNavComponent = MountWidget.extend( this.appEvents.on("modal:body-dismissed", this, "_modalOff"); } - if (isiPad()) { + if (this.capabilities.isIpadOS) { $("body").addClass("footer-nav-ipad"); } else { this.bindScrolling({ name: "footer-nav" }); @@ -56,7 +55,7 @@ const FooterNavComponent = MountWidget.extend( this.appEvents.off("modal:body-removed", this, "_modalOff"); } - if (isiPad()) { + if (this.capabilities.isIpadOS) { $("body").removeClass("footer-nav-ipad"); } else { this.unbindScrolling("footer-nav"); diff --git a/app/assets/javascripts/discourse/lib/safari-hacks.js.es6 b/app/assets/javascripts/discourse/lib/safari-hacks.js.es6 index 3744c825bce..644fa2c4361 100644 --- a/app/assets/javascripts/discourse/lib/safari-hacks.js.es6 +++ b/app/assets/javascripts/discourse/lib/safari-hacks.js.es6 @@ -1,5 +1,5 @@ import debounce from "discourse/lib/debounce"; -import { isAppleDevice, safariHacksDisabled } from "discourse/lib/utilities"; +import { safariHacksDisabled } from "discourse/lib/utilities"; // TODO: remove calcHeight once iOS 13 adoption > 90% // In iOS 13 and up we use visualViewport API to calculate height @@ -73,7 +73,9 @@ export function isWorkaroundActive() { // per http://stackoverflow.com/questions/29001977/safari-in-ios8-is-scrolling-screen-when-fixed-elements-get-focus/29064810 function positioningWorkaround($fixedElement) { - if (!isAppleDevice() || safariHacksDisabled()) { + const caps = Discourse.__container__.lookup("capabilities:main"); + + if (!caps.isIOS || caps.isIpadOS || safariHacksDisabled()) { return; } diff --git a/app/assets/javascripts/discourse/lib/utilities.js.es6 b/app/assets/javascripts/discourse/lib/utilities.js.es6 index 5bc038e227e..530f21d6ac3 100644 --- a/app/assets/javascripts/discourse/lib/utilities.js.es6 +++ b/app/assets/javascripts/discourse/lib/utilities.js.es6 @@ -538,10 +538,8 @@ export function determinePostReplaceSelection({ export function isAppleDevice() { // IE has no DOMNodeInserted so can not get this hack despite saying it is like iPhone // This will apply hack on all iDevices - return ( - navigator.userAgent.match(/(iPad|iPhone|iPod)/g) && - !navigator.userAgent.match(/Trident/g) - ); + const caps = Discourse.__container__.lookup("capabilities:main"); + return caps.isIOS && !navigator.userAgent.match(/Trident/g); } let iPadDetected = undefined; diff --git a/app/assets/javascripts/discourse/pre-initializers/sniff-capabilities.js.es6 b/app/assets/javascripts/discourse/pre-initializers/sniff-capabilities.js.es6 index 0a41fbab9a0..0cfc4f2c619 100644 --- a/app/assets/javascripts/discourse/pre-initializers/sniff-capabilities.js.es6 +++ b/app/assets/javascripts/discourse/pre-initializers/sniff-capabilities.js.es6 @@ -35,10 +35,14 @@ export default { caps.canPasteImages = caps.isChrome || caps.isFirefox; } - caps.isIOS = - /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream; + caps.isIpadOS = + ua.indexOf("Mac OS") !== -1 && + !/iPhone|iPod/.test(navigator.userAgent) && + touch; - caps.isIpadOS = ua.indexOf("Mac OS") !== -1 && touch; + caps.isIOS = + (/iPhone|iPod/.test(navigator.userAgent) || caps.isIpadOS) && + !window.MSStream; } // We consider high res a device with 1280 horizontal pixels. High DPI tablets like diff --git a/app/assets/stylesheets/common/components/footer-nav.scss b/app/assets/stylesheets/common/components/footer-nav.scss index 2691951d917..01b6856825f 100644 --- a/app/assets/stylesheets/common/components/footer-nav.scss +++ b/app/assets/stylesheets/common/components/footer-nav.scss @@ -78,6 +78,10 @@ body.footer-nav-ipad { padding-bottom: 0; // resets safe-area-inset-bottom } + #reply-control.fullscreen { + z-index: z("ipad-header-nav") + 1; + } + &.docked .d-header { margin-top: $footer-nav-height; } diff --git a/app/assets/stylesheets/desktop/compose.scss b/app/assets/stylesheets/desktop/compose.scss index f4b49765194..386f7b44eb5 100644 --- a/app/assets/stylesheets/desktop/compose.scss +++ b/app/assets/stylesheets/desktop/compose.scss @@ -241,6 +241,9 @@ a.toggle-preview { &.fullscreen { // important needed because of inline styles when height is changed manually with grippie height: 100vh !important; + @supports (--custom: property) { + height: calc(var(--composer-vh, 1vh) * 100) !important; + } z-index: z("header") + 1; .d-editor-preview-wrapper { margin-top: 1%; @@ -279,3 +282,9 @@ a.toggle-preview { } } } + +.fullscreen-composer.keyboard-visible { + #reply-control.fullscreen { + top: 0px; + } +}