mirror of
https://github.com/VueTorrent/VueTorrent.git
synced 2025-03-31 05:43:33 +03:00
fix: Settings>VueTorrent>Dashboard layout & UX
Layout improvements
This commit is contained in:
parent
53c548b502
commit
d93e540a71
1 changed files with 77 additions and 70 deletions
|
@ -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>
|
|
Loading…
Add table
Reference in a new issue