treehouse
/
mastodon
21
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

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; 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,15 +154,8 @@ export default class MediaModal extends ImmutablePureComponent {
role='presentation' role='presentation'
onClick={onClose} onClick={onClose}
> >
<div className='media-modal__content'>
<ReactSwipeableViews <ReactSwipeableViews
style={{ style={swipeableViewsStyle}
// 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} containerStyle={containerStyle}
onChangeIndex={this.handleSwipe} onChangeIndex={this.handleSwipe}
onSwitching={this.handleSwitching} onSwitching={this.handleSwitching}
@ -162,7 +164,6 @@ export default class MediaModal extends ImmutablePureComponent {
{content} {content}
</ReactSwipeableViews> </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} />
{leftNav} {leftNav}

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 {