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
def set_body_classes
@body_classes = 'about-body'
@body_classes = 'with-modals'
end
def initial_state_params

View File

@ -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)

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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)

View File

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

View File

@ -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

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

View File

@ -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 => () => {

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

View File

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

View File

@ -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