Fix design of announcements in admin UI (#12989)

2 files changed, 17 insertions, 27 deletions

diff --git a/app/views/admin/announcements/_announcement.html.haml b/app/views/admin/announcements/_announcement.html.haml
index f8a6c66de..1c7f89ef2 100644
--- a/app/views/admin/announcements/_announcement.html.haml
+++ b/app/views/admin/announcements/_announcement.html.haml
@@ -1,21 +1,19 @@
-%tr
-  %td
+.announcements-list__item
+  = link_to edit_admin_announcement_path(announcement), class: 'announcements-list__item__title' do
     = truncate(announcement.text)
-  %td
-    = time_range(announcement) if announcement.time_range?
-  %td
-    - if announcement.scheduled_at.present?
-      = fa_icon('clock-o') if announcement.scheduled_at > Time.now.utc
-      = 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') }
+
+  .announcements-list__item__action-bar
+    .announcements-list__item__meta
+      - if announcement.scheduled_at.present?
+        = t('admin.announcements.scheduled_for', time: l(announcement.scheduled_at))
       - 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)
diff --git a/app/views/admin/announcements/index.html.haml b/app/views/admin/announcements/index.html.haml
index 634f586fb..40f02b914 100644
--- a/app/views/admin/announcements/index.html.haml
+++ b/app/views/admin/announcements/index.html.haml
@@ -15,16 +15,8 @@
   %div.muted-hint.center-text
     = t 'admin.announcements.empty'
 - else
-  .table-wrapper
-    %table.table
-      %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
+  .announcements-list
+    = render partial: 'announcement', collection: @announcements
 
 = paginate @announcements