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

* Compensate for scrollbar disappearing when media modal visible

Make auth pages backgrounds lighter

* Fix typo
This commit is contained in:
Eugen Rochko 2018-07-31 01:14:33 +02:00 committed by GitHub
parent e7e577dd6e
commit 60df87f6f0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
13 changed files with 49 additions and 35 deletions

View file

@ -26,7 +26,7 @@ class AboutController < ApplicationController
end end
def set_body_classes def set_body_classes
@body_classes = 'about-body' @body_classes = 'with-modals'
end end
def initial_state_params def initial_state_params

View file

@ -10,6 +10,7 @@ class AccountsController < ApplicationController
def show def show
respond_to do |format| respond_to do |format|
format.html do format.html do
@body_classes = 'with-modals'
@pinned_statuses = [] @pinned_statuses = []
if current_account && @account.blocking?(current_account) if current_account && @account.blocking?(current_account)

View file

@ -3,6 +3,7 @@
class Auth::ConfirmationsController < Devise::ConfirmationsController class Auth::ConfirmationsController < Devise::ConfirmationsController
layout 'auth' layout 'auth'
before_action :set_body_classes
before_action :set_user, only: [:finish_signup] before_action :set_user, only: [:finish_signup]
# GET/PATCH /users/:id/finish_signup # GET/PATCH /users/:id/finish_signup
@ -23,6 +24,10 @@ class Auth::ConfirmationsController < Devise::ConfirmationsController
@user = current_user @user = current_user
end end
def set_body_classes
@body_classes = 'lighter'
end
def user_params def user_params
params.require(:user).permit(:email) params.require(:user).permit(:email)
end end

View file

@ -2,6 +2,7 @@
class Auth::PasswordsController < Devise::PasswordsController class Auth::PasswordsController < Devise::PasswordsController
before_action :check_validity_of_reset_password_token, only: :edit before_action :check_validity_of_reset_password_token, only: :edit
before_action :set_body_classes
layout 'auth' layout 'auth'
@ -14,6 +15,10 @@ class Auth::PasswordsController < Devise::PasswordsController
end end
end end
def set_body_classes
@body_classes = 'lighter'
end
def reset_password_token_is_valid? def reset_password_token_is_valid?
resource_class.with_reset_password_token(params[:reset_password_token]).present? resource_class.with_reset_password_token(params[:reset_password_token]).present?
end end

View file

@ -8,6 +8,7 @@ class Auth::RegistrationsController < Devise::RegistrationsController
before_action :configure_sign_up_params, only: [:create] before_action :configure_sign_up_params, only: [:create]
before_action :set_sessions, only: [:edit, :update] before_action :set_sessions, only: [:edit, :update]
before_action :set_instance_presenter, only: [:new, :create, :update] before_action :set_instance_presenter, only: [:new, :create, :update]
before_action :set_body_classes, only: [:new, :create]
def destroy def destroy
not_found not_found
@ -79,6 +80,10 @@ class Auth::RegistrationsController < Devise::RegistrationsController
@instance_presenter = InstancePresenter.new @instance_presenter = InstancePresenter.new
end end
def set_body_classes
@body_classes = 'lighter'
end
def set_invite def set_invite
@invite = invite_code.present? ? Invite.find_by(code: invite_code) : nil @invite = invite_code.present? ? Invite.find_by(code: invite_code) : nil
end end

View file

@ -9,6 +9,7 @@ class Auth::SessionsController < Devise::SessionsController
skip_before_action :check_suspension, only: [:destroy] skip_before_action :check_suspension, only: [:destroy]
prepend_before_action :authenticate_with_two_factor, if: :two_factor_enabled?, only: [:create] prepend_before_action :authenticate_with_two_factor, if: :two_factor_enabled?, only: [:create]
before_action :set_instance_presenter, only: [:new] before_action :set_instance_presenter, only: [:new]
before_action :set_body_classes
def new def new
Devise.omniauth_configs.each do |provider, config| Devise.omniauth_configs.each do |provider, config|
@ -109,6 +110,10 @@ class Auth::SessionsController < Devise::SessionsController
@instance_presenter = InstancePresenter.new @instance_presenter = InstancePresenter.new
end end
def set_body_classes
@body_classes = 'lighter'
end
def home_paths(resource) def home_paths(resource)
paths = [about_path] paths = [about_path]
if single_user_mode? && resource.is_a?(User) if single_user_mode? && resource.is_a?(User)

View file

@ -22,6 +22,8 @@ class StatusesController < ApplicationController
def show def show
respond_to do |format| respond_to do |format|
format.html do format.html do
@body_classes = 'with-modals'
set_ancestors set_ancestors
set_descendants set_descendants

View file

@ -37,7 +37,7 @@ class TagsController < ApplicationController
private private
def set_body_classes def set_body_classes
@body_classes = 'tag-body' @body_classes = 'with-modals'
end end
def set_instance_presenter def set_instance_presenter

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 });
} }

View file

@ -41,14 +41,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 => () => {

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;
}
} }
&.player { &.player {

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;

View file

@ -8,10 +8,6 @@ RSpec.describe AboutController, type: :controller do
get :show get :show
end end
it 'assigns @body_classes' do
expect(assigns(:body_classes)).to eq 'about-body'
end
it 'assigns @instance_presenter' do it 'assigns @instance_presenter' do
expect(assigns(:instance_presenter)).to be_kind_of InstancePresenter expect(assigns(:instance_presenter)).to be_kind_of InstancePresenter
end end
@ -26,10 +22,6 @@ RSpec.describe AboutController, type: :controller do
get :more get :more
end end
it 'assigns @body_classes' do
expect(assigns(:body_classes)).to eq 'about-body'
end
it 'assigns @instance_presenter' do it 'assigns @instance_presenter' do
expect(assigns(:instance_presenter)).to be_kind_of InstancePresenter expect(assigns(:instance_presenter)).to be_kind_of InstancePresenter
end end
@ -44,10 +36,6 @@ RSpec.describe AboutController, type: :controller do
get :terms get :terms
end end
it 'assigns @body_classes' do
expect(assigns(:body_classes)).to eq 'about-body'
end
it 'returns http success' do it 'returns http success' do
expect(response).to have_http_status(200) expect(response).to have_http_status(200)
end end