From fa5c867e0ec426fc01653e9022ba29783b2a826f Mon Sep 17 00:00:00 2001
From: Yuto Tokunaga <yuntan.sub1@gmail.com>
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 <img/> 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 72ef32256f..fb76270fad 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}
>
- <div className='media-modal__content'>
- <ReactSwipeableViews
- style={{
- // 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
- height: `${document.body.clientHeight}px`,
- }}
- containerStyle={containerStyle}
- onChangeIndex={this.handleSwipe}
- onSwitching={this.handleSwitching}
- index={index}
- >
- {content}
- </ReactSwipeableViews>
- </div>
+ <ReactSwipeableViews
+ style={swipeableViewsStyle}
+ containerStyle={containerStyle}
+ onChangeIndex={this.handleSwipe}
+ onSwitching={this.handleSwitching}
+ index={index}
+ >
+ {content}
+ </ReactSwipeableViews>
</div>
<div className={navigationClassName}>
<IconButton className='media-modal__close' title={intl.formatMessage(messages.close)} icon='times' onClick={onClose} size={40} />
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index 93faff8b69..587fe62da8 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 {
--
GitLab