From 95815ca21a4aae5a2782ed5e6cdd2611d0757cca Mon Sep 17 00:00:00 2001
From: Craig Bassett <craig.bassett@gmail.com>
Date: Fri, 2 Apr 2021 16:17:29 -0500
Subject: [PATCH] feat: adjust print stats layout for tablet & down

Signed-off-by: Craig Bassett <craig.bassett@gmail.com>
---
 .../widgets/stats/PrinterStatsCard.vue           | 16 ++++++++++++----
 todo.md                                          |  2 +-
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/components/widgets/stats/PrinterStatsCard.vue b/src/components/widgets/stats/PrinterStatsCard.vue
index b57228e2e8..3e09d3167f 100644
--- a/src/components/widgets/stats/PrinterStatsCard.vue
+++ b/src/components/widgets/stats/PrinterStatsCard.vue
@@ -16,6 +16,7 @@
           class="my-1"
         >
         </v-progress-linear>
+
         <v-layout justify-space-between>
           <div class="grey--text">
             <span class="focus--text">
@@ -31,7 +32,7 @@
       </div>
 
       <v-row v-if="supportsHistoryPlugin">
-        <v-col cols="3">
+        <v-col :cols="breakpoint">
           <v-card outlined class="px-2 py-1 text-center stat-square">
             <div class="grey--text text--darken-2">{{ $t('app.general.label.total_jobs') }}</div>
             <div class="grey--text focus--text">{{ rollup.total_jobs }}</div>
@@ -39,7 +40,7 @@
             <div class="grey--text focus--text">{{ $filters.formatCounterTime(rollup.longest_job) }}</div>
           </v-card>
         </v-col>
-        <v-col cols="3">
+        <v-col :cols="breakpoint">
           <v-card outlined class="px-2 py-1 text-center stat-square">
             <div class="grey--text text--darken-2">{{ $t('app.general.label.total_time') }}</div>
             <div class="grey--text focus--text">{{ $filters.formatCounterTime(rollup.total_time) }}</div>
@@ -47,7 +48,7 @@
             <div class="grey--text focus--text">{{ $filters.formatCounterTime(rollup.total_avg) }}</div>
           </v-card>
         </v-col>
-        <v-col cols="3">
+        <v-col :cols="breakpoint">
           <v-card outlined class="px-2 py-1 text-center stat-square">
             <div class="grey--text text--darken-2">{{ $t('app.general.label.total_print_time') }}</div>
             <div class="grey--text focus--text">{{ $filters.formatCounterTime(rollup.total_print_time) }}</div>
@@ -55,7 +56,7 @@
             <div class="grey--text focus--text">{{ $filters.formatCounterTime(rollup.print_avg) }}</div>
           </v-card>
         </v-col>
-        <v-col cols="3">
+        <v-col :cols="breakpoint">
           <v-card outlined class="px-2 py-1 text-center stat-square">
             <div class="grey--text text--darken-2">{{ $t('app.general.label.total_filament') }}</div>
             <div class="grey--text focus--text">{{ $filters.getReadableLengthString(rollup.total_filament_used) }}</div>
@@ -78,6 +79,13 @@ import JobHistory from '@/components/widgets/history/JobHistory.vue'
   }
 })
 export default class PrinterStatsCard extends Vue {
+  get breakpoint () {
+    if (this.$vuetify.breakpoint.mdAndDown) {
+      return 6
+    }
+    return 3
+  }
+
   get rollup () {
     return this.$store.getters['history/getRollUp']
   }
diff --git a/todo.md b/todo.md
index 3de7043bb8..b2cba3e35a 100644
--- a/todo.md
+++ b/todo.md
@@ -3,7 +3,7 @@
 ## Next Up
 
 - fix filament lengths on history tab
-- impl new component reset
+- impl new version recovery
 
 ### Features