qbism/qb-admin-fe
1
0
Fork 0
forked from AkkomaGang/admin-fe
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add mobile UI for single report show page

Browse source
This commit is contained in:
Angelina Filippova 2020-12-04 01:37:56 +03:00
parent 9913909cfa
commit c1dfdd3bbe
3 changed files with 78 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/views/reports/components/ModerateUserDropdown.vue
View file

@ -1,6 +1,6 @@
<template>
<el-dropdown :hide-on-click="false" trigger="click">
<el-button :disabled="!account.id" :size="renderedFrom === 'showPage' ? 'medium' : 'small'" plain icon="el-icon-files">
<el-button :disabled="!account.id" :size="renderedFrom === 'showPage' && !isMobile ? 'medium' : 'small'" plain icon="el-icon-files">
{{ $t('reports.moderateUser') }}
<i class="el-icon-arrow-down el-icon--right"/>
</el-button>
@ -87,6 +87,9 @@ export default {
}
},
computed: {
isMobile() {
return this.$store.state.app.device === 'mobile'
},
tagPolicyEnabled() {
return this.$store.state.users.mrfPolicies.includes('Pleroma.Web.ActivityPub.MRF.TagPolicy')
},

11
src/views/reports/components/ReportContent.vue
View file

@ -179,4 +179,15 @@ export default {
.router-link {
text-decoration: none;
}
@media only screen and (max-width:480px) {
.divider {
margin: 10px 0;
}
.el-card__body {
padding: 13px;
}
.report-account {
flex-direction: column;
}
}
</style>

71
src/views/reports/show.vue
View file

@ -4,7 +4,11 @@
<div class="report-page-header">
<div v-if="propertyExists(report.account, 'nickname')" class="avatar-name-container">
<h1 >{{ $t('reports.reportOn') }}</h1>
<el-avatar v-if="propertyExists(report.account, 'avatar')" :src="report.account.avatar" size="large" class="report-page-avatar"/>
<el-avatar
v-if="propertyExists(report.account, 'avatar')"
:src="report.account.avatar"
:size="isMobile ? 'small' : 'large'"
class="report-page-avatar"/>
<h1>{{ report.account.nickname }}</h1>
<a v-if="propertyExists(report.account, 'url')" :href="report.account.url" target="_blank">
<i :title="$t('userProfile.openAccountInInstance')" class="el-icon-top-right"/>
@ -12,10 +16,16 @@
</div>
<h1 v-else>{{ $t('reports.report') }}</h1>
</div>
<div>
<div class="report-actions-container">
<el-tag :type="getStateType(report.state)" class="report-tag">{{ capitalizeFirstLetter(report.state) }}</el-tag>
<el-dropdown trigger="click">
<el-button plain icon="el-icon-edit" class="report-actions-button">{{ $t('reports.changeState') }}<i class="el-icon-arrow-down el-icon--right"/></el-button>
<el-button
:size="isMobile ? 'small' : 'medium'"
plain
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>
@ -31,9 +41,11 @@
</div>
</header>
<h4 v-if="propertyExists(report.account, 'id')" class="id">{{ $t('reports.id') }}: {{ report.id }}</h4>
<el-card class="report">
<report-content :report="report"/>
</el-card>
<div class="report-card-container">
<el-card class="report">
<report-content :report="report"/>
</el-card>
</div>
</div>
</template>
@ -46,6 +58,9 @@ export default {
name: 'ReportsShow',
components: { ModerateUserDropdown, RebootButton, ReportContent },
computed: {
isMobile() {
return this.$store.state.app.device === 'mobile'
},
loading() {
return this.$store.state.reports.loadingSingleReport
},
@ -94,11 +109,19 @@ export default {
margin: 0 15px 22px 15px;
}
.report {
width: 1000px;
max-width: 1000px;
margin: auto;
}
.report-actions-button {
margin: 3px 0 6px;
margin: 0 5px;
}
.report-actions-container {
display: flex;
flex-wrap: wrap;
}
.report-card-container {
margin: auto;
padding: 0 15px;
}
.report-page-header {
display: flex;
@ -139,4 +162,36 @@ export default {
font-size: 14px;
}
}
@media only screen and (max-width:480px) {
.report-show-page-container {
.id {
margin: 7px 15px 15px 15px;
}
.report-actions-button {
margin: 0 3px 6px;
}
.report-page-header-container {
flex-direction: column;
align-items: flex-start;
}
.report-page-header {
h1 {
font-size: 24px;
}
.avatar-name-container {
.el-icon-top-right {
font-size: 24px;
}
}
.report-page-avatar {
margin: 0 5px 0 9px;
}
}
.report-tag {
height: 32px;
line-height: 32px;
font-size: 14px;
}
}
}
</style>