From 36c7004a9f2f67c414b27367f392de90390df448 Mon Sep 17 00:00:00 2001 From: Angelina Filippova <linakirsanova@gmail.com> Date: Wed, 6 Mar 2019 19:52:18 +0000 Subject: [PATCH] Improve UI on mobile --- src/views/layout/components/Navbar.vue | 5 +++ src/views/users/index.vue | 51 ++++++++++++++++++++++---- 2 files changed, 48 insertions(+), 8 deletions(-) diff --git a/src/views/layout/components/Navbar.vue b/src/views/layout/components/Navbar.vue index d7bc3cb8..1f451696 100644 --- a/src/views/layout/components/Navbar.vue +++ b/src/views/layout/components/Navbar.vue @@ -1,5 +1,6 @@ <template> <div class="navbar"> + <hamburger :toggle-click="toggleSideBar" :is-active="sidebar.opened" class="hamburger-container"/> <div class="right-menu"> <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click"> <div class="avatar-wrapper"> @@ -22,8 +23,12 @@ <script> import { mapGetters } from 'vuex' +import Hamburger from '@/components/Hamburger' export default { + components: { + Hamburger + }, computed: { ...mapGetters([ 'sidebar', diff --git a/src/views/users/index.vue b/src/views/users/index.vue index fbd167aa..cf558fe2 100644 --- a/src/views/users/index.vue +++ b/src/views/users/index.vue @@ -1,18 +1,19 @@ <template> <div class="users-container"> <h1>Users</h1> - <div class="searchContainer"> - <el-checkbox :value="showLocalUsers" @change="handleLocalUsersCheckbox">Show local users only</el-checkbox> + <div class="search-container"> + <el-checkbox :value="showLocalUsers" @change="handleLocalUsersCheckbox">Local users only</el-checkbox> <el-input placeholder="Search" class="search" @input="handleDebounceSearchInput"/> </div> <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 label="Status"> + <el-table-column :min-width="width" label="Status"> <template slot-scope="scope"> - <el-tag - :type="scope.row.deactivated ? 'danger' : 'success'" - >{{ scope.row.deactivated ? 'deactivated' : 'active' }}</el-tag> + <el-tag :type="scope.row.deactivated ? 'danger' : 'success'"> + <span v-if="isDesktop">{{ scope.row.deactivated ? 'deactivated' : 'active' }}</span> + <i v-else :class="activationIcon(scope.row.deactivated)"/> + </el-tag> </template> </el-table-column> <el-table-column fixed="right" label="Actions"> @@ -62,6 +63,15 @@ export default { }, 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() { @@ -89,6 +99,9 @@ export default { }, handleLocalUsersCheckbox(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; float: right; } - .searchContainer { + .search-container { display: flex; justify-content: space-between; align-items: baseline; 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>