From fa5c867e0ec426fc01653e9022ba29783b2a826f Mon Sep 17 00:00:00 2001 From: Yuto Tokunaga Date: Mon, 12 Mar 2018 11:52:05 +0900 Subject: [PATCH] Avoid using JS to set height in MediaModal (#6750) avoid using JS to set height of ReactSwipeableViews component reduce max-height of to 80% to avoid the screen covered by image --- .../features/ui/components/media_modal.js | 35 ++++++++++--------- .../styles/mastodon/components.scss | 13 ++++--- 2 files changed, 24 insertions(+), 24 deletions(-) diff --git a/app/javascript/mastodon/features/ui/components/media_modal.js b/app/javascript/mastodon/features/ui/components/media_modal.js index 72ef32256..fb76270fa 100644 --- a/app/javascript/mastodon/features/ui/components/media_modal.js +++ b/app/javascript/mastodon/features/ui/components/media_modal.js @@ -130,6 +130,15 @@ export default class MediaModal extends ImmutablePureComponent { return null; }).toArray(); + // you can't use 100vh, because the viewport height is taller + // than the visible part of the document in some mobile + // browsers when it's address bar is visible. + // https://developers.google.com/web/updates/2016/12/url-bar-resizing + const swipeableViewsStyle = { + width: '100%', + height: '100%', + }; + const containerStyle = { alignItems: 'center', // center vertically }; @@ -145,23 +154,15 @@ export default class MediaModal extends ImmutablePureComponent { role='presentation' onClick={onClose} > -
- - {content} - -
+ + {content} +
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 93faff8b6..587fe62da 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -3422,8 +3422,12 @@ a.status-card { img, canvas, video { - max-width: 100vw; - max-height: 100vh; + max-width: 100%; + /* + put margins on top and bottom of image to avoid the screen coverd by + image. + */ + max-height: 80%; width: auto; height: auto; margin: auto; @@ -3435,11 +3439,6 @@ a.status-card { background: url('../images/void.png') repeat; object-fit: contain; } - - .react-swipeable-view-container { - width: 100vw; - height: 100%; - } } .media-modal__closer {