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
GitHub
parent
1663368724
commit
a9c440637c
55 changed files with 380 additions and 249 deletions
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1006,6 +1006,15 @@
|
|||
padding: 10px;
|
||||
border-bottom: 1px solid lighten($ui-base-color, 8%);
|
||||
|
||||
&.compact {
|
||||
padding: 0;
|
||||
border-bottom: 0;
|
||||
|
||||
.account__avatar-wrapper {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.account__display-name {
|
||||
flex: 1 1 auto;
|
||||
display: block;
|
||||
|
|
@ -1029,7 +1038,6 @@
|
|||
.account__avatar {
|
||||
@include avatar-radius();
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
|
||||
&-inline {
|
||||
display: inline-block;
|
||||
|
|
@ -1038,6 +1046,10 @@
|
|||
}
|
||||
}
|
||||
|
||||
a .account__avatar {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.account__avatar-overlay {
|
||||
@include avatar-size(48px);
|
||||
|
||||
|
|
@ -1286,7 +1298,7 @@
|
|||
.status__display-name,
|
||||
.reply-indicator__display-name,
|
||||
.detailed-status__display-name,
|
||||
.account__display-name {
|
||||
a.account__display-name {
|
||||
&:hover strong {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@
|
|||
vertical-align: top;
|
||||
border-top: 1px solid $ui-base-color;
|
||||
text-align: left;
|
||||
background: darken($ui-base-color, 4%);
|
||||
}
|
||||
|
||||
& > thead > tr > th {
|
||||
|
|
@ -48,9 +49,38 @@
|
|||
}
|
||||
}
|
||||
|
||||
&.inline-table > tbody > tr:nth-child(odd) > td,
|
||||
&.inline-table > tbody > tr:nth-child(odd) > th {
|
||||
background: transparent;
|
||||
&.inline-table {
|
||||
& > tbody > tr:nth-child(odd) {
|
||||
& > td,
|
||||
& > th {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
& > tbody > tr:first-child {
|
||||
& > td,
|
||||
& > th {
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.batch-table {
|
||||
& > thead > tr > th {
|
||||
background: $ui-base-color;
|
||||
border-top: 1px solid darken($ui-base-color, 8%);
|
||||
border-bottom: 1px solid darken($ui-base-color, 8%);
|
||||
|
||||
&:first-child {
|
||||
border-radius: 4px 0 0;
|
||||
border-left: 1px solid darken($ui-base-color, 8%);
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-radius: 0 4px 0 0;
|
||||
border-right: 1px solid darken($ui-base-color, 8%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -63,6 +93,13 @@ samp {
|
|||
font-family: 'mastodon-font-monospace', monospace;
|
||||
}
|
||||
|
||||
button.table-action-link {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
button.table-action-link,
|
||||
a.table-action-link {
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
|
|
@ -79,4 +116,77 @@ a.table-action-link {
|
|||
font-weight: 400;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.batch-table {
|
||||
&__toolbar,
|
||||
&__row {
|
||||
display: flex;
|
||||
|
||||
&__select {
|
||||
box-sizing: border-box;
|
||||
padding: 8px 16px;
|
||||
cursor: pointer;
|
||||
min-height: 100%;
|
||||
|
||||
input {
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
&__actions,
|
||||
&__content {
|
||||
padding: 8px 0;
|
||||
padding-right: 16px;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
}
|
||||
|
||||
&__toolbar {
|
||||
border: 1px solid darken($ui-base-color, 8%);
|
||||
background: $ui-base-color;
|
||||
border-radius: 4px 0 0;
|
||||
height: 47px;
|
||||
align-items: center;
|
||||
|
||||
&__actions {
|
||||
text-align: right;
|
||||
padding-right: 16px - 5px;
|
||||
}
|
||||
}
|
||||
|
||||
&__row {
|
||||
border: 1px solid darken($ui-base-color, 8%);
|
||||
border-top: 0;
|
||||
background: darken($ui-base-color, 4%);
|
||||
|
||||
&:hover {
|
||||
background: darken($ui-base-color, 2%);
|
||||
}
|
||||
|
||||
&:nth-child(even) {
|
||||
background: $ui-base-color;
|
||||
|
||||
&:hover {
|
||||
background: lighten($ui-base-color, 2%);
|
||||
}
|
||||
}
|
||||
|
||||
&__content {
|
||||
padding-top: 12px;
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.status__content {
|
||||
padding-top: 0;
|
||||
|
||||
strong {
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue