diff --git a/src/views/reports/components/TimelineItem.vue b/src/views/reports/components/TimelineItem.vue index eef74148..05afae2e 100644 --- a/src/views/reports/components/TimelineItem.vue +++ b/src/views/reports/components/TimelineItem.vue @@ -2,33 +2,59 @@
-

Report on {{ report.account.display_name }}

+

Report on {{ report.account.display_name }}

{{ capitalizeFirstLetter(report.state) }} - {{ $t('reports.reply') }} +
ID: {{ report.id }}
-
- Account: +
+
+ Account: User's avatar
-
- Content: {{ report.content }} +
+
+ Content: {{ report.content.length > 0 ? report.content : '-' }}
-
- Actor: +
+ - +
+ + + +
+
+ User's avatar + +
+ +
+ +
+
+
+
+ @@ -122,6 +148,9 @@ export default { return '' } }, + getStatusesTitle(statuses) { + return `Reported statuses: ${statuses.length} item(s)` + }, parseTimestamp(timestamp) { return moment(timestamp).format('YYYY-MM-DD HH:mm') }, @@ -140,9 +169,14 @@ export default { vertical-align: bottom; width: 15px; height: 15px; + margin-left: 5px; } .el-card__body { - padding: 17px 17px 0; + padding: 17px; + } + .el-card__header { + background-color: #FAFAFA; + padding: 10px 20px; } .el-collapse { border-bottom: none; @@ -168,12 +202,18 @@ export default { display: flex; justify-content: space-between; align-items: baseline; - height: 25px; + height: 30px; } .id { color: gray; margin: 0 0 12px; } + .line { + width: 100%; + height: 0; + border: 0.5px solid #EBEEF5; + margin: 15px 0 15px; + } .new-note { p { font-size: 13px; @@ -191,7 +231,36 @@ export default { color: gray; } .report-row { - margin-bottom: 5px; + font-size: 13px; + font-weight: 500; + } + .report-title { + margin: 0; + } + .status-account-name { + margin: 0; + } + .status-avatar-img { + width: 15px; + height: 15px; + margin-right: 5px; + } + .status-body { + display: flex; + flex-direction: column; + } + .status-card { + margin-bottom: 15px; + } + .status-content { + font-size: 15px; + } + .status-header { + display: flex; + align-items: center; + } + .statuses { + margin-top: 15px; } .submit-button { display: block;