me/glitchier-soc
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

[Glitch] Compensate for scrollbar disappearing when media modal

Browse source 
Port a78672ae50 to glitch-soc
This commit is contained in:
Thibaut Girka 2018-07-31 23:04:09 +02:00
parent 28cdf3da09
commit 658fc6bc1e
4 changed files with 24 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
app/javascript/flavours/glitch/containers/media_container.js
View file

@ -29,19 +29,19 @@ export default class MediaContainer extends PureComponent {
}; };
handleOpenMedia = (media, index) => { handleOpenMedia = (media, index) => {
document.body.classList.add('media-standalone__body'); document.body.classList.add('with-modals--active');
this.setState({ media, index }); this.setState({ media, index });
} }
handleOpenVideo = (video, time) => { handleOpenVideo = (video, time) => {
const media = ImmutableList([video]); const media = ImmutableList([video]);
document.body.classList.add('media-standalone__body'); document.body.classList.add('with-modals--active');
this.setState({ media, time }); this.setState({ media, time });
} }
handleCloseMedia = () => { handleCloseMedia = () => {
document.body.classList.remove('media-standalone__body'); document.body.classList.remove('with-modals--active');
this.setState({ media: null, index: null, time: null }); this.setState({ media: null, index: null, time: null });
} }

13
app/javascript/flavours/glitch/features/ui/components/modal_root.js
View file

@ -45,14 +45,15 @@ export default class ModalRoot extends React.PureComponent {
}; };
getSnapshotBeforeUpdate () { getSnapshotBeforeUpdate () {
const visible = !!this.props.type; return { visible: !!this.props.type };
return {
overflowY: visible ? 'hidden' : null,
};
} }
componentDidUpdate (prevProps, prevState, { overflowY }) { componentDidUpdate (prevProps, prevState, { visible }) {
document.body.style.overflowY = overflowY; if (visible) {
document.body.classList.add('with-modals--active');
} else {
document.body.classList.remove('with-modals--active');
}
} }
renderLoading = modalId => () => { renderLoading = modalId => () => {

22
app/javascript/flavours/glitch/styles/basics.scss
View file

@ -1,8 +1,6 @@
body { body {
font-family: 'mastodon-font-sans-serif', sans-serif; font-family: 'mastodon-font-sans-serif', sans-serif;
background: darken($ui-base-color, 8%); background: darken($ui-base-color, 8%);
background-size: cover;
background-attachment: fixed;
font-size: 13px; font-size: 13px;
line-height: 18px; line-height: 18px;
font-weight: 400; font-weight: 400;
@ -34,16 +32,24 @@ body {
height: 100%; height: 100%;
padding: 0; padding: 0;
background: $ui-base-color; background: $ui-base-color;
&.with-modals--active {
overflow-y: hidden;
}
} }
&.about-body { &.lighter {
background: darken($ui-base-color, 8%); background: $ui-base-color;
padding-bottom: 0;
} }
&.tag-body { &.with-modals {
background: darken($ui-base-color, 8%); overflow-x: hidden;
padding-bottom: 0; overflow-y: scroll;
&--active {
overflow-y: hidden;
margin-right: 13px;
}
} }
&.embed { &.embed {

4
app/javascript/flavours/glitch/styles/containers.scss
View file

@ -60,10 +60,6 @@
} }
} }
.media-standalone__body {
overflow: hidden;
}
.account-header { .account-header {
width: 400px; width: 400px;
margin: 0 auto; margin: 0 auto;