Luis Suarez / autoservicio-axion

Download as
Browse Code »

Commit bdfdb8709c835fd912fe46facf728430e6b2c3d1

Authored by Luis Suarez
1 parent 81e1a8fc64
Exists in develop

optimizar espacios en pantalla completa

Showing 22 changed files with 95 additions and 85 deletions   Show diff stats
src/app/modules/carrito/carrito.component.html
Diff comments   View file @ bdfdb87
... ... @@ -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 @EnterLeave>
28 29 <!-- ARTICULO -->
src/app/modules/carrito/carrito.component.ts
Diff comments   View file @ bdfdb87
... ... @@ -42,7 +42,9 @@ export class CarritoComponent implements OnInit, OnDestroy {
42 42 this.router.navigate(['']);
43 43 return;
44 44 }
45   - this.mediaPantallaP();
  45 + // console.log('COMPONENTE INICIADO');
  46 +
  47 + this.mediaPantalla();
46 48 }
47 49  
48 50 ngOnDestroy() {
... ... @@ -69,9 +71,10 @@ export class CarritoComponent implements OnInit, OnDestroy {
69 71 this.inactiveScreen.startTimeOutInactividad();
70 72 }
71 73  
72   - mediaPantallaP() {
  74 + mediaPantalla() {
73 75 if ($('body').hasClass('media-pantalla')) {
74   - $('.carrito-content,.carrito-articulo').addClass('media-pantalla');
  76 + $(`.carrito-content`).addClass('media-pantalla').addBack('media-pantalla');
75 77 }
  78 + console.log('AGARRA CONIOO');
76 79 }
77 80 }
src/app/modules/forma-pago/forma-pago.component.scss
Diff comments   View file @ bdfdb87
... ... @@ -4,7 +4,7 @@
4 4 -webkit-box-flex: 0;
5 5 flex: 0 0 41.6666666667%;
6 6 max-width: 41.6666666667%;
7   - left: 10%;
  7 + left: 20%;
8 8 margin-left: 0 !important;
9 9 }
10 10  
... ... @@ -14,6 +14,6 @@
14 14 -webkit-box-flex: 0;
15 15 flex: 0 0 41.6666666667%;
16 16 max-width: 41.6666666667%;
17   - right: 10%;
  17 + right: 20%;
18 18 margin-right: 0 !important;
19 19 }
src/app/modules/info-formas-pago/info-formas-pago.component.ts
Diff comments   View file @ bdfdb87
... ... @@ -7,14 +7,15 @@ 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);
... ... @@ -26,4 +27,12 @@ export class InfoFormasPagoComponent implements OnInit, OnDestroy {
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 @ bdfdb87
... ... @@ -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/mensaje-final/mensaje-final.component.ts
Diff comments   View file @ bdfdb87
... ... @@ -18,7 +18,7 @@ export class MensajeFinalComponent implements OnInit {
18 18 ngOnInit() {
19 19 this.timer = setTimeout(() => {
20 20 this.goToSplash();
21   - }, 10000);
  21 + }, 10000000);
22 22 this.mediaPantalla();
23 23 }
24 24  
src/app/modules/opcion-pedido/opcion-pedido.component.scss
Diff comments   View file @ bdfdb87
... ... @@ -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/opcion-pedido/opcion-pedido.component.ts
Diff comments   View file @ bdfdb87
... ... @@ -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 @ bdfdb87
... ... @@ -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 @ bdfdb87
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 @ bdfdb87
... ... @@ -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 @ bdfdb87
... ... @@ -19,29 +19,35 @@
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"
43   - src="{{urlImagenes}}{{categoria.path_imagen}}"
  46 + class="col-12 img-fluid align-self-end d-none
  47 + d-sm-block rounded-circle w-100 h-auto"
  48 + src="assets/img/hamb.png"
44 49 onerror="this.src='assets/img/image-not-found.jpg'">
  50 + <!-- {{urlImagenes}}{{categoria.path_imagen}} -->
45 51 <small class="col-12 px-1 my-1 h-100 h-md-25 align-self-end text-center text-truncate">{{categoria.detalle}}</small>
46 52 </div>
47 53 </div>
src/app/modules/seleccion-articulos/filtro-categorias/filtro-categorias.component.scss
Diff comments   View file @ bdfdb87
... ... @@ -35,7 +35,8 @@ $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 41 height: 76% !important;
41 42 }
src/app/modules/seleccion-articulos/filtro-categorias/filtro-categorias.component.ts
Diff comments   View file @ bdfdb87
... ... @@ -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 @ bdfdb87
... ... @@ -40,7 +40,7 @@
40 40 (contextmenu)="false"
41 41 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"
42 42 onerror="this.src='assets/img/image-not-found.jpg'"
43   - class="card-img-top h-30 h-md-55 rounded-sm">
  43 + class="card-img-top w-100 h-auto h-md-55 rounded-sm">
44 44 <div class="row mx-0 py-1 h-auto justify-content-center">
45 45 <p
46 46 [ngClass]="{'text-primary': articulo.PRO, 'text-secondary': !articulo.PRO}"
... ... @@ -129,7 +129,7 @@
129 129 draggable="false"
130 130 ondragstart="return false;"
131 131 (contextmenu)="false"
132   - class="d-block img-fluid p-2 mx-auto rounded"
  132 + class="d-block img-fluid p-2 mx-auto rounded w-100 h-auto"
133 133 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"
134 134 onerror="this.src='assets/img/image-not-found.jpg'">
135 135 <p class="d-block mt-auto text-center text-primary text-truncate">
... ... @@ -144,7 +144,8 @@
144 144 </div>
145 145 </div>
146 146 <!-- BOTON SCROLL DERECHA -->
147   - <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center">
  147 + <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect
  148 + h-20 align-self-center d-contents">
