Martin Macola / autoservicio

Browse Code »

Commit 3c066629175295b00031cfa6f15317d04573470b

Authored by Marcelo Puebla 2019-09-10 11:52:51 -0300

1 parent a197254536

Exists in master

Cambio para poder hacer scrol en al pantalla de comanda.

Showing 2 changed files with 58 additions and 49 deletions Show diff stats

src/app/components/comanda/comanda.component.html

Diff comments View file @ 3c06662

1	<div class="container-fluid fade-in p-0">	1	<div class="container-fluid h-100 fade-in p-0 pr-2">
2		2
3	<div class="row z-index-0 fixed-top m-0 w-100">	3	<div class="row z-index-0 fixed-top m-0 w-100">
4	<div class="col-12 p-3">	4	<div class="col-12 p-3">
5	<img class="w-15 float-right" src="../../../assets/img/debo-gray.png">	5	<img class="w-15 float-right" src="../../../assets/img/debo-gray.png">
6	</div>	6	</div>
7	</div>	7	</div>
8		8
9	<div class="row pt-5 m-2">	9	<div class="row pt-5 m-3">
10	<div class="col-12">	10	<div class="col-12">
11	<p class="m-0 h2 text-center">Pedidos a elaborar</p>	11	<p class="m-0 h2 text-center">Pedidos a elaborar</p>
12	</div>	12	</div>
13	</div>	13	</div>
14		14
15	<div class="card-columns m-1 fade-in disable-user-select">	15	<div class="row h-85 m-0 overflow-scroll">
16	<div	16	<div class="col-12 px-2">
17	*ngFor="let comanda of comandas"	17	<div class="card-columns h-100 m-1 fade-in disable-user-select">
18	class="card fade-in rounded-xs shadow-sm"	18	<div
19	[ngClass]="{	19	*ngFor="let comanda of comandas"
20	'bg-light': comanda.estado === 1,	20	class="card fade-in rounded-xs shadow-sm"
21	'bg-danger': comanda.estado === 2,	21	[ngClass]="{
22	'bg-success swing-out-top-bck': comanda.estado === 3	22	'bg-light': comanda.estado === 1,
23	}">	23	'bg-danger': comanda.estado === 2,
24	<div class="card-body p-2">	24	'bg-success swing-out-top-bck': comanda.estado === 3
25	<p class="h1 card-title text-center mb-1">{{comanda.id.toString().slice(comanda.id.toString().length - 2)}}</p>	25	}">
26	<!-- TODO: Implementar moment -->	26	<div class="card-body p-2">
27	<p class="card-title text-center mb-1">{{comanda.fechafinelaboracion \| date: 'dd-MM-yyyy HH:mm' : '+0000'}}</p>	27	<p class="h1 card-title text-center mb-1">{{comanda.id.toString().slice(comanda.id.toString().length - 2)}}</p>
28	<p	28	<!-- TODO: Implementar moment -->
29	*ngFor="let detalle of comanda.detalles"	29	<p class="card-title text-center mb-1">{{comanda.fechafinelaboracion \| date: 'dd-MM-yyyy HH:mm' : '+0000'}}</p>
30	[ngClass]="	30	<p
31	{	31	*ngFor="let detalle of comanda.detalles"
32	'border-secondary': comanda.estado === 1,	32	[ngClass]="
33	'border-light': comanda.estado != 1	33	{
34	}"	34	'border-secondary': comanda.estado === 1,
35	class="card-text border-top pt-2 mb-2">	35	'border-light': comanda.estado != 1
36	<small>	36	}"
37	{{detalle.articulo.DET_LAR}}	37	class="card-text border-top pt-2 mb-2">
38	</small><br>	38	<small>
39	<small>	39	{{detalle.articulo.DET_LAR}}
40	CANT. {{detalle.cantidad}}	40	</small><br>
41	</small>	41	<small>
42	</p>	42	CANT. {{detalle.cantidad}}
43	<button	43	</small>
44	*ngIf="comanda.estado === 1"	44	</p>
45	class="btn btn-block btn-danger shadow-sm"	45	<button
46	(click)="updateComanda(comanda, 2, 'En elaboracion')">	46	*ngIf="comanda.estado === 1"
47	Elaborar	47	class="btn btn-block btn-danger shadow-sm"
48	</button>	48	(click)="updateComanda(comanda, 2, 'En elaboracion')">
49	<button	49	Elaborar
50	*ngIf="comanda.estado === 2"	50	</button>
51	class="btn btn-block btn-success shadow-sm"	51	<button
52	(click)="updateComanda(comanda, 3, 'Terminado')">	52	*ngIf="comanda.estado === 2"
53	Terminar	53	class="btn btn-block btn-success shadow-sm"
54	</button>	54	(click)="updateComanda(comanda, 3, 'Terminado')">
55	<button	55	Terminar
56	*ngIf="comanda.estado === 2"	56	</button>
57	class="btn btn-block btn-light btn-sm shadow-sm p-0"	57	<button
58	(click)="updateComanda(comanda, 1, 'Pagado')">	58	*ngIf="comanda.estado === 2"
59	<span class="pr-2 h6"><small>Deshacer</small></span>	59	class="btn btn-block btn-light btn-sm shadow-sm p-0"
60	<i class="fa fa-undo text-warning" aria-hidden="true"></i>	60	(click)="updateComanda(comanda, 1, 'Pagado')">
61	</button>	61	<span class="pr-2 h6"><small>Deshacer</small></span>
		62	<i class="fa fa-undo text-warning" aria-hidden="true"></i>
		63	</button>
		64	</div>
		65	</div>
