Commit e1e219322e5b883add65fc82e608b896c751d9f8
Exists in
master
Merge branch 'master' into 'master'
Master(mpuebla) See merge request !98
Showing
3 changed files
Show diff stats
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.toString().slice(comanda.id.toString().length - 2)}}.</p> | 19 | <p class="h5 card-title text-center mb-1">{{comanda.id.toString().slice(comanda.id.toString().length - 2)}}.</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/app/components/popover-promos/popover-promos.component.html
1 | <div class="card-body fade-left"> | 1 | <div class="card-body fade-left"> |
2 | <div class="row"> | 2 | <div class="row"> |
3 | <div class="col text-left"> | 3 | <div class="col text-left"> |
4 | <p class="h5 card-title"> | 4 | <p class="h5 card-title"> |
5 | Este producto forma parte<br> | 5 | Sugerencias<br> |
6 | de Combos y Promociones | 6 | COMBOS Y PROMOCIONES |
7 | </p> | 7 | </p> |
8 | </div> | 8 | </div> |
9 | </div> | 9 | </div> |
10 | 10 | ||
11 | <div class="overflow-scroll popover-size pr-2"> | 11 | <div class="overflow-scroll popover-size pr-2"> |
12 | <div | 12 | <div |
13 | class="row my-2" | 13 | class="row my-2" |
14 | *ngFor="let promo of popoverContent"> | 14 | *ngFor="let promo of popoverContent"> |
15 | <div class="col text-dark"> | 15 | <div class="col text-dark"> |
16 | <div | 16 | <div |
17 | class="bg-white card-effect rounded-sm p-2 px-3" | 17 | class="bg-white card-effect rounded-sm p-2 px-3" |
18 | (click)="seleccionarPromo(promo)"> | 18 | (click)="seleccionarPromo(promo)"> |
19 | <div class="row justify-content-between"> | 19 | <div class="row justify-content-between"> |
20 | <div class="col-12 text-left"> | 20 | <div class="col-12 text-left"> |
21 | <p class="h5 mb-0"> | 21 | <p class="h5 mb-0"> |
22 | <small class="font-weight-bold">{{promo.DetArt}}</small> | 22 | <small class="font-weight-bold">{{promo.DetArt}}</small> |
23 | </p> | 23 | </p> |
24 | </div> | 24 | </div> |
25 | <div class="col-12 text-right mt-2"> | 25 | <div class="col-12 text-right mt-2"> |
26 | <p class="h4 font-weight-bold mb-0"> | 26 | <p class="h4 font-weight-bold mb-0"> |
27 | {{promo.PreVen | currency}} | 27 | {{promo.PreVen | currency}} |
28 | </p> | 28 | </p> |
29 | </div> | 29 | </div> |
30 | </div> | 30 | </div> |
31 | </div> | 31 | </div> |
32 | </div> | 32 | </div> |
33 | </div> | 33 | </div> |
34 | </div> | 34 | </div> |
35 | 35 | ||
36 | <div class="row mt-3 justify-content-end"> | 36 | <div class="row mt-3 justify-content-end"> |
37 | <div class="col-auto"> | 37 | <div class="col-auto"> |
38 | <button | 38 | <button |
39 | type="button" | 39 | type="button" |
40 | class="btn btn-sm btn-light shadow" | 40 | class="btn btn-sm btn-light shadow" |
41 | (click)="hide()"> | 41 | (click)="hide()"> |
42 | <span class="pr-2">No, gracias</span> | 42 | <span class="pr-2">No, gracias</span> |
43 | <i class="fa fa-times text-danger" aria-hidden="true"></i> | 43 | <i class="fa fa-times text-danger" aria-hidden="true"></i> |
44 | </button> | 44 | </button> |
45 | </div> | 45 | </div> |
46 | </div> | 46 | </div> |
47 | 47 | ||
48 | </div> | 48 | </div> |
49 | 49 |
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 |