Luis Suarez / autoservicio-axion

Download as
Browse Code »

Commit 34bd1ca3814df4eba6a5884e72e1aad7d72a9dfa

Authored by Marcelo Puebla
2 parents a3f7c18243 0111a6921c
Exists in develop

Merge branch 'develop' of git.focasoftware.com:angular/autoservicio-axion into develop

Showing 34 changed files   Show diff stats
src/app/modules/carrito/carrito.component.html
Diff comments   View file @ 34bd1ca
... ... @@ -2,7 +2,7 @@
2 2 <!-- PUBLICIDADES -->
3 3 <app-header-publicidad></app-header-publicidad>
4 4  
5   - <div class="h-75 carrito-content">
  5 + <div class="h-75 carrito-content" #carritoContent>
6 6 <!-- CABECERA -->
7 7 <div class="row mx-3 h-auto border border-primary rounded-sm">
8 8 <div class="col-12 px-0 py-2 align-self-center">
... ... @@ -23,6 +23,7 @@
23 23 <!-- ARTICULOS -->
24 24 <div
25 25 class="col-12 col-xl-6 p-2 h-50 h-md-25 h-xl-40 text-center text-truncate carrito-articulo"
  26 + [ngClass]="{'media-pantalla': carritoContent.classList.contains('media-pantalla')}"
26 27 *ngFor="let articulo of articuloService.carrito; let i = index;"
27 28 @EnterLeaveX>
28 29 <!-- ARTICULO -->
... ... @@ -36,7 +37,7 @@
36 37 (contextmenu)="false"
37 38 class="d-none d-md-block mx-auto h-55 rounded-sm shadow-sm"
38 39 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"
39   - onerror="this.src='assets/img/image-not-found.jpg'">
  40 + onerror="this.src='assets/img/imagen-no-encontrada.jpg'">
40 41 <div class="row mx-0 h-100 h-md-45">
41 42 <p class="col text-primary text-truncate align-self-center">
42 43 <small>{{articulo.MKT_DESC ? articulo.MKT_DESC.toUpperCase() : articulo.DetArt.toUpperCase()}}</small>
src/app/modules/carrito/carrito.component.ts
Diff comments   View file @ 34bd1ca
... ... @@ -30,7 +30,7 @@ export class CarritoComponent implements OnInit, OnDestroy {
30 30 this.router.navigate(['']);
31 31 return;
32 32 }
33   - this.mediaPantallaP();
  33 + this.mediaPantalla();
34 34 }
35 35  
36 36 ngOnDestroy() {
... ... @@ -57,9 +57,9 @@ export class CarritoComponent implements OnInit, OnDestroy {
57 57 this.inactiveScreen.startTimeOutInactividad();
58 58 }
59 59  
60   - mediaPantallaP() {
  60 + mediaPantalla() {
61 61 if ($('body').hasClass('media-pantalla')) {
62   - $('.carrito-content,.carrito-articulo').addClass('media-pantalla');
  62 + $(`.carrito-content`).addClass('media-pantalla').addBack('media-pantalla');
63 63 }
64 64 }
65 65 }
src/app/modules/forma-pago/forma-pago.component.html
Diff comments   View file @ 34bd1ca
1 1 <div class="h-92 bg-white fade-in-left">
2   - <div class="row mx-0 h-15">
  2 + <div class="row mx-0 h-20">
3 3 <div class="col-12 px-0 h-80 my-auto">
4 4 <img
5 5 draggable="false"
... ... @@ -9,65 +9,74 @@
9 9 src="assets/img/logo-spot.svg">
10 10 </div>
11 11 </div>
12   - <div class="h-85">
13   - <div class="row mt-5 mx-3 h-auto border border-primary rounded-sm">
  12 + <div class="h-100">
  13 + <div class="h-10"></div>
  14 + <div class="row mt-5 mx-3 h-auto">
14 15 <div class="col-12 px-0 py-2 align-self-center">
15 16 <div class="px-3 text-center">
16   - <p class="h6 text-truncate">SELECCIONA UNA FORMA DE PAGO</p>
  17 + <p class="h4 text-truncate">SELECCIONA UNA FORMA DE PAGO</p>
17 18 </div>
18 19 </div>
19 20 </div>
20 21 <!-- OPCION PAGO ELECTRONICO -->
21   - <div class="row mt-5 h-auto justify-content-center mx-0 reduce-card-1">
22   - <div class="col-auto px-0 h-auto align-self-start">
23   - <div
24   - class="btn-effect col-auto align-self-center px-0 bg-white"
25   - (click)="medioPago(9)">
26   - <div class="row mx-0 bg-primary badge-pill">
27   - <div class="col-auto p-0">
28   - <img
29   - draggable="false"
30   - ondragstart="return false;"
31   - (contextmenu)="false"
32   - class="p-1 icon-50"
33   - src="assets/img/icono-plato.svg">
34   - </div>
35   - <div class="col-auto align-self-center text-white">Pago electrónico</div>
36   - <div class="col-auto align-self-center p-0">
37   - <img
38   - draggable="false"
39   - ondragstart="return false;"
40   - (contextmenu)="false"
41   - class="p-1 icon-30"
42   - src="assets/img/ir.svg">
  22 + <div class="row mt-5 h-auto justify-content-center mx-0">
  23 + <div class="col-5 px-0 h-auto align-self-start reduce-card-1">
  24 + <div class="row justify-content-between">
  25 + <div class="col-12">
  26 + <div
  27 + class="btn-effect col-auto align-self-center px-0 bg-white"
  28 + (click)="medioPago(9)">
  29 + <div class="row mx-0 bg-primary badge-pill heigth-80">
  30 + <div class="col-2 p-0">
  31 + <img
  32 + draggable="false"
  33 + ondragstart="return false;"
  34 + (contextmenu)="false"
  35 + class="pt-3 pl-2 icon-50"
  36 + src="assets/img/icono-pago-electronico.svg">
  37 + </div>
  38 + <div class="col-8 align-self-center text-center text-white h4">Pago electrónico</div>
  39 + <div class="col-1 align-self-center p-0">
  40 + <img
  41 + draggable="false"
  42 + ondragstart="return false;"
  43 + (contextmenu)="false"
  44 + class="p-1 icon-50"
  45 + src="assets/img/ir.svg">
  46 + </div>
  47 + </div>
43 48 </div>
44 49 </div>
45 50 </div>
46 51 </div>
47 52 </div>
48 53 <!-- OPCION PAGO CON TARJETA -->
49   - <div class="row mt-5 h-auto justify-content-center mx-0 reduce-card-2">
50   - <div class="col-auto px-0 h-auto align-self-start">
51   - <div
52   - class="btn-effect col-auto align-self-center px-0 bg-white"
53   - (click)="medioPago(4)">
54   - <div class="row mx-0 bg-primary badge-pill">
55   - <div class="col-auto p-0">
56   - <img
57   - draggable="false"
58   - ondragstart="return false;"
59   - (contextmenu)="false"
60   - class="p-1 icon-50"
61   - src="assets/img/icono-take-away.svg">
62   - </div>
63   - <div class="col-auto align-self-center text-white">Pago con tarjeta</div>
64   - <div class="col-auto align-self-center p-0">
65   - <img
66   - draggable="false"
67   - ondragstart="return false;"
68   - (contextmenu)="false"
69   - class="p-1 icon-30"
70   - src="assets/img/ir.svg">
  54 + <div class="row mt-5 h-auto justify-content-center mx-0">
  55 + <div class="col-5 px-0 h-auto align-self-start reduce-card-2">
  56 + <div class="row justify-content-between">
  57 + <div class="col-12">
  58 + <div
  59 + class="btn-effect col-auto align-self-center px-0 bg-white"
  60 + (click)="medioPago(4)">
  61 + <div class="row mx-0 bg-primary badge-pill heigth-80">
  62 + <div class="col-2 p-0">
  63 + <img
  64 + draggable="false"
  65 + ondragstart="return false;"
  66 + (contextmenu)="false"
  67 + class="pt-4 pl-2 icon-50"
  68 + src="assets/img/icono-pago-tarjeta.svg">
  69 + </div>
  70 + <div class="col-8 align-self-center text-center text-white h4">Pago con tarjeta</div>
  71 + <div class="col-2 align-self-center p-0">
  72 + <img
  73 + draggable="false"
  74 + ondragstart="return false;"
  75 + (contextmenu)="false"
  76 + class="p-1 icon-50"
  77 + src="assets/img/ir.svg">
  78 + </div>
  79 + </div>
71 80 </div>
72 81 </div>
73 82 </div>
src/app/modules/forma-pago/forma-pago.component.scss
Diff comments   View file @ 34bd1ca
... ... @@ -2,8 +2,8 @@
2 2 position: absolute;
3 3 bottom: 150px;
4 4 -webkit-box-flex: 0;
5   - flex: 0 0 41.6666666667%;
6   - max-width: 41.6666666667%;
  5 + flex: 0 0 35%;
  6 + max-width: 35%;
7 7 left: 10%;
8 8 margin-left: 0 !important;
9 9 }
... ... @@ -12,8 +12,8 @@
12 12 position: absolute;
13 13 bottom: 150px;
14 14 -webkit-box-flex: 0;
15   - flex: 0 0 41.6666666667%;
16   - max-width: 41.6666666667%;
  15 + flex: 0 0 35%;
  16 + max-width: 35%;