62	</div>	66	</div>
63	</div>	67	</div>
64	</div>	68	</div>
		69
65	</div>	70	</div>
66		71

src/app/components/comanda/comanda.component.scss

Diff comments View file @ 3c06662

 @media (min-width: 1200px) {
   .col-1-5 {
     flex: 0 0 12.5%;
     max-width: 12.5%;
     position: relative;
     width: 100%;
     padding-right: 15px;
     padding-left: 15px;
   }
 }
+.h-85{
+  height: 85% !important;
+}
 @media (min-width: 1200px) {
   .card-columns {
     column-count: 7 !important;
     column-gap: 0.5rem !important;
   }
 }
 @media (max-width: 1200px) {
   .card-columns {
     column-count: 6 !important;
     column-gap: 0.5rem !important;
   }
 }
 @media (max-width: 768px) {
   .card-columns {
     column-count: 3 !important;
     column-gap: 0.5rem !important;
   }
 }
 .bg-danger {
   background-color: #8c000e !important;
   p {
     color: #fff;
   }
 }
 .bg-success {
   background-color: #00751b !important;
   p {
     color: #fff;
   }
 }
 .bg-light {
   background-color: white !important;
   p {
     color: #212529;
   }
 }
 .rounded-xs {
   border-radius: 0.5rem;
 }
 .card-comanda {
   min-height: 250px;
 }
 .swing-out-top-bck {
   -webkit-animation: swing-out-top-bck 0.45s
     cubic-bezier(0.6, -0.28, 0.735, 0.045) 10s both;
   animation: swing-out-top-bck 0.8s cubic-bezier(0.6, -0.28, 0.735, 0.045) 10s
     both;
 }
 @-webkit-keyframes swing-out-top-bck {
   0% {
     -webkit-transform: rotateX(0deg);
     transform: rotateX(0deg);
     -webkit-transform-origin: top;
     transform-origin: top;
     opacity: 1;
   }
   75% {
     -webkit-transform: rotateX(-100deg);
     transform: rotateX(-100deg);
     -webkit-transform-origin: top;
     transform-origin: top;
   }
   100% {
     -webkit-transform: rotateX(-100deg);
     transform: rotateX(-100deg);
     -webkit-transform-origin: top;
     transform-origin: top;
     opacity: 0;
     display: none;
     position: absolute;
   }
 }
 @keyframes swing-out-top-bck {
   0% {
     -webkit-transform: rotateX(0deg);
     transform: rotateX(0deg);
     -webkit-transform-origin: top;
     transform-origin: top;
     opacity: 1;
   }
   75% {
     -webkit-transform: rotateX(-100deg);
     transform: rotateX(-100deg);
     -webkit-transform-origin: top;
     transform-origin: top;
   }
   100% {
     -webkit-transform: rotateX(-100deg);
     transform: rotateX(-100deg);
     -webkit-transform-origin: top;
     transform-origin: top;
     opacity: 0;
     display: none;
     position: absolute;
   }
 }