feat: improve the presentation of statistics

CarlosPavajeau · Apr 4, 2021 · 3632408 · 3632408
1 parent 7abca04
commit 3632408
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 72 deletions.
diff --git a/...pp/src/app/modules/statistics/components/today-statistics/today-statistics.component.html b/...pp/src/app/modules/statistics/components/today-statistics/today-statistics.component.html
@@ -29,76 +29,56 @@ <h4 class="text-center empty-list-text">
           </h4>
         </div>
       </div>
-      <div class="center-block-content" *ngIf="obs.value as dayStatistics">
-        <div class="row">
-          <div
-            class="pt-2 pb-2 mt-2 mb-2 mx-auto col-lg-4 col-sm-12 col-xl-4 col-md-6"
-          >
-            <mat-card class="mat-elevation-z3">
-              <mat-card-header>
-                <mat-card-title>Clientes registrados</mat-card-title>
-              </mat-card-header>
-              <mat-card-content>
-                <h2
-                  *ngIf="dayStatistics.clientsRegistered"
-                  class="text-center mat-display-2 statistics-info"
-                >
-                  {{ dayStatistics.clientsRegistered }}
-                </h2>
-              </mat-card-content>
-            </mat-card>
-          </div>
-          <div
-            class="pt-2 pb-2 mt-2 mb-2 mx-auto col-lg-4 col-sm-12 col-xl-4 col-md-6"
-          >
-            <mat-card class="mat-elevation-z3">
-              <mat-card-header>
-                <mat-card-title>Clientes visitados</mat-card-title>
-              </mat-card-header>
-              <mat-card-content>
-                <h2
-                  *ngIf="dayStatistics.clientsVisited"
-                  class="text-center mat-display-2 statistics-info"
-                >
-                  {{ dayStatistics.clientsVisited }}
-                </h2>
-              </mat-card-content>
-            </mat-card>
-          </div>
-          <div
-            class="pt-2 pb-2 mt-2 mb-2 mx-auto col-lg-4 col-sm-12 col-xl-4 col-md-6"
-          >
-            <mat-card class="mat-elevation-z3">
-              <mat-card-header>
-                <mat-card-title>Actividades aplicadas</mat-card-title>
-              </mat-card-header>
-              <mat-card-content>
-                <h2
-                  *ngIf="dayStatistics.appliedActivities"
-                  class="text-center mat-display-2 statistics-info"
-                >
-                  {{ dayStatistics.appliedActivities }}
-                </h2>
-              </mat-card-content>
-            </mat-card>
-          </div>
-          <div
-            class="pt-2 pb-2 mt-2 mb-2 mx-auto col-lg-4 col-sm-12 col-xl-4 col-md-6"
-          >
-            <mat-card class="mat-elevation-z3">
-              <mat-card-header>
-                <mat-card-title>Ganacias del día</mat-card-title>
-              </mat-card-header>
-              <mat-card-content>
-                <h2
-                  *ngIf="dayStatistics.profits"
-                  class="text-center mat-display-1 statistics-info"
-                >
-                  {{ dayStatistics.profits | currency: "COP" }}
-                </h2>
-              </mat-card-content>
-            </mat-card>
-          </div>
+      <div *ngIf="obs.value as dayStatistics">
+        <div class="TodayStatistics__container">
+          <mat-card class="TodayStatistics__card mat-elevation-z0 mr-4 mb-5">
+            <mat-card-header>
+              <mat-card-title>
+                Actividades aplicadas
+              </mat-card-title>
+            </mat-card-header>
+            <mat-card-content>
+              <h2 class="TodayStatistics__card__content text-center mat-display-3">
+                {{ dayStatistics.appliedActivities }}
+              </h2>
+            </mat-card-content>
+          </mat-card>
+          <mat-card class="TodayStatistics__card mat-elevation-z0 mr-4 mb-5">
+            <mat-card-header>
+              <mat-card-title>
+                Clientes visitados
+              </mat-card-title>
+            </mat-card-header>
+            <mat-card-content>
+              <h2 class="TodayStatistics__card__content text-center mat-display-3">
+                {{ dayStatistics.clientsVisited }}
+              </h2>
+            </mat-card-content>
+          </mat-card>
+          <mat-card class="TodayStatistics__card mat-elevation-z0 mr-4 mb-5">
+            <mat-card-header>
+              <mat-card-title>
+                Clientes registrados
+              </mat-card-title>
+            </mat-card-header>
+            <mat-card-content>
+              <h2 class="TodayStatistics__card__content text-center mat-display-3">
+                {{ dayStatistics.clientsRegistered }}
+              </h2>
+            </mat-card-content>
+          </mat-card>
+          <mat-card class="TodayStatistics__card mat-elevation-z0 mr-4 mb-5">
+            <mat-card-header>
+              <mat-card-title>
+                Ganacias del día
+              </mat-card-title>
+            </mat-card-header>
+            <mat-card-content>
+              <h2 class="TodayStatistics__card__content text-center mat-display-3">
+                {{ dayStatistics.profits | currency: "COP":"symbol-narrow" }}
+              </h2>
+            </mat-card-content>
+          </mat-card>
         </div>
       </div>
     </ng-template>

diff --git a/...pp/src/app/modules/statistics/components/today-statistics/today-statistics.component.scss b/...pp/src/app/modules/statistics/components/today-statistics/today-statistics.component.scss
@@ -1,3 +1,21 @@
-.statistics-info {
-  color: var(--arsenic);
+.TodayStatistics__card__content {
+  color: rgba(0, 0, 0, 0.57)
+}
+
+.TodayStatistics__container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+}
+
+@media (min-width: 960px) {
+  .TodayStatistics__container {
+    flex-direction: row;
+  }
+}
+
+.TodayStatistics__card {
+  border: 1px solid rgba(0, 0, 0, 0.12);
 }