From d2b3eebe00ea60df56704045a8459acb03867555 Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Tue, 31 Jul 2018 23:03:16 +0200 Subject: [Glitch] Show media modal on public timeline Port e0b1e17bd04d7f9b533ab462aee4544a5f5fb926 to glitch-soc --- .../flavours/glitch/containers/timeline_container.js | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) (limited to 'app/javascript/flavours/glitch/containers') diff --git a/app/javascript/flavours/glitch/containers/timeline_container.js b/app/javascript/flavours/glitch/containers/timeline_container.js index 56669a49a..5a1f41f7a 100644 --- a/app/javascript/flavours/glitch/containers/timeline_container.js +++ b/app/javascript/flavours/glitch/containers/timeline_container.js @@ -1,4 +1,5 @@ -import React from 'react'; +import React, { Fragment } from 'react'; +import ReactDOM from 'react-dom'; import { Provider } from 'react-redux'; import PropTypes from 'prop-types'; import configureStore from 'flavours/glitch/store/configureStore'; @@ -8,6 +9,7 @@ import { getLocale } from 'mastodon/locales'; import PublicTimeline from 'flavours/glitch/features/standalone/public_timeline'; import CommunityTimeline from 'flavours/glitch/features/standalone/community_timeline'; import HashtagTimeline from 'flavours/glitch/features/standalone/hashtag_timeline'; +import ModalContainer from 'flavours/glitch/features/ui/containers/modal_container'; import initialState from 'flavours/glitch/util/initial_state'; const { localeData, messages } = getLocale(); @@ -47,7 +49,13 @@ export default class TimelineContainer extends React.PureComponent { return ( - {timeline} + + {timeline} + {ReactDOM.createPortal( + , + document.getElementById('modal-container'), + )} + ); -- cgit From 175c2155a9c674fc225cc943a3fb6fdfc26571f7 Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Tue, 31 Jul 2018 23:04:09 +0200 Subject: [Glitch] Compensate for scrollbar disappearing when media modal Port 60df87f6f0fb8afd9a4e750917eff7c425b62891 to glitch-soc --- .../flavours/glitch/containers/media_container.js | 6 +++--- .../glitch/features/ui/components/modal_root.js | 13 +++++++------ app/javascript/flavours/glitch/styles/basics.scss | 22 ++++++++++++++-------- .../flavours/glitch/styles/containers.scss | 4 ---- 4 files changed, 24 insertions(+), 21 deletions(-) (limited to 'app/javascript/flavours/glitch/containers') diff --git a/app/javascript/flavours/glitch/containers/media_container.js b/app/javascript/flavours/glitch/containers/media_container.js index 0e1904132..c4b713e82 100644 --- a/app/javascript/flavours/glitch/containers/media_container.js +++ b/app/javascript/flavours/glitch/containers/media_container.js @@ -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 }); } diff --git a/app/javascript/flavours/glitch/features/ui/components/modal_root.js b/app/javascript/flavours/glitch/features/ui/components/modal_root.js index 86e1f8695..e54ab9a52 100644 --- a/app/javascript/flavours/glitch/features/ui/components/modal_root.js +++ b/app/javascript/flavours/glitch/features/ui/components/modal_root.js @@ -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 => () => { diff --git a/app/javascript/flavours/glitch/styles/basics.scss b/app/javascript/flavours/glitch/styles/basics.scss index 9d7fb18fc..11c91bbc9 100644 --- a/app/javascript/flavours/glitch/styles/basics.scss +++ b/app/javascript/flavours/glitch/styles/basics.scss @@ -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 { diff --git a/app/javascript/flavours/glitch/styles/containers.scss b/app/javascript/flavours/glitch/styles/containers.scss index c2ff77783..7b339277f 100644 --- a/app/javascript/flavours/glitch/styles/containers.scss +++ b/app/javascript/flavours/glitch/styles/containers.scss @@ -60,10 +60,6 @@ } } -.media-standalone__body { - overflow: hidden; -} - .account-header { width: 400px; margin: 0 auto; -- cgit