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
Eugen Rochko
parent
a0294c8880
commit
cfe39fb58d
4 changed files with 73 additions and 29 deletions
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@
|
|||
&.inline-table {
|
||||
td,
|
||||
th {
|
||||
padding: 8px 0;
|
||||
padding: 8px 2px;
|
||||
}
|
||||
|
||||
& > tbody > tr:nth-child(odd) > td,
|
||||
|
|
|
|||
|
|
@ -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') }
|
||||
|
|
|
|||
Loading…
Reference in a new issue