Layout improvements

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>

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>

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>