UX: Improve composer layout in iPads

In iOS 13, Apple no longer includes "iPad" in the user agent by default, so we need to adjust our detection.

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");

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;
   }
 

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;

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

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;
   }

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;
+  }
+}