Oneric/admin-fe
1
0
Fork 0
forked from AkkomaGang/admin-fe
Code Pull requests Activity

Fix styles for desktop and mobile UI on Reports tab

Browse source
This commit is contained in:
Angelina Filippova 2020-02-09 22:24:23 +03:00
parent a3dca567c3
commit 2a82ad691c
5 changed files with 77 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/components/Status/index.vue
View file

@ -214,6 +214,7 @@ export default {
<style rel='stylesheet/scss' lang='scss'> <style rel='stylesheet/scss' lang='scss'>
.status-card { .status-card {
margin-bottom: 10px;
.account { .account {
text-decoration: underline; text-decoration: underline;
line-height: 26px; line-height: 26px;
@ -254,9 +255,6 @@ export default {
font-size: 15px; font-size: 15px;
line-height: 26px; line-height: 26px;
} }
.status-card {
margin-bottom: 15px;
}
.status-deleted { .status-deleted {
font-style: italic; font-style: italic;
margin-top: 3px; margin-top: 3px;

26
src/views/reports/components/GroupedReport.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<el-timeline class="timeline"> <el-timeline class="reports-timeline">
<el-timeline-item <el-timeline-item
v-for="groupedReport in groupedReports" v-for="groupedReport in groupedReports"
:key="groupedReport.id" :key="groupedReport.id"
@ -13,7 +13,7 @@
</div> </div>
<div> <div>
<el-dropdown trigger="click"> <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-menu slot="dropdown">
<el-dropdown-item @click.native="changeAllReports('resolved', groupedReport.reports)">{{ $t('reports.resolveAll') }}</el-dropdown-item> <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> <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 v-if="groupedReport.status">
<div class="line"/> <div class="line"/>
<span class="report-row-key">{{ $t('reports.reportedStatus') }}:</span> <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>
<div v-if="groupedReport.reports"> <div v-if="groupedReport.reports">
<el-collapse> <el-collapse>
@ -109,11 +109,13 @@ export default {
.el-icon-arrow-right { .el-icon-arrow-right {
margin-right: 6px; margin-right: 6px;
} }
.grouped-report {
.header-container { .header-container {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: baseline; align-items: baseline;
height: 40px; height: 36px;
}
} }
.line { .line {
width: 100%; width: 100%;
@ -128,16 +130,30 @@ export default {
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
} }
.reports-timeline {
margin: 30px 45px 45px 19px;
padding: 0px;
}
.reported-status { .reported-status {
margin-top: 15px; margin-top: 15px;
} }
@media @media
only screen and (max-width: 760px), only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) { (min-device-width: 768px) and (max-device-width: 1024px) {
.grouped-report {
.header-container { .header-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 80px; justify-content: flex-start;
align-items: flex-start;
height: auto;
}
.report-actions-button {
margin: 3px 0 6px;
}
.report-title {
margin-bottom: 7px;
}
} }
} }
</style> </style>

44
src/views/reports/components/Report.vue
View file

@ -1,22 +1,22 @@
<template> <template>
<div> <div>
<el-timeline class="timeline"> <el-timeline class="reports-timeline">
<el-timeline-item <el-timeline-item
v-for="report in reports" v-for="report in reports"
:timestamp="parseTimestamp(report.created_at)" :timestamp="parseTimestamp(report.created_at)"
:key="report.id" :key="report.id"
placement="top" placement="top"
class="timeline-item-container"> class="timeline-item-container">
<el-card> <el-card class="report">
<div class="header-container"> <div class="header-container">
<div> <div class="title-container">
<h3 class="report-title">{{ $t('reports.reportOn') }} {{ report.account.display_name }}</h3> <h3 class="report-title">{{ $t('reports.reportOn') }} {{ report.account.display_name }}</h3>
<h5 class="id">{{ $t('reports.id') }}: {{ report.id }}</h5> <h5 class="id">{{ $t('reports.id') }}: {{ report.id }}</h5>
</div> </div>
<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-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-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 !== '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> <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>{{ report.content }}</span>
</span> </span>
</div> </div>
<div> <div :style="showStatuses(report.statuses) ? '' : 'margin-bottom:15px'">
<div class="line"/> <div class="line"/>
<span class="report-row-key">{{ $t('reports.actor') }}:</span> <span class="report-row-key">{{ $t('reports.actor') }}:</span>
<img <img
@ -54,7 +54,7 @@
<span>{{ report.actor.acct }}</span> <span>{{ report.actor.acct }}</span>
</a> </a>
</div> </div>
<div v-if="report.statuses.length > 0" class="statuses"> <div v-if="showStatuses(report.statuses)" class="statuses">
<el-collapse> <el-collapse>
<el-collapse-item :title="getStatusesTitle(report.statuses)"> <el-collapse-item :title="getStatusesTitle(report.statuses)">
<div v-for="status in report.statuses" :key="status.id"> <div v-for="status in report.statuses" :key="status.id">
@ -153,15 +153,18 @@ export default {
getNotesTitle(notes = []) { getNotesTitle(notes = []) {
return `Notes: ${notes.length} item(s)` return `Notes: ${notes.length} item(s)`
}, },
handleNewNote(reportID) {
this.$store.dispatch('CreateReportNote', { content: this.notes[reportID], reportID })
this.notes[reportID] = ''
},
handlePageChange(page) { handlePageChange(page) {
this.$store.dispatch('FetchReports', page) this.$store.dispatch('FetchReports', page)
}, },
parseTimestamp(timestamp) { parseTimestamp(timestamp) {
return moment(timestamp).format('L HH:mm') return moment(timestamp).format('L HH:mm')
}, },
handleNewNote(reportID) { showStatuses(statuses) {
this.$store.dispatch('CreateReportNote', { content: this.notes[reportID], reportID }) return statuses.length > 0
this.notes[reportID] = ''
} }
} }
} }
@ -205,12 +208,14 @@ export default {
margin: 0; margin: 0;
height: 17px; height: 17px;
} }
.report {
.header-container { .header-container {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: baseline; align-items: baseline;
height: 40px; height: 40px;
} }
}
.id { .id {
color: gray; color: gray;
margin-top: 6px; margin-top: 6px;
@ -258,6 +263,10 @@ export default {
margin: 25px 0; margin: 25px 0;
text-align: center; text-align: center;
} }
.reports-timeline {
margin: 30px 45px 45px 19px;
padding: 0px;
}
.statuses { .statuses {
margin-top: 15px; margin-top: 15px;
} }
@ -273,15 +282,26 @@ export default {
@media @media
only screen and (max-width: 760px), only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) { (min-device-width: 768px) and (max-device-width: 1024px) {
.timeline-item-container { .report {
.header-container { .header-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 80px; justify-content: flex-start;
align-items: flex-start;
height: auto;
} }
.id { .id {
margin: 6px 0 0 0; margin: 6px 0 0 0;
} }
.report-actions-button {
margin: 3px 0 6px;
}
.report-tag {
margin: 3px 0 6px;
}
.title-container {
margin-bottom: 7px;
}
} }
} }
</style> </style>

14
src/views/reports/components/ReportCard.vue
View file

@ -13,7 +13,7 @@
</a> </a>
</div> </div>
<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-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">{{ $t('reports.changeState') }}<i class="el-icon-arrow-down el-icon--right"/></el-button>
<el-dropdown-menu slot="dropdown"> <el-dropdown-menu slot="dropdown">
@ -117,14 +117,12 @@ export default {
.report-header { .report-header {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 80px; justify-content: flex-start;
align-items: flex-start;
height: auto;
} }
.report-actor-container { .report-tag {
margin-bottom: 5px; margin: 3px 0 6px;
}
.report-header {
display: flex;
flex-direction: column;
} }
} }
</style> </style>

13
src/views/reports/index.vue
View file

@ -8,7 +8,7 @@
{{ $t('reports.reports') }} {{ $t('reports.reports') }}
<span class="report-count">({{ normalizedReportsCount }})</span> <span class="report-count">({{ normalizedReportsCount }})</span>
</h1> </h1>
<div class="filter-container"> <div class="reports-filter-container">
<reports-filter v-if="!groupReports"/> <reports-filter v-if="!groupReports"/>
<el-checkbox v-model="groupReports" class="group-reports-checkbox"> <el-checkbox v-model="groupReports" class="group-reports-checkbox">
Group reports by statuses Group reports by statuses
@ -70,13 +70,10 @@ export default {
<style rel='stylesheet/scss' lang='scss' scoped> <style rel='stylesheet/scss' lang='scss' scoped>
.reports-container { .reports-container {
.el-timeline { .reports-filter-container {
margin: 45px 45px 45px 19px;
padding: 0px;
}
.filter-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-start;
margin: 22px 15px 22px 15px; margin: 22px 15px 22px 15px;
padding-bottom: 0 padding-bottom: 0
} }
@ -102,8 +99,8 @@ only screen and (max-width: 760px),
h1 { h1 {
margin: 7px 10px 15px 10px; margin: 7px 10px 15px 10px;
} }
.filter-container { .reports-filter-container {
margin: 0 10px margin: 0 10px;
} }
} }
#app > div > div.main-container > section > div > div.block > ul { #app > div > div.main-container > section > div > div.block > ul {