From 305abc9e05ddb2db6a40a6eda01578e01e58791f Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Tue, 28 Jan 2020 02:21:00 +0100 Subject: [PATCH] Fix design of announcements in admin UI (#12989) --- app/javascript/styles/mastodon/admin.scss | 43 +++++++++++++++++++ .../announcements/_announcement.html.haml | 32 +++++++------- app/views/admin/announcements/index.html.haml | 12 +----- config/locales/en.yml | 4 +- 4 files changed, 61 insertions(+), 30 deletions(-) diff --git a/app/javascript/styles/mastodon/admin.scss b/app/javascript/styles/mastodon/admin.scss index 89c45cab6..b0307fb71 100644 --- a/app/javascript/styles/mastodon/admin.scss +++ b/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; + } + } +} 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 diff --git a/config/locales/en.yml b/config/locales/en.yml index 4687b471a..44900d426 100644 --- a/config/locales/en.yml +++ b/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