148 149 <img
149 150 draggable="false"
150 151 ondragstart="return false;"
src/app/modules/seleccion-articulos/seleccion-articulos.component.scss
Diff comments   View file @ bdfdb87
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 @ bdfdb87
... ... @@ -139,6 +139,7 @@ export class SeleccionArticulosComponent implements OnInit, AfterViewInit, OnDes
139 139 initialState: { articulosPromo: [articulo] },
140 140 class: 'modal-promo modal-dialog-centered'
141 141 });
  142 + this.mediaPantalla();
142 143 }
143 144  
144 145 openModalSinonimos(sinonimosData: ISinonimo[], articulo: IArticulo) {
... ... @@ -163,6 +164,7 @@ export class SeleccionArticulosComponent implements OnInit, AfterViewInit, OnDes
163 164 }
164 165 this.articuloService.setArticulo(articulo);
165 166 });
  167 + this.mediaPantalla();
166 168 }
167 169  
168 170 deleteArticulo(index: number) {
... ... @@ -200,7 +202,8 @@ export class SeleccionArticulosComponent implements OnInit, AfterViewInit, OnDes
200 202  
201 203 mediaPantalla() {
202 204 if ($('body').hasClass('media-pantalla')) {
203   - $('.cat-content,#content,.cat-btn,#boxCarrito,.cat-box,.img-categoria')
  205 + $(`.cat-content,#cat-content,#content,.cat-btn,#boxCarrito,
  206 + .cat-box,.img-categoria, .modal-content`)
204 207 .addClass('media-pantalla')
205 208 .addBack('media-pantalla');
206 209 }
src/app/shared/footer/footer.component.html
Diff comments   View file @ bdfdb87
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>
src/app/shared/footer/footer.component.ts
Diff comments   View file @ bdfdb87
... ... @@ -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/promocion/promocion.component.html
Diff comments   View file @ bdfdb87
1 1 <div class="d-flex justify-content-center"
2   - *ngIf="!articulosPromo.length">
  2 + *ngIf="loading">
3 3 <div class="spinner-border text-primary" role="status">
4 4 <span class="sr-only">Loading...</span>
5 5 </div>
... ... @@ -44,43 +44,3 @@
44 44 </div>
45 45 </div>
46 46 </div>
47   - <div class="modal-body bg-primary rounded-bottom pb-3 px-2">
48   - <div class="row mx-0 w-100">
49   - <div class="col-9">
50   - <p class="text-white"><small>¿TE GUSTARÍA LLEVAR ESTE ARTÍCULO</small></p>
51   - <h1 class="text-white mb-4">en un combo?</h1>
52   - </div>
53   - <div class="col-3">
54   - <img
55   - draggable="false"
56   - ondragstart="return false;"
57   - (contextmenu)="false"
58   - src="{{urlImagenes}}{{articulosPromo[0].imagenes[0].imagen}}"
59   - onerror="this.src='assets/img/image-not-found.jpg'"
60   - class="card-img-top img-fluid rounded-circle">
61   - </div>
62   - </div>
63   - <div
64   - class="row mx-0 lista-promociones scroll-y-visible"
65   - (scroll)="scrollEvent($event)">
66   - <div class="col-12">
67   - <div *ngFor="let promo of promociones">
68   - <div class="mx-0 mb-2 bg-white badge-pill text-primary" (click)="elegirPromo(promo)">
69   - <div class="d-flex">
70   - <p class="text-truncate mr-auto my-auto"><small>{{promo.DetArt}}</small></p>
71   - <p class="font-weight-bold my-auto pr-2">
72   - <span>{{promo.PreVen | currency}}</span>
73   - </p>
74   - <img
75   - draggable="false"
76   - ondragstart="return false;"
77   - (contextmenu)="false"
78   - class="d-block icon-30 py-1"
79   - src="assets/img/ir-color.svg">
80   - </div>
81   - </div>
82   - </div>
83   - </div>
84   - </div>
85   - </div>
86   -</div>
87 47 \ No newline at end of file
src/app/shared/promocion/promocion.component.ts
Diff comments   View file @ bdfdb87
... ... @@ -51,6 +51,7 @@ export class PromocionComponent implements OnInit {
51 51 }
52 52  
53 53 openModalSinonimos(sinonimosData: ISinonimo[], articulo: IArticulo) {
  54 + console.log('lanzado open sinonimos');
54 55 const modalSinonimo = this.modalService.show(SinonimoComponent, {
55 56 initialState: { sinonimos: sinonimosData },
56 57 class: 'modal-promo modal-dialog-centered'
... ... @@ -75,7 +76,7 @@ export class PromocionComponent implements OnInit {
75 76 });
76 77 }
77 78  
78   - getPromociones() {
  79 + getPromociones() {
79 80 const sector = this.articulosPromo[0].CodSec;
80 81 const codigo = this.articulosPromo[0].CodArt;
81 82 this.promocionService.getPromociones(sector, codigo)
... ... @@ -27,6 +27,7 @@ body.media-pantalla {
27 27 position: absolute;
28 28 bottom: 0;
29 29 width: 100%;
  30 + background-color: #3d3d3d;
30 31 }
31 32  
32 33 .btn-effect {
... ... @@ -85,13 +86,6 @@ p {
85 86 opacity: 0.5;
86 87 }
87 88  
88   -body.media-pantalla {
89   - height: 50% !important;
90   - position: absolute;
91   - bottom: 0;
92   - width: 100%;
93   -}
94   -
95 89 .modal-content.media-pantalla {
96 90 margin-top: auto !important;
97 91 margin-bottom: 50px !important;