From bc2b71db6fd6b04a63eb50d730d15ef0b8b6756a Mon Sep 17 00:00:00 2001
From: mpuebla <mpuebla@focasoftware.com>
Date: Thu, 5 Sep 2019 16:26:57 -0300
Subject: [PATCH] Cambio en vista de pedidos salientes.

---
 .../pedidos-salientes.component.html               | 33 +++++++---
 .../pedidos-salientes.component.scss               |  4 ++
 .../pedidos-salientes.component.ts                 | 11 ++--
 src/assets/scss/animation.scss                     | 75 ++++++++++++++++++++++
 4 files changed, 108 insertions(+), 15 deletions(-)

diff --git a/src/app/components/pedidos-salientes/pedidos-salientes.component.html b/src/app/components/pedidos-salientes/pedidos-salientes.component.html
index fedc0bc..db45dca 100644
--- a/src/app/components/pedidos-salientes/pedidos-salientes.component.html
+++ b/src/app/components/pedidos-salientes/pedidos-salientes.component.html
@@ -1,16 +1,31 @@
 <div class="bg-primary-gradient vh-100">
   <div class="d-flex justify-content-center">
-    <div class="row my-5 text-white text-center">
-      <h1 class="col-12">Su pedido ya esta listo.</h1>
-      <h2 class="col-12 mt-3">Nº de Pedido</h2>
+    <div class="row m-5 text-white text-center">
 
-      <h1 *ngIf="pedidosRecientes.length" class="col-12 border rounded">
-        {{rellenar(pedidosRecientes[0].id, 2)}}
-      </h1>
+      <div class="col-12 p-0">
+        <p class="h1 m-0">Su pedido ya esta listo.</p>
+        <p class="h2 m-0">Nº de Pedido</p>
+      </div>
+
+      <div
+        *ngIf="pedidosRecientes.length"
+        class="col-12 p-2">
+        <div class="border rounded shadow h-big">
+          <div class="font-weight-bold heartbeat m-0 h-100">
+            {{rellenar(pedidosRecientes[0].id, 2)}}
+          </div>
+        </div>
+      </div>
+
+      <div
+        *ngFor="let pedido of pedidosRecientes; let i = index"
+        [hidden]="i == 0 || i > 8"
+        class="col-3 p-2">
+        <p class="font-weight-bold display-1 m-0 py-1 border rounded shadow">
+          {{rellenar(pedido.id, 2)}}
+        </p>
+      </div>
 
-      <h2 *ngFor="let pedido of pedidosRecientes; let i = index" [hidden]="i == 0" class="col-4 border rounded mx-0">
-        {{rellenar(pedido.id, 2)}}
-      </h2>
     </div>
   </div>
 </div>
diff --git a/src/app/components/pedidos-salientes/pedidos-salientes.component.scss b/src/app/components/pedidos-salientes/pedidos-salientes.component.scss
index e69de29..71adbcf 100644
--- a/src/app/components/pedidos-salientes/pedidos-salientes.component.scss
+++ b/src/app/components/pedidos-salientes/pedidos-salientes.component.scss
@@ -0,0 +1,4 @@
+.h-big {
+  font-size: 24vh;
+  height: 35vh;
+}
diff --git a/src/app/components/pedidos-salientes/pedidos-salientes.component.ts b/src/app/components/pedidos-salientes/pedidos-salientes.component.ts
index cc7fa3b..96e8748 100644
--- a/src/app/components/pedidos-salientes/pedidos-salientes.component.ts
+++ b/src/app/components/pedidos-salientes/pedidos-salientes.component.ts
@@ -28,18 +28,17 @@ export class PedidosSalientesComponent implements OnInit {
 
   buscar() {
 
-    this.comandaService
-    .getPendientesEntrega()
-    .subscribe((pedidos: []) => {
+    this.comandaService.getPendientesEntrega()
+      .subscribe((pedidos: []) => {
 
-      this.pedidosRecientes = pedidos;
-    }, console.log);
+        this.pedidosRecientes = pedidos;
+      }, console.log);
   }
 
   rellenar(relleno, longitud) {
     relleno = '' + relleno;
     while (relleno.length < longitud) {
-        relleno = '0' + relleno;
+      relleno = '0' + relleno;
     }
     return relleno;
   }
diff --git a/src/assets/scss/animation.scss b/src/assets/scss/animation.scss
index 79f75bf..ecc79a1 100644
--- a/src/assets/scss/animation.scss
+++ b/src/assets/scss/animation.scss
@@ -175,3 +175,78 @@
     opacity: 1;
   }
 }
+
+.heartbeat {
+  -webkit-animation: heartbeat 1.5s ease-in-out infinite both;
+  animation: heartbeat 1.5s ease-in-out infinite both;
+}
+
+@-webkit-keyframes heartbeat {
+  from {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+    -webkit-transform-origin: center center;
+    transform-origin: center center;
+    -webkit-animation-timing-function: ease-out;
+    animation-timing-function: ease-out;
+  }
+  10% {
+    -webkit-transform: scale(0.91);
+    transform: scale(0.91);
+    -webkit-animation-timing-function: ease-in;
+    animation-timing-function: ease-in;
+  }
+  17% {
+    -webkit-transform: scale(0.98);
+    transform: scale(0.98);
+    -webkit-animation-timing-function: ease-out;
+    animation-timing-function: ease-out;
+  }
+  33% {
+    -webkit-transform: scale(0.87);
+    transform: scale(0.87);
+    -webkit-animation-timing-function: ease-in;
+    animation-timing-function: ease-in;
+  }
+  45% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+    -webkit-animation-timing-function: ease-out;
+    animation-timing-function: ease-out;
+  }
+}
+
+@keyframes heartbeat {
+  from {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+    -webkit-transform-origin: center center;
+    transform-origin: center center;
+    -webkit-animation-timing-function: ease-out;
+    animation-timing-function: ease-out;
+  }
+  10% {
+    -webkit-transform: scale(0.91);
+    transform: scale(0.91);
+    -webkit-animation-timing-function: ease-in;
+    animation-timing-function: ease-in;
+  }
+  17% {
+    -webkit-transform: scale(0.98);
+    transform: scale(0.98);
+    -webkit-animation-timing-function: ease-out;
+    animation-timing-function: ease-out;
+  }
+  33% {
+    -webkit-transform: scale(0.87);
+    transform: scale(0.87);
+    -webkit-animation-timing-function: ease-in;
+    animation-timing-function: ease-in;
+  }
+  45% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+    -webkit-animation-timing-function: ease-out;
+    animation-timing-function: ease-out;
+  }
+}
-- 
1.9.1