Martin Macola / autoservicio

Download as
Browse Code »

Commit bc2b71db6fd6b04a63eb50d730d15ef0b8b6756a

Authored by Marcelo Puebla
1 parent 569a98e9fa
Exists in master

Cambio en vista de pedidos salientes.

Showing 4 changed files with 108 additions and 15 deletions   Show diff stats
src/app/components/pedidos-salientes/pedidos-salientes.component.html
Diff comments   View file @ bc2b71d
1 1 <div class="bg-primary-gradient vh-100">
2 2 <div class="d-flex justify-content-center">
3   - <div class="row my-5 text-white text-center">
4   - <h1 class="col-12">Su pedido ya esta listo.</h1>
5   - <h2 class="col-12 mt-3">Nº de Pedido</h2>
  3 + <div class="row m-5 text-white text-center">
6 4  
7   - <h1 *ngIf="pedidosRecientes.length" class="col-12 border rounded">
8   - {{rellenar(pedidosRecientes[0].id, 2)}}
9   - </h1>
  5 + <div class="col-12 p-0">
  6 + <p class="h1 m-0">Su pedido ya esta listo.</p>
  7 + <p class="h2 m-0">Nº de Pedido</p>
  8 + </div>
  9 +
  10 + <div
  11 + *ngIf="pedidosRecientes.length"
  12 + class="col-12 p-2">
  13 + <div class="border rounded shadow h-big">
  14 + <div class="font-weight-bold heartbeat m-0 h-100">
  15 + {{rellenar(pedidosRecientes[0].id, 2)}}
  16 + </div>
  17 + </div>
  18 + </div>
  19 +
  20 + <div
  21 + *ngFor="let pedido of pedidosRecientes; let i = index"
  22 + [hidden]="i == 0 || i > 8"
  23 + class="col-3 p-2">
  24 + <p class="font-weight-bold display-1 m-0 py-1 border rounded shadow">
  25 + {{rellenar(pedido.id, 2)}}
  26 + </p>
  27 + </div>
10 28  
11   - <h2 *ngFor="let pedido of pedidosRecientes; let i = index" [hidden]="i == 0" class="col-4 border rounded mx-0">
12   - {{rellenar(pedido.id, 2)}}
13   - </h2>
14 29 </div>
15 30 </div>
16 31 </div>
src/app/components/pedidos-salientes/pedidos-salientes.component.scss
Diff comments   View file @ bc2b71d
... ... @@ -0,0 +1,4 @@
  1 +.h-big {
  2 + font-size: 24vh;
  3 + height: 35vh;
  4 +}
src/app/components/pedidos-salientes/pedidos-salientes.component.ts
Diff comments   View file @ bc2b71d
... ... @@ -28,18 +28,17 @@ export class PedidosSalientesComponent implements OnInit {
28 28  
29 29 buscar() {
30 30  
31   - this.comandaService
32   - .getPendientesEntrega()
33   - .subscribe((pedidos: []) => {
  31 + this.comandaService.getPendientesEntrega()
  32 + .subscribe((pedidos: []) => {
34 33  
35   - this.pedidosRecientes = pedidos;
36   - }, console.log);
  34 + this.pedidosRecientes = pedidos;
  35 + }, console.log);
37 36 }
38 37  
39 38 rellenar(relleno, longitud) {
40 39 relleno = '' + relleno;
41 40 while (relleno.length < longitud) {
42   - relleno = '0' + relleno;
  41 + relleno = '0' + relleno;
43 42 }
44 43 return relleno;
45 44 }
src/assets/scss/animation.scss
Diff comments   View file @ bc2b71d
... ... @@ -175,3 +175,78 @@
175 175 opacity: 1;
176 176 }
177 177 }
  178 +
  179 +.heartbeat {
  180 + -webkit-animation: heartbeat 1.5s ease-in-out infinite both;
  181 + animation: heartbeat 1.5s ease-in-out infinite both;
  182 +}
  183 +
  184 +@-webkit-keyframes heartbeat {
  185 + from {
  186 + -webkit-transform: scale(1);
  187 + transform: scale(1);
  188 + -webkit-transform-origin: center center;
  189 + transform-origin: center center;
  190 + -webkit-animation-timing-function: ease-out;
  191 + animation-timing-function: ease-out;
  192 + }
  193 + 10% {
  194 + -webkit-transform: scale(0.91);
  195 + transform: scale(0.91);
  196 + -webkit-animation-timing-function: ease-in;
  197 + animation-timing-function: ease-in;
  198 + }
  199 + 17% {
  200 + -webkit-transform: scale(0.98);
  201 + transform: scale(0.98);
  202 + -webkit-animation-timing-function: ease-out;
  203 + animation-timing-function: ease-out;
  204 + }
  205 + 33% {
  206 + -webkit-transform: scale(0.87);
  207 + transform: scale(0.87);
  208 + -webkit-animation-timing-function: ease-in;
  209 + animation-timing-function: ease-in;
  210 + }
  211 + 45% {
  212 + -webkit-transform: scale(1);
  213 + transform: scale(1);
  214 + -webkit-animation-timing-function: ease-out;
  215 + animation-timing-function: ease-out;
  216 + }
  217 +}
  218 +
  219 +@keyframes heartbeat {
  220 + from {
  221 + -webkit-transform: scale(1);
  222 + transform: scale(1);
  223 + -webkit-transform-origin: center center;
  224 + transform-origin: center center;
  225 + -webkit-animation-timing-function: ease-out;
  226 + animation-timing-function: ease-out;
  227 + }
  228 + 10% {
  229 + -webkit-transform: scale(0.91);
  230 + transform: scale(0.91);
  231 + -webkit-animation-timing-function: ease-in;
  232 + animation-timing-function: ease-in;
  233 + }
  234 + 17% {
  235 + -webkit-transform: scale(0.98);
  236 + transform: scale(0.98);
  237 + -webkit-animation-timing-function: ease-out;
  238 + animation-timing-function: ease-out;
  239 + }
  240 + 33% {
  241 + -webkit-transform: scale(0.87);
  242 + transform: scale(0.87);
  243 + -webkit-animation-timing-function: ease-in;
  244 + animation-timing-function: ease-in;
  245 + }
  246 + 45% {
  247 + -webkit-transform: scale(1);
  248 + transform: scale(1);
  249 + -webkit-animation-timing-function: ease-out;
  250 + animation-timing-function: ease-out;
  251 + }
  252 +}