Compensate for scrollbar disappearing when media modal visible (#8100)

* Compensate for scrollbar disappearing when media modal visible

Make auth pages backgrounds lighter

* Fix typo

diff --git a/app/controllers/about_controller.rb b/app/controllers/about_controller.rb
index 4ffdfb6856c3d43a03774c9dcf6823e1db10a4c9..810f212fd2a71a31bec5c1bb119152787da1a98b 100644 (file)
--- 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 1152d4aca57e334de6f3321474058a35d4e65663..d63363156b1ec4ffdaf006fc2b75443fdd175dc4 100644 (file)
--- 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 068e71cada69c03012bdd1cefbef079b72af92e2..7af9cbe81dba1d0771f6c5e7d85d882fb6a9fc2d 100644 (file)
--- 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 171b997dc486f62c6e002c7f838cb3343f602316..34b98da53bfc1cb52120009d1f39d403cba6f3e9 100644 (file)
--- 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 58961554e6b7fe46cc86b2725eed7c6d823f49ce..a19f4e62efad4cfe076c67c43d1c01d18c7715e6 100644 (file)
--- 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 c1ebe760c5d90814cb5ac2b64c938ed55ebeee21..2e721160bbcb0df34f80df99d75d0f652cdd7486 100644 (file)
--- 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 755af1debd6ba1aaf83dbfb038587e44510f6f5d..819fcfc70e2e9701e587e979030ed1b37271e7be 100644 (file)
--- 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 014a5c9b8dd64be7ab48e6a84d43461e9476cd97..8772509d5ea4e888208f4cd01d941519f6a58b44 100644 (file)
--- 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 1700fba05a9b6bfd03e798624bf994543b6b472e..43bb394035c57d66cdfef81d52ca2e8d6d9d7121 100644 (file)
--- 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 a334318ce56422f05e50b8444b6c1c39f3b8b3d3..d8e034554794b3b7c97a4db7d36bdc4935a017d6 100644 (file)
--- 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 c45a5075635b5a5445efce0f3ceade4387e2a969..7a6a1c49093049b8fa59c5e7dda81b00cba36f82 100644 (file)
--- 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 c2ff77783ae7db5ba1cafab3d598c3313fa16ce3..7b339277f55873ff0ff4fbae367ace3d2b259268 100644 (file)
--- 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 2089b3b1623c992eb6e2612da0735be0c3ae899a..03dddd8c13468c4a684cd6d4b734db387ba82639 100644 (file)
--- 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