Commit 15c42d0e334dbd17ce86e5660ccf213ea2e6c729

Authored by Marcelo Puebla
1 parent a14bfa03ca
Exists in master and in 1 other branch validar_pve

Agregado texto de encabezado.

src/app/components/comanda/comanda.component.html
1 <div class="container-fluid fade-in p-0"> 1 <div class="container-fluid fade-in p-0">
2
3 <div class="row m-2">
4 <div class="col-12">
5 <p class="m-0 h2 text-center">Pedidos a elaborar</p>
6 </div>
7 </div>
8
2 <div class="card-columns m-1 fade-in disable-user-select"> 9 <div class="card-columns m-1 fade-in disable-user-select">
3 <div 10 <div
4 *ngFor="let comanda of comandas" 11 *ngFor="let comanda of comandas"
5 class="card fade-in rounded-xs shadow-sm" 12 class="card fade-in rounded-xs shadow-sm"
6 [ngClass]="{ 13 [ngClass]="{
7 'bg-light': comanda.estado === 1, 14 'bg-light': comanda.estado === 1,
8 'bg-danger': comanda.estado === 2, 15 'bg-danger': comanda.estado === 2,
9 'bg-success swing-out-top-bck': comanda.estado === 3 16 'bg-success swing-out-top-bck': comanda.estado === 3
10 }"> 17 }">
11 <div class="card-body p-2"> 18 <div class="card-body p-2">
12 <p class="h5 card-title text-center mb-1">{{comanda.id}}.</p> 19 <p class="h5 card-title text-center mb-1">{{comanda.id}}.</p>
13 <p 20 <p
14 *ngFor="let detalle of comanda.detalles" 21 *ngFor="let detalle of comanda.detalles"
15 [ngClass]=" 22 [ngClass]="
16 { 23 {
17 'border-secondary': comanda.estado === 1, 24 'border-secondary': comanda.estado === 1,
18 'border-light': comanda.estado != 1 25 'border-light': comanda.estado != 1
19 }" 26 }"
20 class="card-text border-top pt-2 mb-2"> 27 class="card-text border-top pt-2 mb-2">
21 <small> 28 <small>
22 {{detalle.articulo.DET_LAR}} 29 {{detalle.articulo.DET_LAR}}
23 </small> 30 </small>
24 </p> 31 </p>
25 <button 32 <button
26 *ngIf="comanda.estado === 1" 33 *ngIf="comanda.estado === 1"
27 class="btn btn-block btn-danger shadow-sm" 34 class="btn btn-block btn-danger shadow-sm"
28 (click)="updateComanda(comanda, 2, 'En elaboracion')"> 35 (click)="updateComanda(comanda, 2, 'En elaboracion')">
29 Elaborar 36 Elaborar
30 </button> 37 </button>
31 <button 38 <button
32 *ngIf="comanda.estado === 2" 39 *ngIf="comanda.estado === 2"
33 class="btn btn-block btn-success shadow-sm" 40 class="btn btn-block btn-success shadow-sm"
34 (click)="updateComanda(comanda, 3, 'Terminado')"> 41 (click)="updateComanda(comanda, 3, 'Terminado')">
35 Terminado 42 Terminado
36 </button> 43 </button>
37 <button 44 <button
38 *ngIf="comanda.estado === 2" 45 *ngIf="comanda.estado === 2"
39 class="btn btn-block btn-light btn-sm shadow-sm p-0" 46 class="btn btn-block btn-light btn-sm shadow-sm p-0"
40 (click)="updateComanda(comanda, 1, 'Pagado')"> 47 (click)="updateComanda(comanda, 1, 'Pagado')">
41 <span class="pr-1 h6"><small>En espera</small></span> 48 <span class="pr-1 h6"><small>En espera</small></span>
42 <i class="fa fa-undo text-warning" aria-hidden="true"></i> 49 <i class="fa fa-undo text-warning" aria-hidden="true"></i>
43 </button> 50 </button>
44 </div> 51 </div>
45 </div> 52 </div>
46 </div> 53 </div>
47 </div> 54 </div>
48 55
src/assets/scss/bootstrap-override.scss
1 @import "../../../node_modules/bootstrap/scss/functions"; 1 @import "../../../node_modules/bootstrap/scss/functions";
2 @import "../../../node_modules/bootstrap/scss/variables"; 2 @import "../../../node_modules/bootstrap/scss/variables";
3 @import "../../../node_modules/bootstrap/scss/mixins"; 3 @import "../../../node_modules/bootstrap/scss/mixins";
4 4
5 $primary: #2872ae; 5 $primary: #2872ae;
6 6
7 $theme-colors: ( 7 $theme-colors: (
8 primary: $primary, 8 primary: $primary,
9 light: white 9 light: white
10 ); 10 );
11 11
12 .popover { 12 .popover {
13 transform: translate3d(-425px, 0, -34px) !important; 13 transform: translate3d(-100%, 0, -34px) !important;
14 min-width: 350px !important; 14 min-width: 350px !important;
15 max-width: 425px !important; 15 max-width: 65% !important;
16 border: none !important; 16 border: none !important;
17 border-radius: 1.5rem !important; 17 border-radius: 1.5rem !important;
18 padding: 0 !important; 18 padding: 0 !important;
19 background-color: $primary !important; 19 background-color: $primary !important;
20 .popover-body { 20 .popover-body {
21 padding: 0 !important; 21 padding: 0 !important;
22 } 22 }
23 } 23 }
24 24
25 .bs-popover-left .arrow::after, 25 .bs-popover-left .arrow::after,
26 .bs-popover-auto[x-placement^="left"] .arrow::after { 26 .bs-popover-auto[x-placement^="left"] .arrow::after {
27 border-left-color: $primary !important; 27 border-left-color: $primary !important;
28 } 28 }
29 29
30 .bs-popover-right .arrow::after, 30 .bs-popover-right .arrow::after,
31 .bs-popover-auto[x-placement^="right"] .arrow::after { 31 .bs-popover-auto[x-placement^="right"] .arrow::after {
32 border-right-color: $primary !important; 32 border-right-color: $primary !important;
33 } 33 }
34 34
35 .bs-popover-top .arrow::after, 35 .bs-popover-top .arrow::after,
36 .bs-popover-auto[x-placement^="top"] .arrow::after { 36 .bs-popover-auto[x-placement^="top"] .arrow::after {
37 border-top-color: $primary !important; 37 border-top-color: $primary !important;
38 } 38 }
39 39
40 .bs-popover-bottom .arrow::after, 40 .bs-popover-bottom .arrow::after,
41 .bs-popover-auto[x-placement^="bottom"] .arrow::after { 41 .bs-popover-auto[x-placement^="bottom"] .arrow::after {
42 border-bottom-color: $primary !important; 42 border-bottom-color: $primary !important;
43 } 43 }
44 44
45 .list-group-item.active { 45 .list-group-item.active {
46 background-color: $primary !important; 46 background-color: $primary !important;
47 border-color: $primary !important; 47 border-color: $primary !important;
48 } 48 }
49 49
50 .custom-radio .custom-control-label::before { 50 .custom-radio .custom-control-label::before {
51 background-color: $primary !important; 51 background-color: $primary !important;
52 border-color: $white !important; 52 border-color: $white !important;
53 border-width: 2px !important; 53 border-width: 2px !important;
54 } 54 }
55 55
56 .custom-control-input { 56 .custom-control-input {
57 border-color: $white !important; 57 border-color: $white !important;
58 background-color: $primary !important; 58 background-color: $primary !important;
59 color: $primary !important; 59 color: $primary !important;
60 &:checked ~ .custom-control-label::before { 60 &:checked ~ .custom-control-label::before {
61 border-color: $white !important; 61 border-color: $white !important;
62 color: #fff !important; 62 color: #fff !important;
63 background-color: $primary !important; 63 background-color: $primary !important;
64 } 64 }
65 &:focus ~ .custom-control-label::before { 65 &:focus ~ .custom-control-label::before {
66 border-color: $white !important; 66 border-color: $white !important;
67 box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.7) !important; 67 box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.7) !important;
68 } 68 }
69 } 69 }
70 70
71 .carousel-control { 71 .carousel-control {
72 visibility: hidden !important; 72 visibility: hidden !important;
73 } 73 }
74 74
75 .carousel, .carousel-inner, .item { 75 .carousel, .carousel-inner, .item {
76 height: 100% !important; 76 height: 100% !important;
77 &:focus{ 77 &:focus{
78 outline: none !important; 78 outline: none !important;
79 } 79 }
80 } 80 }
81 81
82 @import "../../../node_modules/bootstrap/scss/bootstrap"; 82 @import "../../../node_modules/bootstrap/scss/bootstrap";
83 83