Commit e1e219322e5b883add65fc82e608b896c751d9f8
Exists in
master
and in
1 other branch
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 |