ric/uptime-kuma
1
0
Fork 0
mirror of https://github.com/louislam/uptime-kuma.git synced 2024-11-27 16:54:04 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

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

Browse source 
UI: Improve Tags settings design on mobile
This commit is contained in:
Louis Lam 2023-04-17 16:58:57 +08:00 committed by GitHub
commit eb9c748071
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 7 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
src/components/settings/Tags.vue
View file

@ -1,21 +1,18 @@
<template> <template>
<div class="my-4"> <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> <button class="btn btn-primary" @click.stop="addTag"><font-awesome-icon icon="plus" /> {{ $t("Add New Tag") }}</button>
</div> </div>
<div class="tags-list my-3"> <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 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-5 ps-1"> <div class="col-10 col-sm-5">
<Tag :item="tag" /> <Tag :item="tag" />
</div> </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>{{ monitorsByTag(tag.id).length }} {{ $tc("Monitor", monitorsByTag(tag.id).length) }}</div>
</div> </div>
<div class="col-2 pe-3 d-flex justify-content-end"> <div class="col-2 pe-2 pe-lg-3 d-flex justify-content-end">
<button type="button" class="btn ms-2 py-1">
<font-awesome-icon class="" icon="edit" />
</button>
<button type="button" class="btn-rm-tag btn btn-outline-danger ms-2 py-1" :disabled="processing" @click.stop="deleteConfirm(index)"> <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" /> <font-awesome-icon class="" icon="trash" />
</button> </button>
@ -156,8 +153,8 @@ export default {
@import "../../assets/vars.scss"; @import "../../assets/vars.scss";
.btn-rm-tag { .btn-rm-tag {
padding-left: 11px; padding-left: 9px;
padding-right: 11px; padding-right: 9px;
} }
.tags-list .tags-list-row { .tags-list .tags-list-row {