Luis Suarez / autoservicio-axion

Download as
Browse Code »

Commit 27f29326c7c53ce39e1505390526e9e238301a3e

Authored by Luis Suarez
1 parent f4af24c2cb
Exists in 20200117-axion-responsive

corregido error en sleeccion de articulos, adaptado carrito y opciones de pago

Showing 14 changed files with 103 additions and 37 deletions   Show diff stats
src/app/modules/cancelar-compra/cancelar-compra.component.ts
Diff comments   View file @ 27f2932
... ... @@ -20,9 +20,8 @@ export class CancelarCompraComponent implements OnInit {
20 20 setTimeout(() => {
21 21 this.limpiarCarritoYvolver();
22 22 }, 90000);
23   - if ($("body").hasClass("lash")) {
24   - $("#cancelImg,#cancelCard").addClass("lash");
25   - }
  23 + this.mediaPantalla();
  24 +
26 25 }
27 26  
28 27 volverPreviousPage() {
... ... @@ -33,4 +32,10 @@ export class CancelarCompraComponent implements OnInit {
33 32 this.articuloService.carrito = undefined;
34 33 this.router.navigate(['/']);
35 34 }
  35 +
  36 + mediaPantalla(){
  37 + if ($("body").hasClass("lash")) {
  38 + $("#cancelImg,#cancelCard").addClass("lash");
  39 + }
  40 + }
36 41 }
src/app/modules/carrito/carrito.component.html
Diff comments   View file @ 27f2932
... ... @@ -13,14 +13,14 @@
13 13 </div>
14 14  
15 15 <!-- CARRITO -->
16   - <div class="row mx-2 mt-4 h-80 justify-content-center align-content-start scroll-y-visible">
  16 + <div class="row mx-2 mt-4 h-80 justify-content-center align-content-start scroll-y-visible" id="carrito">
17 17 <!-- MENSAJE DE ADVERTENCIA -->
18 18 <div class="col-10 align-self-center alert alert-primary" *ngIf="!articuloService.carrito.length">
19 19 <p class="h5 text-center">No hay artículos en el carrito</p>
20 20 </div>
21 21 <!-- ARTICULOS -->
22 22 <div
23   - class="col-12 col-xl-6 p-2 h-25 text-center text-truncate"
  23 + class="col-12 col-xl-6 p-2 h-25 text-center text-truncate" [ngClass]="{'lash':flagPantalla == true}" id="art-carrito"
24 24 *ngFor="let articulo of articuloService.carrito; let i = index;"
25 25 @EnterLeave>
26 26 <!-- ARTICULO -->
src/app/modules/carrito/carrito.component.scss
Diff comments   View file @ 27f2932
... ... @@ -2,3 +2,11 @@
2 2 width: 75px;
3 3 border-radius: 1.5rem;
4 4 }
  5 +
  6 + #art-carrito.lash{
  7 + min-height: 130px !important;
  8 +}
  9 +
  10 +#carrito.lash{
  11 + max-height: 60% !important;
  12 +}