17 17 right: 10%;
18 18 margin-right: 0 !important;
19 19 }
src/app/modules/info-formas-pago/info-formas-pago.component.html
Diff comments   View file @ 34bd1ca
... ... @@ -60,7 +60,7 @@
60 60  
61 61 <ng-template #templateGoCaja>
62 62 <div class="bg-primary rounded shadow text-white">
63   - <div class="modal-body text-center">
  63 + <div class="modal-body text-center h1 my-4">
64 64 Por favor, hacé tu pedido en la caja.
65 65 </div>
66 66 </div>
src/app/modules/info-formas-pago/info-formas-pago.component.ts
Diff comments   View file @ 34bd1ca
... ... @@ -7,23 +7,32 @@ import { BsModalService } from &#39;ngx-bootstrap/modal&#39;;
7 7 styleUrls: ['./info-formas-pago.component.scss']
8 8 })
9 9 export class InfoFormasPagoComponent implements OnInit, OnDestroy {
10   - mediaPantalla = false;
11 10 timer: any;
12 11  
13 12 constructor(
14 13 private modalService: BsModalService,
15 14 ) { }
16 15  
17   - ngOnInit() { }
  16 + ngOnInit() {
  17 + this.mediaPantalla();
  18 + }
18 19  
19 20 ngOnDestroy() {
20 21 if (this.timer) clearTimeout(this.timer);
21 22 }
22 23  
23 24 openGoCaja(templateRef: TemplateRef<any>) {
24   - const modalRef = this.modalService.show(templateRef, { class: 'modal-promo modal-sm modal-dialog-centered' });
  25 + const modalRef = this.modalService.show(templateRef, { class: 'modal-promo modal-dialog-centered' });
25 26 this.timer = setTimeout(() => {
26 27 modalRef.hide();
27 28 }, 3000);
28 29 }
  30 +
  31 + mediaPantalla() {
  32 + if ($('body').hasClass('media-pantalla')) {
  33 + $('.reduce-card-1,.reduce-card-2')
  34 + .addClass('media-pantalla')
  35 + .addBack('media-pantalla');
  36 + }
  37 + }
29 38 }
src/app/modules/mensaje-final/mensaje-final.component.html
Diff comments   View file @ 34bd1ca
... ... @@ -52,7 +52,8 @@
52 52 <div class="row justify-content-center">
53 53 <div class="col-auto">
54 54 <div
55   - class="d-inline-block py-1 btn-effect bg-primary badge-pill text-white"
  55 + class="d-inline-block w-100 py-1 btn-effect
  56 + bg-primary badge-pill text-white text-center"
