feat: adjust print stats layout for tablet & down

Signed-off-by: Craig Bassett <[email protected]>
fluidd-core · Apr 5, 2021 · 95815ca · 95815ca
1 parent 6631c44
commit 95815ca
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 5 deletions.
diff --git 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,31 +32,31 @@
       </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>
             <div class="grey--text text--darken-2">{{ $t('app.general.label.longest_job') }}</div>
             <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>
             <div class="grey--text text--darken-2">{{ $t('app.general.label.total_time_avg') }}</div>
             <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>
             <div class="grey--text text--darken-2">{{ $t('app.general.label.total_print_time_avg') }}</div>
             <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
@@ -3,7 +3,7 @@
 ## Next Up
 
 - fix filament lengths on history tab
-- impl new component reset
+- impl new version recovery
 
 ### Features