5 13 \ No newline at end of file
src/app/modules/carrito/carrito.component.ts
Diff comments   View file @ 27f2932
... ... @@ -26,7 +26,7 @@ import { Router } from &#39;@angular/router&#39;;
26 26 export class CarritoComponent implements OnInit {
27 27 urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`;
28 28 maxCantidad = 50;
29   -
  29 + flagPantalla:boolean = false;
30 30 constructor(
31 31 public articuloService: ArticuloService,
32 32 private location: Location,
... ... @@ -38,6 +38,7 @@ export class CarritoComponent implements OnInit {
38 38 this.router.navigate(['']);
39 39 return;
40 40 }
  41 + this.mediaPantalla()
41 42 }
42 43  
43 44 deleteArticulo(index: number) {
... ... @@ -60,5 +61,10 @@ export class CarritoComponent implements OnInit {
60 61 goBack() {
61 62 this.location.back();
62 63 }
63   -
  64 + mediaPantalla(){
  65 + if ($("body").hasClass("lash")) {
  66 + $("#carrito").addClass("lash");
  67 + this.flagPantalla = true;
  68 + }
  69 + }
64 70 }
src/app/modules/forma-pago/forma-pago.component.html
Diff comments   View file @ 27f2932
... ... @@ -18,7 +18,7 @@
18 18 </div>
19 19 </div>
20 20 <!-- OPCION PAGO ELECTRONICO -->
21   - <div class="row mt-5 h-auto justify-content-center mx-0">
  21 + <div class="row mt-5 h-auto justify-content-center mx-0" id="card1">
22 22 <div class="col-auto px-0 h-auto align-self-start">
23 23 <div
24 24 class="btn-effect col-auto align-self-center px-0 bg-white"
... ... @@ -46,7 +46,7 @@
46 46 </div>
47 47 </div>
48 48 <!-- OPCION PAGO CON TARJETA -->
49   - <div class="row mt-5 h-auto justify-content-center mx-0">
  49 + <div class="row mt-5 h-auto justify-content-center mx-0" id="card2">
50 50 <div class="col-auto px-0 h-auto align-self-start">
51 51 <div
52 52 class="btn-effect col-auto align-self-center px-0 bg-white"
... ... @@ -60,7 +60,7 @@
60 60 class="p-1 icon-50"
61 61 src="assets/img/icono-take-away.svg">
62 62 </div>
63   - <div class="col-auto align-self-center text-white">Pago con tarjeta</div>
  63 + <div class="col-auto align-self-center text-white" id="">Pago con tarjeta</div>
64 64 <div class="col-auto align-self-center p-0">
65 65 <img
66 66 draggable="false"
src/app/modules/forma-pago/forma-pago.component.scss
Diff comments   View file @ 27f2932
... ... @@ -0,0 +1,19 @@
  1 +#card1.lash{
  2 + position: absolute;
  3 + bottom: 150px;
  4 + -webkit-box-flex: 0;
  5 + flex: 0 0 41.6666666667%;
  6 + max-width: 41.6666666667%;
  7 + left: 10%;
  8 + margin-left: 0 !important;
  9 + }
  10 +
  11 + #card2.lash{
  12 + position: absolute;
  13 + bottom: 150px;
  14 + -webkit-box-flex: 0;
  15 + flex: 0 0 41.6666666667%;
  16 + max-width: 41.6666666667%;
  17 + right: 10%;
  18 + margin-right: 0 !important;
  19 + }
0 20 \ No newline at end of file
src/app/modules/forma-pago/forma-pago.component.ts
Diff comments   View file @ 27f2932
... ... @@ -19,6 +19,8 @@ export class FormaPagoComponent implements OnInit {
19 19 this.router.navigate(['']);
20 20 return;
21 21 }
  22 + this.mediaPantalla();
  23 +
22 24 }
23 25  
24 26 medioPago(medioPago: number) {
... ... @@ -32,5 +34,9 @@ export class FormaPagoComponent implements OnInit {
32 34 break;
33 35 }
34 36 }
35   -
  37 + mediaPantalla(){
  38 + if ($("body").hasClass("lash")) {
  39 + $("#card1,#card2").addClass("lash");
  40 + }
  41 + }
36 42 }
src/app/modules/info-formas-pago/info-formas-pago.component.ts
Diff comments   View file @ 27f2932
... ... @@ -9,7 +9,10 @@ export class InfoFormasPagoComponent implements OnInit {
9 9 constructor() {}
10 10  
11 11 ngOnInit() {
  12 + this.mediaPantalla();
  13 + }
12 14  
  15 + mediaPantalla(){
13 16 if ($("body").hasClass("lash")) {
14 17 $("#card1,#card2").addClass("lash");
15 18 }
src/app/modules/opcion-pedido/opcion-pedido.component.ts
Diff comments   View file @ 27f2932
... ... @@ -13,9 +13,7 @@ export class OpcionPedidoComponent implements OnInit {
13 13 ) { }
14 14  
15 15 ngOnInit() {
16   - if ($("body").hasClass("lash")) {
17   - $("#card1,#card2").addClass("lash");
18   - }
  16 + this.mediaPantalla();
19 17 }
20 18  
21 19 goTo(path) {
... ... @@ -25,4 +23,9 @@ export class OpcionPedidoComponent implements OnInit {
25 23 seleccionPedido(lugar) {
26 24 localStorage.setItem('pedidoPara', lugar);
27 25 }
  26 + mediaPantalla(){
  27 + if ($("body").hasClass("lash")) {
  28 + $("#card1,#card2").addClass("lash");
  29 + }
  30 + }
28 31 }
src/app/modules/pago-tarjeta/pago-tarjeta.component.html
Diff comments   View file @ 27f2932
... ... @@ -11,7 +11,7 @@
11 11 </div>
12 12 <div class="h-85">
13 13 <div class="row h-50 mx-0 justify-content-center text-center">
14   - <div class="col-7 p-5 h-auto align-self-end border border-secondary rounded">
  14 + <div class="col-7 p-5 mt-5 h-auto align-self-end border border-secondary rounded">
15 15 <img
16 16 draggable="false"
17 17 ondragstart="return false;"
src/app/modules/seleccion-articulos/seleccion-articulos.component.html
Diff comments   View file @ 27f2932
... ... @@ -35,9 +35,9 @@
35 35 #templateCategorias
36 36 class="col-12 px-0 box-categorias border border-primary border-left-0 rounded-right scroll-y">
37 37 <div
38   - class="row mx-4 mb-2 h-32 justify-content-center tab"
  38 + class="row mx-4 mb-2 h-32 justify-content-center tab catContent"
39 39 [ngClass]="{ 'active': allActive, 'border-bottom-effect': !allActive }"
40   - (click)="selectCategoria(-1, 0)" id="catContent">
  40 + (click)="selectCategoria(-1, 0)" id="">
41 41 <img
42 42 draggable="false"
43 43 ondragstart="return false;"
... ... @@ -47,10 +47,10 @@
47 47 <small class="col-12 px-0 my-1 h-25 align-self-end text-center text-truncate">Todos</small>
48 48 </div>
49 49 <div
50   - class="row mx-4 mb-2 h-32 justify-content-center tab"
51   - [ngClass]="{ 'active': categoria.selected, 'border-bottom-effect': !categoria.selected }"
  50 + class="row mx-4 mb-2 h-32 justify-content-center tab catContent"
  51 + [ngClass]="{ 'active': categoria.selected, 'border-bottom-effect': !categoria.selected, 'lash':mpActive }"
52 52 (click)="selectCategoria(i, categoria.id)"
53   - *ngFor="let categoria of categorias; let i = index;">
  53 + *ngFor="let categoria of categorias; let i = index;" id="">
54 54 <img
55 55 draggable="false"
56 56 ondragstart="return false;"
... ... @@ -133,7 +133,7 @@
133 133 </div>
134 134 <!-- FOOTER CARRITO DE COMPRAS -->
135 135 <div class="row w-90 mx-auto h-auto justify-content-center">
136   - <div class="col-12 h-75 px-0 border border-primary rounded">
  136 + <div class="h-75 px-0 border border-primary rounded" #boxCarrito [ngClass]="boxCarrito.classList.contains('lash') && articuloService.carrito.length ? 'col-8' : 'col-12'" id="boxCarrito">
137 137 <!-- CABECERA -->
138 138 <div class="row mx-0 h-15 border-bottom border-primary">
139 139 <p class="col align-self-center text-truncate"><small>ARTÍCULOS EN TÚ CARRITO DE COMPRAS</small></p>
... ... @@ -194,8 +194,10 @@
194 194 </div>
195 195 <!-- VER CARRITO Y TOTAL-->
196 196 <div
197   - class="col-auto p-0 mt-2 ml-auto h-20"
198   - *ngIf="articuloService.carrito.length">
  197 + class=" p-0 mt-2 ml-auto h-20"
  198 + *ngIf="articuloService.carrito.length"
  199 + [ngClass]="boxCarrito.classList.contains('col-8') ? 'col-4' : 'col-auto'"
  200 + id="bagsCarrito">
199 201 <div
200 202 class="btn-effect col-auto align-self-center px-0 bg-white"
201 203 [routerLink]="['/carrito']">
... ... @@ -204,8 +206,10 @@
204 206 <div class="col-auto p-0 bg-primary d-none d-sm-block bg-total">
205 207 <p class="text-center text-white mt-1 py-1">{{articuloService.subTotal | currency}}</p>
206 208 </div>
207   - <div class="col-auto align-self-center text-primary ml-2 bg-light">VER CARRITO</div>
208   - <div class="col-auto p-0 bg-primary d-none d-sm-block">
  209 + <div class="col-auto align-self-center text-primary ml-2 bg-light"
  210 + [ngClass]="{'mt-4':boxCarrito.classList.contains('col-8')}" id="ver-car">VER CARRITO</div>
  211 + <div class="col-auto p-0 bg-primary d-none d-sm-block"
  212 + [ngClass]="{'mt-4':boxCarrito.classList.contains('col-8')}" id="img-car">
209 213 <img
210 214 draggable="false"
211 215 ondragstart="return false;"
src/app/modules/seleccion-articulos/seleccion-articulos.component.scss
Diff comments   View file @ 27f2932
... ... @@ -48,11 +48,11 @@ $primary: #aa006b;
48 48 max-height: 60% !important;
49 49 }
50 50  
51   -#catContent.lash{
  51 +.catContent.lash{
52 52 margin: 1.3rem 0.9rem !important;
53 53 height: 60% !important;
54 54 }
55 55  
56 56 .cat-btn.lash{
57 57 height: 7% !important;
58   -}
59 58 \ No newline at end of file
  59 +}
src/app/modules/seleccion-articulos/seleccion-articulos.component.ts
Diff comments   View file @ 27f2932
... ... @@ -26,17 +26,16 @@ export class SeleccionArticulosComponent implements OnInit {
26 26 allActive = true;
27 27 modalRef: BsModalRef;
28 28 total: number = 0;
29   -
  29 + mpActive:boolean = false;
30 30 constructor(
31 31 public articuloService: ArticuloService,
32 32 private categoriaService: CategoriaService,
33 33 ) { }
34 34  
  35 +
35 36 ngOnInit() {
36 37 this.getCategorias();
37   - if ($("body").hasClass("lash")) {
38   - $("#catContent,#content,#headerPub,#headerPad,.cat-btn").addClass("lash");
39   - }
  38 + this.mediaPantalla();
40 39 }
41 40  
42 41 getCategorias() {
... ... @@ -152,4 +151,13 @@ export class SeleccionArticulosComponent implements OnInit {
152 151 el.scroll({ behavior: 'smooth', left: value + el.scrollLeft });
153 152 }, 500);
154 153 }
  154 +
  155 + mediaPantalla(){
  156 + if ($("body").hasClass("lash")) {
  157 + $(".catContent,#content,#headerPub,#headerPad,.cat-btn,#boxCarrito").addClass("lash");
  158 + this.mpActive=true;
  159 + }
  160 + }
  161 +
155 162 }
  163 +
src/app/shared/footer/footer.component.ts
Diff comments   View file @ 27f2932
... ... @@ -11,12 +11,7 @@ export class FooterComponent implements OnInit {
11 11  
12 12  
13 13 constructor(private location: Location) {
14   - $(document).ready(function(){
15   - $("#test").click(function(){
16   - $("body,#card1,#card2,#content,#catContent,#headerPub,#headerPad,.cat-btn,#cancelImg,#cancelCard").toggleClass("lash");
17   - });
18   - });
19   -
  14 + this.mediaPantalla();
20 15 }
21 16  
22 17 ngOnInit() {}
... ... @@ -24,4 +19,13 @@ export class FooterComponent implements OnInit {
24 19 goBack() {
25 20 this.location.back();
26 21 }
  22 + mediaPantalla(){
  23 + $(document).ready(function(){
  24 + $("#test").click(function(){
  25 + $("body,#card1,#card2,#content,.catContent,#headerPub,#headerPad,.cat-btn,#boxCarrito,#cancelImg,#cancelCard,#carrito,#art-carrito").toggleClass("lash");
  26 + $("#bagsCarrito").toggleClass(["col-auto","col-4"]);
  27 + $("#ver-car,#img-car").toggleClass("mt-4");
  28 + });
  29 + });
  30 + }
27 31 }