namekuji/chuckya
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

[Glitch] Avoid using JS to set height in MediaModal

Browse source 
Port fa5c867e0e to glitch-soc
This commit is contained in:
Thibaut Girka 2018-04-08 23:18:24 +02:00
parent 87071d9e81
commit a4fa8c9064
2 changed files with 24 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
app/javascript/flavours/glitch/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,15 +154,8 @@ 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`,
}}
style={swipeableViewsStyle}
containerStyle={containerStyle}
onChangeIndex={this.handleSwipe}
onSwitching={this.handleSwitching}
@ -162,7 +164,6 @@ export default class MediaModal extends ImmutablePureComponent {
{content}
</ReactSwipeableViews>
</div>
</div>
<div className={navigationClassName}>
<IconButton className='media-modal__close' title={intl.formatMessage(messages.close)} icon='times' onClick={onClose} size={40} />
{leftNav}

13
app/javascript/flavours/glitch/styles/components/media.scss
View file

@ -171,8 +171,12 @@
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;
@ -184,11 +188,6 @@
background: url('~images/void.png') repeat;
object-fit: contain;
}
.react-swipeable-view-container {
width: 100vw;
height: 100%;
}
}
.media-modal__closer {