From 04eb59986461bc802d4432fe4131e09eadd070c0 Mon Sep 17 00:00:00 2001 From: ThibG Date: Tue, 28 Apr 2020 09:44:17 +0200 Subject: Fix messed up z-index when NoScript blocks media/previews (#13449) Fixes #13444 --- app/javascript/styles/mastodon/basics.scss | 12 ++++++++++++ 1 file changed, 12 insertions(+) (limited to 'app/javascript') diff --git a/app/javascript/styles/mastodon/basics.scss b/app/javascript/styles/mastodon/basics.scss index 2b10b5ad3..4eff8a465 100644 --- a/app/javascript/styles/mastodon/basics.scss +++ b/app/javascript/styles/mastodon/basics.scss @@ -229,3 +229,15 @@ button { } } } + +// NoScript adds a __ns__pop2top class to the full ancestry of blocked elements, +// to set the z-index to a high value, which messes with modals and dropdowns. +// Blocked elements can in theory only be media and frames/embeds, so they +// should only appear in statuses, under divs and articles. +body, +div, +article { + .__ns__pop2top { + z-index: unset !important; + } +} -- cgit From ad9c7aefe6618a70c69991b7daf100573a7e27b9 Mon Sep 17 00:00:00 2001 From: ThibG Date: Tue, 28 Apr 2020 09:53:42 +0200 Subject: Refactor/cleanup TIMELINE_DELETE-related code (#13175) --- app/javascript/mastodon/actions/timelines.js | 2 +- app/javascript/mastodon/reducers/statuses.js | 2 +- app/javascript/mastodon/reducers/timelines.js | 10 +++++----- 3 files changed, 7 insertions(+), 7 deletions(-) (limited to 'app/javascript') diff --git a/app/javascript/mastodon/actions/timelines.js b/app/javascript/mastodon/actions/timelines.js index 50840cacc..861827d33 100644 --- a/app/javascript/mastodon/actions/timelines.js +++ b/app/javascript/mastodon/actions/timelines.js @@ -42,7 +42,7 @@ export function updateTimeline(timeline, status, accept) { export function deleteFromTimelines(id) { return (dispatch, getState) => { const accountId = getState().getIn(['statuses', id, 'account']); - const references = getState().get('statuses').filter(status => status.get('reblog') === id).map(status => [status.get('id'), status.get('account')]); + const references = getState().get('statuses').filter(status => status.get('reblog') === id).map(status => status.get('id')); const reblogOf = getState().getIn(['statuses', id, 'reblog'], null); dispatch({ diff --git a/app/javascript/mastodon/reducers/statuses.js b/app/javascript/mastodon/reducers/statuses.js index 2554c008d..53dec9585 100644 --- a/app/javascript/mastodon/reducers/statuses.js +++ b/app/javascript/mastodon/reducers/statuses.js @@ -25,7 +25,7 @@ const importStatuses = (state, statuses) => const deleteStatus = (state, id, references) => { references.forEach(ref => { - state = deleteStatus(state, ref[0], []); + state = deleteStatus(state, ref, []); }); return state.delete(id); diff --git a/app/javascript/mastodon/reducers/timelines.js b/app/javascript/mastodon/reducers/timelines.js index 63b76773d..9156db021 100644 --- a/app/javascript/mastodon/reducers/timelines.js +++ b/app/javascript/mastodon/reducers/timelines.js @@ -89,7 +89,7 @@ const updateTimeline = (state, timeline, status, usePendingItems) => { })); }; -const deleteStatus = (state, id, accountId, references, exclude_account = null) => { +const deleteStatus = (state, id, references, exclude_account = null) => { state.keySeq().forEach(timeline => { if (exclude_account === null || (timeline !== `account:${exclude_account}` && !timeline.startsWith(`account:${exclude_account}:`))) { const helper = list => list.filterNot(item => item === id); @@ -99,7 +99,7 @@ const deleteStatus = (state, id, accountId, references, exclude_account = null) // Remove reblogs of deleted status references.forEach(ref => { - state = deleteStatus(state, ref[0], ref[1], [], exclude_account); + state = deleteStatus(state, ref, [], exclude_account); }); return state; @@ -117,8 +117,8 @@ const filterTimelines = (state, relationship, statuses) => { return; } - references = statuses.filter(item => item.get('reblog') === status.get('id')).map(item => [item.get('id'), item.get('account')]); - state = deleteStatus(state, status.get('id'), status.get('account'), references, relationship.id); + references = statuses.filter(item => item.get('reblog') === status.get('id')).map(item => item.get('id')); + state = deleteStatus(state, status.get('id'), references, relationship.id); }); return state; @@ -150,7 +150,7 @@ export default function timelines(state = initialState, action) { case TIMELINE_UPDATE: return updateTimeline(state, action.timeline, fromJS(action.status), action.usePendingItems); case TIMELINE_DELETE: - return deleteStatus(state, action.id, action.accountId, action.references, action.reblogOf); + return deleteStatus(state, action.id, action.references, action.reblogOf); case TIMELINE_CLEAR: return clearTimeline(state, action.timeline); case ACCOUNT_BLOCK_SUCCESS: -- cgit From 0e362b7678e75cb71ce207fd45dd4dc0d955fdca Mon Sep 17 00:00:00 2001 From: ThibG Date: Tue, 28 Apr 2020 10:16:55 +0200 Subject: Fix end-user-facing uses of inline CSS (#13438) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Move some inline styles to CSS files * Move default_account_display_name span to fix useless tags with duplicate id * Change handling of public pages spoiler text from inline CSS to dataset attribute * Use the `dir` HTML attribute instead of inline CSS * Move status action bar inline CSS to CSS file * Hide logo resources from CSS file, not inline CSS Fixes #11601 * Move translation prompt styling from inline CSS to CSS file * Move “invited by” styling on registration form from inline to CSS file * Use the progress tag to display poll results in JS fallback * Fix poll results JS-less fallback when the user has voted for an option * Change account public page “moved” notice to use img tags instead of inline CSS * Move OTP hint inline CSS to SCSS file * Hide JS-less fallback vote progressbars from accessibility tools Co-authored-by: Eugen Rochko --- app/javascript/packs/public.js | 16 +++++------- app/javascript/styles/mastodon/about.scss | 5 ++++ app/javascript/styles/mastodon/basics.scss | 4 +++ app/javascript/styles/mastodon/components.scss | 12 +++++++++ app/javascript/styles/mastodon/forms.scss | 21 +++++++++++++++ app/javascript/styles/mastodon/polls.scss | 30 ++++++++++++++++++++++ app/javascript/styles/mastodon/statuses.scss | 17 ++++++++++++ app/views/about/show.html.haml | 6 ++--- app/views/accounts/_moved.html.haml | 6 +++-- app/views/application/_card.html.haml | 1 - app/views/auth/registrations/new.html.haml | 4 +-- app/views/auth/sessions/two_factor.html.haml | 2 +- app/views/directories/index.html.haml | 1 - app/views/layouts/application.html.haml | 2 +- app/views/layouts/embedded.html.haml | 2 +- .../settings/preferences/appearance/show.html.haml | 4 +-- app/views/settings/profiles/show.html.haml | 2 +- app/views/statuses/_detailed_status.html.haml | 6 ++--- app/views/statuses/_poll.html.haml | 8 +++--- app/views/statuses/_simple_status.html.haml | 12 ++++----- 20 files changed, 125 insertions(+), 36 deletions(-) (limited to 'app/javascript') diff --git a/app/javascript/packs/public.js b/app/javascript/packs/public.js index 85789c8aa..557823c96 100644 --- a/app/javascript/packs/public.js +++ b/app/javascript/packs/public.js @@ -120,15 +120,13 @@ function main() { delegate(document, '.custom-emoji', 'mouseout', getEmojiAnimationHandler('data-static')); delegate(document, '.status__content__spoiler-link', 'click', function() { - const contentEl = this.parentNode.parentNode.querySelector('.e-content'); + const statusEl = this.parentNode.parentNode; - if (contentEl.style.display === 'block') { - contentEl.style.display = 'none'; - this.parentNode.style.marginBottom = 0; + if (statusEl.dataset.spoiler === 'expanded') { + statusEl.dataset.spoiler = 'folded'; this.textContent = (new IntlMessageFormat(messages['status.show_more'] || 'Show more', locale)).format(); } else { - contentEl.style.display = 'block'; - this.parentNode.style.marginBottom = null; + statusEl.dataset.spoiler = 'expanded'; this.textContent = (new IntlMessageFormat(messages['status.show_less'] || 'Show less', locale)).format(); } @@ -136,8 +134,8 @@ function main() { }); [].forEach.call(document.querySelectorAll('.status__content__spoiler-link'), (spoilerLink) => { - const contentEl = spoilerLink.parentNode.parentNode.querySelector('.e-content'); - const message = (contentEl.style.display === 'block') ? (messages['status.show_less'] || 'Show less') : (messages['status.show_more'] || 'Show more'); + const statusEl = spoilerLink.parentNode.parentNode; + const message = (statusEl.dataset.spoiler === 'expanded') ? (messages['status.show_less'] || 'Show less') : (messages['status.show_more'] || 'Show more'); spoilerLink.textContent = (new IntlMessageFormat(message, locale)).format(); }); }); @@ -170,7 +168,7 @@ function main() { if (target.value) { name.innerHTML = emojify(escapeTextContentForBrowser(target.value)); } else { - name.textContent = document.querySelector('#default_account_display_name').textContent; + name.textContent = target.dataset.default; } } }); diff --git a/app/javascript/styles/mastodon/about.scss b/app/javascript/styles/mastodon/about.scss index cf16b54ac..711f34965 100644 --- a/app/javascript/styles/mastodon/about.scss +++ b/app/javascript/styles/mastodon/about.scss @@ -757,8 +757,13 @@ $small-breakpoint: 960px; } } + &__counters__wrapper { + display: flex; + } + &__counter { padding: 10px; + width: 50%; strong { font-family: $font-display, sans-serif; diff --git a/app/javascript/styles/mastodon/basics.scss b/app/javascript/styles/mastodon/basics.scss index 4eff8a465..a5dbe75fb 100644 --- a/app/javascript/styles/mastodon/basics.scss +++ b/app/javascript/styles/mastodon/basics.scss @@ -230,6 +230,10 @@ button { } } +.logo-resources { + display: none; +} + // NoScript adds a __ns__pop2top class to the full ancestry of blocked elements, // to set the z-index to a high value, which messes with modals and dropdowns. // Blocked elements can in theory only be media and frames/embeds, so they diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index beb3b3cfd..e22b87711 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -1362,6 +1362,12 @@ a .account__avatar { &-base { @include avatar-radius; @include avatar-size(36px); + + img { + @include avatar-radius; + width: 100%; + height: 100%; + } } &-overlay { @@ -1372,6 +1378,12 @@ a .account__avatar { bottom: 0; right: 0; z-index: 1; + + img { + @include avatar-radius; + width: 100%; + height: 100%; + } } } diff --git a/app/javascript/styles/mastodon/forms.scss b/app/javascript/styles/mastodon/forms.scss index c9ad68f94..0e5b00e8f 100644 --- a/app/javascript/styles/mastodon/forms.scss +++ b/app/javascript/styles/mastodon/forms.scss @@ -142,6 +142,10 @@ code { } } + .otp-hint { + margin-bottom: 25px; + } + .card { margin-bottom: 15px; } @@ -285,6 +289,14 @@ code { margin-bottom: 25px; } } + + .fields-group.invited-by { + margin-bottom: 30px; + + .hint { + text-align: center; + } + } } .input.radio_buttons .radio label { @@ -635,6 +647,15 @@ code { @media screen and (max-width: 740px) and (min-width: 441px) { margin-top: 40px; } + + &.translation-prompt { + text-align: unset; + color: unset; + + a { + text-decoration: underline; + } + } } .form-footer { diff --git a/app/javascript/styles/mastodon/polls.scss b/app/javascript/styles/mastodon/polls.scss index 1ecc8434d..ad7088982 100644 --- a/app/javascript/styles/mastodon/polls.scss +++ b/app/javascript/styles/mastodon/polls.scss @@ -19,6 +19,36 @@ } } + progress { + border: 0; + display: block; + width: 100%; + height: 5px; + appearance: none; + background: transparent; + + &::-webkit-progress-bar { + background: transparent; + } + + // Those rules need to be entirely separate or they won't work, hence the + // duplication + &::-moz-progress-bar { + border-radius: 4px; + background: darken($ui-primary-color, 5%); + } + + &::-ms-fill { + border-radius: 4px; + background: darken($ui-primary-color, 5%); + } + + &::-webkit-progress-value { + border-radius: 4px; + background: darken($ui-primary-color, 5%); + } + } + &__option { position: relative; display: flex; diff --git a/app/javascript/styles/mastodon/statuses.scss b/app/javascript/styles/mastodon/statuses.scss index 19ce0ab8f..0b7be7afd 100644 --- a/app/javascript/styles/mastodon/statuses.scss +++ b/app/javascript/styles/mastodon/statuses.scss @@ -128,6 +128,16 @@ .embed, .public-layout { + .status__content[data-spoiler=folded] { + .e-content { + display: none; + } + + p:first-child { + margin-bottom: 0; + } + } + .detailed-status { padding: 15px; } @@ -159,5 +169,12 @@ .video-player { margin-top: 10px; } + + &__action-bar-button { + font-size: 18px; + width: 23.1429px; + height: 23.1429px; + line-height: 23.15px; + } } } diff --git a/app/views/about/show.html.haml b/app/views/about/show.html.haml index e0ec98ec9..07e06100a 100644 --- a/app/views/about/show.html.haml +++ b/app/views/about/show.html.haml @@ -68,11 +68,11 @@ .hero-widget__footer__column %h4= t 'about.server_stats' - %div{ style: 'display: flex' } - .hero-widget__counter{ style: 'width: 50%' } + .hero-widget__counters__wrapper + .hero-widget__counter %strong= number_to_human @instance_presenter.user_count, strip_insignificant_zeros: true %span= t 'about.user_count_after', count: @instance_presenter.user_count - .hero-widget__counter{ style: 'width: 50%' } + .hero-widget__counter %strong= number_to_human @instance_presenter.active_user_count, strip_insignificant_zeros: true %span = t 'about.active_count_after' diff --git a/app/views/accounts/_moved.html.haml b/app/views/accounts/_moved.html.haml index a82f277b1..4f71b062d 100644 --- a/app/views/accounts/_moved.html.haml +++ b/app/views/accounts/_moved.html.haml @@ -9,8 +9,10 @@ = link_to ActivityPub::TagManager.instance.url_for(moved_to_account), class: 'detailed-status__display-name p-author h-card', target: '_blank', rel: 'me noopener noreferrer' do .detailed-status__display-avatar .account__avatar-overlay - .account__avatar-overlay-base{ style: "background-image: url('#{moved_to_account.avatar.url(:original)}')" } - .account__avatar-overlay-overlay{ style: "background-image: url('#{account.avatar.url(:original)}')" } + .account__avatar-overlay-base + = image_tag moved_to_account.avatar_static_url + .account__avatar-overlay-overlay + = image_tag account.avatar_static_url %span.display-name %bdi diff --git a/app/views/application/_card.html.haml b/app/views/application/_card.html.haml index 808dce514..e7ecfecd9 100644 --- a/app/views/application/_card.html.haml +++ b/app/views/application/_card.html.haml @@ -9,7 +9,6 @@ = image_tag account.avatar.url, alt: '', width: 48, height: 48, class: 'u-photo' .display-name - %span{ id: "default_account_display_name", style: "display: none" }= account.username %bdi %strong.emojify.p-name= display_name(account, custom_emojify: true) %span diff --git a/app/views/auth/registrations/new.html.haml b/app/views/auth/registrations/new.html.haml index bcd66fb8a..457bc1d23 100644 --- a/app/views/auth/registrations/new.html.haml +++ b/app/views/auth/registrations/new.html.haml @@ -8,8 +8,8 @@ = render 'shared/error_messages', object: resource - if @invite.present? && @invite.autofollow? - .fields-group{ style: 'margin-bottom: 30px' } - %p.hint{ style: 'text-align: center' }= t('invites.invited_by') + .fields-group.invited-by + %p.hint= t('invites.invited_by') = render 'application/card', account: @invite.user.account = f.simple_fields_for :account do |ff| diff --git a/app/views/auth/sessions/two_factor.html.haml b/app/views/auth/sessions/two_factor.html.haml index 4e6bbd7a9..b2e36f6bc 100644 --- a/app/views/auth/sessions/two_factor.html.haml +++ b/app/views/auth/sessions/two_factor.html.haml @@ -2,7 +2,7 @@ = t('auth.login') = simple_form_for(resource, as: resource_name, url: session_path(resource_name), method: :post) do |f| - %p.hint{ style: 'margin-bottom: 25px' }= t('simple_form.hints.sessions.otp') + %p.hint.otp-hint= t('simple_form.hints.sessions.otp') .fields-group = f.input :otp_attempt, type: :number, wrapper: :with_label, label: t('simple_form.labels.defaults.otp_attempt'), input_html: { 'aria-label' => t('simple_form.labels.defaults.otp_attempt'), :autocomplete => 'off' }, autofocus: true diff --git a/app/views/directories/index.html.haml b/app/views/directories/index.html.haml index 333a257e1..bdc1e9d5a 100644 --- a/app/views/directories/index.html.haml +++ b/app/views/directories/index.html.haml @@ -28,7 +28,6 @@ = image_tag account.avatar.url, alt: '', width: 48, height: 48, class: 'u-photo' .display-name - %span{ id: "default_account_display_name", style: "display: none" }= account.username %bdi %strong.emojify.p-name= display_name(account, custom_emojify: true) %span= acct(account) diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml index 747d80bf0..25d001337 100755 --- a/app/views/layouts/application.html.haml +++ b/app/views/layouts/application.html.haml @@ -34,6 +34,6 @@ %body{ class: body_classes } = content_for?(:content) ? yield(:content) : yield - %div{ style: 'display: none'} + .logo-resources = render file: Rails.root.join('app', 'javascript', 'images', 'logo_transparent.svg') = render file: Rails.root.join('app', 'javascript', 'images', 'logo_full.svg') diff --git a/app/views/layouts/embedded.html.haml b/app/views/layouts/embedded.html.haml index d7e74ade5..4a40b8584 100644 --- a/app/views/layouts/embedded.html.haml +++ b/app/views/layouts/embedded.html.haml @@ -19,5 +19,5 @@ %body.embed = yield - %div{ style: 'display: none'} + .logo-resources = render file: Rails.root.join('app', 'javascript', 'images', 'logo_transparent.svg') diff --git a/app/views/settings/preferences/appearance/show.html.haml b/app/views/settings/preferences/appearance/show.html.haml index acddf7884..10fff406e 100644 --- a/app/views/settings/preferences/appearance/show.html.haml +++ b/app/views/settings/preferences/appearance/show.html.haml @@ -12,8 +12,8 @@ = f.input :setting_theme, collection: Themes.instance.names, label_method: lambda { |theme| I18n.t("themes.#{theme}", default: theme) }, wrapper: :with_label, include_blank: false, hint: false - unless I18n.locale == :en - .flash-message{ style: "text-align: unset; color: unset" } - #{t 'appearance.localization.body'} #{content_tag(:a, t('appearance.localization.guide_link_text'), href: t('appearance.localization.guide_link'), target: "_blank", rel: "noopener", style: "text-decoration: underline")} + .flash-message.translation-prompt + #{t 'appearance.localization.body'} #{content_tag(:a, t('appearance.localization.guide_link_text'), href: t('appearance.localization.guide_link'), target: "_blank", rel: "noopener")} %h4= t 'appearance.advanced_web_interface' diff --git a/app/views/settings/profiles/show.html.haml b/app/views/settings/profiles/show.html.haml index 6497824c6..4885878f0 100644 --- a/app/views/settings/profiles/show.html.haml +++ b/app/views/settings/profiles/show.html.haml @@ -9,7 +9,7 @@ .fields-row .fields-row__column.fields-group.fields-row__column-6 - = f.input :display_name, wrapper: :with_label, input_html: { maxlength: 30 }, hint: false + = f.input :display_name, wrapper: :with_label, input_html: { maxlength: 30, data: { default: @account.username } }, hint: false = f.input :note, wrapper: :with_label, input_html: { maxlength: 500 }, hint: false .fields-row diff --git a/app/views/statuses/_detailed_status.html.haml b/app/views/statuses/_detailed_status.html.haml index 021390e47..544b92330 100644 --- a/app/views/statuses/_detailed_status.html.haml +++ b/app/views/statuses/_detailed_status.html.haml @@ -15,12 +15,12 @@ = account_action_button(status.account) - .status__content.emojify< + .status__content.emojify{ :data => ({ spoiler: current_account&.user&.setting_expand_spoilers ? 'expanded' : 'folded' } if status.spoiler_text?) }< - if status.spoiler_text? - %p{ :style => ('margin-bottom: 0' unless current_account&.user&.setting_expand_spoilers) }< + %p< %span.p-summary> #{Formatter.instance.format_spoiler(status, autoplay: autoplay)}  %button.status__content__spoiler-link= t('statuses.show_more') - .e-content{ style: "display: #{!current_account&.user&.setting_expand_spoilers && status.spoiler_text? ? 'none' : 'block'}; direction: #{rtl_status?(status) ? 'rtl' : 'ltr'}" } + .e-content{ dir: rtl_status?(status) ? 'rtl' : 'ltr' } = Formatter.instance.format(status, custom_emojify: true, autoplay: autoplay) - if status.preloadable_poll = react_component :poll, disabled: true, poll: ActiveModelSerializers::SerializableResource.new(status.preloadable_poll, serializer: REST::PollSerializer, scope: current_user, scope_name: :current_user).as_json do diff --git a/app/views/statuses/_poll.html.haml b/app/views/statuses/_poll.html.haml index de5357e6d..64e62e97c 100644 --- a/app/views/statuses/_poll.html.haml +++ b/app/views/statuses/_poll.html.haml @@ -10,13 +10,15 @@ - percent = total_votes_count > 0 ? 100 * option.votes_count / total_votes_count : 0 %label.poll__option>< %span.poll__number>< - - if own_votes.include?(index) - %i.poll__voted__mark.fa.fa-check = "#{percent.round}%" %span.poll__option__text = Formatter.instance.format_poll_option(status, option, autoplay: autoplay) + - if own_votes.include?(index) + %span.poll__voted + %i.poll__voted__mark.fa.fa-check - %span.poll__chart{ style: "width: #{percent}%" } + %progress{ max: 100, value: percent < 1 ? 1 : percent, 'aria-hidden': 'true' } + %span.poll__chart - else %label.poll__option>< %span.poll__input{ class: poll.multiple? ? 'checkbox' : nil}>< diff --git a/app/views/statuses/_simple_status.html.haml b/app/views/statuses/_simple_status.html.haml index 5d16b1fc2..ff09ab2ee 100644 --- a/app/views/statuses/_simple_status.html.haml +++ b/app/views/statuses/_simple_status.html.haml @@ -19,12 +19,12 @@ %span.display-name__account = acct(status.account) = fa_icon('lock') if status.account.locked? - .status__content.emojify< + .status__content.emojify{ :data => ({ spoiler: current_account&.user&.setting_expand_spoilers ? 'expanded' : 'folded' } if status.spoiler_text?) }< - if status.spoiler_text? - %p{ :style => ('margin-bottom: 0' unless current_account&.user&.setting_expand_spoilers) }< + %p< %span.p-summary> #{Formatter.instance.format_spoiler(status, autoplay: autoplay)}  %button.status__content__spoiler-link= t('statuses.show_more') - .e-content{ style: "display: #{!current_account&.user&.setting_expand_spoilers && status.spoiler_text? ? 'none' : 'block'}; direction: #{rtl_status?(status) ? 'rtl' : 'ltr'}" } + .e-content{ dir: rtl_status?(status) ? 'rtl' : 'ltr' } = Formatter.instance.format(status, custom_emojify: true, autoplay: autoplay) - if status.preloadable_poll = react_component :poll, disabled: true, poll: ActiveModelSerializers::SerializableResource.new(status.preloadable_poll, serializer: REST::PollSerializer, scope: current_user, scope_name: :current_user).as_json do @@ -51,18 +51,18 @@ .status__action-bar .status__action-bar__counter - = link_to remote_interaction_path(status, type: :reply), class: 'status__action-bar-button icon-button modal-button', style: 'font-size: 18px; width: 23.1429px; height: 23.1429px; line-height: 23.15px;' do + = link_to remote_interaction_path(status, type: :reply), class: 'status__action-bar-button icon-button modal-button' do - if status.in_reply_to_id.nil? = fa_icon 'reply fw' - else = fa_icon 'reply-all fw' .status__action-bar__counter__label= obscured_counter status.replies_count - = link_to remote_interaction_path(status, type: :reblog), class: 'status__action-bar-button icon-button modal-button', style: 'font-size: 18px; width: 23.1429px; height: 23.1429px; line-height: 23.15px;' do + = link_to remote_interaction_path(status, type: :reblog), class: 'status__action-bar-button icon-button modal-button' do - if status.distributable? = fa_icon 'retweet fw' - elsif status.private_visibility? || status.limited_visibility? = fa_icon 'lock fw' - else = fa_icon 'envelope fw' - = link_to remote_interaction_path(status, type: :favourite), class: 'status__action-bar-button icon-button modal-button', style: 'font-size: 18px; width: 23.1429px; height: 23.1429px; line-height: 23.15px;' do + = link_to remote_interaction_path(status, type: :favourite), class: 'status__action-bar-button icon-button modal-button' do = fa_icon 'star fw' -- cgit From 77ec0875ea998072f4bb709bfb9b15e80669eeef Mon Sep 17 00:00:00 2001 From: ThibG Date: Tue, 28 Apr 2020 13:19:39 +0200 Subject: Fix page incorrectly scrolling when bringing up dropdown menus (#13574) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Fixes #13573 For some reason (I suspect this may be related to focusing the item before it got drown by the browser), Firefox scrolls to top when bringing up dropdown menus with pre-selected items. This commit uses the “preventScroll” option as, due to the placement behavior, the menu should be visible anyway and not trigger scrolling. --- app/javascript/mastodon/components/dropdown_menu.js | 2 +- app/javascript/mastodon/features/compose/components/privacy_dropdown.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) (limited to 'app/javascript') diff --git a/app/javascript/mastodon/components/dropdown_menu.js b/app/javascript/mastodon/components/dropdown_menu.js index 31c02d735..4734e0f3f 100644 --- a/app/javascript/mastodon/components/dropdown_menu.js +++ b/app/javascript/mastodon/components/dropdown_menu.js @@ -46,7 +46,7 @@ class DropdownMenu extends React.PureComponent { document.addEventListener('keydown', this.handleKeyDown, false); document.addEventListener('touchend', this.handleDocumentClick, listenerOptions); if (this.focusedItem && this.props.openedViaKeyboard) { - this.focusedItem.focus(); + this.focusedItem.focus({ preventScroll: true }); } this.setState({ mounted: true }); } diff --git a/app/javascript/mastodon/features/compose/components/privacy_dropdown.js b/app/javascript/mastodon/features/compose/components/privacy_dropdown.js index 57588fe96..96028e042 100644 --- a/app/javascript/mastodon/features/compose/components/privacy_dropdown.js +++ b/app/javascript/mastodon/features/compose/components/privacy_dropdown.js @@ -100,7 +100,7 @@ class PrivacyDropdownMenu extends React.PureComponent { componentDidMount () { document.addEventListener('click', this.handleDocumentClick, false); document.addEventListener('touchend', this.handleDocumentClick, listenerOptions); - if (this.focusedItem) this.focusedItem.focus(); + if (this.focusedItem) this.focusedItem.focus({ preventScroll: true }); this.setState({ mounted: true }); } -- cgit From b8ba977497a53740e66d8db9938382b724283b3a Mon Sep 17 00:00:00 2001 From: ThibG Date: Tue, 28 Apr 2020 19:39:16 +0200 Subject: Fix admin-facing uses of inline CSS (#13575) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Move .back-button inline styles to CSS file All occurrences of the back-button CSS class used the same inline CSS rules, so moved them over to the CSS file * Fix “Add new domain block” button using inline CSS * Replace common pattern of inline-styled button boxes by a CSS class In particular, switching from `float: left/right` to a flexbox with `justify-content: space-between`. This implied changing the order of a few HTML tags and adding an empty `div` in one case. Also removed a `margin-bottom` rule that wasn't needed due to the margins of surrounding elements. * Move account admin view inline CSS to CSS file --- app/javascript/styles/mastodon/admin.scss | 20 ++++++++++++++++++ app/views/admin/accounts/_account.html.haml | 2 +- app/views/admin/accounts/show.html.haml | 26 ++++++++++++------------ app/views/admin/instances/index.html.haml | 2 +- app/views/admin/instances/show.html.haml | 6 +++--- app/views/admin/pending_accounts/index.html.haml | 8 ++++---- app/views/admin/relationships/index.html.haml | 2 +- app/views/admin/reports/show.html.haml | 6 ++++-- app/views/admin/statuses/index.html.haml | 2 +- app/views/admin/statuses/show.html.haml | 2 +- app/views/admin/tags/index.html.haml | 8 ++++---- 11 files changed, 53 insertions(+), 31 deletions(-) (limited to 'app/javascript') diff --git a/app/javascript/styles/mastodon/admin.scss b/app/javascript/styles/mastodon/admin.scss index cee44f436..4edee730d 100644 --- a/app/javascript/styles/mastodon/admin.scss +++ b/app/javascript/styles/mastodon/admin.scss @@ -551,6 +551,18 @@ body, } } +.special-action-button, +.back-link { + text-align: right; + flex: 1 1 auto; +} + +.action-buttons { + display: flex; + overflow: hidden; + justify-content: space-between; +} + .spacer { flex: 1 1 auto; } @@ -888,3 +900,11 @@ a.name-tag, } } } + +.account-badges { + margin: -2px 0; +} + +.dashboard__counters.admin-account-counters { + margin-top: 10px; +} diff --git a/app/views/admin/accounts/_account.html.haml b/app/views/admin/accounts/_account.html.haml index 44b10af6e..c9bd8c686 100644 --- a/app/views/admin/accounts/_account.html.haml +++ b/app/views/admin/accounts/_account.html.haml @@ -2,7 +2,7 @@ %td = admin_account_link_to(account) %td - %div{ style: 'margin: -2px 0' }= account_badge(account, all: true) + %div.account-badges= account_badge(account, all: true) %td - if account.user_current_sign_in_ip %samp.ellipsized-ip{ title: account.user_current_sign_in_ip }= account.user_current_sign_in_ip diff --git a/app/views/admin/accounts/show.html.haml b/app/views/admin/accounts/show.html.haml index 408f94eed..e6461aad0 100644 --- a/app/views/admin/accounts/show.html.haml +++ b/app/views/admin/accounts/show.html.haml @@ -31,7 +31,7 @@ %div .account__header__content.emojify= Formatter.instance.simplified_format(account, custom_emojify: true) -.dashboard__counters{ style: 'margin-top: 10px' } +.dashboard__counters.admin-account-counters %div = link_to admin_account_statuses_path(@account.id) do .dashboard__counters__num= number_with_delimiter @account.statuses_count @@ -178,18 +178,8 @@ = @account.shared_inbox_url = fa_icon DeliveryFailureTracker.available?(@account.shared_inbox_url) ? 'check': 'times' - %div{ style: 'overflow: hidden' } - %div{ style: 'float: right' } - - if @account.local? - = link_to t('admin.accounts.reset_password'), admin_account_reset_path(@account.id), method: :create, class: 'button' if can?(:reset_password, @account.user) - - if @account.user&.otp_required_for_login? - = link_to t('admin.accounts.disable_two_factor_authentication'), admin_user_two_factor_authentication_path(@account.user.id), method: :delete, class: 'button' if can?(:disable_2fa, @account.user) - - if !@account.memorial? && @account.user_approved? - = link_to t('admin.accounts.memorialize'), memorialize_admin_account_path(@account.id), method: :post, data: { confirm: t('admin.accounts.are_you_sure') }, class: 'button button--destructive' if can?(:memorialize, @account) - - else - = link_to t('admin.accounts.redownload'), redownload_admin_account_path(@account.id), method: :post, class: 'button' if can?(:redownload, @account) - - %div{ style: 'float: left' } + %div.action-buttons + %div - if @account.local? && @account.user_approved? = link_to t('admin.accounts.warn'), new_admin_account_action_path(@account.id, type: 'none'), class: 'button' if can?(:warn, @account) - if @account.silenced? @@ -216,6 +206,16 @@ - else = link_to t('admin.domain_blocks.add_new'), new_admin_domain_block_path(_domain: @account.domain), class: 'button button--destructive' + %div + - if @account.local? + = link_to t('admin.accounts.reset_password'), admin_account_reset_path(@account.id), method: :create, class: 'button' if can?(:reset_password, @account.user) + - if @account.user&.otp_required_for_login? + = link_to t('admin.accounts.disable_two_factor_authentication'), admin_user_two_factor_authentication_path(@account.user.id), method: :delete, class: 'button' if can?(:disable_2fa, @account.user) + - if !@account.memorial? && @account.user_approved? + = link_to t('admin.accounts.memorialize'), memorialize_admin_account_path(@account.id), method: :post, data: { confirm: t('admin.accounts.are_you_sure') }, class: 'button button--destructive' if can?(:memorialize, @account) + - else + = link_to t('admin.accounts.redownload'), redownload_admin_account_path(@account.id), method: :post, class: 'button' if can?(:redownload, @account) + %hr.spacer/ - unless @warnings.empty? diff --git a/app/views/admin/instances/index.html.haml b/app/views/admin/instances/index.html.haml index 0b299acc5..bd67eb4fc 100644 --- a/app/views/admin/instances/index.html.haml +++ b/app/views/admin/instances/index.html.haml @@ -10,7 +10,7 @@ - unless whitelist_mode? %li= filter_link_to t('admin.instances.moderation.limited'), limited: '1' - %div{ style: 'flex: 1 1 auto; text-align: right' } + %div.special-action-button - if whitelist_mode? = link_to t('admin.domain_allows.add_new'), new_admin_domain_allow_path, class: 'button' - else diff --git a/app/views/admin/instances/show.html.haml b/app/views/admin/instances/show.html.haml index 49a666a5a..92e14c0df 100644 --- a/app/views/admin/instances/show.html.haml +++ b/app/views/admin/instances/show.html.haml @@ -45,11 +45,11 @@ %hr.spacer/ -%div{ style: 'overflow: hidden' } - %div{ style: 'float: left' } +%div.action-buttons + %div = link_to t('admin.accounts.title'), admin_accounts_path(remote: '1', by_domain: @instance.domain), class: 'button' - %div{ style: 'float: right' } + %div - if @domain_allow = link_to t('admin.domain_allows.undo'), admin_domain_allow_path(@domain_allow), class: 'button button--destructive', data: { confirm: t('admin.accounts.are_you_sure'), method: :delete } - elsif @domain_block diff --git a/app/views/admin/pending_accounts/index.html.haml b/app/views/admin/pending_accounts/index.html.haml index 7ce5b8213..79ae4a320 100644 --- a/app/views/admin/pending_accounts/index.html.haml +++ b/app/views/admin/pending_accounts/index.html.haml @@ -25,9 +25,9 @@ %hr.spacer/ -%div{ style: 'overflow: hidden' } - %div{ style: 'float: right' } - = link_to t('admin.accounts.reject_all'), reject_all_admin_pending_accounts_path, method: :post, data: { confirm: t('admin.accounts.are_you_sure') }, class: 'button button--destructive' - +%div.action-buttons %div = link_to t('admin.accounts.approve_all'), approve_all_admin_pending_accounts_path, method: :post, data: { confirm: t('admin.accounts.are_you_sure') }, class: 'button' + + %div + = link_to t('admin.accounts.reject_all'), reject_all_admin_pending_accounts_path, method: :post, data: { confirm: t('admin.accounts.are_you_sure') }, class: 'button button--destructive' diff --git a/app/views/admin/relationships/index.html.haml b/app/views/admin/relationships/index.html.haml index 3afaff615..907477f24 100644 --- a/app/views/admin/relationships/index.html.haml +++ b/app/views/admin/relationships/index.html.haml @@ -17,7 +17,7 @@ %li= filter_link_to t('admin.accounts.location.local'), location: 'local' %li= filter_link_to t('admin.accounts.location.remote'), location: 'remote' - .back-link{ style: 'flex: 1 1 auto; text-align: right' } + .back-link = link_to admin_account_path(@account.id) do = fa_icon 'chevron-left fw' = t('admin.statuses.back_to_account') diff --git a/app/views/admin/reports/show.html.haml b/app/views/admin/reports/show.html.haml index af8fce2a7..0d563eea7 100644 --- a/app/views/admin/reports/show.html.haml +++ b/app/views/admin/reports/show.html.haml @@ -68,9 +68,11 @@ %hr.spacer -%div{ style: 'overflow: hidden; margin-bottom: 20px; clear: both' } +%div.action-buttons + %div + - if @report.unresolved? - %div{ style: 'float: right' } + %div - if @report.target_account.local? = link_to t('admin.accounts.warn'), new_admin_account_action_path(@report.target_account_id, type: 'none', report_id: @report.id), class: 'button' = link_to t('admin.accounts.disable'), new_admin_account_action_path(@report.target_account_id, type: 'disable', report_id: @report.id), class: 'button button--destructive' diff --git a/app/views/admin/statuses/index.html.haml b/app/views/admin/statuses/index.html.haml index dd3c79815..f1169a2fd 100644 --- a/app/views/admin/statuses/index.html.haml +++ b/app/views/admin/statuses/index.html.haml @@ -12,7 +12,7 @@ %ul %li= link_to t('admin.statuses.no_media'), admin_account_statuses_path(@account.id, current_params.merge(media: nil)), class: !params[:media] && 'selected' %li= link_to t('admin.statuses.with_media'), admin_account_statuses_path(@account.id, current_params.merge(media: true)), class: params[:media] && 'selected' - .back-link{ style: 'flex: 1 1 auto; text-align: right' } + .back-link = link_to admin_account_path(@account.id) do = fa_icon 'chevron-left fw' = t('admin.statuses.back_to_account') diff --git a/app/views/admin/statuses/show.html.haml b/app/views/admin/statuses/show.html.haml index a7a392272..e2470198d 100644 --- a/app/views/admin/statuses/show.html.haml +++ b/app/views/admin/statuses/show.html.haml @@ -4,7 +4,7 @@ = "@#{@account.acct}" .filters - .back-link{ style: 'flex: 1 1 auto; text-align: right' } + .back-link = link_to admin_account_path(@account.id) do %i.fa.fa-chevron-left.fa-fw = t('admin.statuses.back_to_account') diff --git a/app/views/admin/tags/index.html.haml b/app/views/admin/tags/index.html.haml index 1ff538ba3..2acdaa8fa 100644 --- a/app/views/admin/tags/index.html.haml +++ b/app/views/admin/tags/index.html.haml @@ -71,9 +71,9 @@ - if params[:pending_review] == '1' || params[:unreviewed] == '1' %hr.spacer/ - %div{ style: 'overflow: hidden' } - %div{ style: 'float: right' } - = link_to t('admin.accounts.reject_all'), reject_all_admin_tags_path, method: :post, data: { confirm: t('admin.accounts.are_you_sure') }, class: 'button button--destructive' - + %div.action-buttons %div = link_to t('admin.accounts.approve_all'), approve_all_admin_tags_path, method: :post, data: { confirm: t('admin.accounts.are_you_sure') }, class: 'button' + + %div + = link_to t('admin.accounts.reject_all'), reject_all_admin_tags_path, method: :post, data: { confirm: t('admin.accounts.are_you_sure') }, class: 'button button--destructive' -- cgit