forked from AkkomaGang/admin-fe
Add Mobile and Tablet UI to Moderation Log section
This commit is contained in:
parent
648acc8934
commit
f6683f6d21
1 changed files with 75 additions and 41 deletions
|
@ -1,46 +1,40 @@
|
||||||
<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="moderation-log-user-select"
|
||||||
class="user-select"
|
clearable
|
||||||
clearable
|
placeholder="Filter by admin/moderator"
|
||||||
placeholder="Filter by admin/moderator"
|
@change="fetchLogWithFilters">
|
||||||
@change="fetchLogWithFilters">
|
<el-option-group
|
||||||
<el-option-group
|
v-for="group in users"
|
||||||
v-for="group in users"
|
:key="group.label"
|
||||||
:key="group.label"
|
:label="group.label">
|
||||||
:label="group.label">
|
<el-option
|
||||||
<el-option
|
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-input
|
||||||
</el-col>
|
v-model="search"
|
||||||
<el-col :span="6" class="search-container">
|
placeholder="Search logs"
|
||||||
<el-input
|
clearable
|
||||||
v-model="search"
|
class="moderation-log-search"
|
||||||
placeholder="Search logs"
|
@input="handleDebounceSearchInput"/>
|
||||||
clearable
|
</div>
|
||||||
@input="handleDebounceSearchInput" />
|
<el-date-picker
|
||||||
</el-col>
|
:default-time="['00:00:00', '23:59:59']"
|
||||||
</el-row>
|
v-model="dateRange"
|
||||||
<el-row type="flex" class="row-bg" justify="space-between">
|
type="daterange"
|
||||||
<el-col :span="9" class="date-container">
|
start-placeholder="Start date"
|
||||||
<el-date-picker
|
end-placeholder="End date"
|
||||||
:default-time="['00:00:00', '23:59:59']"
|
unlink-panels
|
||||||
v-model="dateRange"
|
class="moderation-log-date-panel"
|
||||||
type="daterange"
|
@change="fetchLogWithFilters" />
|
||||||
start-placeholder="Start date"
|
|
||||||
end-placeholder="End date"
|
|
||||||
unlink-panels
|
|
||||||
@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>
|
||||||
|
|
Loading…
Reference in a new issue