set version + torrent border radius fix

package.json

@@ -1,6 +1,6 @@
 {
     "name": "vuetorrent",
-    "version": "0.3.4",
+    "version": "0.3.5",
     "private": true,
     "scripts": {
         "serve": "vue-cli-service serve",

src/assets/styles.scss

@@ -17,31 +17,31 @@
     }
 }
 
-.project.done {
+.sideborder.done {
     border-left: 4px solid #3cd1c2;
 }
-.project.busy {
+.sideborder.busy {
     border-left: 4px solid #ffaa2c;
 }
-.project.fail {
+.sideborder.fail {
     border-left: 4px solid #f83e70;
 }
-.project.paused {
+.sideborder.paused {
     border-left: 4px solid #cfd8dc;
 }
-.project.queued {
+.sideborder.queued {
     border-left: 4px solid #2e5eaa;
 }
-.project.seeding {
+.sideborder.seeding {
     border-left: 4px solid #26a69a;
 }
-.project.checking {
+.sideborder.checking {
     border-left: 4px solid #ff7043;
 }
-.project.stalled {
+.sideborder.stalled {
     border-left: 4px solid #81c784;
 }
-.project.metadata {
+.sideborder.metadata {
     border-left: 4px solid #7e57c2;
 }
 .v-chip.done {

src/components/Torrent.vue

@@ -3,18 +3,13 @@
         ripple
         flat
         class="pointer torrent noselect"
-        :class="containsTorrent(torrent.hash) ? 'torrent_selected' : ''"
+        :class="{ torrent_selected: containsTorrent(torrent.hash) }"
         @click.native="selectTorrent(torrent.hash)"
         @dblclick.prevent="showInfo(torrent.hash)"
     >
         <v-tooltip top>
             <template v-slot:activator="{ on }">
-                <v-layout
-                    v-on="on"
-                    row
-                    wrap
-                    :class="`pa-4 ml-0 project ${torrent.state}`"
-                >
+                <v-layout v-on="on" row wrap :class="style">
                     <v-flex xs12 sm2 md3>
                         <div class="caption grey--text">Torrent title</div>
                         <div class="truncate">{{ torrent.name }}</div>
@@ -126,7 +121,7 @@
             </template>
             <span>{{ torrent.name }}</span>
         </v-tooltip>
-        <v-divider></v-divider>
+        <v-divider v-if="index !== length"></v-divider>
     </v-card>
 </template>
 
@@ -140,7 +135,9 @@ export default {
     mixins: [General],
 
     props: {
-        torrent: Object
+        torrent: Object,
+        index: Number,
+        length: Number
     },
     computed: {
         chips() {
@@ -155,6 +152,12 @@ export default {
         ...mapGetters(['getTheme']),
         theme() {
             return this.getTheme() ? 'dark' : 'light'
+        },
+        style() {
+            let base = `pa-4 ml-0 sideborder ${this.torrent.state} `
+            if (this.index === this.length) base += ' bottomBorderRadius'
+            if (this.index === 0) base += ' topBorderRadius'
+            return base
         }
     },
     methods: {
@@ -232,3 +235,12 @@ export default {
     }
 }
 </script>
+
+<style lang="scss" scoped>
+.topBorderRadius {
+    border-top-left-radius: 3px;
+}
+.bottomBorderRadius {
+    border-bottom-left-radius: 3px;
+}
+</style>

src/views/Dashboard.vue

@@ -32,10 +32,20 @@
             <div v-else>
                 <div
                     @contextmenu.prevent="$refs.menu.open($event, { torrent })"
-                    v-for="torrent in torrents"
+                    v-for="(torrent, index) in torrents"
                     :key="torrent.hash"
                 >
-                    <Torrent :torrent="torrent" />
+                    <Torrent
+                        :class="{
+                            topBorderRadius: index === 0,
+                            noBorderRadius:
+                                index !== 0 && index !== torrent.length - 1,
+                            bottomBorderRadius: index === torrents.length - 1
+                        }"
+                        :torrent="torrent"
+                        :index="index"
+                        :length="torrents.length - 1"
+                    />
                 </div>
             </div>
         </v-container>
@@ -114,4 +124,16 @@ export default {
         padding: 0;
     }
 }
+.topBorderRadius {
+    border-top-left-radius: 3px !important;
+    border-top-right-radius: 3px !important;
+    border-bottom-right-radius: 0px !important;
+}
+.noBorderRadius {
+    border-radius: 0 !important;
+}
+.bottomBorderRadius {
+    border-bottom-left-radius: 3px !important;
+    border-bottom-right-radius: 3px !important;
+}
 </style>