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 {
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;
}
}
}

View file

@ -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;

View file

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

View file

@ -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') }