asonix/mastodon
1
1
Fork 1
Code Issues Pull requests Projects Releases Wiki Activity

Avoid using JS to set height in MediaModal (#6750)

Browse source 
avoid using JS to set height of ReactSwipeableViews component
reduce max-height of <img/> to 80% to avoid the screen covered by image
This commit is contained in:
Yuto Tokunaga 2018-03-12 11:52:05 +09:00 committed by Eugen Rochko
parent 641abe2db7
commit fa5c867e0e
2 changed files with 24 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
app/javascript/mastodon/features/ui/components/media_modal.js
View file

@ -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} />

13
app/javascript/styles/mastodon/components.scss
View file

@ -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 {