fedi/mastodon
1
0
Fork 1
mirror of https://github.com/mastodon/mastodon.git synced 2024-11-24 06:46:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

[Glitch] Compensate for scrollbar disappearing when media modal

Browse source 
Port 60df87f6f0 to glitch-soc
This commit is contained in:
Thibaut Girka 2018-07-31 23:04:09 +02:00
parent d2b3eebe00
commit 175c2155a9
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) => {
document.body.classList.add('media-standalone__body');
document.body.classList.add('with-modals--active');
this.setState({ media, index });
}
handleOpenVideo = (video, time) => {
const media = ImmutableList([video]);
document.body.classList.add('media-standalone__body');
document.body.classList.add('with-modals--active');
this.setState({ media, time });
}
handleCloseMedia = () => {
document.body.classList.remove('media-standalone__body');
document.body.classList.remove('with-modals--active');
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 () {
const visible = !!this.props.type;
return {
overflowY: visible ? 'hidden' : null,
};
return { visible: !!this.props.type };
}
componentDidUpdate (prevProps, prevState, { overflowY }) {
document.body.style.overflowY = overflowY;
componentDidUpdate (prevProps, prevState, { visible }) {
if (visible) {
document.body.classList.add('with-modals--active');
} else {
document.body.classList.remove('with-modals--active');
}
}
renderLoading = modalId => () => {

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

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

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

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