mirrors/VueTorrent
1
0
Fork 0
mirror of https://github.com/VueTorrent/VueTorrent.git synced 2025-04-03 23:35:10 +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

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

@ -1,79 +1,90 @@
<template> <template>
<div class="ma-3 pa-2"> <v-card flat>
<v-card flat> <v-row dense>
<v-card-text class="pa-0"> <v-col cols="12" md="6">
<v-layout <v-subheader>
row Properties to display for busy torrents
wrap </v-subheader>
align-center <v-row dense>
justify-center <v-list flat class="ma-2 pa-0">
> <draggable
<v-flex :list="busyTorrentProperties"
class="box ma-1" tag="tbody"
style="width:50px !important;" >
xs12 <v-list-item
md5 v-for="(item, index) in busyTorrentProperties"
> :key="index"
<v-subheader> class="ma-2 elevation-2 rounded-lg pointer"
Properties to display for busy torrents >
</v-subheader> <v-checkbox
<v-row dense> v-model="item.active"
<v-list flat class="ma-0 pa-0"> dense
<draggable hide-details
:list="busyTorrentProperties" class="pa-0 ma-0"
tag="tbody" />
> <v-list-item-content>
<v-list-item <v-list-item-title class="truncate" v-text="item.name" />
v-for="(item, index) in busyTorrentProperties" </v-list-item-content>
:key="index" <v-list-item-action>
style="width: 30vh" <v-icon>
> {{ mdiMenu }}
<v-checkbox v-model="item.active" dense class="pa-0 ma-0 mt-3" /> </v-icon>
<v-list-item-content> </v-list-item-action>
<v-list-item-title class="truncate" v-text="item.name" /> </v-list-item>
</v-list-item-content> </draggable>
</v-list-item> </v-list>
</draggable> </v-row>
</v-list> </v-col>
</v-row>
</v-flex> <v-col cols="12" md="6">
<v-flex class="box ma-1" xs12 md5> <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-2 pa-0">
<v-list flat class="ma-0 pa-0"> <draggable
<draggable :list="doneTorrentProperties"
:list="doneTorrentProperties" tag="tbody"
tag="tbody" >
> <v-list-item
<v-list-item v-for="(item, index) in doneTorrentProperties"
v-for="(item, index) in doneTorrentProperties" :key="index"
:key="index" class="ma-2 elevation-2 rounded-lg pointer"
style="width: 30vh" >
> <v-checkbox
<v-checkbox v-model="item.active" dense class="pa-0 ma-0 mt-3" /> v-model="item.active"
<v-list-item-content> dense
<v-list-item-title class="truncate" v-text="item.name" /> hide-details
</v-list-item-content> class="pa-0 ma-0"
</v-list-item> />
</draggable> <v-list-item-content>
</v-list> <v-list-item-title class="truncate" v-text="item.name" />
</v-row> </v-list-item-content>
</v-flex> <v-list-item-action>
</v-layout> <v-icon>
</v-card-text> {{ mdiMenu }}
</v-card> </v-icon>
</div> </v-list-item-action>
</v-list-item>
</draggable>
</v-list>
</v-row>
</v-col>
</v-row>
</v-card>
</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>