From 3c45d3963a21812f00318353be90010df636bd0d Mon Sep 17 00:00:00 2001 From: Lynx Kotoura Date: Sat, 9 Sep 2017 09:26:58 +0900 Subject: [PATCH] Scrollable tables in settings pages (#4857) * Scrollable tables in settings pages * Add space before curly brace --- app/javascript/styles/admin.scss | 8 +- app/javascript/styles/tables.scss | 19 +-- app/views/admin/accounts/_card.html.haml | 31 ++-- app/views/admin/accounts/index.html.haml | 23 +-- app/views/admin/accounts/show.html.haml | 142 +++++++++--------- app/views/admin/domain_blocks/index.html.haml | 19 +-- app/views/admin/instances/index.html.haml | 15 +- app/views/admin/reports/index.html.haml | 25 +-- app/views/admin/subscriptions/index.html.haml | 21 +-- .../auth/registrations/_sessions.html.haml | 47 +++--- .../authorized_applications/index.html.haml | 39 ++--- .../settings/applications/index.html.haml | 25 +-- .../settings/applications/show.html.haml | 33 ++-- app/views/settings/exports/show.html.haml | 37 ++--- .../settings/follower_domains/show.html.haml | 27 ++-- 15 files changed, 262 insertions(+), 249 deletions(-) diff --git a/app/javascript/styles/admin.scss b/app/javascript/styles/admin.scss index b86de75b677..fa7859e38f8 100644 --- a/app/javascript/styles/admin.scss +++ b/app/javascript/styles/admin.scss @@ -190,11 +190,15 @@ .filters { display: flex; - margin-bottom: 20px; + flex-wrap: wrap; .filter-subset { flex: 0 0 auto; - margin-right: 40px; + margin: 0 40px 10px 0; + + &:last-child { + margin-bottom: 20px; + } ul { margin-top: 5px; diff --git a/app/javascript/styles/tables.scss b/app/javascript/styles/tables.scss index f6e57e1961a..ad46f5f9f50 100644 --- a/app/javascript/styles/tables.scss +++ b/app/javascript/styles/tables.scss @@ -3,7 +3,6 @@ max-width: 100%; border-spacing: 0; border-collapse: collapse; - margin-bottom: 20px; th, td { @@ -43,19 +42,17 @@ font-weight: 500; } - &.inline-table { - td, - th { - padding: 8px 2px; - } - - & > tbody > tr:nth-child(odd) > td, - & > tbody > tr:nth-child(odd) > th { - background: transparent; - } + &.inline-table > tbody > tr:nth-child(odd) > td, + &.inline-table > tbody > tr:nth-child(odd) > th { + background: transparent; } } +.table-wrapper { + overflow: auto; + margin-bottom: 20px; +} + samp { font-family: 'mastodon-font-monospace', monospace; } diff --git a/app/views/admin/accounts/_card.html.haml b/app/views/admin/accounts/_card.html.haml index bb33582eba6..2f59550113f 100644 --- a/app/views/admin/accounts/_card.html.haml +++ b/app/views/admin/accounts/_card.html.haml @@ -1,16 +1,17 @@ -%table.table - %tbody - %tr - %td= t('admin.accounts.show.created_reports') - %td= link_to pluralize(account.reports.count, t('admin.accounts.show.report')), admin_reports_path(account_id: account.id) - %tr - %td= t('admin.accounts.show.targeted_reports') - %td= link_to pluralize(account.targeted_reports.count, t('admin.accounts.show.report')), admin_reports_path(target_account_id: account.id) - - if account.silenced? || account.suspended? +.table-wrapper + %table.table + %tbody %tr - %td= t('admin.accounts.moderation.title') - %td - - if account.silenced? - %p= t('admin.accounts.moderation.silenced') - - if account.suspended? - %p= t('admin.accounts.moderation.suspended') + %td= t('admin.accounts.show.created_reports') + %td= link_to pluralize(account.reports.count, t('admin.accounts.show.report')), admin_reports_path(account_id: account.id) + %tr + %td= t('admin.accounts.show.targeted_reports') + %td= link_to pluralize(account.targeted_reports.count, t('admin.accounts.show.report')), admin_reports_path(target_account_id: account.id) + - if account.silenced? || account.suspended? + %tr + %td= t('admin.accounts.moderation.title') + %td + - if account.silenced? + %p= t('admin.accounts.moderation.silenced') + - if account.suspended? + %p= t('admin.accounts.moderation.suspended') diff --git a/app/views/admin/accounts/index.html.haml b/app/views/admin/accounts/index.html.haml index 1f36aeb312b..1b56a3a3164 100644 --- a/app/views/admin/accounts/index.html.haml +++ b/app/views/admin/accounts/index.html.haml @@ -50,16 +50,17 @@ %button= t('admin.accounts.search') = link_to t('admin.accounts.reset'), admin_accounts_path, class: 'button negative' -%table.table - %thead - %tr - %th= t('admin.accounts.username') - %th= t('admin.accounts.domain') - %th= t('admin.accounts.protocol') - %th= t('admin.accounts.confirmed') - %th= fa_icon 'paper-plane-o' - %th - %tbody - = render @accounts +.table-wrapper + %table.table + %thead + %tr + %th= t('admin.accounts.username') + %th= t('admin.accounts.domain') + %th= t('admin.accounts.protocol') + %th= t('admin.accounts.confirmed') + %th= fa_icon 'paper-plane-o' + %th + %tbody + = render @accounts = paginate @accounts diff --git a/app/views/admin/accounts/show.html.haml b/app/views/admin/accounts/show.html.haml index dc2f16cc99c..89355281a39 100644 --- a/app/views/admin/accounts/show.html.haml +++ b/app/views/admin/accounts/show.html.haml @@ -1,86 +1,86 @@ - content_for :page_title do = @account.acct -%table.table - %tbody - %tr - %th= t('admin.accounts.username') - %td= @account.username - %tr - %th= t('admin.accounts.domain') - %td= @account.domain - %tr - %th= t('admin.accounts.display_name') - %td= @account.display_name +.table-wrapper + %table.table + %tbody + %tr + %th= t('admin.accounts.username') + %td= @account.username + %tr + %th= t('admin.accounts.domain') + %td= @account.domain + %tr + %th= t('admin.accounts.display_name') + %td= @account.display_name - - if @account.local? - %tr - %th= t('admin.accounts.email') - %td= @account.user_email - %tr - %th= t('admin.accounts.most_recent_ip') - %td= @account.user_current_sign_in_ip - %tr - %th= t('admin.accounts.most_recent_activity') - %td - - if @account.user_current_sign_in_at - %time.formatted{ datetime: @account.user_current_sign_in_at.iso8601, title: l(@account.user_current_sign_in_at) } - = l @account.user_current_sign_in_at - - else - Never - - else - %tr - %th= t('admin.accounts.profile_url') - %td= link_to @account.url, @account.url - %tr - %th= t('admin.accounts.protocol') - %td= @account.protocol.humanize - - - if @account.ostatus? + - if @account.local? %tr - %th= t('admin.accounts.feed_url') - %td= link_to @account.remote_url, @account.remote_url + %th= t('admin.accounts.email') + %td= @account.user_email %tr - %th= t('admin.accounts.push_subscription_expires') + %th= t('admin.accounts.most_recent_ip') + %td= @account.user_current_sign_in_ip + %tr + %th= t('admin.accounts.most_recent_activity') %td - - if @account.subscribed? - %time.formatted{ datetime: @account.subscription_expires_at.iso8601, title: l(@account.subscription_expires_at) } - = l @account.subscription_expires_at + - if @account.user_current_sign_in_at + %time.formatted{ datetime: @account.user_current_sign_in_at.iso8601, title: l(@account.user_current_sign_in_at) } + = l @account.user_current_sign_in_at - else - = t('admin.accounts.not_subscribed') + Never + - else %tr - %th= t('admin.accounts.salmon_url') - %td= link_to @account.salmon_url, @account.salmon_url - - elsif @account.activitypub? + %th= t('admin.accounts.profile_url') + %td= link_to @account.url, @account.url %tr - %th= t('admin.accounts.inbox_url') - %td= link_to @account.inbox_url, @account.inbox_url - %tr - %th= t('admin.accounts.outbox_url') - %td= link_to @account.outbox_url, @account.outbox_url + %th= t('admin.accounts.protocol') + %td= @account.protocol.humanize - %tr - %th= t('admin.accounts.follows') - %td= @account.following_count - %tr - %th= t('admin.accounts.followers') - %td= @account.followers_count - %tr - %th= t('admin.accounts.statuses') - %td= link_to @account.statuses_count, admin_account_statuses_path(@account.id) - %tr - %th= t('admin.accounts.media_attachments') - %td - = link_to @account.media_attachments.count, admin_account_statuses_path(@account.id, { media: true }) - = surround '(', ')' do - = number_to_human_size @account.media_attachments.sum('file_file_size') - %tr - %th= t('.created_reports') - %td= link_to pluralize(@account.reports.count, t('.report')), admin_reports_path(account_id: @account.id) - %tr - %th= t('.targeted_reports') - %td= link_to pluralize(@account.targeted_reports.count, t('.report')), admin_reports_path(target_account_id: @account.id) + - if @account.ostatus? + %tr + %th= t('admin.accounts.feed_url') + %td= link_to @account.remote_url, @account.remote_url + %tr + %th= t('admin.accounts.push_subscription_expires') + %td + - if @account.subscribed? + %time.formatted{ datetime: @account.subscription_expires_at.iso8601, title: l(@account.subscription_expires_at) } + = l @account.subscription_expires_at + - else + = t('admin.accounts.not_subscribed') + %tr + %th= t('admin.accounts.salmon_url') + %td= link_to @account.salmon_url, @account.salmon_url + - elsif @account.activitypub? + %tr + %th= t('admin.accounts.inbox_url') + %td= link_to @account.inbox_url, @account.inbox_url + %tr + %th= t('admin.accounts.outbox_url') + %td= link_to @account.outbox_url, @account.outbox_url + %tr + %th= t('admin.accounts.follows') + %td= @account.following_count + %tr + %th= t('admin.accounts.followers') + %td= @account.followers_count + %tr + %th= t('admin.accounts.statuses') + %td= link_to @account.statuses_count, admin_account_statuses_path(@account.id) + %tr + %th= t('admin.accounts.media_attachments') + %td + = link_to @account.media_attachments.count, admin_account_statuses_path(@account.id, { media: true }) + = surround '(', ')' do + = number_to_human_size @account.media_attachments.sum('file_file_size') + %tr + %th= t('.created_reports') + %td= link_to pluralize(@account.reports.count, t('.report')), admin_reports_path(account_id: @account.id) + %tr + %th= t('.targeted_reports') + %td= link_to pluralize(@account.targeted_reports.count, t('.report')), admin_reports_path(target_account_id: @account.id) %div{ style: 'float: right' } - if @account.local? diff --git a/app/views/admin/domain_blocks/index.html.haml b/app/views/admin/domain_blocks/index.html.haml index 5ae9fec5305..42b8ca53f48 100644 --- a/app/views/admin/domain_blocks/index.html.haml +++ b/app/views/admin/domain_blocks/index.html.haml @@ -1,15 +1,16 @@ - content_for :page_title do = t('admin.domain_blocks.title') -%table.table - %thead - %tr - %th= t('admin.domain_blocks.domain') - %th= t('admin.domain_blocks.severity') - %th= t('admin.domain_blocks.reject_media') - %th - %tbody - = render @domain_blocks +.table-wrapper + %table.table + %thead + %tr + %th= t('admin.domain_blocks.domain') + %th= t('admin.domain_blocks.severity') + %th= t('admin.domain_blocks.reject_media') + %th + %tbody + = render @domain_blocks = paginate @domain_blocks = link_to t('admin.domain_blocks.add_new'), new_admin_domain_block_path, class: 'button' diff --git a/app/views/admin/instances/index.html.haml b/app/views/admin/instances/index.html.haml index be21d6bf7b8..edbd3b2173d 100644 --- a/app/views/admin/instances/index.html.haml +++ b/app/views/admin/instances/index.html.haml @@ -1,12 +1,13 @@ - content_for :page_title do = t('admin.instances.title') -%table.table - %thead - %tr - %th= t('admin.instances.domain_name') - %th= t('admin.instances.account_count') - %tbody - = render @instances +.table-wrapper + %table.table + %thead + %tr + %th= t('admin.instances.domain_name') + %th= t('admin.instances.account_count') + %tbody + = render @instances = paginate paginated_instances diff --git a/app/views/admin/reports/index.html.haml b/app/views/admin/reports/index.html.haml index f1c4a93c471..577c68a8640 100644 --- a/app/views/admin/reports/index.html.haml +++ b/app/views/admin/reports/index.html.haml @@ -10,17 +10,18 @@ = form_tag do - %table.table - %thead - %tr - -# %th - %th= t('admin.reports.id') - %th= t('admin.reports.target') - %th= t('admin.reports.reported_by') - %th= t('admin.reports.comment.label') - %th= t('admin.reports.report_contents') - %th - %tbody - = render @reports + .table-wrapper + %table.table + %thead + %tr + -# %th + %th= t('admin.reports.id') + %th= t('admin.reports.target') + %th= t('admin.reports.reported_by') + %th= t('admin.reports.comment.label') + %th= t('admin.reports.report_contents') + %th + %tbody + = render @reports = paginate @reports diff --git a/app/views/admin/subscriptions/index.html.haml b/app/views/admin/subscriptions/index.html.haml index 21b3238a6ba..83704c8ee5b 100644 --- a/app/views/admin/subscriptions/index.html.haml +++ b/app/views/admin/subscriptions/index.html.haml @@ -1,15 +1,16 @@ - content_for :page_title do = t('admin.subscriptions.title') -%table.table - %thead - %tr - %th= t('admin.subscriptions.topic') - %th= t('admin.subscriptions.callback_url') - %th= t('admin.subscriptions.confirmed') - %th= t('admin.subscriptions.expires_in') - %th= t('admin.subscriptions.last_delivery') - %tbody - = render @subscriptions +.table-wrapper + %table.table + %thead + %tr + %th= t('admin.subscriptions.topic') + %th= t('admin.subscriptions.callback_url') + %th= t('admin.subscriptions.confirmed') + %th= t('admin.subscriptions.expires_in') + %th= t('admin.subscriptions.last_delivery') + %tbody + = render @subscriptions = paginate @subscriptions diff --git a/app/views/auth/registrations/_sessions.html.haml b/app/views/auth/registrations/_sessions.html.haml index 7ac578bb179..c1e9764b3c2 100644 --- a/app/views/auth/registrations/_sessions.html.haml +++ b/app/views/auth/registrations/_sessions.html.haml @@ -1,28 +1,29 @@ %h6= t 'sessions.title' %p.muted-hint= t 'sessions.explanation' -%table.table.inline-table - %thead - %tr - %th= t 'sessions.browser' - %th= t 'sessions.ip' - %th= t 'sessions.activity' - %td - %tbody - - @sessions.each do |session| +.table-wrapper + %table.table.inline-table + %thead %tr + %th= t 'sessions.browser' + %th= t 'sessions.ip' + %th= t 'sessions.activity' %td - %span{ title: session.user_agent }< - = fa_icon "#{session_device_icon(session)} fw", 'aria-label' => session_device_icon(session) - = ' ' - = t 'sessions.description', browser: t("sessions.browsers.#{session.browser}"), platform: t("sessions.platforms.#{session.platform}") - %td - %samp= session.ip - %td - - if current_session.session_id == session.session_id - = t 'sessions.current_session' - - else - %time.time-ago{ datetime: session.updated_at.iso8601, title: l(session.updated_at) }= l(session.updated_at) - %td - - if current_session.session_id != session.session_id - = table_link_to 'times', t('sessions.revoke'), settings_session_path(session), method: :delete + %tbody + - @sessions.each do |session| + %tr + %td + %span{ title: session.user_agent }< + = fa_icon "#{session_device_icon(session)} fw", 'aria-label' => session_device_icon(session) + = ' ' + = t 'sessions.description', browser: t("sessions.browsers.#{session.browser}"), platform: t("sessions.platforms.#{session.platform}") + %td + %samp= session.ip + %td + - if current_session.session_id == session.session_id + = t 'sessions.current_session' + - else + %time.time-ago{ datetime: session.updated_at.iso8601, title: l(session.updated_at) }= l(session.updated_at) + %td + - if current_session.session_id != session.session_id + = table_link_to 'times', t('sessions.revoke'), settings_session_path(session), method: :delete diff --git a/app/views/oauth/authorized_applications/index.html.haml b/app/views/oauth/authorized_applications/index.html.haml index ba0c084950c..19af5f55db2 100644 --- a/app/views/oauth/authorized_applications/index.html.haml +++ b/app/views/oauth/authorized_applications/index.html.haml @@ -1,23 +1,24 @@ - content_for :page_title do = t('doorkeeper.authorized_applications.index.title') -%table.table - %thead - %tr - %th= t('doorkeeper.authorized_applications.index.application') - %th= t('doorkeeper.authorized_applications.index.scopes') - %th= t('doorkeeper.authorized_applications.index.created_at') - %th - %tbody - - @applications.each do |application| +.table-wrapper + %table.table + %thead %tr - %td - - if application.website.blank? - = application.name - - else - = link_to application.name, application.website, target: '_blank', rel: 'noopener' - %th!= application.scopes.map { |scope| t(scope, scope: [:doorkeeper, :scopes]) }.join('
') - %td= l application.created_at - %td - - unless application.superapp? - = table_link_to 'times', t('doorkeeper.authorized_applications.buttons.revoke'), oauth_authorized_application_path(application), method: :delete, data: { confirm: t('doorkeeper.authorized_applications.confirmations.revoke') } + %th= t('doorkeeper.authorized_applications.index.application') + %th= t('doorkeeper.authorized_applications.index.scopes') + %th= t('doorkeeper.authorized_applications.index.created_at') + %th + %tbody + - @applications.each do |application| + %tr + %td + - if application.website.blank? + = application.name + - else + = link_to application.name, application.website, target: '_blank', rel: 'noopener' + %th!= application.scopes.map { |scope| t(scope, scope: [:doorkeeper, :scopes]) }.join('
') + %td= l application.created_at + %td + - unless application.superapp? + = table_link_to 'times', t('doorkeeper.authorized_applications.buttons.revoke'), oauth_authorized_application_path(application), method: :delete, data: { confirm: t('doorkeeper.authorized_applications.confirmations.revoke') } diff --git a/app/views/settings/applications/index.html.haml b/app/views/settings/applications/index.html.haml index eea550388a9..919472c2e8b 100644 --- a/app/views/settings/applications/index.html.haml +++ b/app/views/settings/applications/index.html.haml @@ -1,19 +1,20 @@ - content_for :page_title do = t('doorkeeper.applications.index.title') -%table.table - %thead - %tr - %th= t('doorkeeper.applications.index.application') - %th= t('doorkeeper.applications.index.scopes') - %th - %tbody - - @applications.each do |application| +.table-wrapper + %table.table + %thead %tr - %td= link_to application.name, settings_application_path(application) - %th= application.scopes - %td - = table_link_to 'times', t('doorkeeper.applications.index.delete'), settings_application_path(application), method: :delete, data: { confirm: t('doorkeeper.applications.confirmations.destroy') } + %th= t('doorkeeper.applications.index.application') + %th= t('doorkeeper.applications.index.scopes') + %th + %tbody + - @applications.each do |application| + %tr + %td= link_to application.name, settings_application_path(application) + %th= application.scopes + %td + = table_link_to 'times', t('doorkeeper.applications.index.delete'), settings_application_path(application), method: :delete, data: { confirm: t('doorkeeper.applications.confirmations.destroy') } = paginate @applications = link_to t('doorkeeper.applications.index.new'), new_settings_application_path, class: 'button' diff --git a/app/views/settings/applications/show.html.haml b/app/views/settings/applications/show.html.haml index 4d855511116..12baed08813 100644 --- a/app/views/settings/applications/show.html.haml +++ b/app/views/settings/applications/show.html.haml @@ -3,22 +3,23 @@ %p.hint= t('applications.warning') -%table.table - %tbody - %tr - %th= t('doorkeeper.applications.show.application_id') - %td - %code= @application.uid - %tr - %th= t('doorkeeper.applications.show.secret') - %td - %code= @application.secret - %tr - %th{ rowspan: 2}= t('applications.your_token') - %td - %code= current_user.token_for_app(@application).token - %tr - %td= table_link_to 'refresh', t('applications.regenerate_token'), regenerate_settings_application_path(@application), method: :post +.table-wrapper + %table.table + %tbody + %tr + %th= t('doorkeeper.applications.show.application_id') + %td + %code= @application.uid + %tr + %th= t('doorkeeper.applications.show.secret') + %td + %code= @application.secret + %tr + %th{ rowspan: 2}= t('applications.your_token') + %td + %code= current_user.token_for_app(@application).token + %tr + %td= table_link_to 'refresh', t('applications.regenerate_token'), regenerate_settings_application_path(@application), method: :post %hr/ diff --git a/app/views/settings/exports/show.html.haml b/app/views/settings/exports/show.html.haml index f2f6f95563e..e0df1c48023 100644 --- a/app/views/settings/exports/show.html.haml +++ b/app/views/settings/exports/show.html.haml @@ -1,21 +1,22 @@ - content_for :page_title do = t('settings.export') -%table.table - %tbody - %tr - %th= t('exports.storage') - %td= number_to_human_size @export.total_storage - %td - %tr - %th= t('exports.follows') - %td= @export.total_follows - %td= table_link_to 'download', t('exports.csv'), settings_exports_follows_path(format: :csv) - %tr - %th= t('exports.blocks') - %td= @export.total_blocks - %td= table_link_to 'download', t('exports.csv'), settings_exports_blocks_path(format: :csv) - %tr - %th= t('exports.mutes') - %td= @export.total_mutes - %td= table_link_to 'download', t('exports.csv'), settings_exports_mutes_path(format: :csv) +.table-wrapper + %table.table + %tbody + %tr + %th= t('exports.storage') + %td= number_to_human_size @export.total_storage + %td + %tr + %th= t('exports.follows') + %td= @export.total_follows + %td= table_link_to 'download', t('exports.csv'), settings_exports_follows_path(format: :csv) + %tr + %th= t('exports.blocks') + %td= @export.total_blocks + %td= table_link_to 'download', t('exports.csv'), settings_exports_blocks_path(format: :csv) + %tr + %th= t('exports.mutes') + %td= @export.total_mutes + %td= table_link_to 'download', t('exports.csv'), settings_exports_mutes_path(format: :csv) diff --git a/app/views/settings/follower_domains/show.html.haml b/app/views/settings/follower_domains/show.html.haml index dad2770f108..f1687d4d2f1 100644 --- a/app/views/settings/follower_domains/show.html.haml +++ b/app/views/settings/follower_domains/show.html.haml @@ -12,20 +12,21 @@ %p= t('followers.explanation_html') %p= t('followers.true_privacy_html') - %table.table - %thead - %tr - %th - %th= t('followers.domain') - %th= t('followers.followers_count') - %tbody - - @domains.each do |domain| + .table-wrapper + %table.table + %thead %tr - %td - = check_box_tag 'select[]', domain.domain, false, disabled: !@account.locked? unless domain.domain.nil? - %td - %samp= domain.domain.presence || Rails.configuration.x.local_domain - %td= number_with_delimiter domain.accounts_from_domain + %th + %th= t('followers.domain') + %th= t('followers.followers_count') + %tbody + - @domains.each do |domain| + %tr + %td + = check_box_tag 'select[]', domain.domain, false, disabled: !@account.locked? unless domain.domain.nil? + %td + %samp= domain.domain.presence || Rails.configuration.x.local_domain + %td= number_with_delimiter domain.accounts_from_domain .action-pagination .actions