From cdeca18604bbb4a673b31648ae01f077e4317042 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Mon, 25 Mar 2019 22:43:34 +0500
Subject: [PATCH] Fix styles for desktop and mobile ui

---
 src/views/users/components/UsersFilter.vue |  8 ++++++--
 src/views/users/index.vue                  | 17 ++++++++---------
 2 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/src/views/users/components/UsersFilter.vue b/src/views/users/components/UsersFilter.vue
index 1fe8dbf7..20c76e80 100644
--- a/src/views/users/components/UsersFilter.vue
+++ b/src/views/users/components/UsersFilter.vue
@@ -2,8 +2,8 @@
   <el-select
     v-model="value"
     :collapse-tags="isMobile"
+    :clearable="isDesktop"
     multiple
-    clearable
     placeholder="Select filter"
     class="select-field"
     @change="toggleFilters">
@@ -47,6 +47,9 @@ export default {
     }
   },
   computed: {
+    isDesktop() {
+      return this.$store.state.app.device === 'desktop'
+    },
     isMobile() {
       return this.$store.state.app.device === 'mobile'
     }
@@ -68,7 +71,8 @@ export default {
 only screen and (max-width: 760px),
 (min-device-width: 768px) and (max-device-width: 1024px) {
   .select-field {
-    width: 48%;
+    width: 100%;
+    margin-bottom: 5px;
   }
 }
 </style>
diff --git a/src/views/users/index.vue b/src/views/users/index.vue
index baeaa1e5..4c2d37b1 100644
--- a/src/views/users/index.vue
+++ b/src/views/users/index.vue
@@ -174,7 +174,7 @@ export default {
 <style rel='stylesheet/scss' lang='scss' scoped>
 .users-container {
   h1 {
-    margin-left: 15px;
+    margin: 22px 0 0 15px;
   }
 
   .pagination {
@@ -190,8 +190,8 @@ export default {
     display: flex;
     height: 36px;
     justify-content: space-between;
-    align-items: baseline;
-    margin: 0 15px 21px 15px
+    align-items: center;
+    margin: 22px 15px 22px 15px
   }
 }
 @media
@@ -199,7 +199,7 @@ only screen and (max-width: 760px),
 (min-device-width: 768px) and (max-device-width: 1024px) {
   .users-container {
     h1 {
-      margin-left: 7px;
+      margin: 7px 10px 7px 10px;
     }
     .el-dropdown-link {
       cursor: pointer;
@@ -209,14 +209,13 @@ only screen and (max-width: 760px),
       font-size: 12px;
     }
     .search {
-      width: 48%;
-      float: right;
+      width: 100%;
     }
     .search-container {
       display: flex;
-      justify-content: space-between;
-      align-items: baseline;
-      margin: 0 7px 10px 7px
+      height: 82px;
+      flex-direction: column;
+      margin: 0 10px 7px 10px
     }
     .el-tag {
       width: 30px;