56 57 (click)="goToSplash()">
57 58 <span class="px-4">FINALIZAR</span>
58 59 <img
src/app/modules/opcion-pedido/opcion-pedido.component.scss
Diff comments   View file @ 34bd1ca
... ... @@ -2,8 +2,8 @@
2 2 position: absolute;
3 3 bottom: 150px;
4 4 -webkit-box-flex: 0;
5   - flex: 0 0 41.6666666667%;
6   - max-width: 41.6666666667%;
  5 + flex: 0 0 35%;
  6 + max-width: 35%;
7 7 left: 10%;
8 8 margin-left: 0 !important;
9 9 }
... ... @@ -12,12 +12,8 @@
12 12 position: absolute;
13 13 bottom: 150px;
14 14 -webkit-box-flex: 0;
15   - flex: 0 0 41.6666666667%;
16   - max-width: 41.6666666667%;
  15 + flex: 0 0 35%;
  16 + max-width: 35%;
17 17 right: 10%;
18 18 margin-right: 0 !important;
19 19 }
20   -
21   -.heigth-80 {
22   - height: 80px;
23   -}
src/app/modules/opcion-pedido/opcion-pedido.component.ts
Diff comments   View file @ 34bd1ca
... ... @@ -13,7 +13,7 @@ export class OpcionPedidoComponent implements OnInit {
13 13 ) { }
14 14  
15 15 ngOnInit() {
16   - this.reducirPantalla();
  16 + this.mediaPantalla();
17 17 }
18 18  
19 19 goTo(path) {
... ... @@ -25,7 +25,7 @@ export class OpcionPedidoComponent implements OnInit {
25 25 localStorage.setItem('pedidoParaLlevar', lugar);
26 26 }
27 27  
28   - reducirPantalla() {
  28 + mediaPantalla() {
29 29 if ($('body').hasClass('media-pantalla')) {
30 30 $('.reduce-card-1,.reduce-card-2').addClass('media-pantalla');
31 31 }
src/app/modules/pago-electronico/pago-electronico.component.html
Diff comments   View file @ 34bd1ca
... ... @@ -27,12 +27,12 @@
27 27 class="d-block mx-auto h-100 w-auto shadow rounded"
28 28 src="assets/img/qr-skin.jpg">
29 29 </div>
30   - <div class="col-10 px-0 h-100 mt-7 mt-lg-5">
  30 + <div class="col-10 px-0 h-100 mt-7 mt-5">
31 31 <img
32 32 draggable="false"
33 33 ondragstart="return false;"
34 34 (contextmenu)="false"
35   - class="d-block mx-auto h-40"
  35 + class="d-block mx-auto mt-7 qr-mt h-40"
36 36 [src]="urlQr">
37 37 </div>
38 38 </div>
src/app/modules/pago-electronico/pago-electronico.component.scss
Diff comments   View file @ 34bd1ca
1 1 .mt-7 {
2 2 margin-top: 6rem;
3 3 }
  4 +
  5 +.qr-mt.media-pantalla {
  6 + margin-top: 2rem !important;;
  7 +}
src/app/modules/pago-electronico/pago-electronico.component.ts
Diff comments   View file @ 34bd1ca
... ... @@ -9,7 +9,7 @@ import { APP_SETTINGS } from &#39;src/etc/AppSettings&#39;;
9 9 styleUrls: ['./pago-electronico.component.scss']
10 10 })
11 11 export class PagoElectronicoComponent implements OnInit {
12   - urlQr = `${APP_SETTINGS.apiDeboSuite}/qr/${APP_SETTINGS.deploy}/${APP_SETTINGS.codigoP}/tienda/${APP_SETTINGS.terminal}`;
  12 + urlQr = `${APP_SETTINGS.apiDeboSuite}/qr/${APP_SETTINGS.numeroPlanilla}/${APP_SETTINGS.codigoP}/tienda/${APP_SETTINGS.terminal}`;
13 13  
14 14 constructor(
15 15 private articuloService: ArticuloService,
... ... @@ -30,6 +30,11 @@ export class PagoElectronicoComponent implements OnInit {
30 30 this.articuloService.idComanda = res.data;
31 31 this.router.navigate(['mensaje-final']);
32 32 }, err => console.error(err));
  33 + this.mediaPantalla();
  34 + }
  35 + mediaPantalla() {
  36 + if ($('body').hasClass('media-pantalla')) {
  37 + $('.qr-mt').addClass('media-pantalla');
  38 + }
33 39 }
34   -
35 40 }
src/app/modules/seleccion-articulos/filtro-categorias/filtro-categorias.component.html
Diff comments   View file @ 34bd1ca
... ... @@ -19,29 +19,34 @@
19 19 border-left-0 rounded-right scroll-y cat-box"
20 20 (scroll)="scrollEvent($event)">
21 21 <div
22   - class="row mx-2 mb-2 h-25 h-md-32 h-lg-45 justify-content-center tab cat-content"
  22 + class="row mx-2 mb-2 h-25 h-lg-30 justify-content-center tab cat-content"
23 23 [ngClass]="{ 'active rounded shadow px-2': allActive, 'border-bottom-effect': !allActive }"
24 24 (click)="selectCategoria(-1, 0)">
25 25 <img
26 26 draggable="false"
27 27 ondragstart="return false;"
28 28 (contextmenu)="false"
29   - class="col-12 img-fluid align-self-end d-none d-sm-block rounded-circle"
  29 + class="col-12 img-fluid align-self-end d-none
  30 + d-sm-block rounded-circle w-100 h-auto"
30 31 src="assets/img/logo-spot.svg">
31 32 <small class="col-12 px-0 my-1 h-100 h-md-25 align-self-end text-center text-truncate">Todos</small>
32 33 </div>
33 34 <div
34   - class="row mx-2 mb-2 h-25 h-md-32 h-lg-45 justify-content-center tab cat-content"
35   - [ngClass]="{ 'active rounded shadow px-2': categoria.selected, 'border-bottom-effect': !categoria.selected }"
  35 + class="row mx-2 mb-2 h-25 h-lg-30 justify-content-center tab cat-content"
  36 + [ngClass]="{ 'active rounded shadow px-2': categoria.selected,
  37 + 'border-bottom-effect': !categoria.selected,
  38 + 'media-pantalla': templateCategorias.classList.contains('media-pantalla')}"
