0.5.3 (#116)

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "vuetorrent",
-    "version": "0.5.0",
+    "version": "0.5.3",
     "lockfileVersion": 1,
     "requires": true,
     "dependencies": {
@@ -11685,6 +11685,11 @@
             "resolved": "https://registry.npmjs.org/typeface-roboto/-/typeface-roboto-1.1.13.tgz",
             "integrity": "sha512-YXvbd3a1QTREoD+FJoEkl0VQNJoEjewR2H11IjVv4bp6ahuIcw0yyw/3udC4vJkHw3T3cUh85FTg8eWef3pSaw=="
         },
+        "typeface-roboto-mono": {
+            "version": "1.1.13",
+            "resolved": "https://registry.npmjs.org/typeface-roboto-mono/-/typeface-roboto-mono-1.1.13.tgz",
+            "integrity": "sha512-pnzDc70b7ywJHin/BUFL7HZX8DyOTBLT2qxlJ92eH1UJOFcENIBXa9IZrxsJX/gEKjbEDKhW5vz/TKRBNk/ufQ=="
+        },
         "uglify-js": {
             "version": "3.4.10",
             "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.4.10.tgz",

package.json

@@ -1,6 +1,6 @@
 {
     "name": "vuetorrent",
-    "version": "0.5.2",
+    "version": "0.5.3",
     "private": true,
     "scripts": {
         "start": "npm run serve",
@@ -18,6 +18,7 @@
         "lodash": "^4.17.20",
         "register-service-worker": "^1.7.2",
         "typeface-roboto": "^1.1.13",
+        "typeface-roboto-mono": "^1.1.13",
         "uuid": "^8.3.2",
         "vue": "^2.6.12",
         "vue-apexcharts": "^1.6.0",

src/App.vue

@@ -7,7 +7,7 @@
       v-bind="{ guid: modal.guid, ...modal.props }"
     />
     <Navbar v-if="isAuthenticated" />
-    <v-main class="background" fill-height fill-width>
+    <v-main class="background">
       <router-view />
     </v-main>
   </v-app>
@@ -34,7 +34,7 @@ export default {
   created() {
     this.$store.commit('SET_APP_VERSION', version)
     this.checkDeviceDarkTheme()
-    //this.checkAuthenticated()
+    this.checkAuthenticated()
   },
   methods: {
     async checkAuthenticated() {

src/components/Core/SpeedCard.vue

@@ -0,0 +1,47 @@
+<template>
+  <v-card
+    flat
+    color="secondary"
+    class="speedCard"
+  >
+    <v-layout row :class="color + '--text'">
+      <v-flex xs2>
+        <v-icon :color="color" size="16px">
+          {{ icon }}
+        </v-icon>
+      </v-flex>
+      <v-flex xs7 class="text-center font-weight-bold robot-mono">
+        <span>
+          <!--          {{ value | getDataValue(2) }}-->
+          223.45
+        </span>
+      </v-flex>
+      <v-flex
+        xs3
+        class="caption robot-mono text-right mt-1"
+      >
+        <span class="speedUnits">
+          {{ value | getDataUnit(1) }}/s
+        </span>
+      </v-flex>
+    </v-layout>
+  </v-card>
+</template>
+
+<script>
+export default {
+  name: 'SpeedCard',
+  props: ['color', 'icon', 'value']
+}
+</script>
+
+<style scoped>
+.speedCard {
+  padding: 32px 16px !important;
+  font-size: 1.05em;
+}
+
+.speedUnits {
+  font-size:  .8em !important;
+}
+</style>

src/components/Core/StorageCard.vue

@@ -0,0 +1,29 @@
+<template>
+  <v-card flat color="secondary" class="mr-2 ml-2">
+    <v-layout row wrap class="pa-3 mx-auto">
+      <v-flex md6>
+        <div
+          style="margin-top: 6px"
+          :class="color + '--text'"
+        >
+          {{ label }}
+        </div>
+      </v-flex>
+      <v-flex md5 class="ml-4">
+        <span :class="color + '--text title'">
+          {{ value | getDataValue(2) }}
+          <span class="font-weight-light caption">
+            {{ value | getDataUnit }}
+          </span>
+        </span>
+      </v-flex>
+    </v-layout>
+  </v-card>
+</template>
+
+<script>
+export default {
+  name: 'StorageCard',
+  props: ['color', 'label', 'value']
+}
+</script>

src/components/Modals/TorrentDetailModal/Tabs/Info.vue

@@ -36,15 +36,17 @@
                 Size
               </td>
               <td class="torrentmodaltext--text">
-                {{ torrent.size }}
+                {{ torrent.size | getDataValue }}
+                {{ torrent.size | getDataUnit(1) }}
               </td>
             </tr>
             <tr>
               <td class="grey--text">
-                Done:
+                Downloaded:
               </td>
               <td class="torrentmodaltext--text">
-                {{ torrent.dloaded }}
+                {{ torrent.dloaded | getDataValue }}
+                {{ torrent.dloaded | getDataUnit(1) }}
               </td>
             </tr>
             <tr>
@@ -52,7 +54,8 @@
                 Uploaded:
               </td>
               <td class="torrentmodaltext--text">
-                {{ torrent.uploaded }}
+                {{ torrent.uploaded | getDataValue }}
+                {{ torrent.uploaded | getDataUnit(1) }}
               </td>
             </tr>
             <tr>
@@ -68,7 +71,8 @@
                 Download Speed
               </td>
               <td class="torrentmodaltext--text">
-                {{ torrent.dlspeed }}
+                {{ torrent.dlspeed | getDataValue }}
+                {{ torrent.dlspeed | getDataUnit(1) }}
               </td>
             </tr>
             <tr>
@@ -76,7 +80,8 @@
                 Upload Speed
               </td>
               <td class="torrentmodaltext--text">
-                {{ torrent.upspeed }}
+                {{ torrent.upspeed | getDataValue }}
+                {{ torrent.upspeed | getDataUnit(1) }}
               </td>
             </tr>
             <tr>

src/components/Navbar/CurrentSpeed.vue

@@ -3,49 +3,25 @@
     <div class="text-uppercase white--text caption ml-4 font-weight-medium">
       current speed
     </div>
-    <v-card color="secondary" flat class="mr-2 ml-2">
-      <v-layout row wrap class="py-3 px-1 mt-1 project mx-auto text-center">
-        <v-flex xs6>
-          <v-icon color="download" size="16px">
-            {{ mdiChevronDown }}
-          </v-icon>
-          <span
-            class="download--text title"
-            style="font-size: 1.1em !important;"
-          >
-            {{ status.dlspeed | getDataValue(1) }}
-            <span class="font-weight-light caption font-weight-regular">
-              {{ status.dlspeed | getDataUnit(1) }}/s
-            </span>
-          </span>
-        </v-flex>
-        <v-flex xs6>
-          <v-icon
-            class="pl-2"
-            color="upload"
-            size="24px"
-          >
-            {{ mdiChevronUp }}
-          </v-icon>
-          <span
-            class="upload--text title"
-            style="font-size: 1.1em !important;"
-          >
-            {{ status.upspeed | getDataValue(1) }}
-            <span class="font-weight-light caption font-weight-regular">
-              {{ status.upspeed | getDataUnit }}/s
-            </span>
-          </span>
-        </v-flex>
-      </v-layout>
-    </v-card>
+    <v-row dense class="mx-1 pt-1">
+      <v-col>
+        <SpeedCard :icon="mdiChevronDown" color="download" :value="status.dlspeed" />
+      </v-col>
+      <v-col>
+        <SpeedCard :icon="mdiChevronUp" color="upload" :value="status.upspeed" />
+      </v-col>
+    </v-row>
   </div>
 </template>
 
 <script>
 import { mdiChevronUp, mdiChevronDown } from '@mdi/js'
+import SpeedCard from '@/components/Core/SpeedCard'
 export default {
   name: 'CurrentSpeed',
+  components: {
+    SpeedCard
+  },
   props: ['status'],
   data: () => ({
     mdiChevronUp,

src/components/Navbar/FreeSpace.vue

@@ -1,29 +1,22 @@
 <template>
-  <v-card flat color="secondary" class="mr-2 ml-2 mt-8 mb-4">
-    <v-layout row wrap class="pa-3 py-6 project mx-auto">
-      <v-flex md6>
-        <div
-          style="margin-top: 6px"
-          class="upload--text"
-        >
-          Free Space
-        </div>
-      </v-flex>
-      <v-flex v-if="space" md5 class="ml-4">
-        <span class="upload--text title">
-          {{ space | getDataValue }}
-          <span class="font-weight-light caption">
-            {{ space | getDataUnit }}
-          </span>
-        </span>
-      </v-flex>
-    </v-layout>
-  </v-card>
+  <div v-if="space" class="mt-3 mb-4">
+    <StorageCard
+      v-if="space"
+      class="mt-8"
+      label="Free Space"
+      color="upload"
+      :value="space"
+    />
+  </div>
 </template>
 
 <script>
+import StorageCard from '@/components/Core/StorageCard' 
 export default {
   name: 'FreeSpace',
+  components: {
+    StorageCard
+  },
   props: ['space']
 }
 </script>

src/components/Navbar/SessionStats.vue

@@ -3,53 +3,37 @@
     <label class="text-uppercase white--text caption font-weight-medium ml-4">
       Session Stats
     </label>
-    <v-card flat color="secondary" class="mr-2 ml-2 mb-4">
-      <v-layout row wrap class="pa-3 mt-1 project mx-auto">
-        <v-flex md6>
-          <div
-            style="margin-top: 6px"
-            class="download--text"
-          >
-            Downloaded
-          </div>
-        </v-flex>
-        <v-flex md5 class="ml-4">
-          <span class="download--text title">
-            {{ status.downloaded | getDataValue }}
-            <span class="font-weight-light caption">
-              {{ status.downloaded | getDataUnit }}
-            </span>
-          </span>
-        </v-flex>
-      </v-layout>
-    </v-card>
-    <v-card flat color="secondary" class="ml-2 mr-2">
-      <v-layout row wrap class="pa-3 mt-1 project mx-auto">
-        <v-flex md6>
-          <div
-            style="margin-top: 6px"
-            class="upload--text"
-          >
-            Uploaded
-          </div>
-        </v-flex>
-        <v-flex md5 class="ml-4">
-          <span class="upload--text title">
-            {{ status.uploaded | getDataValue(1) }}
-            <span class="font-weight-light caption">
-              {{ status.uploaded | getDataUnit(1) }}
-            </span>
-          </span>
-        </v-flex>
-      </v-layout>
-    </v-card>
+    <v-tooltip bottom>
+      <template #activator="{ on }">
+        <v-icon
+          color="white"
+          style="opacity: 0.3;"
+          small
+          v-on="on"
+        >
+          {{ mdiInformationOutline }}
+        </v-icon>
+      </template>
+      <span>Since the last time qBittorrent was restarted</span>
+    </v-tooltip>
+    <StorageCard
+      class="mb-4 mt-4"
+      label="Downloaded"
+      color="download"
+      :value="status.downloaded"
+    />
+    <StorageCard label="Uploaded" color="upload" :value="status.uploaded" />
   </div>
 </template>
 
 <script>
+import { mdiInformationOutline } from '@mdi/js'
+import StorageCard from '@/components/Core/StorageCard'
 export default {
   name: 'SessionStats',
-  props: ['status']
+  components: { StorageCard },
+  props: ['status'],
+  data: () => ({ mdiInformationOutline })
 }
 </script>
 

src/components/Torrent/MobileCard.vue

@@ -5,8 +5,8 @@
     class="ma-0 pa-1"
     :class="style"
   >
-    <v-flex xs12 class="ma-1 mt-0" row>
-      <span class="subtitle-1" style="line-height: 1.3em;">
+    <v-flex xs12 class="ma-1" row>
+      <span class="subtitle-1" style="line-height: 1.3em; font-size: .95em !important;">
         {{ torrent.name }}
       </span>
     </v-flex>
@@ -15,6 +15,7 @@
         small
         class="caption white--text mr-2"
         :class="torrent.state.toLowerCase()"
+        style="height: 20px;"
       >
         {{ torrent.state }}
       </v-chip>
@@ -22,6 +23,7 @@
         v-if="torrent.category"
         small
         class="upload caption white--text"
+        style="height: 20px;"
       >
         {{ torrent.category }}
       </v-chip>
@@ -30,36 +32,47 @@
       <span class="body-2"> {{ torrent.dloaded | getDataValue }} </span>
       <span class="grey--text caption ml-1"> {{ torrent.dloaded | getDataUnit }} / </span>
       <span class="body-2 ml-1"> {{ torrent.size | getDataValue }} </span>
-      <span class="grey--text caption ml-1"> {{ torrent.size | getDataUnit }} - </span>
-      <span class="grey--text caption ml-1"> Ratio: </span>
-      <span class="body-2 ml-1"> {{ torrent.ratio }} - </span>
-      <span class="grey--text caption ml-1"> ETA: </span>
-      <span class="body-2 ml-1"> {{ torrent.eta }} </span>
-      <v-spacer />
+      <span class="grey--text caption ml-1"> {{ torrent.size | getDataUnit }}</span>
+      <span class="mx-1 grey--text" style="margin-top: 3px">•</span>
       <span class="body-2">{{ torrent.progress }}</span>
-      <span class="grey--text caption">%</span>
+      <span class="grey--text caption ml-1">%</span>
+      <span class="mx-1 grey--text" style="margin-top: 3px">•</span>
+      <span class="grey--text caption"> Ratio: </span>
+      <span class="body-2 ml-1"> {{ torrent.ratio }} </span>
+      <v-spacer />
+      <span class="body-2 ml-1"> {{ torrent.eta }} </span>
     </v-flex>
-    <v-flex xs12 class="mt-1 mb-1">
-      <v-progress-linear color="upload" :value="torrent.progress" />
+    <v-flex xs12 class="ma-1">
+      <v-progress-linear
+        rounded
+        color="upload"
+        height="5"
+        :value="torrent.progress"
+      />
     </v-flex>
     <v-flex row xs12 class="ma-1">
       <div class="caption grey--text">
         {{ torrent.num_seeds }}/{{ torrent.available_seeds }} seeds
       </div>
-      <div class="caption grey--text ml-2">
+      <span class="mx-1 grey--text" style="margin-top: 2px">•</span>
+      <div class="caption grey--text">
         {{ torrent.num_leechs }}/{{ torrent.available_peers }} peers
       </div>
       <v-spacer />
-      <div class="caption grey--text">
+      <div>
         <span v-if="torrent.dlspeed">
           <v-icon small class="grey--text">
             {{ mdiChevronDown }}
-          </v-icon> {{ torrent.dlspeed | getDataValue(1) }} {{ torrent.dlspeed | getDataUnit(1) }}/s
+          </v-icon> 
+          <span class="caption font-weight-medium grey--text">{{ torrent.dlspeed | getDataValue(1) }} </span>
+          <span class="caption grey--text" style="font-size: 0.6em !important;">  {{ torrent.dlspeed | getDataUnit(1) }}/s </span>
         </span>
         <span v-if="torrent.upspeed">
           <v-icon small class="grey--text">
             {{ mdiChevronUp }}
-          </v-icon> {{ torrent.upspeed | getDataValue(1) }} {{ torrent.upspeed | getDataUnit(1) }}/s
+          </v-icon> 
+          <span class="caption font-weight-medium grey--text">{{ torrent.upspeed | getDataValue(1) }} </span>
+          <span class="caption grey--text" style="font-size: 0.6em !important;"> {{ torrent.upspeed | getDataUnit(1) }}/s </span>
         </span>
       </div>
     </v-flex>

src/main.js

@@ -5,6 +5,7 @@ import router from '@/router'
 import store from '@/store'
 import '@babel/polyfill'
 import 'typeface-roboto'
+import 'typeface-roboto-mono'
 
 /* eslint-disable no-unused-vars */
 import filters from '@/filters'

src/styles/styles.scss

@@ -1,34 +1,36 @@
 @import "~@/styles/colors.scss";
 
+$sideborder-margin: 5px;
+
 .sideborder.done {
-    border-left: 4px solid #{$torrent-done};
+    border-left: #{$sideborder-margin} solid #{$torrent-done};
 }
 .sideborder.downloading {
-    border-left: 4px solid #{$torrent-downloading};
+    border-left: #{$sideborder-margin} solid #{$torrent-downloading};
 }
 .sideborder.fail {
-    border-left: 4px solid #{$torrent-fail};
+    border-left: #{$sideborder-margin} solid #{$torrent-fail};
 }
 .sideborder.paused {
-    border-left: 4px solid #{$torrent-paused};
+    border-left: #{$sideborder-margin} solid #{$torrent-paused};
 }
 .sideborder.queued {
-    border-left: 4px solid #{$torrent-queued};
+    border-left: #{$sideborder-margin} solid #{$torrent-queued};
 }
 .sideborder.seeding {
-    border-left: 4px solid #{$torrent-seeding};
+    border-left: #{$sideborder-margin} solid #{$torrent-seeding};
 }
 .sideborder.checking {
-    border-left: 4px solid #{$torrent-checking};
+    border-left: #{$sideborder-margin} solid #{$torrent-checking};
 }
 .sideborder.stalled {
-    border-left: 4px solid #{$torrent-stalled};
+    border-left: #{$sideborder-margin} solid #{$torrent-stalled};
 }
 .sideborder.metadata {
-    border-left: 4px solid #{$torrent-metadata};
+    border-left: #{$sideborder-margin} solid #{$torrent-metadata};
 }
 .sideborder.moving {
-    border-left: 4px solid #{$torrent-moving};
+    border-left: #{$sideborder-margin} solid #{$torrent-moving};
 }
 .v-chip.done {
     background: #{$torrent-done} !important;
@@ -99,6 +101,11 @@
     text-overflow: ellipsis;
 }
 
+.robot-mono {
+    font-family: 'Roboto Mono', sans-serif;
+    letter-spacing: 0;
+}
+
 body {
     &::-webkit-scrollbar {
         width: 6px;

src/views/Login.vue

@@ -1,11 +1,5 @@
 <template>
-  <v-layout
-    row
-    wrap
-    align-center
-    style="height: 100vh"
-    class="justify-center background"
-  >
+  <v-layout class="background mt-5">
     <div style="margin: 130px auto">
       <v-card max-width="400" flat>
         <v-card-title class="justify-center">