From a78672ae500d01e7f226bc3af3ae12bc8b8f7f7f Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Tue, 31 Jul 2018 01:14:33 +0200 Subject: [PATCH] Compensate for scrollbar disappearing when media modal visible (#8100) * Compensate for scrollbar disappearing when media modal visible Make auth pages backgrounds lighter * Fix typo --- app/controllers/about_controller.rb | 2 +- app/controllers/accounts_controller.rb | 1 + .../auth/confirmations_controller.rb | 5 +++++ app/controllers/auth/passwords_controller.rb | 5 +++++ .../auth/registrations_controller.rb | 5 +++++ app/controllers/auth/sessions_controller.rb | 5 +++++ app/controllers/statuses_controller.rb | 2 ++ app/controllers/tags_controller.rb | 2 +- .../mastodon/containers/media_container.js | 6 ++--- .../features/ui/components/modal_root.js | 13 ++++++----- app/javascript/styles/mastodon/basics.scss | 22 ++++++++++++------- .../styles/mastodon/containers.scss | 4 ---- spec/controllers/about_controller_spec.rb | 12 ---------- 13 files changed, 49 insertions(+), 35 deletions(-) diff --git a/app/controllers/about_controller.rb b/app/controllers/about_controller.rb index 4ffdfb6856..810f212fd2 100644 --- a/app/controllers/about_controller.rb +++ b/app/controllers/about_controller.rb @@ -26,7 +26,7 @@ class AboutController < ApplicationController end def set_body_classes - @body_classes = 'about-body' + @body_classes = 'with-modals' end def initial_state_params diff --git a/app/controllers/accounts_controller.rb b/app/controllers/accounts_controller.rb index 1152d4aca5..d63363156b 100644 --- a/app/controllers/accounts_controller.rb +++ b/app/controllers/accounts_controller.rb @@ -10,6 +10,7 @@ class AccountsController < ApplicationController def show respond_to do |format| format.html do + @body_classes = 'with-modals' @pinned_statuses = [] if current_account && @account.blocking?(current_account) diff --git a/app/controllers/auth/confirmations_controller.rb b/app/controllers/auth/confirmations_controller.rb index 068e71cada..7af9cbe81d 100644 --- a/app/controllers/auth/confirmations_controller.rb +++ b/app/controllers/auth/confirmations_controller.rb @@ -3,6 +3,7 @@ class Auth::ConfirmationsController < Devise::ConfirmationsController layout 'auth' + before_action :set_body_classes before_action :set_user, only: [:finish_signup] # GET/PATCH /users/:id/finish_signup @@ -23,6 +24,10 @@ class Auth::ConfirmationsController < Devise::ConfirmationsController @user = current_user end + def set_body_classes + @body_classes = 'lighter' + end + def user_params params.require(:user).permit(:email) end diff --git a/app/controllers/auth/passwords_controller.rb b/app/controllers/auth/passwords_controller.rb index 171b997dc4..34b98da53b 100644 --- a/app/controllers/auth/passwords_controller.rb +++ b/app/controllers/auth/passwords_controller.rb @@ -2,6 +2,7 @@ class Auth::PasswordsController < Devise::PasswordsController before_action :check_validity_of_reset_password_token, only: :edit + before_action :set_body_classes layout 'auth' @@ -14,6 +15,10 @@ class Auth::PasswordsController < Devise::PasswordsController end end + def set_body_classes + @body_classes = 'lighter' + end + def reset_password_token_is_valid? resource_class.with_reset_password_token(params[:reset_password_token]).present? end diff --git a/app/controllers/auth/registrations_controller.rb b/app/controllers/auth/registrations_controller.rb index 58961554e6..a19f4e62ef 100644 --- a/app/controllers/auth/registrations_controller.rb +++ b/app/controllers/auth/registrations_controller.rb @@ -8,6 +8,7 @@ class Auth::RegistrationsController < Devise::RegistrationsController before_action :configure_sign_up_params, only: [:create] before_action :set_sessions, only: [:edit, :update] before_action :set_instance_presenter, only: [:new, :create, :update] + before_action :set_body_classes, only: [:new, :create] def destroy not_found @@ -79,6 +80,10 @@ class Auth::RegistrationsController < Devise::RegistrationsController @instance_presenter = InstancePresenter.new end + def set_body_classes + @body_classes = 'lighter' + end + def set_invite @invite = invite_code.present? ? Invite.find_by(code: invite_code) : nil end diff --git a/app/controllers/auth/sessions_controller.rb b/app/controllers/auth/sessions_controller.rb index c1ebe760c5..2e721160bb 100644 --- a/app/controllers/auth/sessions_controller.rb +++ b/app/controllers/auth/sessions_controller.rb @@ -9,6 +9,7 @@ class Auth::SessionsController < Devise::SessionsController skip_before_action :check_suspension, only: [:destroy] prepend_before_action :authenticate_with_two_factor, if: :two_factor_enabled?, only: [:create] before_action :set_instance_presenter, only: [:new] + before_action :set_body_classes def new Devise.omniauth_configs.each do |provider, config| @@ -109,6 +110,10 @@ class Auth::SessionsController < Devise::SessionsController @instance_presenter = InstancePresenter.new end + def set_body_classes + @body_classes = 'lighter' + end + def home_paths(resource) paths = [about_path] if single_user_mode? && resource.is_a?(User) diff --git a/app/controllers/statuses_controller.rb b/app/controllers/statuses_controller.rb index 755af1debd..819fcfc70e 100644 --- a/app/controllers/statuses_controller.rb +++ b/app/controllers/statuses_controller.rb @@ -22,6 +22,8 @@ class StatusesController < ApplicationController def show respond_to do |format| format.html do + @body_classes = 'with-modals' + set_ancestors set_descendants diff --git a/app/controllers/tags_controller.rb b/app/controllers/tags_controller.rb index 014a5c9b8d..8772509d5e 100644 --- a/app/controllers/tags_controller.rb +++ b/app/controllers/tags_controller.rb @@ -37,7 +37,7 @@ class TagsController < ApplicationController private def set_body_classes - @body_classes = 'tag-body' + @body_classes = 'with-modals' end def set_instance_presenter diff --git a/app/javascript/mastodon/containers/media_container.js b/app/javascript/mastodon/containers/media_container.js index 1700fba05a..43bb394035 100644 --- a/app/javascript/mastodon/containers/media_container.js +++ b/app/javascript/mastodon/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/mastodon/features/ui/components/modal_root.js b/app/javascript/mastodon/features/ui/components/modal_root.js index a334318ce5..d8e0345547 100644 --- a/app/javascript/mastodon/features/ui/components/modal_root.js +++ b/app/javascript/mastodon/features/ui/components/modal_root.js @@ -41,14 +41,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/styles/mastodon/basics.scss b/app/javascript/styles/mastodon/basics.scss index c45a507563..7a6a1c4909 100644 --- a/app/javascript/styles/mastodon/basics.scss +++ b/app/javascript/styles/mastodon/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; + } } &.player { diff --git a/app/javascript/styles/mastodon/containers.scss b/app/javascript/styles/mastodon/containers.scss index c2ff77783a..7b339277f5 100644 --- a/app/javascript/styles/mastodon/containers.scss +++ b/app/javascript/styles/mastodon/containers.scss @@ -60,10 +60,6 @@ } } -.media-standalone__body { - overflow: hidden; -} - .account-header { width: 400px; margin: 0 auto; diff --git a/spec/controllers/about_controller_spec.rb b/spec/controllers/about_controller_spec.rb index 2089b3b162..03dddd8c13 100644 --- a/spec/controllers/about_controller_spec.rb +++ b/spec/controllers/about_controller_spec.rb @@ -8,10 +8,6 @@ RSpec.describe AboutController, type: :controller do get :show end - it 'assigns @body_classes' do - expect(assigns(:body_classes)).to eq 'about-body' - end - it 'assigns @instance_presenter' do expect(assigns(:instance_presenter)).to be_kind_of InstancePresenter end @@ -26,10 +22,6 @@ RSpec.describe AboutController, type: :controller do get :more end - it 'assigns @body_classes' do - expect(assigns(:body_classes)).to eq 'about-body' - end - it 'assigns @instance_presenter' do expect(assigns(:instance_presenter)).to be_kind_of InstancePresenter end @@ -44,10 +36,6 @@ RSpec.describe AboutController, type: :controller do get :terms end - it 'assigns @body_classes' do - expect(assigns(:body_classes)).to eq 'about-body' - end - it 'returns http success' do expect(response).to have_http_status(200) end