Fix design of announcements in admin UI (#12989)

app/javascript/styles/mastodon/admin.scss

@@ -887,3 +887,46 @@ a.name-tag,
 .center-text {
   text-align: center;
 }
+
+.announcements-list {
+  border: 1px solid lighten($ui-base-color, 4%);
+  border-radius: 4px;
+
+  &__item {
+    padding: 15px 0;
+    background: $ui-base-color;
+    border-bottom: 1px solid lighten($ui-base-color, 4%);
+
+    &__title {
+      padding: 0 15px;
+      display: block;
+      font-weight: 500;
+      font-size: 18px;
+      line-height: 1.5;
+      color: $secondary-text-color;
+      text-decoration: none;
+      margin-bottom: 10px;
+
+      &:hover,
+      &:focus,
+      &:active {
+        color: $primary-text-color;
+      }
+    }
+
+    &__meta {
+      padding: 0 15px;
+      color: $dark-text-color;
+    }
+
+    &__action-bar {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+
+    &:last-child {
+      border-bottom: 0;
+    }
+  }
+}

app/views/admin/announcements/_announcement.html.haml

@@ -1,21 +1,19 @@
-%tr
+.announcements-list__item
-  %td
+  = link_to edit_admin_announcement_path(announcement), class: 'announcements-list__item__title' do
     = truncate(announcement.text)
-  %td
+
-    = time_range(announcement) if announcement.time_range?
+  .announcements-list__item__action-bar
-  %td
+    .announcements-list__item__meta
-    - if announcement.scheduled_at.present?
+      - if announcement.scheduled_at.present?
-      = fa_icon('clock-o') if announcement.scheduled_at > Time.now.utc
+        = t('admin.announcements.scheduled_for', time: l(announcement.scheduled_at))
-      = l(announcement.scheduled_at)
-    - else
-      = l(announcement.created_at)
-  %td
-    - if can?(:update, announcement)
-      - if announcement.published?
-        = table_link_to 'pause', t('admin.announcements.unpublish'), unpublish_admin_announcement_path(announcement), method: :post, data: { confirm: t('admin.accounts.are_you_sure') }
       - else
-        = table_link_to 'play', t('admin.announcements.publish'), publish_admin_announcement_path(announcement), method: :post, data: { confirm: t('admin.accounts.are_you_sure') }
+        = l(announcement.created_at)
 
-      = table_link_to 'pencil', t('generic.edit'), edit_admin_announcement_path(announcement)
+    %div
+      - if can?(:update, announcement)
+        - if announcement.published?
+          = table_link_to 'toggle-off', t('admin.announcements.unpublish'), unpublish_admin_announcement_path(announcement), method: :post, data: { confirm: t('admin.accounts.are_you_sure') }
+        - else
+          = table_link_to 'toggle-on', t('admin.announcements.publish'), publish_admin_announcement_path(announcement), method: :post, data: { confirm: t('admin.accounts.are_you_sure') }
 
-    = table_link_to 'trash', t('generic.delete'), admin_announcement_path(announcement), method: :delete, data: { confirm: t('admin.accounts.are_you_sure') } if can?(:destroy, announcement)
+      = table_link_to 'trash', t('generic.delete'), admin_announcement_path(announcement), method: :delete, data: { confirm: t('admin.accounts.are_you_sure') } if can?(:destroy, announcement)

app/views/admin/announcements/index.html.haml

@@ -15,16 +15,8 @@
   %div.muted-hint.center-text
     = t 'admin.announcements.empty'
 - else
-  .table-wrapper
+  .announcements-list
-    %table.table
+    = render partial: 'announcement', collection: @announcements
-      %thead
-        %tr
-          %th= t('simple_form.labels.announcement.text')
-          %th= t('admin.announcements.time_range')
-          %th= t('admin.announcements.published')
-          %th
-      %tbody
-        = render partial: 'announcement', collection: @announcements
 
 = paginate @announcements
 

config/locales/en.yml

@@ -240,10 +240,9 @@ en:
       new:
         create: Create announcement
         title: New announcement
-      published: Published
       published_msg: Announcement successfully published!
+      scheduled_for: Scheduled for %{time}
       scheduled_msg: Announcement scheduled for publication!
-      time_range: Time range
       title: Announcements
       unpublished_msg: Announcement successfully unpublished!
       updated_msg: Announcement successfully updated!
@@ -781,7 +780,6 @@ en:
     changes_saved_msg: Changes successfully saved!
     copy: Copy
     delete: Delete
-    edit: Edit
     no_batch_actions_available: No batch actions available on this page
     order_by: Order by
     save_changes: Save changes