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

Fix styles for desktop and mobile ui

Browse source
This commit is contained in:
Angelina Filippova 2019-03-25 22:43:34 +05:00
parent 8d08d302ce
commit cdeca18604
2 changed files with 14 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/views/users/components/UsersFilter.vue
View file

@ -2,8 +2,8 @@
<el-select <el-select
v-model="value" v-model="value"
:collapse-tags="isMobile" :collapse-tags="isMobile"
:clearable="isDesktop"
multiple multiple
clearable
placeholder="Select filter" placeholder="Select filter"
class="select-field" class="select-field"
@change="toggleFilters"> @change="toggleFilters">
@ -47,6 +47,9 @@ export default {
} }
}, },
computed: { computed: {
isDesktop() {
return this.$store.state.app.device === 'desktop'
},
isMobile() { isMobile() {
return this.$store.state.app.device === 'mobile' return this.$store.state.app.device === 'mobile'
} }
@ -68,7 +71,8 @@ export default {
only screen and (max-width: 760px), only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) { (min-device-width: 768px) and (max-device-width: 1024px) {
.select-field { .select-field {
width: 48%; width: 100%;
margin-bottom: 5px;
} }
} }
</style> </style>

17
src/views/users/index.vue
View file

@ -174,7 +174,7 @@ export default {
<style rel='stylesheet/scss' lang='scss' scoped> <style rel='stylesheet/scss' lang='scss' scoped>
.users-container { .users-container {
h1 { h1 {
margin-left: 15px; margin: 22px 0 0 15px;
} }
.pagination { .pagination {
@ -190,8 +190,8 @@ export default {
display: flex; display: flex;
height: 36px; height: 36px;
justify-content: space-between; justify-content: space-between;
align-items: baseline; align-items: center;
margin: 0 15px 21px 15px margin: 22px 15px 22px 15px
} }
} }
@media @media
@ -199,7 +199,7 @@ only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) { (min-device-width: 768px) and (max-device-width: 1024px) {
.users-container { .users-container {
h1 { h1 {
margin-left: 7px; margin: 7px 10px 7px 10px;
} }
.el-dropdown-link { .el-dropdown-link {
cursor: pointer; cursor: pointer;
@ -209,14 +209,13 @@ only screen and (max-width: 760px),
font-size: 12px; font-size: 12px;
} }
.search { .search {
width: 48%; width: 100%;
float: right;
} }
.search-container { .search-container {
display: flex; display: flex;
justify-content: space-between; height: 82px;
align-items: baseline; flex-direction: column;
margin: 0 7px 10px 7px margin: 0 10px 7px 10px
} }
.el-tag { .el-tag {
width: 30px; width: 30px;