36 39 (click)="selectCategoria(i, categoria.id)"
  40 + id="cat-content"
37 41 *ngFor="let categoria of categorias; let i = index;">
38 42 <img
39 43 draggable="false"
40 44 ondragstart="return false;"
41 45 (contextmenu)="false"
42   - class="col-12 img-fluid align-self-end d-none d-sm-block rounded-circle"
  46 + class="col-12 img-fluid align-self-end d-none
  47 + d-sm-block rounded-circle w-100 h-auto"
43 48 src="{{urlImagenes}}{{categoria.path_imagen}}"
44   - onerror="this.src='assets/img/image-not-found.jpg'">
  49 + onerror="this.src='assets/img/imagen-no-encontrada.jpg'">
45 50 <small class="col-12 px-1 my-1 h-100 h-md-25 align-self-end text-center text-truncate">{{categoria.detalle}}</small>
46 51 </div>
47 52 </div>
src/app/modules/seleccion-articulos/filtro-categorias/filtro-categorias.component.scss
Diff comments   View file @ 34bd1ca
... ... @@ -35,9 +35,10 @@ $primary: #aa006b;
35 35 }
36 36 }
37 37  
38   -.cat-content.media-pantalla {
  38 +.cat-content.media-pantalla,
  39 +#cat-content.media-pantalla {
39 40 margin: 0.5rem 0.7rem !important;
40   - height: 76% !important;
  41 + height: 95% !important;
41 42 }
42 43  
43 44 .cat-box.media-pantalla {
src/app/modules/seleccion-articulos/filtro-categorias/filtro-categorias.component.ts
Diff comments   View file @ 34bd1ca
... ... @@ -25,7 +25,9 @@ export class FiltroCategoriasComponent implements OnInit {
25 25 private inactiveScreen: InactiveScreenService,
26 26 ) { }
27 27  
28   - ngOnInit() { }
  28 + ngOnInit() {
  29 + this.mediaPantalla();
  30 + }
29 31  
30 32 getCategorias() {
31 33 this.categoriaService.getAll()
... ... @@ -54,6 +56,7 @@ export class FiltroCategoriasComponent implements OnInit {
54 56 this.getProductos.emit() :
55 57 this.setProductos.emit();
56 58 });
  59 + this.mediaPantalla();
57 60 }
58 61  
59 62 selectCategoria(index: number, idCategoria?: number) {
... ... @@ -83,4 +86,12 @@ export class FiltroCategoriasComponent implements OnInit {
83 86 el.scroll({ behavior: 'smooth', top: value + el.scrollTop });
84 87 }, 500);
85 88 }
  89 +
  90 + mediaPantalla() {
  91 + if ($('body').hasClass('media-pantalla')) {
  92 + $('.cat-content,#cat-content')
  93 + .addClass('media-pantalla')
  94 + .addBack('media-pantalla');
  95 + }
  96 + }
86 97 }
src/app/modules/seleccion-articulos/seleccion-articulos.component.html
Diff comments   View file @ 34bd1ca
... ... @@ -2,7 +2,9 @@
2 2 <!-- PUBLICIDADES -->
3 3 <app-header-publicidad></app-header-publicidad>
4 4  
5   - <div class="row mx-0 h-80 align-items-end">
  5 + <div class="row mx-0 align-items-end"
  6 + [ngClass]="boxCarrito.classList.contains('media-pantalla')
  7 + ? 'h-68' : 'h-80'">
6 8 <!-- CABECERA -->
7 9 <div class="row w-100 mx-3 h-auto border border-primary rounded-sm">
8 10 <div class="col-12 p-2 align-self-center">
... ... @@ -29,8 +31,8 @@
29 31 <div class="row row-cols-1 row-cols-sm-3 row-cols-xl-6">
30 32 <!-- ARTICULO -->
31 33 <div
32   - class="col px-2 my-1 my-md-3 h-auto"
33   - *ngFor="let articulo of auxArticulos | slice:0:showQuantity;">
  34 + *ngFor="let articulo of auxArticulos | slice:0:showQuantity;"
  35 + class="col px-2 my-1 my-md-3 h-auto">
34 36 <div
35 37 class="swing-in-top-fwd btn-effect card h-auto"
36 38 (click)="selectArticulo(articulo)">
... ... @@ -39,8 +41,8 @@
39 41 ondragstart="return false;"
40 42 (contextmenu)="false"
41 43 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"
42   - onerror="this.src='assets/img/image-not-found.jpg'"
43   - class="card-img-top h-30 h-md-55 rounded-sm">
  44 + onerror="this.src='assets/img/imagen-no-encontrada.jpg'"
  45 + class="card-img-top w-100 h-auto h-md-55 rounded-sm">
44 46 <div class="row mx-0 py-1 h-auto justify-content-center">
45 47 <p class="col-12 px-1 h6 h-auto text-primary text-center min-h-60">
46 48 {{articulo.MKT_DESC ? articulo.MKT_DESC.toUpperCase() : articulo.DetArt.toUpperCase()}}
... ... @@ -122,9 +124,9 @@
122 124 draggable="false"
123 125 ondragstart="return false;"
124 126 (contextmenu)="false"
125   - class="d-block img-fluid p-2 mx-auto rounded"
  127 + class="d-block img-fluid p-2 mx-auto rounded w-100 h-auto"
126 128 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"
127   - onerror="this.src='assets/img/image-not-found.jpg'">
  129 + onerror="this.src='assets/img/imagen-no-encontrada.jpg'">
