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.

diff --git a/app/javascript/styles/mastodon/admin.scss b/app/javascript/styles/mastodon/admin.scss
index dde1d69ba0a54cf44b8a6c84aa7feb72b55dc26f..203365f5e471486289f227200f2e3fbdf8f047af 100644 (file)
--- a/app/javascript/styles/mastodon/admin.scss
+++ b/app/javascript/styles/mastodon/admin.scss
@@ -181,18 +181,39 @@ $content-width: 840px;
       padding-top: 30px;
     }
 
-    h2 {
-      color: $secondary-text-color;
-      font-size: 24px;
-      line-height: 28px;
-      font-weight: 400;
+    &-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;
+
+      @media screen and (max-width: $no-columns-breakpoint) {
         font-weight: 700;
       }
     }

diff --git a/app/views/admin/reports/show.html.haml b/app/views/admin/reports/show.html.haml
index aee9a3aefddd5bdc27f2648849e9c62c3a309b10..7f3ec35a4aa18687ac1d5dd47754d6883f0d914f 100644 (file)
--- 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 57bda45e23ac42a551fceb4d8200c0be2aab6701..059bf8579ddea256aacd58e69f534109dbcfa8ae 100644 (file)
--- 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'