Merge branch 'fix/mobile-ui' into 'master'

Improve UI on mobile

Closes #5

See merge request pleroma/admin-fe!4
This commit is contained in:
feld 2019-03-06 19:52:18 +00:00
commit 220ad0553a
2 changed files with 48 additions and 8 deletions

View file

@ -1,5 +1,6 @@
<template> <template>
<div class="navbar"> <div class="navbar">
<hamburger :toggle-click="toggleSideBar" :is-active="sidebar.opened" class="hamburger-container"/>
<div class="right-menu"> <div class="right-menu">
<el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click"> <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
<div class="avatar-wrapper"> <div class="avatar-wrapper">
@ -22,8 +23,12 @@
<script> <script>
import { mapGetters } from 'vuex' import { mapGetters } from 'vuex'
import Hamburger from '@/components/Hamburger'
export default { export default {
components: {
Hamburger
},
computed: { computed: {
...mapGetters([ ...mapGetters([
'sidebar', 'sidebar',

View file

@ -1,18 +1,19 @@
<template> <template>
<div class="users-container"> <div class="users-container">
<h1>Users</h1> <h1>Users</h1>
<div class="searchContainer"> <div class="search-container">
<el-checkbox :value="showLocalUsers" @change="handleLocalUsersCheckbox">Show local users only</el-checkbox> <el-checkbox :value="showLocalUsers" @change="handleLocalUsersCheckbox">Local users only</el-checkbox>
<el-input placeholder="Search" class="search" @input="handleDebounceSearchInput"/> <el-input placeholder="Search" class="search" @input="handleDebounceSearchInput"/>
</div> </div>
<el-table v-loading="loading" :data="users" style="width: 100%"> <el-table v-loading="loading" :data="users" style="width: 100%">
<el-table-column prop="id" label="ID" width="180"/> <el-table-column :min-width="width" prop="id" label="ID"/>
<el-table-column prop="nickname" label="Name"/> <el-table-column prop="nickname" label="Name"/>
<el-table-column label="Status"> <el-table-column :min-width="width" label="Status">
<template slot-scope="scope"> <template slot-scope="scope">
<el-tag <el-tag :type="scope.row.deactivated ? 'danger' : 'success'">
:type="scope.row.deactivated ? 'danger' : 'success'" <span v-if="isDesktop">{{ scope.row.deactivated ? 'deactivated' : 'active' }}</span>
>{{ scope.row.deactivated ? 'deactivated' : 'active' }}</el-tag> <i v-else :class="activationIcon(scope.row.deactivated)"/>
</el-tag>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column fixed="right" label="Actions"> <el-table-column fixed="right" label="Actions">
@ -62,6 +63,15 @@ export default {
}, },
showLocalUsers() { showLocalUsers() {
return this.$store.state.users.showLocalUsers return this.$store.state.users.showLocalUsers
},
isDesktop() {
return this.$store.state.app.device === 'desktop'
},
isMobile() {
return this.$store.state.app.device === 'mobile'
},
width() {
return this.isMobile ? 60 : false
} }
}, },
created() { created() {
@ -89,6 +99,9 @@ export default {
}, },
handleLocalUsersCheckbox(e) { handleLocalUsersCheckbox(e) {
this.$store.dispatch('ToggleLocalUsersFilter', e) this.$store.dispatch('ToggleLocalUsersFilter', e)
},
activationIcon(status) {
return status ? 'el-icon-error' : 'el-icon-success'
} }
} }
} }
@ -111,11 +124,33 @@ export default {
margin-right: 15px; margin-right: 15px;
float: right; float: right;
} }
.searchContainer { .search-container {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: baseline; align-items: baseline;
margin-left: 15px; margin-left: 15px;
} }
} }
@media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {
.users-container {
h1 {
margin-left: 7px;
}
.search {
width: 50%;
margin-bottom: 21.5px;
margin-right: 7px;
float: right;
}
.search-container {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-left: 7px;
}
}
}
</style> </style>