IntenseWebs/discourse
3
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-11-30 04:34:13 -06:00
Code Issues Packages Projects Releases Wiki Activity

UX: Improve composer layout in iPads

Browse Source 
In iOS 13, Apple no longer includes "iPad" in the user agent by default, so we need to adjust our detection.
This commit is contained in:
Penar Musaraj 2019-10-01 08:22:17 -04:00
parent 0420e8145e
commit 94ab48c616
6 changed files with 28 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
app/assets/javascripts/discourse/components/footer-nav.js.es6
View File

@ -2,7 +2,6 @@ import MountWidget from "discourse/components/mount-widget";
import MobileScrollDirection from "discourse/mixins/mobile-scroll-direction"; import MobileScrollDirection from "discourse/mixins/mobile-scroll-direction";
import Scrolling from "discourse/mixins/scrolling"; import Scrolling from "discourse/mixins/scrolling";
import { observes } from "ember-addons/ember-computed-decorators"; import { observes } from "ember-addons/ember-computed-decorators";
import { isiPad } from "discourse/lib/utilities";
import { isAppWebview, postRNWebviewMessage } from "discourse/lib/utilities"; import { isAppWebview, postRNWebviewMessage } from "discourse/lib/utilities";
const MOBILE_SCROLL_DIRECTION_CHECK_THROTTLE = 150; const MOBILE_SCROLL_DIRECTION_CHECK_THROTTLE = 150;
@ -37,7 +36,7 @@ const FooterNavComponent = MountWidget.extend(
this.appEvents.on("modal:body-dismissed", this, "_modalOff"); this.appEvents.on("modal:body-dismissed", this, "_modalOff");
} }
if (isiPad()) { if (this.capabilities.isIpadOS) {
$("body").addClass("footer-nav-ipad"); $("body").addClass("footer-nav-ipad");
} else { } else {
this.bindScrolling({ name: "footer-nav" }); this.bindScrolling({ name: "footer-nav" });
@ -56,7 +55,7 @@ const FooterNavComponent = MountWidget.extend(
this.appEvents.off("modal:body-removed", this, "_modalOff"); this.appEvents.off("modal:body-removed", this, "_modalOff");
} }
if (isiPad()) { if (this.capabilities.isIpadOS) {
$("body").removeClass("footer-nav-ipad"); $("body").removeClass("footer-nav-ipad");
} else { } else {
this.unbindScrolling("footer-nav"); this.unbindScrolling("footer-nav");

6
app/assets/javascripts/discourse/lib/safari-hacks.js.es6
View File

@ -1,5 +1,5 @@
import debounce from "discourse/lib/debounce"; 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% // TODO: remove calcHeight once iOS 13 adoption > 90%
// In iOS 13 and up we use visualViewport API to calculate height // 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 // per http://stackoverflow.com/questions/29001977/safari-in-ios8-is-scrolling-screen-when-fixed-elements-get-focus/29064810
function positioningWorkaround($fixedElement) { function positioningWorkaround($fixedElement) {
if (!isAppleDevice() || safariHacksDisabled()) { const caps = Discourse.__container__.lookup("capabilities:main");
if (!caps.isIOS || caps.isIpadOS || safariHacksDisabled()) {
return; return;
} }

6
app/assets/javascripts/discourse/lib/utilities.js.es6
View File

@ -538,10 +538,8 @@ export function determinePostReplaceSelection({
export function isAppleDevice() { export function isAppleDevice() {
// IE has no DOMNodeInserted so can not get this hack despite saying it is like iPhone // IE has no DOMNodeInserted so can not get this hack despite saying it is like iPhone
// This will apply hack on all iDevices // This will apply hack on all iDevices
return ( const caps = Discourse.__container__.lookup("capabilities:main");
navigator.userAgent.match(/(iPad|iPhone|iPod)/g) && return caps.isIOS && !navigator.userAgent.match(/Trident/g);
!navigator.userAgent.match(/Trident/g)
);
} }
let iPadDetected = undefined; let iPadDetected = undefined;

10
app/assets/javascripts/discourse/pre-initializers/sniff-capabilities.js.es6
View File

@ -35,10 +35,14 @@ export default {
caps.canPasteImages = caps.isChrome || caps.isFirefox; caps.canPasteImages = caps.isChrome || caps.isFirefox;
} }
caps.isIOS = caps.isIpadOS =
/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream; 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 // We consider high res a device with 1280 horizontal pixels. High DPI tablets like

4
app/assets/stylesheets/common/components/footer-nav.scss
View File

@ -78,6 +78,10 @@ body.footer-nav-ipad {
padding-bottom: 0; // resets safe-area-inset-bottom padding-bottom: 0; // resets safe-area-inset-bottom
} }
#reply-control.fullscreen {
z-index: z("ipad-header-nav") + 1;
}
&.docked .d-header { &.docked .d-header {
margin-top: $footer-nav-height; margin-top: $footer-nav-height;
} }

9
app/assets/stylesheets/desktop/compose.scss
View File

@ -241,6 +241,9 @@ a.toggle-preview {
&.fullscreen { &.fullscreen {
// important needed because of inline styles when height is changed manually with grippie // important needed because of inline styles when height is changed manually with grippie
height: 100vh !important; height: 100vh !important;
@supports (--custom: property) {
height: calc(var(--composer-vh, 1vh) * 100) !important;
}
z-index: z("header") + 1; z-index: z("header") + 1;
.d-editor-preview-wrapper { .d-editor-preview-wrapper {
margin-top: 1%; margin-top: 1%;
@ -279,3 +282,9 @@ a.toggle-preview {
} }
} }
} }
.fullscreen-composer.keyboard-visible {
#reply-control.fullscreen {
top: 0px;
}
}