0
0
Fork 0

Improve report layout (#7188)

* Use table for statuses in report

* Display reported account and reporter in the same table

* Split accounts and general report info into two tables again

* Redesign report statuses table, notes, merge notes and action log

* Remove unused translations

* Fix code style issue

* Fix code style issue

* Fix code style issue
This commit is contained in:
Eugen Rochko 2018-04-20 02:28:48 +02:00 committed by GitHub
parent 1663368724
commit a9c440637c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
55 changed files with 380 additions and 249 deletions

View file

@ -141,14 +141,15 @@
}
hr {
margin: 20px 0;
width: 100%;
height: 0;
border: 0;
background: transparent;
border-bottom: 1px solid $ui-base-color;
border-bottom: 1px solid rgba($ui-base-lighter-color, .6);
margin: 20px 0;
&.section-break {
margin: 30px 0;
border-bottom: 2px solid $ui-base-lighter-color;
&.spacer {
height: 1px;
border: 0;
}
}
@ -335,34 +336,8 @@
}
}
.report-note__comment {
margin-bottom: 20px;
}
.report-note__form {
margin-bottom: 20px;
.report-note__textarea {
box-sizing: border-box;
border: 0;
padding: 7px 4px;
margin-bottom: 10px;
font-size: 16px;
color: $inverted-text-color;
display: block;
width: 100%;
outline: 0;
font-family: inherit;
resize: vertical;
}
.report-note__buttons {
text-align: right;
}
.report-note__button {
margin: 0 0 5px 5px;
}
.simple_form.new_report_note {
max-width: 100%;
}
.batch-form-box {
@ -390,13 +365,6 @@
}
}
.batch-checkbox,
.batch-checkbox-all {
display: flex;
align-items: center;
margin-right: 5px;
}
.back-link {
margin-bottom: 10px;
font-size: 14px;
@ -416,7 +384,7 @@
}
.log-entry {
margin-bottom: 8px;
margin-bottom: 20px;
line-height: 20px;
&__header {
@ -514,9 +482,12 @@
}
}
a.name-tag,
.name-tag {
display: flex;
align-items: center;
text-decoration: none;
color: $ui-secondary-color;
.avatar {
display: block;
@ -528,4 +499,52 @@
.username {
font-weight: 500;
}
&.suspended {
.username {
text-decoration: line-through;
color: lighten($error-red, 12%);
}
.avatar {
filter: grayscale(100%);
opacity: 0.8;
}
}
}
.speech-bubble {
margin-bottom: 20px;
border-left: 4px solid $ui-highlight-color;
&.positive {
border-left-color: $success-green;
}
&.negative {
border-left-color: lighten($error-red, 12%);
}
&__bubble {
padding: 16px;
padding-left: 14px;
font-size: 15px;
line-height: 20px;
border-radius: 4px 4px 4px 0;
position: relative;
font-weight: 500;
a {
color: $ui-primary-color;
}
}
&__owner {
padding: 8px;
padding-left: 12px;
}
time {
color: $darker-text-color;
}
}