From cfe39fb58d42ef649dc1ebb6f39e77814bbfbe96 Mon Sep 17 00:00:00 2001 From: Lynx Kotoura Date: Sat, 2 Sep 2017 22:49:28 +0900 Subject: [PATCH] Adjust settings pages (#4765) * views: Adjust heading positions * Adjust settings pages Adjust label. Adjust tables. Adjust admin/reports/* pages. Fix 2FA QR code style for narrow devices. Widen several pages. Increase contrast. * Remove trailing whitespace --- app/javascript/styles/admin.scss | 59 ++++++++++++++------- app/javascript/styles/forms.scss | 39 +++++++++++--- app/javascript/styles/tables.scss | 2 +- app/views/auth/registrations/edit.html.haml | 2 +- 4 files changed, 73 insertions(+), 29 deletions(-) diff --git a/app/javascript/styles/admin.scss b/app/javascript/styles/admin.scss index 4c3bbdfc5..b86de75b6 100644 --- a/app/javascript/styles/admin.scss +++ b/app/javascript/styles/admin.scss @@ -32,7 +32,7 @@ a { display: block; - padding: 15px 25px; + padding: 15px; color: rgba($primary-text-color, 0.7); text-decoration: none; transition: all 200ms linear; @@ -61,6 +61,7 @@ a { border: 0; + padding: 15px 35px; &.selected { color: $primary-text-color; @@ -98,7 +99,7 @@ h6 { font-size: 16px; - color: $ui-primary-color; + color: $ui-secondary-color; line-height: 28px; font-weight: 400; } @@ -123,10 +124,10 @@ } .muted-hint { - color: lighten($ui-base-color, 27%); + color: $ui-primary-color; a { - color: $ui-primary-color; + color: $ui-highlight-color; } } @@ -139,15 +140,23 @@ .simple_form { max-width: 400px; - .label_input { - label.select { - width: 50%; - } + &.edit_user, + &.new_form_admin_settings, + &.new_form_two_factor_confirmation, + &.new_form_delete_confirmation, + &.new_import, + &.new_domain_block, + &.edit_domain_block { + max-width: none; + } - select { - width: 50%; - float: right; - } + .form_two_factor_confirmation_code, + .form_delete_confirmation_password { + max-width: 400px; + } + + .actions { + max-width: 400px; } } @@ -227,27 +236,25 @@ .report-accounts { display: flex; + flex-wrap: wrap; margin-bottom: 20px; } .report-accounts__item { - flex: 1 1 0; display: flex; + flex: 250px; flex-direction: column; + margin: 0 5px; & > strong { display: block; - margin-bottom: 10px; + margin: 0 0 10px -5px; font-weight: 500; font-size: 14px; line-height: 18px; color: $ui-secondary-color; } - &:first-child { - margin-right: 10px; - } - .account-card { flex: 1 1 auto; } @@ -261,6 +268,11 @@ .activity-stream { flex: 2 0 0; margin-right: 20px; + max-width: calc(100% - 60px); + + .entry { + border-radius: 4px; + } } } @@ -280,18 +292,25 @@ .batch-form-box { display: flex; - margin-bottom: 10px; + flex-wrap: wrap; + margin-bottom: 5px; #form_status_batch_action { - margin-right: 5px; + margin: 0 5px 5px 0; font-size: 14px; } + input.button { + margin: 0 5px 5px 0; + } + .media-spoiler-toggle-buttons { margin-left: auto; .button { overflow: visible; + margin: 0 0 5px 5px; + float: right; } } } diff --git a/app/javascript/styles/forms.scss b/app/javascript/styles/forms.scss index 78f13270a..747610237 100644 --- a/app/javascript/styles/forms.scss +++ b/app/javascript/styles/forms.scss @@ -24,7 +24,7 @@ code { p.hint { margin-bottom: 15px; - color: lighten($ui-base-color, 32%); + color: $ui-primary-color; &.subtle-hint { text-align: center; @@ -53,7 +53,6 @@ code { label { flex: 0 0 auto; - width: 100px; } input { @@ -65,12 +64,37 @@ code { padding: 15px 0; margin-bottom: 0; + .label_input { + flex-wrap: wrap; + align-items: flex-start; + } + + &.select .label_input { + align-items: initial; + } + .label_input > label { font-family: inherit; font-size: 16px; color: $primary-text-color; display: block; padding-top: 5px; + margin-bottom: 5px; + flex: 1; + min-width: 150px; + word-wrap: break-word; + + &.select { + flex: 0; + } + + & ~ * { + margin-left: 10px; + } + } + + ul { + flex: 390px; } &.boolean { @@ -367,13 +391,15 @@ code { .qr-wrapper { display: flex; + flex-wrap: wrap; + align-items: flex-start; } .qr-code { flex: 0 0 auto; background: $simple-background-color; padding: 4px; - margin-bottom: 20px; + margin: 0 10px 20px 0; box-shadow: 0 0 15px rgba($base-shadow-color, 0.2); display: inline-block; @@ -384,8 +410,9 @@ code { } .qr-alternative { - margin-left: 10px; - color: $ui-primary-color; + margin-bottom: 20px; + color: $ui-secondary-color; + flex: 150px; samp { display: block; @@ -395,7 +422,6 @@ code { .table-form { p { - max-width: 400px; margin-bottom: 15px; strong { @@ -407,7 +433,6 @@ code { .simple_form, .table-form { .warning { - max-width: 400px; box-sizing: border-box; background: rgba($error-value-color, 0.5); color: $primary-text-color; diff --git a/app/javascript/styles/tables.scss b/app/javascript/styles/tables.scss index 6e54c59c0..f6e57e196 100644 --- a/app/javascript/styles/tables.scss +++ b/app/javascript/styles/tables.scss @@ -46,7 +46,7 @@ &.inline-table { td, th { - padding: 8px 0; + padding: 8px 2px; } & > tbody > tr:nth-child(odd) > td, diff --git a/app/views/auth/registrations/edit.html.haml b/app/views/auth/registrations/edit.html.haml index f016a4883..145f5cd9e 100644 --- a/app/views/auth/registrations/edit.html.haml +++ b/app/views/auth/registrations/edit.html.haml @@ -1,7 +1,7 @@ - content_for :page_title do = t('auth.change_password') -= simple_form_for(resource, as: resource_name, url: registration_path(resource_name), html: { method: :put }) do |f| += simple_form_for(resource, as: resource_name, url: registration_path(resource_name), html: { method: :put, class: 'auth_edit' }) do |f| = render 'shared/error_messages', object: resource = f.input :email, placeholder: t('simple_form.labels.defaults.email'), input_html: { 'aria-label' => t('simple_form.labels.defaults.email') }