From b034452378d1ee51c3b0baf0ff12d790a9440178 Mon Sep 17 00:00:00 2001
From: Douglas Barone <douglasvbarone@gmail.com>
Date: Wed, 12 Jul 2023 13:08:06 -0400
Subject: [PATCH] Layout improvements

---
 web/src/components/PrinterCounterChart.vue |  4 +-
 web/src/components/PrinterTonerChart.vue   |  4 +-
 web/src/views/Printer.vue                  | 43 +++++++++++++---------
 3 files changed, 29 insertions(+), 22 deletions(-)

diff --git a/web/src/components/PrinterCounterChart.vue b/web/src/components/PrinterCounterChart.vue
index bc4f340..a6020b0 100644
--- a/web/src/components/PrinterCounterChart.vue
+++ b/web/src/components/PrinterCounterChart.vue
@@ -1,11 +1,11 @@
 <template>
-  <v-card>
+  <v-card title="Contador" prepend-icon="mdi-counter">
     <apexchart
       type="line"
       :options="chartOptions"
       :series="chartSeries"
       width="100%"
-      height="300px"
+      height="250px"
     />
   </v-card>
 </template>
diff --git a/web/src/components/PrinterTonerChart.vue b/web/src/components/PrinterTonerChart.vue
index 48480bd..a388ece 100644
--- a/web/src/components/PrinterTonerChart.vue
+++ b/web/src/components/PrinterTonerChart.vue
@@ -1,11 +1,11 @@
 <template>
-  <v-card>
+  <v-card title="Toner" prepend-icon="mdi-liquid-spot">
     <apexchart
       type="line"
       :options="chartOptions"
       :series="chartSeries"
       width="100%"
-      height="300px"
+      height="250px"
     />
   </v-card>
 </template>
diff --git a/web/src/views/Printer.vue b/web/src/views/Printer.vue
index b422373..0f4eb14 100644
--- a/web/src/views/Printer.vue
+++ b/web/src/views/Printer.vue
@@ -6,30 +6,37 @@
       </v-col>
     </v-row>
     <v-row>
-      <v-col>
-        <printer-toner-chart v-if="printer" :status="printer?.status" />
-      </v-col>
-      <v-col>
-        <printer-counter-chart v-if="printer" :status="printer?.status" />
-      </v-col>
-    </v-row>
-    <v-row v-if="printer?.avgMonthPrint">
-      <v-col>
-        <v-card>
-          <v-card-title class="font-weight-regular">
-            Média mensal de impressões
-          </v-card-title>
-
-          <v-card-text>
-            <span class="text-h3">
+      <v-col v-if="printer?.avgMonthPrint" cols="12" lg="4">
+        <v-card
+          class="fill-height"
+          title="Média mensal de impressões"
+          prepend-icon="mdi-file-document-multiple-outline"
+        >
+          <v-card-text class="text-center align-stretch">
+            <div class="text-h2 my-6">
               {{
                 new Intl.NumberFormat('pt-BR').format(printer?.avgMonthPrint)
               }}
-            </span>
-            <div>Baseado nos dados dos últimos 180 dias</div>
+            </div>
+
+            <small>Baseado nos dados dos últimos 180 dias</small>
           </v-card-text>
         </v-card>
       </v-col>
+      <v-col cols="12" md="6" lg="4">
+        <printer-toner-chart
+          v-if="printer"
+          :status="printer?.status"
+          class="fill-height"
+        />
+      </v-col>
+      <v-col cols="12" md="6" lg="4">
+        <printer-counter-chart
+          v-if="printer"
+          :status="printer?.status"
+          class="fill-height"
+        />
+      </v-col>
     </v-row>
   </v-container>
 </template>