fix mobile view

This commit is contained in:
hay-kot 2021-04-27 10:43:56 -08:00
commit ca9e4f0804
2 changed files with 23 additions and 15 deletions

View file

@ -52,7 +52,7 @@
</template> </template>
</base-dialog> </base-dialog>
<v-btn @click="openDialog" small color="success" class="mr-1"> <v-btn @click="openDialog" small color="success">
{{ $t("settings.toolbox.bulk-assign") }} {{ $t("settings.toolbox.bulk-assign") }}
</v-btn> </v-btn>
</div> </div>

View file

@ -35,28 +35,28 @@
</template> </template>
</base-dialog> </base-dialog>
<v-app-bar flat color="white"> <div class="d-flex justify-center align-center pa-2 flex-wrap">
<new-category-tag-dialog <new-category-tag-dialog ref="newDialog" :tag-dialog="isTags">
ref="newDialog" <v-btn @click="openNewDialog" small color="success" class="mr-1 mb-1">
:tag-dialog="isTags"
class="mr-1"
>
<v-btn @click="openNewDialog" small color="success">
{{ $t("general.create") }} {{ $t("general.create") }}
</v-btn> </v-btn>
</new-category-tag-dialog> </new-category-tag-dialog>
<BulkAssign isTags="isTags" />
<BulkAssign isTags="isTags" class="mr-1 mb-1" />
<v-btn <v-btn
@click="titleCaseAll" @click="titleCaseAll"
class="mr-1"
small small
color="success" color="success"
class="mr-1 mb-1"
:loading="loadingTitleCase" :loading="loadingTitleCase"
> >
{{ $t("settings.toolbox.title-case-all") }} {{ $t("settings.toolbox.title-case-all") }}
</v-btn> </v-btn>
<RemoveUnused :isTags="isTags" /> <RemoveUnused :isTags="isTags" class="mb-1" />
<v-spacer> </v-spacer>
<v-spacer v-if="!isMobile"> </v-spacer>
<fuse-search-bar <fuse-search-bar
:raw-data="allItems" :raw-data="allItems"
@results="filterItems" @results="filterItems"
@ -75,13 +75,14 @@
> >
</v-text-field> </v-text-field>
</fuse-search-bar> </fuse-search-bar>
</v-app-bar> </div>
<v-divider></v-divider> <v-divider></v-divider>
<v-card-text> <v-card-text>
<v-row> <v-row>
<v-col <v-col
:sm="6" cols="12"
:sm="12"
:md="6" :md="6"
:lg="4" :lg="4"
:xl="3" :xl="3"
@ -145,6 +146,9 @@ export default {
}; };
}, },
computed: { computed: {
isMobile() {
return this.$vuetify.breakpoint.name === "xs";
},
allItems() { allItems() {
return this.isTags return this.isTags
? this.$store.getters.getAllTags ? this.$store.getters.getAllTags
@ -232,5 +236,9 @@ export default {
}; };
</script> </script>
<style lang="scss" scoped> <style>
.overflow-fix .v-toolbar__content {
height: auto !important;
flex-wrap: wrap;
}
</style> </style>