From 34aa5c7cb2090bf9d995eafdfbf5f9bd01336491 Mon Sep 17 00:00:00 2001 From: Sasha Sorokin Date: Tue, 17 Dec 2019 05:55:16 +0700 Subject: [PATCH] Improve report page structure (#12615) * Move resolved button to the heading This is one of the commits on improving overall reports page structure. It changes where resolved button is located, moving it to the heading, right next to the "Report #n" header, so-called "hot-place" to look at. To accomplish this we have to declare one more content variable, change admin dashboard template to respect it and CSS files for minor styling, so buttons are inlined and centrally aligned according to the heading. * Move actions buttons below the report table I believe that actions to react on report should not be located at the top of the page, instead they should be either after the table or reporter's comment. This is just a logical sign that you should not react to the report without reading all the details first. --- app/javascript/styles/mastodon/admin.scss | 31 +++++++++++++++++++---- app/views/admin/reports/show.html.haml | 24 ++++++++++-------- app/views/layouts/admin.html.haml | 7 ++++- 3 files changed, 45 insertions(+), 17 deletions(-) diff --git a/app/javascript/styles/mastodon/admin.scss b/app/javascript/styles/mastodon/admin.scss index dde1d69ba0..203365f5e4 100644 --- a/app/javascript/styles/mastodon/admin.scss +++ b/app/javascript/styles/mastodon/admin.scss @@ -181,18 +181,39 @@ $content-width: 840px; padding-top: 30px; } + &-heading { + display: flex; + + padding-bottom: 40px; + border-bottom: 1px solid lighten($ui-base-color, 8%); + margin-bottom: 40px; + + flex-wrap: wrap; + align-items: center; + + justify-content: space-between; + + &-actions { + display: inline-flex; + + & > * { + margin-left: 5px; + } + } + + @media screen and (max-width: $no-columns-breakpoint) { + border-bottom: 0; + padding-bottom: 0; + } + } + h2 { color: $secondary-text-color; font-size: 24px; line-height: 28px; font-weight: 400; - padding-bottom: 40px; - border-bottom: 1px solid lighten($ui-base-color, 8%); - margin-bottom: 40px; @media screen and (max-width: $no-columns-breakpoint) { - border-bottom: 0; - padding-bottom: 0; font-weight: 700; } } diff --git a/app/views/admin/reports/show.html.haml b/app/views/admin/reports/show.html.haml index aee9a3aefd..7f3ec35a4a 100644 --- a/app/views/admin/reports/show.html.haml +++ b/app/views/admin/reports/show.html.haml @@ -4,21 +4,12 @@ - content_for :page_title do = t('admin.reports.report', id: @report.id) -%div{ style: 'overflow: hidden; margin-bottom: 20px' } +- content_for :page_heading_actions do - if @report.unresolved? - %div{ style: 'float: right' } - - 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' - = link_to t('admin.accounts.silence'), new_admin_account_action_path(@report.target_account_id, type: 'silence', report_id: @report.id), class: 'button button--destructive' - = link_to t('admin.accounts.perform_full_suspension'), new_admin_account_action_path(@report.target_account_id, type: 'suspend', report_id: @report.id), class: 'button button--destructive' - %div{ style: 'float: left' } - = link_to t('admin.reports.mark_as_resolved'), resolve_admin_report_path(@report), method: :post, class: 'button' + = link_to t('admin.reports.mark_as_resolved'), resolve_admin_report_path(@report), method: :post, class: 'button' - else = link_to t('admin.reports.mark_as_unresolved'), reopen_admin_report_path(@report), method: :post, class: 'button' -%hr.spacer - .table-wrapper %table.table.inline-table %tbody @@ -77,6 +68,17 @@ %hr.spacer +%div{ style: 'overflow: hidden; margin-bottom: 20px; clear: both' } + - if @report.unresolved? + %div{ style: 'float: right' } + - 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' + = link_to t('admin.accounts.silence'), new_admin_account_action_path(@report.target_account_id, type: 'silence', report_id: @report.id), class: 'button button--destructive' + = link_to t('admin.accounts.perform_full_suspension'), new_admin_account_action_path(@report.target_account_id, type: 'suspend', report_id: @report.id), class: 'button button--destructive' + +%hr.spacer + .speech-bubble .speech-bubble__bubble= simple_format(@report.comment.presence || t('admin.reports.comment.none')) .speech-bubble__owner diff --git a/app/views/layouts/admin.html.haml b/app/views/layouts/admin.html.haml index 57bda45e23..059bf8579d 100644 --- a/app/views/layouts/admin.html.haml +++ b/app/views/layouts/admin.html.haml @@ -21,7 +21,12 @@ .content-wrapper .content - %h2= yield :page_title + .content-heading + %h2= yield :page_title + + - if :page_heading_actions + .content-heading-actions + = yield :page_heading_actions = render 'application/flashes'