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
This commit is contained in:
Lynx Kotoura 2017-09-02 22:49:28 +09:00 committed by Eugen Rochko
parent a0294c8880
commit cfe39fb58d
4 changed files with 73 additions and 29 deletions

View file

@ -32,7 +32,7 @@
a { a {
display: block; display: block;
padding: 15px 25px; padding: 15px;
color: rgba($primary-text-color, 0.7); color: rgba($primary-text-color, 0.7);
text-decoration: none; text-decoration: none;
transition: all 200ms linear; transition: all 200ms linear;
@ -61,6 +61,7 @@
a { a {
border: 0; border: 0;
padding: 15px 35px;
&.selected { &.selected {
color: $primary-text-color; color: $primary-text-color;
@ -98,7 +99,7 @@
h6 { h6 {
font-size: 16px; font-size: 16px;
color: $ui-primary-color; color: $ui-secondary-color;
line-height: 28px; line-height: 28px;
font-weight: 400; font-weight: 400;
} }
@ -123,10 +124,10 @@
} }
.muted-hint { .muted-hint {
color: lighten($ui-base-color, 27%); color: $ui-primary-color;
a { a {
color: $ui-primary-color; color: $ui-highlight-color;
} }
} }
@ -139,15 +140,23 @@
.simple_form { .simple_form {
max-width: 400px; max-width: 400px;
.label_input { &.edit_user,
label.select { &.new_form_admin_settings,
width: 50%; &.new_form_two_factor_confirmation,
} &.new_form_delete_confirmation,
&.new_import,
&.new_domain_block,
&.edit_domain_block {
max-width: none;
}
select { .form_two_factor_confirmation_code,
width: 50%; .form_delete_confirmation_password {
float: right; max-width: 400px;
} }
.actions {
max-width: 400px;
} }
} }
@ -227,27 +236,25 @@
.report-accounts { .report-accounts {
display: flex; display: flex;
flex-wrap: wrap;
margin-bottom: 20px; margin-bottom: 20px;
} }
.report-accounts__item { .report-accounts__item {
flex: 1 1 0;
display: flex; display: flex;
flex: 250px;
flex-direction: column; flex-direction: column;
margin: 0 5px;
& > strong { & > strong {
display: block; display: block;
margin-bottom: 10px; margin: 0 0 10px -5px;
font-weight: 500; font-weight: 500;
font-size: 14px; font-size: 14px;
line-height: 18px; line-height: 18px;
color: $ui-secondary-color; color: $ui-secondary-color;
} }
&:first-child {
margin-right: 10px;
}
.account-card { .account-card {
flex: 1 1 auto; flex: 1 1 auto;
} }
@ -261,6 +268,11 @@
.activity-stream { .activity-stream {
flex: 2 0 0; flex: 2 0 0;
margin-right: 20px; margin-right: 20px;
max-width: calc(100% - 60px);
.entry {
border-radius: 4px;
}
} }
} }
@ -280,18 +292,25 @@
.batch-form-box { .batch-form-box {
display: flex; display: flex;
margin-bottom: 10px; flex-wrap: wrap;
margin-bottom: 5px;
#form_status_batch_action { #form_status_batch_action {
margin-right: 5px; margin: 0 5px 5px 0;
font-size: 14px; font-size: 14px;
} }
input.button {
margin: 0 5px 5px 0;
}
.media-spoiler-toggle-buttons { .media-spoiler-toggle-buttons {
margin-left: auto; margin-left: auto;
.button { .button {
overflow: visible; overflow: visible;
margin: 0 0 5px 5px;
float: right;
} }
} }
} }

View file

@ -24,7 +24,7 @@ code {
p.hint { p.hint {
margin-bottom: 15px; margin-bottom: 15px;
color: lighten($ui-base-color, 32%); color: $ui-primary-color;
&.subtle-hint { &.subtle-hint {
text-align: center; text-align: center;
@ -53,7 +53,6 @@ code {
label { label {
flex: 0 0 auto; flex: 0 0 auto;
width: 100px;
} }
input { input {
@ -65,12 +64,37 @@ code {
padding: 15px 0; padding: 15px 0;
margin-bottom: 0; margin-bottom: 0;
.label_input {
flex-wrap: wrap;
align-items: flex-start;
}
&.select .label_input {
align-items: initial;
}
.label_input > label { .label_input > label {
font-family: inherit; font-family: inherit;
font-size: 16px; font-size: 16px;
color: $primary-text-color; color: $primary-text-color;
display: block; display: block;
padding-top: 5px; 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 { &.boolean {
@ -367,13 +391,15 @@ code {
.qr-wrapper { .qr-wrapper {
display: flex; display: flex;
flex-wrap: wrap;
align-items: flex-start;
} }
.qr-code { .qr-code {
flex: 0 0 auto; flex: 0 0 auto;
background: $simple-background-color; background: $simple-background-color;
padding: 4px; padding: 4px;
margin-bottom: 20px; margin: 0 10px 20px 0;
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2); box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
display: inline-block; display: inline-block;
@ -384,8 +410,9 @@ code {
} }
.qr-alternative { .qr-alternative {
margin-left: 10px; margin-bottom: 20px;
color: $ui-primary-color; color: $ui-secondary-color;
flex: 150px;
samp { samp {
display: block; display: block;
@ -395,7 +422,6 @@ code {
.table-form { .table-form {
p { p {
max-width: 400px;
margin-bottom: 15px; margin-bottom: 15px;
strong { strong {
@ -407,7 +433,6 @@ code {
.simple_form, .simple_form,
.table-form { .table-form {
.warning { .warning {
max-width: 400px;
box-sizing: border-box; box-sizing: border-box;
background: rgba($error-value-color, 0.5); background: rgba($error-value-color, 0.5);
color: $primary-text-color; color: $primary-text-color;

View file

@ -46,7 +46,7 @@
&.inline-table { &.inline-table {
td, td,
th { th {
padding: 8px 0; padding: 8px 2px;
} }
& > tbody > tr:nth-child(odd) > td, & > tbody > tr:nth-child(odd) > td,

View file

@ -1,7 +1,7 @@
- content_for :page_title do - content_for :page_title do
= t('auth.change_password') = 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 = 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') } = f.input :email, placeholder: t('simple_form.labels.defaults.email'), input_html: { 'aria-label' => t('simple_form.labels.defaults.email') }