Marcelo Puebla / autoservicio-axion

Download as
Browse Code »

Commit 5138762fa2dbdc422c30e2d606350724ee0f1c34

Authored by Benjamin Rodriguez
1 parent e79f4dfa99
Exists in develop

cambio color boton terminar

Showing 2 changed files with 1 additions and 11 deletions   Show diff stats
src/app/modules/comanda/comanda.component.html
Diff comments   View file @ 5138762
1 <div class="container-fluid d-flex flex-column h-100 fade-in pb-4 pr-2"> 1 <div class="container-fluid d-flex flex-column h-100 fade-in pb-4 pr-2">
2 <div class="row pt-5 mt-n5"> 2 <div class="row pt-5 mt-n5">
3 <div class="col-12"> 3 <div class="col-12">
4 <p class="mb-3 h2 text-center mt-2">Pedidos a elaborar</p> 4 <p class="mb-3 h2 text-center mt-2">Pedidos a elaborar</p>
5 </div> 5 </div>
6 </div> 6 </div>
7 <div class="row flex-fill m-0 overflow-scroll"> 7 <div class="row flex-fill m-0 overflow-scroll">
8 <div class="col-12 px-2"> 8 <div class="col-12 px-2">
9 <div class="card-columns h-100 m-1 fade-in disable-user-select"> 9 <div class="card-columns h-100 m-1 fade-in disable-user-select">
10 <div 10 <div
11 *ngFor="let comanda of comandas" 11 *ngFor="let comanda of comandas"
12 class="card fade-in rounded-xs shadow-sm mt-2" 12 class="card fade-in rounded-xs shadow-sm mt-2"
13 [ngClass]="{ 13 [ngClass]="{
14 'bg-light': comanda.estado === 1, 14 'bg-light': comanda.estado === 1,
15 'bg-danger': comanda.estado === 2, 15 'bg-danger': comanda.estado === 2,
16 'bg-success swing-out-top-bck': comanda.estado === 3 16 'bg-success swing-out-top-bck': comanda.estado === 3
17 }"> 17 }">
18 <div class="card-body p-2"> 18 <div class="card-body p-2">
19 <div class="row justify-content-between"> 19 <div class="row justify-content-between">
20 <img 20 <img
21 src="../../../assets/img/para-llevar-fondo-sombra.png" 21 src="../../../assets/img/para-llevar-fondo-sombra.png"
22 class="w-25 h-25 float-left ml-0 mt-n3" 22 class="w-25 h-25 float-left ml-0 mt-n3"
23 *ngIf="comanda.paraLlevar == true"> 23 *ngIf="comanda.paraLlevar == true">
24 <div></div> 24 <div></div>
25 <!-- NUMERO DE PEDIDO --> 25 <!-- NUMERO DE PEDIDO -->
26 <p class="h1 text-right mr-3"> 26 <p class="h1 text-right mr-3">
27 {{rellenar(comanda.id.toString().slice(0), 3)}} 27 {{rellenar(comanda.id.toString().slice(0), 3)}}
28 </p> 28 </p>
29 </div> 29 </div>
30 <div> 30 <div>
31 <!-- PEDIDO A NOMBRE DE --> 31 <!-- PEDIDO A NOMBRE DE -->
32 <p class="text-center m-0"> 32 <p class="text-center m-0">
33 {{comanda.pedidoAnombreDe ? comanda.pedidoAnombreDe.toUpperCase() : ''}} 33 {{comanda.pedidoAnombreDe ? comanda.pedidoAnombreDe.toUpperCase() : ''}}
34 </p> 34 </p>
35 <!-- TIMER PEDIDO --> 35 <!-- TIMER PEDIDO -->
36 <div class="d-flex justify-content-between align-items-center mt-2"> 36 <div class="d-flex justify-content-between align-items-center mt-2">
37 <p><i class="fas fa-user-clock text-info"></i></p> 37 <p><i class="fas fa-user-clock text-info"></i></p>
38 <p class="text-center mb-1"> 38 <p class="text-center mb-1">
39 {{comanda.hoursPedido}}:{{comanda.minutesPedido}}:{{comanda.secondsPedido}} 39 {{comanda.hoursPedido}}:{{comanda.minutesPedido}}:{{comanda.secondsPedido}}
40 </p> 40 </p>
41 <p><i class="far fa-clock fa-spin text-info"></i></p> 41 <p><i class="far fa-clock fa-spin text-info"></i></p>
42 </div> 42 </div>
43 <div *ngFor="let detalle of comanda.detalles"> 43 <div *ngFor="let detalle of comanda.detalles">
44 <p 44 <p
45 class="card-text border-top pt-2 mb-2" 45 class="card-text border-top pt-2 mb-2"
46 [ngClass]=" 46 [ngClass]="
47 { 47 {
48 'border-secondary': comanda.estado === 1, 48 'border-secondary': comanda.estado === 1,
49 'border-light': comanda.estado != 1 49 'border-light': comanda.estado != 1
50 }"> 50 }">
51 <!-- DETALLE Y CANTIDAD --> 51 <!-- DETALLE Y CANTIDAD -->
52 <small>{{detalle.DetLar}}</small><br> 52 <small>{{detalle.DetLar}}</small><br>
53 <small>CANT.{{detalle.cantidad}}</small> 53 <small>CANT.{{detalle.cantidad}}</small>
54 </p> 54 </p>
55 </div> 55 </div>
56 <!-- BOTONES --> 56 <!-- BOTONES -->
57 <button 57 <button
58 *ngIf="comanda.estado === 1" 58 *ngIf="comanda.estado === 1"
59 class="btn btn-block btn-primary shadow-sm btn-elaborar" 59 class="btn btn-block btn-primary shadow-sm btn-elaborar"
60 (click)="updateComanda(comanda, 2, 'En elaboracion')"> 60 (click)="updateComanda(comanda, 2, 'En elaboracion')">
61 <div class="row justify-content-between"> 61 <div class="row justify-content-between">
62 <div></div> 62 <div></div>
63 <p class="ml-4" style="color: #fff;">Elaborar</p> 63 <p class="ml-4" style="color: #fff;">Elaborar</p>
64 <img 64 <img
65 draggable="false" 65 draggable="false"
66 ondragstart="return false;" 66 ondragstart="return false;"
67 (contextmenu)="false" 67 (contextmenu)="false"
68 class="icon-30 mr-2" 68 class="icon-30 mr-2"
69 src="assets/img/ir.svg"> 69 src="assets/img/ir.svg">
70 </div> 70 </div>
71 </button> 71 </button>
72 <button 72 <button
73 *ngIf="comanda.estado === 2" 73 *ngIf="comanda.estado === 2"
74 class="btn btn-block shadow-sm btn-terminar" 74 class="btn btn-block shadow-sm btn-terminar"
75 (click)="updateComanda(comanda, 3, 'Terminado')"> 75 (click)="updateComanda(comanda, 3, 'Terminado')">
76 <div class="row justify-content-between"> 76 <div class="row justify-content-between">
77 <div></div> 77 <div></div>
78 <p class="ml-4">Terminar</p> 78 <p class="ml-4">Terminar</p>
79 <img 79 <img
80 draggable="false" 80 draggable="false"
81 ondragstart="return false;" 81 ondragstart="return false;"
82 (contextmenu)="false" 82 (contextmenu)="false"
83 class="icon-30 mr-2" 83 class="icon-30 mr-2"
84 src="assets/img/flecha-borde-color.svg"> 84 src="assets/img/flecha-borde-color.svg">
85 </div> 85 </div>
86 </button> 86 </button>
87 <button 87 <button
88 *ngIf="comanda.estado === 2" 88 *ngIf="comanda.estado === 2"
89 class="btn btn-block btn-deshacer btn-sm shadow-sm p-0" 89 class="btn btn-block btn-deshacer btn-sm shadow-sm p-0"
90 (click)="updateComanda(comanda, 1, 'Pagado')"> 90 (click)="updateComanda(comanda, 1, 'Pagado')">
91 <div class="row justify-content-between"> 91 <div class="row justify-content-between">
92 <div></div> 92 <div></div>
93 <span class="h6 ml-4"><small>Deshacer</small></span> 93 <span class="h6 ml-4"><small>Deshacer</small></span>
94 <i class="fas fa-undo-alt text-info mr-4 my-auto"></i> 94 <i class="fas fa-undo-alt text-info mr-4 my-auto"></i>
95 </div> 95 </div>
96 </button> 96 </button>
97 </div> 97 </div>
98 <!-- TIMER DE ELABORACION --> 98 <!-- TIMER DE ELABORACION -->
99 <div *ngIf="comanda.estado === 2" class="d-flex justify-content-between align-items-center mt-2"> 99 <div *ngIf="comanda.estado === 2" class="d-flex justify-content-between align-items-center mt-2">
100 <div *ngIf="comanda.estado !== 1"> 100 <div *ngIf="comanda.estado !== 1">
101 <i class="fa fa-utensils text-info" aria-hidden="true"></i> 101 <i class="fa fa-utensils text-info" aria-hidden="true"></i>
102 </div> 102 </div>
103 <span *ngIf="comanda.estado === 1" class="text-dark"> 103 <span *ngIf="comanda.estado === 1" class="text-dark">
104 {{comanda.hoursElaboracion}}:{{comanda.minutesElaboracion}}:{{comanda.secondsElaboracion}} 104 {{comanda.hoursElaboracion}}:{{comanda.minutesElaboracion}}:{{comanda.secondsElaboracion}}
105 </span> 105 </span>
106 <span *ngIf="comanda.estado !== 1" class="text-white"> 106 <span *ngIf="comanda.estado !== 1" class="text-white">
107 {{comanda.hoursElaboracion}}:{{comanda.minutesElaboracion}}:{{comanda.secondsElaboracion}} 107 {{comanda.hoursElaboracion}}:{{comanda.minutesElaboracion}}:{{comanda.secondsElaboracion}}
108 </span> 108 </span>
109 <i class="fas fa-clock fa-spin text-info"></i> 109 <i class="fas fa-clock fa-spin text-info"></i>
110 <!-- <ngx-spinner
111 name="{{comanda.id.toString()}}"
112 class="mr-2"
113 bdOpacity="0"
114 bdColor="rgba(255,255,255,0)"
115 size="small"
116 color="#fff"
117 type="timer"
118 [fullScreen]="false">
119 </ngx-spinner> -->
120 </div> 110 </div>
121 </div> 111 </div>
122 </div> 112 </div>
123 </div> 113 </div>
124 </div> 114 </div>
125 </div> 115 </div>
126 </div> 116 </div>
src/app/modules/comanda/comanda.component.scss
Diff comments   View file @ 5138762
1 @media (min-width: 1200px) { 1 @media (min-width: 1200px) {
2 .col-1-5 { 2 .col-1-5 {
3 flex: 0 0 12.5%; 3 flex: 0 0 12.5%;
4 max-width: 12.5%; 4 max-width: 12.5%;
5 position: relative; 5 position: relative;
6 width: 100%; 6 width: 100%;
7 padding-right: 15px; 7 padding-right: 15px;
8 padding-left: 15px; 8 padding-left: 15px;
9 } 9 }
10 } 10 }
11 11
12 @media (min-width: 1200px) { 12 @media (min-width: 1200px) {
13 .card-columns { 13 .card-columns {
14 column-count: 5 !important; 14 column-count: 5 !important;
15 column-gap: 0.5rem !important; 15 column-gap: 0.5rem !important;
16 } 16 }
17 } 17 }
18 18
19 @media (max-width: 1200px) { 19 @media (max-width: 1200px) {
20 .card-columns { 20 .card-columns {
21 column-count: 4 !important; 21 column-count: 4 !important;
22 column-gap: 0.5rem !important; 22 column-gap: 0.5rem !important;
23 } 23 }
24 } 24 }
25 25
26 @media (max-width: 768px) { 26 @media (max-width: 768px) {
27 .card-columns { 27 .card-columns {
28 column-count: 3 !important; 28 column-count: 3 !important;
29 column-gap: 0.5rem !important; 29 column-gap: 0.5rem !important;
30 } 30 }
31 } 31 }
32 32
33 .bg-danger { 33 .bg-danger {
34 transition: 0.2s; 34 transition: 0.2s;
35 background-color: #aa006b !important; 35 background-color: #aa006b !important;
36 p { 36 p {
37 color: #fff; 37 color: #fff;
38 } 38 }
39 } 39 }
40 40
41 .bg-success { 41 .bg-success {
42 transition: 0.2s; 42 transition: 0.2s;
43 background-color: #EEEEF0 !important; 43 background-color: #EEEEF0 !important;
44 p { 44 p {
45 color: black; 45 color: black;
46 } 46 }
47 } 47 }
48 48
49 .bg-light { 49 .bg-light {
50 transition: 0.2s; 50 transition: 0.2s;
51 background-color: white !important; 51 background-color: white !important;
52 p { 52 p {
53 color: #212529; 53 color: #212529;
54 } 54 }
55 } 55 }
56 56
57 .bg-dark-red { 57 .bg-dark-red {
58 background-color: #670006 !important; 58 background-color: #670006 !important;
59 p { 59 p {
60 color: white; 60 color: white;
61 } 61 }
62 } 62 }
63 63
64 .btn-elaborar { 64 .btn-elaborar {
65 border-radius: 2rem; 65 border-radius: 2rem;
66 .p { 66 .p {
67 color: #fff; 67 color: #fff;
68 } 68 }
69 } 69 }
70 70
71 .btn-deshacer { 71 .btn-deshacer {
72 background-color: #fff; 72 background-color: #fff;
73 border-radius: 2rem; 73 border-radius: 2rem;
74 } 74 }
75 75
76 .btn-terminar { 76 .btn-terminar {
77 background-color: rgba(228, 253, 251, 0.842); 77 background-color: rgb(212, 212, 212);
78 border-radius: 2rem; 78 border-radius: 2rem;
79 p { 79 p {
80 color: #212529; 80 color: #212529;
81 } 81 }
82 } 82 }
83 83
84 .rounded-xs { 84 .rounded-xs {
85 border-radius: 1rem; 85 border-radius: 1rem;
86 border-color: #aa006b ; 86 border-color: #aa006b ;
87 } 87 }
88 88
89 .card-comanda { 89 .card-comanda {
90 min-height: 250px; 90 min-height: 250px;
91 } 91 }
92 92
93 .swing-out-top-bck { 93 .swing-out-top-bck {
94 -webkit-animation: swing-out-top-bck 0.45s 94 -webkit-animation: swing-out-top-bck 0.45s
95 cubic-bezier(0.6, -0.28, 0.735, 0.045) 10s both; 95 cubic-bezier(0.6, -0.28, 0.735, 0.045) 10s both;
96 animation: swing-out-top-bck 0.8s cubic-bezier(0.6, -0.28, 0.735, 0.045) 10s 96 animation: swing-out-top-bck 0.8s cubic-bezier(0.6, -0.28, 0.735, 0.045) 10s
97 both; 97 both;
98 } 98 }
99 99
100 @-webkit-keyframes swing-out-top-bck { 100 @-webkit-keyframes swing-out-top-bck {
101 0% { 101 0% {
102 -webkit-transform: rotateX(0deg); 102 -webkit-transform: rotateX(0deg);
103 transform: rotateX(0deg); 103 transform: rotateX(0deg);
104 -webkit-transform-origin: top; 104 -webkit-transform-origin: top;
105 transform-origin: top; 105 transform-origin: top;
106 opacity: 1; 106 opacity: 1;
107 } 107 }
108 75% { 108 75% {
109 -webkit-transform: rotateX(-100deg); 109 -webkit-transform: rotateX(-100deg);
110 transform: rotateX(-100deg); 110 transform: rotateX(-100deg);
111 -webkit-transform-origin: top; 111 -webkit-transform-origin: top;
112 transform-origin: top; 112 transform-origin: top;
113 } 113 }
114 100% { 114 100% {
115 -webkit-transform: rotateX(-100deg); 115 -webkit-transform: rotateX(-100deg);
116 transform: rotateX(-100deg); 116 transform: rotateX(-100deg);
117 -webkit-transform-origin: top; 117 -webkit-transform-origin: top;
118 transform-origin: top; 118 transform-origin: top;
119 opacity: 0; 119 opacity: 0;
120 display: none; 120 display: none;
121 position: absolute; 121 position: absolute;
122 } 122 }
123 } 123 }
124 124
125 @keyframes swing-out-top-bck { 125 @keyframes swing-out-top-bck {
126 0% { 126 0% {
127 -webkit-transform: rotateX(0deg); 127 -webkit-transform: rotateX(0deg);
128 transform: rotateX(0deg); 128 transform: rotateX(0deg);
129 -webkit-transform-origin: top; 129 -webkit-transform-origin: top;
130 transform-origin: top; 130 transform-origin: top;
131 opacity: 1; 131 opacity: 1;
132 } 132 }
133 75% { 133 75% {
134 -webkit-transform: rotateX(-100deg); 134 -webkit-transform: rotateX(-100deg);
135 transform: rotateX(-100deg); 135 transform: rotateX(-100deg);
136 -webkit-transform-origin: top; 136 -webkit-transform-origin: top;
137 transform-origin: top; 137 transform-origin: top;
138 } 138 }
139 100% { 139 100% {
140 -webkit-transform: rotateX(-100deg); 140 -webkit-transform: rotateX(-100deg);
141 transform: rotateX(-100deg); 141 transform: rotateX(-100deg);
142 -webkit-transform-origin: top; 142 -webkit-transform-origin: top;
143 transform-origin: top; 143 transform-origin: top;
144 opacity: 0; 144 opacity: 0;
145 display: none; 145 display: none;
146 position: absolute; 146 position: absolute;
147 } 147 }
148 } 148 }
149 149
150 blockquote p::before, 150 blockquote p::before,
151 blockquote p::after { 151 blockquote p::after {
152 content: "“"; 152 content: "“";
153 font-family: Georgia; 153 font-family: Georgia;
154 font-size: 40px; 154 font-size: 40px;
155 margin: -10px 0 0 -20px !important; 155 margin: -10px 0 0 -20px !important;
156 position: absolute; 156 position: absolute;
157 opacity: 0.5; 157 opacity: 0.5;
158 } 158 }
159 159
160 blockquote p::after { 160 blockquote p::after {
161 content: "”"; 161 content: "”";
162 margin: -5px 0 0 4px !important; 162 margin: -5px 0 0 4px !important;
163 } 163 }
164 164