treehouse
/
mastodon
20
8
Fork 5
Code Issues 32 Pull Requests Projects 1 Releases Wiki Activity

[Glitch] Avoid using JS to set height in MediaModal 

Port 010c71f19c to glitch-soc
lolsob-rspec
Thibaut Girka 2018-04-08 23:18:24 +02:00
parent 89f5ae00a5
commit 9a5a49f17c
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/flavours/glitch/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/flavours/glitch/styles/components/media.scss
View File

@ -171,8 +171,12 @@
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;
@ -184,11 +188,6 @@
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 {