Fix styles for desktop and mobile UI on Reports tab
This commit is contained in:
Angelina Filippova
parent
a3dca567c3
commit
2a82ad691c
5 changed files with 77 additions and 48 deletions
|
|
@ -214,6 +214,7 @@ export default {
|
|||
|
||||
<style rel='stylesheet/scss' lang='scss'>
|
||||
.status-card {
|
||||
margin-bottom: 10px;
|
||||
.account {
|
||||
text-decoration: underline;
|
||||
line-height: 26px;
|
||||
|
|
@ -254,9 +255,6 @@ export default {
|
|||
font-size: 15px;
|
||||
line-height: 26px;
|
||||
}
|
||||
.status-card {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.status-deleted {
|
||||
font-style: italic;
|
||||
margin-top: 3px;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<el-timeline class="timeline">
|
||||
<el-timeline class="reports-timeline">
|
||||
<el-timeline-item
|
||||
v-for="groupedReport in groupedReports"
|
||||
:key="groupedReport.id"
|
||||
|
|
@ -13,7 +13,7 @@
|
|||
</div>
|
||||
<div>
|
||||
<el-dropdown trigger="click">
|
||||
<el-button plain size="small" icon="el-icon-edit">{{ $t('reports.changeAllReports') }}<i class="el-icon-arrow-down el-icon--right"/></el-button>
|
||||
<el-button plain size="small" icon="el-icon-edit" class="report-actions-button">{{ $t('reports.changeAllReports') }}<i class="el-icon-arrow-down el-icon--right"/></el-button>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item @click.native="changeAllReports('resolved', groupedReport.reports)">{{ $t('reports.resolveAll') }}</el-dropdown-item>
|
||||
<el-dropdown-item @click.native="changeAllReports('open', groupedReport.reports)">{{ $t('reports.reopenAll') }}</el-dropdown-item>
|
||||
|
|
@ -46,7 +46,7 @@
|
|||
<div v-if="groupedReport.status">
|
||||
<div class="line"/>
|
||||
<span class="report-row-key">{{ $t('reports.reportedStatus') }}:</span>
|
||||
<status :status="groupedReport.status" class="reported-status"/>
|
||||
<status :status="groupedReport.status" :show-checkbox="false" class="reported-status"/>
|
||||
</div>
|
||||
<div v-if="groupedReport.reports">
|
||||
<el-collapse>
|
||||
|
|
@ -109,11 +109,13 @@ export default {
|
|||
.el-icon-arrow-right {
|
||||
margin-right: 6px;
|
||||
}
|
||||
.header-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: baseline;
|
||||
height: 40px;
|
||||
.grouped-report {
|
||||
.header-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: baseline;
|
||||
height: 36px;
|
||||
}
|
||||
}
|
||||
.line {
|
||||
width: 100%;
|
||||
|
|
@ -128,16 +130,30 @@ export default {
|
|||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.reports-timeline {
|
||||
margin: 30px 45px 45px 19px;
|
||||
padding: 0px;
|
||||
}
|
||||
.reported-status {
|
||||
margin-top: 15px;
|
||||
}
|
||||
@media
|
||||
only screen and (max-width: 760px),
|
||||
(min-device-width: 768px) and (max-device-width: 1024px) {
|
||||
.header-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 80px;
|
||||
.grouped-report {
|
||||
.header-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
height: auto;
|
||||
}
|
||||
.report-actions-button {
|
||||
margin: 3px 0 6px;
|
||||
}
|
||||
.report-title {
|
||||
margin-bottom: 7px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,22 +1,22 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-timeline class="timeline">
|
||||
<el-timeline class="reports-timeline">
|
||||
<el-timeline-item
|
||||
v-for="report in reports"
|
||||
:timestamp="parseTimestamp(report.created_at)"
|
||||
:key="report.id"
|
||||
placement="top"
|
||||
class="timeline-item-container">
|
||||
<el-card>
|
||||
<el-card class="report">
|
||||
<div class="header-container">
|
||||
<div>
|
||||
<div class="title-container">
|
||||
<h3 class="report-title">{{ $t('reports.reportOn') }} {{ report.account.display_name }}</h3>
|
||||
<h5 class="id">{{ $t('reports.id') }}: {{ report.id }}</h5>
|
||||
</div>
|
||||
<div>
|
||||
<el-tag :type="getStateType(report.state)" size="large">{{ capitalizeFirstLetter(report.state) }}</el-tag>
|
||||
<el-tag :type="getStateType(report.state)" size="large" class="report-tag">{{ capitalizeFirstLetter(report.state) }}</el-tag>
|
||||
<el-dropdown trigger="click">
|
||||
<el-button plain size="small" icon="el-icon-edit">{{ $t('reports.changeState') }}<i class="el-icon-arrow-down el-icon--right"/></el-button>
|
||||
<el-button plain size="small" icon="el-icon-edit" class="report-actions-button">{{ $t('reports.changeState') }}<i class="el-icon-arrow-down el-icon--right"/></el-button>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item v-if="report.state !== 'resolved'" @click.native="changeReportState('resolved', report.id)">{{ $t('reports.resolve') }}</el-dropdown-item>
|
||||
<el-dropdown-item v-if="report.state !== 'open'" @click.native="changeReportState('open', report.id)">{{ $t('reports.reopen') }}</el-dropdown-item>
|
||||
|
|
@ -43,7 +43,7 @@
|
|||
<span>{{ report.content }}</span>
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<div :style="showStatuses(report.statuses) ? '' : 'margin-bottom:15px'">
|
||||
<div class="line"/>
|
||||
<span class="report-row-key">{{ $t('reports.actor') }}:</span>
|
||||
<img
|
||||
|
|
@ -54,7 +54,7 @@
|
|||
<span>{{ report.actor.acct }}</span>
|
||||
</a>
|
||||
</div>
|
||||
<div v-if="report.statuses.length > 0" class="statuses">
|
||||
<div v-if="showStatuses(report.statuses)" class="statuses">
|
||||
<el-collapse>
|
||||
<el-collapse-item :title="getStatusesTitle(report.statuses)">
|
||||
<div v-for="status in report.statuses" :key="status.id">
|
||||
|
|
@ -153,15 +153,18 @@ export default {
|
|||
getNotesTitle(notes = []) {
|
||||
return `Notes: ${notes.length} item(s)`
|
||||
},
|
||||
handleNewNote(reportID) {
|
||||
this.$store.dispatch('CreateReportNote', { content: this.notes[reportID], reportID })
|
||||
this.notes[reportID] = ''
|
||||
},
|
||||
handlePageChange(page) {
|
||||
this.$store.dispatch('FetchReports', page)
|
||||
},
|
||||
parseTimestamp(timestamp) {
|
||||
return moment(timestamp).format('L HH:mm')
|
||||
},
|
||||
handleNewNote(reportID) {
|
||||
this.$store.dispatch('CreateReportNote', { content: this.notes[reportID], reportID })
|
||||
this.notes[reportID] = ''
|
||||
showStatuses(statuses) {
|
||||
return statuses.length > 0
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -205,11 +208,13 @@ export default {
|
|||
margin: 0;
|
||||
height: 17px;
|
||||
}
|
||||
.header-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: baseline;
|
||||
height: 40px;
|
||||
.report {
|
||||
.header-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: baseline;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
.id {
|
||||
color: gray;
|
||||
|
|
@ -258,6 +263,10 @@ export default {
|
|||
margin: 25px 0;
|
||||
text-align: center;
|
||||
}
|
||||
.reports-timeline {
|
||||
margin: 30px 45px 45px 19px;
|
||||
padding: 0px;
|
||||
}
|
||||
.statuses {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
|
@ -273,15 +282,26 @@ export default {
|
|||
@media
|
||||
only screen and (max-width: 760px),
|
||||
(min-device-width: 768px) and (max-device-width: 1024px) {
|
||||
.timeline-item-container {
|
||||
.report {
|
||||
.header-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 80px;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
height: auto;
|
||||
}
|
||||
.id {
|
||||
margin: 6px 0 0 0;
|
||||
}
|
||||
.report-actions-button {
|
||||
margin: 3px 0 6px;
|
||||
}
|
||||
.report-tag {
|
||||
margin: 3px 0 6px;
|
||||
}
|
||||
.title-container {
|
||||
margin-bottom: 7px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<el-tag :type="getStateType(report.state)" size="large">{{ capitalizeFirstLetter(report.state) }}</el-tag>
|
||||
<el-tag :type="getStateType(report.state)" size="large" class="report-tag">{{ capitalizeFirstLetter(report.state) }}</el-tag>
|
||||
<el-dropdown trigger="click">
|
||||
<el-button plain size="small" icon="el-icon-edit">{{ $t('reports.changeState') }}<i class="el-icon-arrow-down el-icon--right"/></el-button>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
|
|
@ -117,14 +117,12 @@ export default {
|
|||
.report-header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 80px;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
height: auto;
|
||||
}
|
||||
.report-actor-container {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.report-header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.report-tag {
|
||||
margin: 3px 0 6px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
{{ $t('reports.reports') }}
|
||||
<span class="report-count">({{ normalizedReportsCount }})</span>
|
||||
</h1>
|
||||
<div class="filter-container">
|
||||
<div class="reports-filter-container">
|
||||
<reports-filter v-if="!groupReports"/>
|
||||
<el-checkbox v-model="groupReports" class="group-reports-checkbox">
|
||||
Group reports by statuses
|
||||
|
|
@ -70,13 +70,10 @@ export default {
|
|||
|
||||
<style rel='stylesheet/scss' lang='scss' scoped>
|
||||
.reports-container {
|
||||
.el-timeline {
|
||||
margin: 45px 45px 45px 19px;
|
||||
padding: 0px;
|
||||
}
|
||||
.filter-container {
|
||||
.reports-filter-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
margin: 22px 15px 22px 15px;
|
||||
padding-bottom: 0
|
||||
}
|
||||
|
|
@ -102,8 +99,8 @@ only screen and (max-width: 760px),
|
|||
h1 {
|
||||
margin: 7px 10px 15px 10px;
|
||||
}
|
||||
.filter-container {
|
||||
margin: 0 10px
|
||||
.reports-filter-container {
|
||||
margin: 0 10px;
|
||||
}
|
||||
}
|
||||
#app > div > div.main-container > section > div > div.block > ul {
|
||||
|
|
|
|||
Loading…
Reference in a new issue