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

Add Mobile and Tablet UI to Moderation Log section

Browse source
This commit is contained in:
Angelina Filippova 2020-02-26 23:19:33 +03:00
parent 648acc8934
commit f6683f6d21
1 changed files with 75 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

62
src/views/moderation_log/index.vue
View file

@ -1,11 +1,10 @@
<template> <template>
<div v-if="!loading" class="moderation-log-container"> <div v-if="!loading" class="moderation-log-container">
<h1>{{ $t('moderationLog.moderationLog') }}</h1> <h1>{{ $t('moderationLog.moderationLog') }}</h1>
<el-row type="flex" class="row-bg" justify="space-between"> <div class="moderation-log-nav-container">
<el-col :span="9">
<el-select <el-select
v-model="user" v-model="user"
class="user-select" class="moderation-log-user-select"
clearable clearable
placeholder="Filter by admin/moderator" placeholder="Filter by admin/moderator"
@change="fetchLogWithFilters"> @change="fetchLogWithFilters">
@ -17,20 +16,16 @@
v-for="item in group.options" v-for="item in group.options"
:key="item.id" :key="item.id"
:label="item.nickname" :label="item.nickname"
:value="item.id" /> :value="item.id"/>
</el-option-group> </el-option-group>
</el-select> </el-select>
</el-col>
<el-col :span="6" class="search-container">
<el-input <el-input
v-model="search" v-model="search"
placeholder="Search logs" placeholder="Search logs"
clearable clearable
@input="handleDebounceSearchInput" /> class="moderation-log-search"
</el-col> @input="handleDebounceSearchInput"/>
</el-row> </div>
<el-row type="flex" class="row-bg" justify="space-between">
<el-col :span="9" class="date-container">
<el-date-picker <el-date-picker
:default-time="['00:00:00', '23:59:59']" :default-time="['00:00:00', '23:59:59']"
v-model="dateRange" v-model="dateRange"
@ -38,9 +33,8 @@
start-placeholder="Start date" start-placeholder="Start date"
end-placeholder="End date" end-placeholder="End date"
unlink-panels unlink-panels
class="moderation-log-date-panel"
@change="fetchLogWithFilters" /> @change="fetchLogWithFilters" />
</el-col>
</el-row>
<el-timeline> <el-timeline>
<el-timeline-item <el-timeline-item
v-for="(logEntry, index) in log" v-for="(logEntry, index) in log"
@ -55,6 +49,7 @@
:hide-on-single-page="true" :hide-on-single-page="true"
:page-size="50" :page-size="50"
:total="total" :total="total"
:small="isMobile"
layout="prev, pager, next" layout="prev, pager, next"
@current-change="fetchLogWithFilters" /> @current-change="fetchLogWithFilters" />
</div> </div>
@ -76,6 +71,9 @@ export default {
} }
}, },
computed: { computed: {
isMobile() {
return this.$store.state.app.device === 'mobile'
},
loading() { loading() {
return this.$store.state.moderationLog.logLoading && return this.$store.state.moderationLog.logLoading &&
this.$store.state.moderationLog.adminsLoading this.$store.state.moderationLog.adminsLoading
@ -138,7 +136,17 @@ h1 {
margin: 25px 45px 0 0; margin: 25px 45px 0 0;
padding: 0px; padding: 0px;
} }
.user-select { .moderation-log-date-panel {
width: 350px;
}
.moderation-log-nav-container {
display: flex;
justify-content: space-between;
}
.moderation-log-search {
width: 350px;
}
.moderation-log-user-select {
margin: 0 0 20px; margin: 0 0 20px;
width: 350px; width: 350px;
} }
@ -148,4 +156,30 @@ h1 {
.pagination { .pagination {
text-align: center; text-align: center;
} }
@media only screen and (max-width:480px) {
.moderation-log-date-panel {
width: 100%;
}
.moderation-log-user-select {
margin: 0 0 10px;
width: 55%;
}
.moderation-log-search {
width: 40%;
}
}
@media only screen and (max-width:801px) and (min-width: 481px) {
.moderation-log-date-panel {
width: 55%;
}
.moderation-log-user-select {
margin: 0 0 10px;
width: 55%;
}
.moderation-log-search {
width: 40%;
}
}
</style> </style>