From 631206f3603431d3456f445aff22f418738f48df Mon Sep 17 00:00:00 2001 From: Chi Vinh Le Date: Fri, 11 May 2018 00:30:12 +0200 Subject: [PATCH 1/2] Disable autofocus on IOS Safari, prevent zoom on narrow screens --- plugins/talk-plugin-rich-text/client/components/Editor.css | 7 +++++++ plugins/talk-plugin-rich-text/client/components/Editor.js | 3 ++- 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/plugins/talk-plugin-rich-text/client/components/Editor.css b/plugins/talk-plugin-rich-text/client/components/Editor.css index 2259d01a3..be2646121 100644 --- a/plugins/talk-plugin-rich-text/client/components/Editor.css +++ b/plugins/talk-plugin-rich-text/client/components/Editor.css @@ -1,5 +1,12 @@ +@custom-media --narrow-viewport (max-width: 420px); + .commentContent { composes: content from "./CommentContent.css"; + + /* Prevent zoom on narrow viewports */ + @media (--narrow-viewport) { + font-size: 16px; + } } .placeholder { diff --git a/plugins/talk-plugin-rich-text/client/components/Editor.js b/plugins/talk-plugin-rich-text/client/components/Editor.js index e09931d38..089900e1a 100644 --- a/plugins/talk-plugin-rich-text/client/components/Editor.js +++ b/plugins/talk-plugin-rich-text/client/components/Editor.js @@ -8,6 +8,7 @@ import RTE from './rte/RTE'; import { Icon } from 'plugin-api/beta/client/components/ui'; import { Bold, Italic, Blockquote } from './rte/features'; import { t } from 'plugin-api/beta/client/services'; +import bowser from 'bowser'; class Editor extends React.Component { ref = null; @@ -40,7 +41,7 @@ class Editor extends React.Component { } }); } - if (this.props.isReply) { + if (this.props.isReply && !bowser.ios) { this.ref.focus(); } } From fc5621a06042de9b0ca42d3da720e4cfcbde1477 Mon Sep 17 00:00:00 2001 From: Chi Vinh Le Date: Fri, 11 May 2018 17:12:28 +0200 Subject: [PATCH 2/2] Add reference to story --- plugins/talk-plugin-rich-text/client/components/Editor.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/plugins/talk-plugin-rich-text/client/components/Editor.js b/plugins/talk-plugin-rich-text/client/components/Editor.js index 089900e1a..99d2be617 100644 --- a/plugins/talk-plugin-rich-text/client/components/Editor.js +++ b/plugins/talk-plugin-rich-text/client/components/Editor.js @@ -41,6 +41,8 @@ class Editor extends React.Component { } }); } + + // Skip IOS due to a bug, see https://www.pivotaltracker.com/story/show/157434928 if (this.props.isReply && !bowser.ios) { this.ref.focus(); }