128 130 <p class="d-block mt-auto text-center text-primary text-truncate">
129 131 <small>{{articulo.MKT_DESC ? articulo.MKT_DESC.toUpperCase() : articulo.DetArt.toUpperCase()}}</small>
130 132 </p>
... ... @@ -137,7 +139,8 @@
137 139 </div>
138 140 </div>
139 141 <!-- BOTON SCROLL DERECHA -->
140   - <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center">
  142 + <div *ngIf="articuloService.carrito.length"
  143 + class="col-auto btn-effect h-20 align-self-center d-contents">
141 144 <img
142 145 draggable="false"
143 146 ondragstart="return false;"
src/app/modules/seleccion-articulos/seleccion-articulos.component.scss
Diff comments   View file @ 34bd1ca
1 1 #content.media-pantalla,
  2 +#cat-content.media-pantalla,
2 3 #boxCarrito.media-pantalla {
3 4 max-height: 60% !important;
4 5 }
  6 +
  7 +.modal-content.media-pantalla {
  8 + margin-top: auto !important;
  9 +}
  10 +
  11 +.d-contents {
  12 + display: contents !important;
  13 +}
src/app/modules/seleccion-articulos/seleccion-articulos.component.ts
Diff comments   View file @ 34bd1ca
... ... @@ -133,6 +133,7 @@ export class SeleccionArticulosComponent implements OnInit, AfterViewInit, OnDes
133 133 initialState: { articulosPromo: [articulo] },
134 134 class: 'modal-promo modal-dialog-centered'
135 135 });
  136 + this.mediaPantalla();
136 137 }
137 138  
138 139 openModalSinonimos(sinonimosData: ISinonimo[], articulo: IArticulo) {
... ... @@ -159,6 +160,7 @@ export class SeleccionArticulosComponent implements OnInit, AfterViewInit, OnDes
159 160 }
160 161 this.articuloService.setArticulo(articulo);
161 162 });
  163 + this.mediaPantalla();
