mirrors/VueTorrent
1
0
Fork 0
mirror of https://github.com/VueTorrent/VueTorrent.git synced 2025-04-25 01:53:13 +03:00
Code Issues Projects Releases Packages Wiki Activity

fix: Settings>VueTorrent>Dashboard layout & UX

Browse source 
Layout improvements
This commit is contained in:
m4ximuel 2021-04-04 19:30:40 +09:00 • committed by GitHub
parent 53c548b502
commit d93e540a71
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 77 additions and 70 deletions

67
src/components/Modals/SettingsModal/Tabs/Vuetorrent/Dashboard.vue
View file

@ -1,24 +1,12 @@
<template> <template>
<div class="ma-3 pa-2">
<v-card flat> <v-card flat>
<v-card-text class="pa-0"> <v-row dense>
<v-layout <v-col cols="12" md="6">
row
wrap
align-center
justify-center
>
<v-flex
class="box ma-1"
style="width:50px !important;"
xs12
md5
>
<v-subheader> <v-subheader>
Properties to display for busy torrents Properties to display for busy torrents
</v-subheader> </v-subheader>
<v-row dense> <v-row dense>
<v-list flat class="ma-0 pa-0"> <v-list flat class="ma-2 pa-0">
<draggable <draggable
:list="busyTorrentProperties" :list="busyTorrentProperties"
tag="tbody" tag="tbody"
@ -26,23 +14,34 @@
<v-list-item <v-list-item
v-for="(item, index) in busyTorrentProperties" v-for="(item, index) in busyTorrentProperties"
:key="index" :key="index"
style="width: 30vh" class="ma-2 elevation-2 rounded-lg pointer"
> >
<v-checkbox v-model="item.active" dense class="pa-0 ma-0 mt-3" /> <v-checkbox
v-model="item.active"
dense
hide-details
class="pa-0 ma-0"
/>
<v-list-item-content> <v-list-item-content>
<v-list-item-title class="truncate" v-text="item.name" /> <v-list-item-title class="truncate" v-text="item.name" />
</v-list-item-content> </v-list-item-content>
<v-list-item-action>
<v-icon>
{{ mdiMenu }}
</v-icon>
</v-list-item-action>
</v-list-item> </v-list-item>
</draggable> </draggable>
</v-list> </v-list>
</v-row> </v-row>
</v-flex> </v-col>
<v-flex class="box ma-1" xs12 md5>
<v-col cols="12" md="6">
<v-subheader> <v-subheader>
Properties to display for completed torrents Properties to display for completed torrents
</v-subheader> </v-subheader>
<v-row dense> <v-row dense>
<v-list flat class="ma-0 pa-0"> <v-list flat class="ma-2 pa-0">
<draggable <draggable
:list="doneTorrentProperties" :list="doneTorrentProperties"
tag="tbody" tag="tbody"
@ -50,30 +49,42 @@
<v-list-item <v-list-item
v-for="(item, index) in doneTorrentProperties" v-for="(item, index) in doneTorrentProperties"
:key="index" :key="index"
style="width: 30vh" class="ma-2 elevation-2 rounded-lg pointer"
> >
<v-checkbox v-model="item.active" dense class="pa-0 ma-0 mt-3" /> <v-checkbox
v-model="item.active"
dense
hide-details
class="pa-0 ma-0"
/>
<v-list-item-content> <v-list-item-content>
<v-list-item-title class="truncate" v-text="item.name" /> <v-list-item-title class="truncate" v-text="item.name" />
</v-list-item-content> </v-list-item-content>
<v-list-item-action>
<v-icon>
{{ mdiMenu }}
</v-icon>
</v-list-item-action>
</v-list-item> </v-list-item>
</draggable> </draggable>
</v-list> </v-list>
</v-row> </v-row>
</v-flex> </v-col>
</v-layout> </v-row>
</v-card-text>
</v-card> </v-card>
</div>
</template> </template>
<script> <script>
import draggable from 'vuedraggable' import draggable from 'vuedraggable'
import { mdiMenu } from '@mdi/js'
export default { export default {
name: 'Dashboard', name: 'Dashboard',
components: { components: {
draggable draggable
}, },
data: () => ({
mdiMenu
}),
computed: { computed: {
busyTorrentProperties() { busyTorrentProperties() {
return this.$store.state.webuiSettings.busyTorrentProperties return this.$store.state.webuiSettings.busyTorrentProperties
@ -84,7 +95,3 @@ export default {
} }
} }
</script> </script>
<style lang="scss" scoped>
@import '~@/styles/SettingsTab.scss';
</style>