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 imagepull/389/head
parent
641abe2db7
commit
fa5c867e0e
|
@ -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} />
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
Loading…
Reference in New Issue