Merge pull request louislam#3006 from chakflying/ui/tags-settings-mobile

UI: Improve Tags settings design on mobile
devinsbdev · Apr 17, 2023 · eb9c748 · eb9c748
2 parents 680dcce + b975c24
commit eb9c748
Showing 1 changed file with 7 additions and 10 deletions.
diff --git a/src/components/settings/Tags.vue b/src/components/settings/Tags.vue
@@ -1,21 +1,18 @@
 <template>
     <div class="my-4">
-        <div class="mx-4 pt-1 my-3">
+        <div class="mx-0 mx-lg-4 pt-1 mb-4">
             <button class="btn btn-primary" @click.stop="addTag"><font-awesome-icon icon="plus" /> {{ $t("Add New Tag") }}</button>
         </div>
 
         <div class="tags-list my-3">
-            <div v-for="(tag, index) in tagsList" :key="tag.id" class="d-flex align-items-center mx-4 py-1 tags-list-row" :disabled="processing" @click="editTag(index)">
-                <div class="col-5 ps-1">
+            <div v-for="(tag, index) in tagsList" :key="tag.id" class="d-flex align-items-center mx-0 mx-lg-4 py-1 tags-list-row" :disabled="processing" @click="editTag(index)">
+                <div class="col-10 col-sm-5">
                     <Tag :item="tag" />
                 </div>
-                <div class="col-5 px-1">
+                <div class="col-5 px-1 d-none d-sm-block">
                     <div>{{ monitorsByTag(tag.id).length }} {{ $tc("Monitor", monitorsByTag(tag.id).length) }}</div>
                 </div>
-                <div class="col-2 pe-3 d-flex justify-content-end">
-                    <button type="button" class="btn ms-2 py-1">
-                        <font-awesome-icon class="" icon="edit" />
-                    </button>
+                <div class="col-2 pe-2 pe-lg-3 d-flex justify-content-end">
                     <button type="button" class="btn-rm-tag btn btn-outline-danger ms-2 py-1" :disabled="processing" @click.stop="deleteConfirm(index)">
                         <font-awesome-icon class="" icon="trash" />
                     </button>
@@ -156,8 +153,8 @@ export default {
 @import "../../assets/vars.scss";
 
 .btn-rm-tag {
-    padding-left: 11px;
-    padding-right: 11px;
+    padding-left: 9px;
+    padding-right: 9px;
 }
 
 .tags-list .tags-list-row {