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; return null;
}).toArray(); }).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 = { const containerStyle = {
alignItems: 'center', // center vertically alignItems: 'center', // center vertically
}; };
@ -145,23 +154,15 @@ export default class MediaModal extends ImmutablePureComponent {
role='presentation' role='presentation'
onClick={onClose} onClick={onClose}
> >
<div className='media-modal__content'> <ReactSwipeableViews
<ReactSwipeableViews style={swipeableViewsStyle}
style={{ containerStyle={containerStyle}
// you can't use 100vh, because the viewport height is taller onChangeIndex={this.handleSwipe}
// than the visible part of the document in some mobile onSwitching={this.handleSwitching}
// browsers when it's address bar is visible. index={index}
// https://developers.google.com/web/updates/2016/12/url-bar-resizing >
height: `${document.body.clientHeight}px`, {content}
}} </ReactSwipeableViews>
containerStyle={containerStyle}
onChangeIndex={this.handleSwipe}
onSwitching={this.handleSwitching}
index={index}
>
{content}
</ReactSwipeableViews>
</div>
</div> </div>
<div className={navigationClassName}> <div className={navigationClassName}>
<IconButton className='media-modal__close' title={intl.formatMessage(messages.close)} icon='times' onClick={onClose} size={40} /> <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, img,
canvas, canvas,
video { video {
max-width: 100vw; max-width: 100%;
max-height: 100vh; /*
put margins on top and bottom of image to avoid the screen coverd by
image.
*/
max-height: 80%;
width: auto; width: auto;
height: auto; height: auto;
margin: auto; margin: auto;
@ -3435,11 +3439,6 @@ a.status-card {
background: url('../images/void.png') repeat; background: url('../images/void.png') repeat;
object-fit: contain; object-fit: contain;
} }
.react-swipeable-view-container {
width: 100vw;
height: 100%;
}
} }
.media-modal__closer { .media-modal__closer {