162 164 }
163 165  
164 166 deleteArticulo(index: number) {
... ... @@ -196,7 +198,8 @@ export class SeleccionArticulosComponent implements OnInit, AfterViewInit, OnDes
196 198  
197 199 mediaPantalla() {
198 200 if ($('body').hasClass('media-pantalla')) {
199   - $('.cat-content,#content,.cat-btn,#boxCarrito,.cat-box,.img-categoria')
  201 + $(`.cat-content,#cat-content,#content,.cat-btn,#boxCarrito,
  202 + .cat-box,.img-categoria, .modal-content`)
200 203 .addClass('media-pantalla')
201 204 .addBack('media-pantalla');
202 205 }
src/app/shared/confirmacion/confirmacion.component.html
Diff comments   View file @ 34bd1ca
... ... @@ -10,7 +10,7 @@
10 10 ondragstart="return false;"
11 11 (contextmenu)="false"
12 12 src="{{urlImagenes}}{{imagenPath}}"
13   - onerror="this.src='assets/img/image-not-found.jpg'"
  13 + onerror="this.src='assets/img/imagen-no-encontrada.jpg'"
14 14 class="card-img-top img-fluid rounded-circle">
15 15 </div>
16 16 </div>
src/app/shared/footer/footer.component.html
Diff comments   View file @ 34bd1ca
1   -<div class="row w-90 mx-auto h-100 justify-content-between bg-white">
  1 +<div class="row w-90 mx-auto h-100 w-100 justify-content-between bg-white">
2 2 <div class="col-auto align-self-center px-0 bg-white">
3 3 <div class="btn-effect row mx-0 bg-light" (click)="reducirPantalla()">
4 4 <div class="col-auto align-self-center text-primary">ADAPTAR PANTALLA</div>
... ... @@ -8,7 +8,7 @@
8 8 ondragstart="return false;"
9 9 (contextmenu)="false"
10 10 class="p-2 icon-60"
11   - src="assets/img/iconos-accesibilidad.svg">
  11 + src="assets/img/icono-silla-de-ruedas.svg">
12 12 </div>
13 13 </div>
14 14 </div>
src/app/shared/footer/footer.component.ts
Diff comments   View file @ 34bd1ca
... ... @@ -16,8 +16,7 @@ export class FooterComponent implements OnInit {
16 16 }
17 17  
18 18 reducirPantalla() {
19   - $(`
20   - body,
  19 + $(`body,
21 20 .reduce-card-1,
22 21 .reduce-card-2,
23 22 #content,
... ... @@ -31,7 +30,9 @@ export class FooterComponent implements OnInit {
31 30 .carrito-articulo,
32 31 .carrito-content,
33 32 .pago-tarjeta,
34   - .modal-promo`)
  33 + .modal-promo,
  34 + .modal-content,
  35 + .qr-mt`)
35 36 .toggleClass('media-pantalla');
36 37 }
37 38 }
src/app/shared/header-publicidad/header-publicidad.component.html
Diff comments   View file @ 34bd1ca
1   -<div class="row mx-0 h-20" id="headerPublicidad">
  1 +<div class="row mx-0" id="headerPublicidad" #headerPublicidad
  2 + [ngClass]="headerPublicidad.classList.contains('media-pantalla')
  3 + ? 'h-31' : 'h-20'" id="boxCarrito">
2 4 <div class="col-12 p-3 h-100" id="headerPad">
3 5 <div class="h-100">
4 6 <carousel [showIndicators]="false" [interval]="4000">
src/app/shared/header-publicidad/header-publicidad.component.scss
Diff comments   View file @ 34bd1ca
1 1 #headerPublicidad.media-pantalla {
2   - max-height: 18% !important;
  2 + max-height: 280px !important;
3 3 padding-bottom: 0 !important;
4 4 }
5 5  
6 6 #headerPad.media-pantalla {
7   - padding: 0.3rem !important;
  7 + padding: 0 1rem !important;
8 8 }
src/app/shared/header-publicidad/header-publicidad.component.ts
Diff comments   View file @ 34bd1ca
... ... @@ -72,7 +72,7 @@ export class HeaderPublicidadComponent implements OnInit {
72 72 {
73 73 initialState: {
74 74 titleMessage: articulo.DET_LAR,
75   - imagenPath: articulo.imagenes.length ? articulo.imagenes[0].imagen : 'assets/img/image-not-found.jpg',
  75 + imagenPath: articulo.imagenes.length ? articulo.imagenes[0].imagen : 'assets/img/imagen-no-encontrada.jpg',
76 76 footerMessageFirst: `¿DESEA AGREGAR ESTE ARTÍCULO`,
77 77 footerMessageSecond: `a su carrito?`,
78 78 footerConfirmation: articulo.PreVen,
src/app/shared/promocion/promocion.component.html
Diff comments   View file @ 34bd1ca
1   -<div class="modal-header bg-primary rounded-top pt-4 px-2">
2   - <div class="row mx-0 w-100 justify-content-between" *ngIf="articulosPromo.length">
3   - <div class="col-8">
4   - <p class="h3 text-white">{{articulosPromo[0].DetArt}}</p>
5   - </div>
6   - <div class="col-4 align-self-center">
7   - <div
8   - class="row mx-0 justify-content-between bg-white badge-pill"
9   - (click)="selectPromo(articulosPromo[0])">
10   - <div class="col px-0 align-self-center text-primary">
11   - <p class="font-weight-bold">{{articulosPromo[0].PreVen | currency}}</p>
12   - </div>
13   - <div class="col-3 px-0">
14   - <img
15   - draggable="false"
16   - ondragstart="return false;"
17   - (contextmenu)="false"
18   - class="d-block ml-auto py-1 icon-30 mr-2 pt-2"
19   - src="assets/img/ir-color.svg">
20   - </div>
21   - </div>
22   - </div>
  1 +<div class="d-flex justify-content-center"
  2 + *ngIf="loading">
  3 + <div class="spinner-border text-primary" role="status">
  4 + <span class="sr-only">Loading...</span>
23 5 </div>
24 6 </div>
25 7 <div class="modal-body bg-primary rounded-bottom pb-3 px-2" *ngIf="articulosPromo.length">
... ... @@ -34,7 +16,7 @@
34 16 ondragstart="return false;"
35 17 (contextmenu)="false"
36 18 src="{{urlImagenes}}{{articulosPromo[0].imagenes[0].imagen}}"
37   - onerror="this.src='assets/img/image-not-found.jpg'"
  19 + onerror="this.src='assets/img/imagen-no-encontrada.jpg'"
38 20 class="card-img-top img-fluid rounded-circle">
39 21 </div>
40 22 </div>
... ... @@ -55,11 +37,10 @@
55 37 draggable="false"
56 38 ondragstart="return false;"
57 39 (contextmenu)="false"
58   - class="d-block icon-30 py-1"
  40 + class="d-block ml-auto py-1 icon-30 mr-2 pt-2"
59 41 src="assets/img/ir-color.svg">
60 42 </div>
61 43 </div>
62 44 </div>
63 45 </div>
64 46 </div>
65   -</div>
src/app/shared/promocion/promocion.component.scss
Diff comments   View file @ 34bd1ca
... ... @@ -2,3 +2,8 @@
2 2 min-height: auto;
3 3 max-height: 25vh;
4 4 }
  5 +
  6 +.spinner-border {
  7 + width: 5rem;
  8 + height: 5rem;
  9 +}
src/app/shared/sinonimo/sinonimo.component.ts
Diff comments   View file @ 34bd1ca
... ... @@ -76,7 +76,7 @@ export class SinonimoComponent implements OnInit {
76 76  
77 77 scrollTo(index: number) {
78 78 const element = document.getElementById(index.toString());
79   - element.scrollIntoView({ behavior: "smooth", block: "center" });
  79 + element.scrollIntoView({ behavior: 'smooth', block: 'center' });
80 80 }
81 81  
82 82 }
src/assets/img/icono-pago-electronico.svg
Diff comments   View file @ 34bd1ca
... ... @@ -0,0 +1,18 @@
  1 +<?xml version="1.0" encoding="UTF-8"?>
  2 +<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
  3 +<!-- Creator: CorelDRAW X7 -->
  4 +<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="29.7016mm" height="29.6264mm" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
  5 +viewBox="0 0 677 675"
  6 + xmlns:xlink="http://www.w3.org/1999/xlink">
  7 + <defs>
  8 + <style type="text/css">
  9 + <![CDATA[
  10 + .fil0 {fill:#F4B223}
  11 + ]]>
  12 + </style>
  13 + </defs>
  14 + <g id="Capa_x0020_1">
  15 + <metadata id="CorelCorpID_0Corel-Layer"/>
  16 + <path class="fil0" d="M0 656c9,11 6,19 32,19 16,0 34,3 44,-7 11,-12 -7,-8 32,-19 12,-4 30,-10 41,-12 7,-4 27,-9 36,-11 12,-4 26,-7 38,-11 27,-9 36,-27 51,-45 27,-35 56,-73 83,-108 5,-5 7,-9 11,-14l32 -41c18,-23 35,-36 12,-61 -8,-7 -13,-19 -32,-16 -11,2 -20,14 -27,20 -2,1 -5,3 -7,5l-25 23c-4,4 -14,14 -19,16 -14,-6 -25,-32 -31,-51 -11,-34 -10,-31 -3,-66 3,-11 6,-22 8,-34 2,-7 11,-29 -5,-27 -8,1 -9,16 -12,29 -12,55 -20,53 -5,100 7,21 16,41 28,55 3,4 18,16 28,10 6,-4 14,-13 21,-19 5,-3 6,-6 11,-9l32 -29c4,-3 6,-9 14,-7 1,1 18,16 18,23 0,6 -38,52 -44,59l-71 92c-5,8 -12,16 -18,24 -24,31 -29,46 -64,57 -21,7 -42,13 -63,19 -21,6 -42,14 -63,19 0,-30 0,-61 0,-91 0,-19 -3,-71 4,-85l127 -254 30 -36c6,-8 13,-17 20,-25 4,-5 19,-21 16,-28 -8,-11 -14,-2 -19,4l-59 75c-7,9 -115,227 -122,241 -9,-9 -10,-12 -28,-12 -11,0 -29,-2 -38,3 -19,9 -13,42 -13,66 0,24 1,146 -1,159zm520 -97c15,-25 6,-34 0,-49 33,1 73,0 107,0 24,1 15,-13 11,-15 -4,-3 -222,-1 -263,-1 -13,0 -28,-4 -25,11 3,9 34,5 49,5 18,0 36,0 54,0 -11,26 -11,23 0,50 -16,0 -115,1 -124,-2 -7,-3 -10,-10 -17,-8 -10,2 -9,17 15,24 12,4 269,2 304,2 15,0 23,-3 33,-12 12,-12 12,-26 12,-46l0 -409c0,-48 12,-109 -45,-109l-255 0c-36,0 -64,-4 -76,26 -6,15 -3,81 -3,101 0,68 0,136 0,204 0,8 0,18 0,26 0,8 6,15 14,8 5,-4 3,-38 3,-48 0,-34 0,-68 0,-102l0 -153c0,-50 10,-45 57,-45l255 0c42,0 33,25 33,68l0 410c0,11 2,42 -2,49 -5,14 -17,16 -35,16 -17,0 -34,0 -51,0 -15,0 -37,1 -51,-1zm-503 -101l0 179c0,23 -3,21 32,21 21,0 18,-2 18,-22l0 -178c0,-17 -8,-13 -24,-13 -17,0 -26,-4 -26,13zm494 -280l0 54c0,19 5,15 42,15 49,0 41,12 41,-69 0,-17 -8,-13 -41,-13 -34,0 -42,-5 -42,13zm-51 67c3,-11 2,-27 2,-40 0,-47 7,-40 -43,-40 -47,0 -40,-7 -40,42 0,8 -2,34 3,38 5,4 72,3 78,0zm-116 -163l287 1c16,0 16,-17 0,-17l-287 0c-8,0 -14,0 -14,8 0,8 6,8 14,8zm183 148l50 1 0 -50 -49 0 -1 49zm-131 0l49 0 0 -49 -49 0 0 49zm2 83l47 0c0,15 0,31 0,46 0,7 -1,16 5,19 9,4 12,-4 12,-12 0,-14 0,-27 0,-41 0,-34 10,-29 -71,-29 -7,0 -13,4 -11,12 2,7 10,5 18,5zm80 -33c0,23 -3,36 15,31 3,-8 2,-18 2,-29 0,-16 0,-19 -16,-19l-75 0c-9,0 -26,-3 -24,10 1,10 19,7 28,7 21,0 51,-2 70,0zm33 82l-16 0c0,-19 3,-39 -15,-31 -3,9 -2,17 -2,27 0,10 -2,19 9,21 6,1 20,0 27,0 13,0 14,-4 14,-16l0 -51c0,-8 0,-15 -9,-16 -9,0 -8,9 -8,17 0,17 0,33 0,49zm-29 149c-12,2 -22,14 -20,29 2,12 15,22 30,19 31,-7 21,-54 -10,-48zm96 -168c21,10 16,-17 16,-41 0,-10 4,-37 -8,-38 -14,-2 -9,24 -9,34 0,13 -1,35 1,45zm-98 -98c13,5 15,-1 15,-14l0 -51c0,-8 -1,-18 -12,-15 -7,2 -5,15 -5,24 0,15 -2,44 2,56zm-33 -210c-6,20 13,15 30,15 9,0 43,1 48,-3 5,-5 2,-13 -5,-14 -5,-1 -19,0 -25,0 -10,0 -42,-1 -48,2zm66 244c10,2 21,0 31,1 0,11 -1,22 2,31 13,5 15,-1 15,-14 -1,-38 5,-34 -34,-34 -13,0 -19,3 -14,16zm48 83c0,-7 0,-18 0,-24 -1,-7 -8,-12 -14,-7 -4,4 -4,41 -1,45 4,4 41,4 45,1 6,-6 1,-14 -5,-15 -5,-1 -19,0 -25,0z"/>
  17 + </g>
  18 +</svg>
src/assets/img/icono-pago-tarjeta.svg
Diff comments   View file @ 34bd1ca
... ... @@ -0,0 +1,20 @@
  1 +<?xml version="1.0" encoding="UTF-8"?>
  2 +<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
  3 +<!-- Creator: CorelDRAW X7 -->
  4 +<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="40.8317mm" height="28.4598mm" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
  5 +viewBox="0 0 6182 4309"
  6 + xmlns:xlink="http://www.w3.org/1999/xlink">
  7 + <defs>
  8 + <style type="text/css">
  9 + <![CDATA[
  10 + .fil0 {fill:#F4B223}
  11 + ]]>
  12 + </style>
  13 + </defs>
  14 + <g id="Capa_x0020_1">
  15 + <metadata id="CorelCorpID_0Corel-Layer"/>
  16 + <path class="fil0" d="M255 1396l1430 0 0 -1141c0,-141 115,-255 255,-255l3987 0c141,0 255,114 255,255 0,801 0,1602 0,2403 0,140 -115,254 -255,254l-1431 0 0 1141c0,141 -114,256 -254,256l-3987 0c-140,0 -255,-115 -255,-256 0,-801 0,-1601 0,-2402 0,-140 114,-255 255,-255zm1551 0l2436 0c140,0 254,115 254,255l0 1141 1431 0c74,0 135,-61 135,-134l0 -1737 -4256 0 0 475zm4256 -595l0 -209 -4256 0 0 209 4256 0zm0 -329l0 -217c0,-74 -61,-135 -135,-135l-3987 0c-74,0 -134,61 -134,135l0 217 4256 0zm-5942 1395l4256 0 0 -216c0,-74 -61,-134 -134,-134l-3987 0c-74,0 -135,60 -135,134l0 216zm4256 451l-4256 0 0 1735c0,74 61,135 135,135l3987 0c73,0 134,-61 134,-135l0 -1735zm0 -330l-4256 0 0 209 4256 0 0 -209z"/>
  17 + <path class="fil0" d="M595 2984l919 0 0 361 -982 0 0 -361 63 0zm794 125l-731 0 0 111 731 0 0 -111z"/>
  18 + <polygon class="fil0" points="514,3843 2095,3843 2095,3963 514,3963 "/>
  19 + </g>
  20 +</svg>
src/assets/img/icono-silla-de-ruedas.svg
Diff comments   View file @ 34bd1ca
... ... @@ -0,0 +1,21 @@
  1 +<?xml version="1.0" encoding="UTF-8"?>
  2 +<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
  3 +<!-- Creator: CorelDRAW X7 -->
  4 +<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="19.7986mm" height="18.7181mm" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
  5 +viewBox="0 0 176 166"
  6 + xmlns:xlink="http://www.w3.org/1999/xlink">
  7 + <defs>
  8 + <style type="text/css">
  9 + <![CDATA[
  10 + .fil0 {fill:#CFD1D2}
  11 + ]]>
  12 + </style>
  13 + </defs>
  14 + <g id="Capa_x0020_1">
  15 + <metadata id="CorelCorpID_0Corel-Layer"/>
  16 + <path class="fil0" d="M119 148c0,4 3,8 7,8 5,0 8,-4 8,-8 0,-4 -3,-8 -8,-8 -4,0 -7,4 -7,8l0 0zm10 0c0,2 -1,3 -3,3 -1,0 -2,-1 -2,-3 0,-1 1,-2 2,-2 2,0 3,1 3,2l0 0zm0 0z"/>
  17 + <path class="fil0" d="M49 78c-21,0 -39,18 -39,39 0,22 18,39 39,39 21,0 39,-17 39,-39 0,-21 -18,-39 -39,-39l0 0zm0 73c-19,0 -34,-15 -34,-34 0,-18 15,-34 34,-34 18,0 33,16 33,34 0,19 -15,34 -33,34l0 0zm0 0z"/>
  18 + <path class="fil0" d="M49 107c-6,0 -10,4 -10,10 0,6 4,10 10,10 6,0 10,-4 10,-10 0,-6 -4,-10 -10,-10l0 0zm0 15c-3,0 -5,-2 -5,-5 0,-3 2,-5 5,-5 3,0 5,2 5,5 0,3 -2,5 -5,5l0 0zm0 0z"/>
  19 + <path class="fil0" d="M173 135l-20 0 -6 -31c-2,-6 -7,-10 -13,-10l-5 0 0 -39c0,-7 -6,-13 -13,-13l-8 0c-1,-6 -6,-10 -13,-10l-38 0 0 -19c0,-7 -6,-13 -13,-13l-36 0c-2,0 -5,1 -6,3 -2,1 -2,3 -2,6 1,4 4,7 8,7l33 0 0 53c-23,3 -41,24 -41,48 0,27 22,49 49,49 27,0 49,-22 49,-49 0,-6 -1,-12 -4,-18l30 0 0 16 -18 0c-2,0 -3,1 -3,2 0,2 1,3 3,3l18 0 0 10c-9,2 -16,9 -16,18 0,10 8,18 18,18 10,0 18,-8 18,-18 0,-9 -6,-16 -15,-18l0 -31 5 0c4,0 7,3 8,6l6 33c0,0 0,0 0,0l2 11c0,1 1,2 3,2l20 0c2,0 3,-1 3,-3l0 -10c0,-2 -1,-3 -3,-3l0 0zm-34 13c0,7 -6,13 -13,13 -7,0 -13,-6 -13,-13 0,-7 6,-13 13,-13 7,0 13,6 13,13l0 0zm-44 -111c4,0 7,2 8,5l-46 0 0 -5 38 0zm-87 -27c-1,0 -3,-1 -3,-2 0,-1 0,-1 1,-2 0,0 1,-1 2,-1l33 0 0 5 -33 0zm38 -4c3,1 6,4 6,7l0 55c-1,0 -2,0 -3,0 -1,0 -2,0 -3,0l0 -62 0 0zm3 155c-24,0 -44,-20 -44,-44 0,-24 20,-44 44,-44 24,0 44,20 44,44 0,24 -20,44 -44,44l0 0zm43 -67c-7,-13 -20,-23 -35,-25l0 -6 49 0c1,0 2,-1 2,-3 0,-1 -1,-2 -2,-2l-49 0 0 -11 59 0c4,0 8,4 8,8l0 3 -8 0c-1,0 -3,1 -3,2 0,2 2,3 3,3l8 0 0 31 -32 0zm79 52l-16 0 -1 -6 17 0 0 6zm0 0z"/>
  20 + </g>
  21 +</svg>
src/assets/img/image-not-found.jpg
View file @ 34bd1ca

41.5 KB
src/assets/img/imagen-no-encontrada.jpg
Diff comments   View file @ 34bd1ca

30.5 KB
src/scss/height-width.scss
Diff comments   View file @ 34bd1ca
... ... @@ -39,3 +39,7 @@
39 39 .max-h-80 {
40 40 max-height: 80%;
41 41 }
  42 +
  43 +.heigth-80 {
  44 + height: 80px;
  45 +}
... ... @@ -23,10 +23,11 @@ body {
23 23 }
24 24  
25 25 body.media-pantalla {
26   - height: 50% !important;
  26 + height: calc(50%) !important;
27 27 position: absolute;
28 28 bottom: 0;
29 29 width: 100%;
  30 + background-color: #3d3d3d;
30 31 }
31 32  
32 33 .btn-effect {
... ... @@ -84,3 +85,12 @@ p {
84 85 .disabled {
85 86 opacity: 0.5;
86 87 }
  88 +
  89 +.modal-content.media-pantalla {
  90 + margin-top: auto !important;
  91 + margin-bottom: 50px !important;
  92 +}
  93 +
  94 +.modal-content {
  95 + background: transparent !important;
  96 +}