Luis Suarez / autoservicio-axion

Download as
Browse Code »

Commit 8d599c3d3e110f69c7eacb00ac927f632e9e3423

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

correcciones merge request

Showing 21 changed files with 84 additions and 83 deletions   Show diff stats
src/app/modules/cancelar-compra/cancelar-compra.component.scss
Diff comments   View file @ 8d599c3
1 .bg-grey { 1 .bg-grey {
2 background-color: rgb(212, 212, 212); 2 background-color: rgb(212, 212, 212);
3 } 3 }
4 4
5 #cancelCard.lash{ 5 #cancelCard.media-pantalla{
6 height: 45% !important; 6 height: 45% !important;
7 margin-top: 1rem !important; 7 margin-top: 1rem !important;
8 } 8 }
9 9
10 #cancelCard.lash h4{ 10 #cancelCard.media-pantalla h4{
11 margin-top: 1rem !important; 11 margin-top: 1rem !important;
12 } 12 }
13 13
14 #cancelImg.lash{ 14 #cancelImg.media-pantalla{
15 height: 20% !important; 15 height: 20% !important;
16 } 16 }
17 17
18 #cancelImg.lash img{ 18 #cancelImg.media-pantalla img{
19 max-width: 15% !important; 19 max-width: 15% !important;
20 }
20 }
src/app/modules/cancelar-compra/cancelar-compra.component.ts
Diff comments   View file @ 8d599c3
1 import { Component, OnInit } from '@angular/core'; 1 import { Component, OnInit } from '@angular/core';
2 import { Location } from '@angular/common'; 2 import { Location } from '@angular/common';
3 import { ArticuloService } from 'src/app/services/articulo/articulo.service'; 3 import { ArticuloService } from 'src/app/services/articulo/articulo.service';
4 import { Router } from '@angular/router'; 4 import { Router } from '@angular/router';
5 5
6 @Component({ 6 @Component({
7 selector: 'app-cancelar-compra', 7 selector: 'app-cancelar-compra',
8 templateUrl: './cancelar-compra.component.html', 8 templateUrl: './cancelar-compra.component.html',
9 styleUrls: ['./cancelar-compra.component.scss'] 9 styleUrls: ['./cancelar-compra.component.scss']
10 }) 10 })
11 export class CancelarCompraComponent implements OnInit { 11 export class CancelarCompraComponent implements OnInit {
12 12
13 constructor( 13 constructor(
14 private location: Location, 14 private location: Location,
15 private router: Router, 15 private router: Router,
16 private articuloService: ArticuloService 16 private articuloService: ArticuloService
17 ) { } 17 ) {}
18 18
19 ngOnInit() { 19 ngOnInit() {
20 setTimeout(() => { 20 setTimeout(() => {
21 this.limpiarCarritoYvolver(); 21 this.limpiarCarritoYvolver();
22 }, 90000); 22 }, 90000);
23 this.mediaPantalla(); 23 this.mediaPantalla();
24
25 } 24 }
26 25
27 volverPreviousPage() { 26 volverPreviousPage() {
28 this.location.back(); 27 this.location.back();
29 } 28 }
30 29
31 limpiarCarritoYvolver() { 30 limpiarCarritoYvolver() {
32 this.articuloService.carrito = undefined; 31 this.articuloService.carrito = undefined;
33 this.router.navigate(['/']); 32 this.router.navigate(['/']);
34 } 33 }
35 34
36 mediaPantalla(){ 35 mediaPantalla() {
37 if ($("body").hasClass("lash")) { 36 if ($('body').hasClass('media-pantalla')) {
38 $("#cancelImg,#cancelCard").addClass("lash"); 37 $('#cancelImg,#cancelCard').addClass('media-pantalla');
39 } 38 }
40 } 39 }
41 } 40 }
41
src/app/modules/carrito/carrito.component.html
Diff comments   View file @ 8d599c3
1 <div class="h-92 bg-white fade-in-left"> 1 <div class="h-92 bg-white fade-in-left">
2 <!-- PUBLICIDADES --> 2 <!-- PUBLICIDADES -->
3 <app-header-publicidad></app-header-publicidad> 3 <app-header-publicidad></app-header-publicidad>
4 4
5 <div class="h-75"> 5 <div class="h-75">
6 <!-- CABECERA --> 6 <!-- CABECERA -->
7 <div class="row mx-3 h-auto border border-primary rounded-sm"> 7 <div class="row mx-3 h-auto border border-primary rounded-sm">
8 <div class="col-12 px-0 py-2 align-self-center"> 8 <div class="col-12 px-0 py-2 align-self-center">
9 <div class="px-3"> 9 <div class="px-3">
10 <p class="h6 text-truncate">ESTE ES TÚ CARRITO DE COMPRAS</p> 10 <p class="h6 text-truncate">ESTE ES TÚ CARRITO DE COMPRAS</p>
11 </div> 11 </div>
12 </div> 12 </div>
13 </div> 13 </div>
14 14
15 <!-- CARRITO --> 15 <!-- CARRITO -->
16 <div class="row mx-2 mt-4 h-80 justify-content-center align-content-start scroll-y-visible" id="carrito"> 16 <div class="row mx-2 mt-4 h-80 justify-content-center align-content-start scroll-y-visible"
17 id="carrito">
17 <!-- MENSAJE DE ADVERTENCIA --> 18 <!-- MENSAJE DE ADVERTENCIA -->
18 <div class="col-10 align-self-center alert alert-primary" *ngIf="!articuloService.carrito.length"> 19 <div class="col-10 align-self-center alert alert-primary" *ngIf="!articuloService.carrito.length">
19 <p class="h5 text-center">No hay artículos en el carrito</p> 20 <p class="h5 text-center">No hay artículos en el carrito</p>
20 </div> 21 </div>
21 <!-- ARTICULOS --> 22 <!-- ARTICULOS -->
22 <div 23 <div
23 class="col-12 col-xl-6 p-2 h-25 text-center text-truncate" [ngClass]="{'lash':flagPantalla == true}" id="art-carrito" 24 class="col-12 col-xl-6 p-2 h-25 text-center text-truncate"
25 [ngClass]="{'media-pantalla':flagPantalla == true}" id="art-carrito"
24 *ngFor="let articulo of articuloService.carrito; let i = index;" 26 *ngFor="let articulo of articuloService.carrito; let i = index;"
25 @EnterLeave> 27 @EnterLeave>
26 <!-- ARTICULO --> 28 <!-- ARTICULO -->
27 <div class="h-100 px-2 py-4 border border-primary rounded-sm"> 29 <div class="h-100 px-2 py-4 border border-primary rounded-sm">
28 <div class="row mx-0 h-100"> 30 <div class="row mx-0 h-100">
29 <!-- NOMBRE E IMAGEN --> 31 <!-- NOMBRE E IMAGEN -->
30 <div class="col-3 h-100 border-right border-primary align-self-center"> 32 <div class="col-3 h-100 border-right border-primary align-self-center">
31 <img 33 <img
32 draggable="false" 34 draggable="false"
33 ondragstart="return false;" 35 ondragstart="return false;"
34 (contextmenu)="false" 36 (contextmenu)="false"
35 class="d-block mx-auto h-55 rounded-sm shadow-sm" 37 class="d-block mx-auto h-55 rounded-sm shadow-sm"
36 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}" 38 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"
37 onerror="this.src='assets/img/image-not-found.jpg'"> 39 onerror="this.src='assets/img/image-not-found.jpg'">
38 <div class="row mx-0 h-45"> 40 <div class="row mx-0 h-45">
39 <p class="col text-primary text-truncate align-self-end"> 41 <p class="col text-primary text-truncate align-self-end">
40 <small>{{articulo.DetArt}}</small> 42 <small>{{articulo.DetArt}}</small>
41 </p> 43 </p>
42 </div> 44 </div>
43 </div> 45 </div>
44 <!-- CANTIDAD --> 46 <!-- CANTIDAD -->
45 <div class="col-3 border-right border-primary"> 47 <div class="col-3 border-right border-primary">
46 <p><small>CANT</small></p> 48 <p><small>CANT</small></p>
47 <div class="row mt-2 mx-0"> 49 <div class="row mt-2 mx-0">
48 <div class="col-12 h-auto"> 50 <div class="col-12 h-auto">
49 <div class="row mx-0 justify-content-between bg-primary badge-pill"> 51 <div class="row mx-0 justify-content-between bg-primary badge-pill">
50 <!-- BOTON MENOS --> 52 <!-- BOTON MENOS -->
51 <div class="col-auto px-0"> 53 <div class="col-auto px-0">
52 <img 54 <img
53 draggable="false" 55 draggable="false"
54 ondragstart="return false;" 56 ondragstart="return false;"
55 (contextmenu)="false" 57 (contextmenu)="false"
56 class="d-block ml-auto py-2 icon-20 btn-effect" 58 class="d-block ml-auto py-2 icon-20 btn-effect"
57 src="assets/img/menos-blanco.svg" 59 src="assets/img/menos-blanco.svg"
58 (click)="substractCant(articulo)"> 60 (click)="substractCant(articulo)">
59 </div> 61 </div>
60 <!-- CANTIDAD --> 62 <!-- CANTIDAD -->
61 <div class="col px-0 align-self-center text-white"> 63 <div class="col px-0 align-self-center text-white">
62 <p><small>{{articulo.cantidad}}</small></p> 64 <p><small>{{articulo.cantidad}}</small></p>
63 </div> 65 </div>
64 <!-- BOTON MAS --> 66 <!-- BOTON MAS -->
65 <div class="col-auto px-0"> 67 <div class="col-auto px-0">
66 <img 68 <img
67 draggable="false" 69 draggable="false"
68 ondragstart="return false;" 70 ondragstart="return false;"
69 (contextmenu)="false" 71 (contextmenu)="false"
70 class="d-block ml-auto py-2 icon-20 btn-effect" 72 class="d-block ml-auto py-2 icon-20 btn-effect"
71 src="assets/img/mas-blanco.svg" 73 src="assets/img/mas-blanco.svg"
72 (click)="addCant(articulo)"> 74 (click)="addCant(articulo)">
73 </div> 75 </div>
74 </div> 76 </div>
75 </div> 77 </div>
76 </div> 78 </div>
77 </div> 79 </div>
78 <!-- OPCIONALES --> 80 <!-- OPCIONALES -->
79 <!-- <div class="col-3 border-right border-primary"> 81 <!-- <div class="col-3 border-right border-primary">
80 <p><small>OPCIONALES</small></p> 82 <p><small>OPCIONALES</small></p>
81 <div class="py-1 badge-pill bg-dark text-white"><p><small>{{'AZÚCAR'}}</small></p></div> 83 <div class="py-1 badge-pill bg-dark text-white"><p><small>{{'AZÚCAR'}}</small></p></div>
82 <div class="row mx-0 mt-2 justify-content-center"> 84 <div class="row mx-0 mt-2 justify-content-center">
83 <div class="col-auto pl-3 btn-effect bg-primary badge-pill text-white"> 85 <div class="col-auto pl-3 btn-effect bg-primary badge-pill text-white">
84 <span> 86 <span>
85 <small class="pr-2">CAMBIAR</small> 87 <small class="pr-2">CAMBIAR</small>
86 <img 88 <img
87 draggable="false" 89 draggable="false"
88 ondragstart="return false;" 90 ondragstart="return false;"
89 (contextmenu)="false" 91 (contextmenu)="false"
90 class="icon-20" 92 class="icon-20"
91 src="assets/img/ir.svg"> 93 src="assets/img/ir.svg">
92 </span> 94 </span>
93 </div> 95 </div>
94 </div> --> 96 </div> -->
95 <!-- PRECIO --> 97 <!-- PRECIO -->
96 <div class="col-3 border-right border-primary"> 98 <div class="col-3 border-right border-primary">
97 <p><small>PRECIO</small></p> 99 <p><small>PRECIO</small></p>
98 <div class="py-1 mt-2 badge-pill bg-dark text-white"> 100 <div class="py-1 mt-2 badge-pill bg-dark text-white">
99 <p><small>{{articulo.PreVen | currency}}</small></p> 101 <p><small>{{articulo.PreVen | currency}}</small></p>
100 </div> 102 </div>
101 </div> 103 </div>
102 <!-- ELIMINAR --> 104 <!-- ELIMINAR -->
103 <div class="col-3 align-self-center"> 105 <div class="col-3 align-self-center">
104 <div class="row mx-0 justify-content-center"> 106 <div class="row mx-0 justify-content-center">
105 <div 107 <div
106 class="col-auto px-3 py-1 btn-effect bg-primary badge-pill text-white" 108 class="col-auto px-3 py-1 btn-effect bg-primary badge-pill text-white"
107 (click)="deleteArticulo(i)"> 109 (click)="deleteArticulo(i)">
108 <span> 110 <span>
109 <small class="pr-2">ELIMINAR</small> 111 <small class="pr-2">ELIMINAR</small>
110 <img 112 <img
111 draggable="false" 113 draggable="false"
112 ondragstart="return false;" 114 ondragstart="return false;"
113 (contextmenu)="false" 115 (contextmenu)="false"
114 class="icon-20 rotate-45" 116 class="icon-20 rotate-45"
115 src="assets/img/mas-blanco.svg"> 117 src="assets/img/mas-blanco.svg">
116 </span> 118 </span>
117 </div> 119 </div>
118 </div> 120 </div>
119 </div> 121 </div>
120 </div> 122 </div>
121 </div> 123 </div>
122 </div> 124 </div>
123 </div> 125 </div>
124 <!-- TOTAL --> 126 <!-- TOTAL -->
125 <div class="row mx-3 mt-2 h-auto justify-content-end"> 127 <div class="row mx-3 mt-2 h-auto justify-content-end">
126 <div class="col-auto align-self-center text-primary"><small>TOTAL</small></div> 128 <div class="col-auto align-self-center text-primary"><small>TOTAL</small></div>
127 <div class="col-auto p-0 bg-primary d-none d-sm-block bg-total"> 129 <div class="col-auto p-0 bg-primary d-none d-sm-block bg-total">
128 <p class="text-center text-white mt-1 py-1">{{articuloService.subTotal | currency}}</p> 130 <p class="text-center text-white mt-1 py-1">{{articuloService.subTotal | currency}}</p>
129 </div> 131 </div>
130 </div> 132 </div>
131 <!-- CONTINUAR --> 133 <!-- CONTINUAR -->
132 <div 134 <div
133 *ngIf="articuloService.carrito.length" 135 *ngIf="articuloService.carrito.length"
134 class="row mx-3 mt-4 h-auto justify-content-end"> 136 class="row mx-3 mt-4 h-auto justify-content-end">
135 <div 137 <div
136 class="col-auto py-2 px-3 align-self-center btn-effect bg-primary badge-pill text-white" 138 class="col-auto py-2 px-3 align-self-center btn-effect bg-primary badge-pill text-white"
137 [routerLink]="['/forma-pago']"> 139 [routerLink]="['/forma-pago']">
138 <span> 140 <span>
139 <small class="pr-2">CONTINUAR</small> 141 <small class="pr-2">CONTINUAR</small>
140 <img 142 <img
141 draggable="false" 143 draggable="false"
142 ondragstart="return false;" 144 ondragstart="return false;"
143 (contextmenu)="false" 145 (contextmenu)="false"
144 class="icon-20" 146 class="icon-20"
145 src="assets/img/ir.svg"> 147 src="assets/img/ir.svg">
146 </span> 148 </span>
147 </div> 149 </div>
148 </div> 150 </div>
149 <!-- SEGUIR COMPRANDO --> 151 <!-- SEGUIR COMPRANDO -->
150 <!-- <div class="row mx-3 mt-2 h-auto justify-content-end"> 152 <!-- <div class="row mx-3 mt-2 h-auto justify-content-end">
151 <div 153 <div
152 class="col-auto py-2 px-3 align-self-center btn-effect bg-primary badge-pill text-white" 154 class="col-auto py-2 px-3 align-self-center btn-effect bg-primary badge-pill text-white"
153 (click)="goBack()"> 155 (click)="goBack()">
154 <span> 156 <span>
155 <small class="pr-2">SEGUIR COMPRANDO</small> 157 <small class="pr-2">SEGUIR COMPRANDO</small>
156 <img 158 <img
157 draggable="false" 159 draggable="false"
158 ondragstart="return false;" 160 ondragstart="return false;"
159 (contextmenu)="false" 161 (contextmenu)="false"
160 class="icon-20" 162 class="icon-20"
161 src="assets/img/ir.svg"> 163 src="assets/img/ir.svg">
162 </span> 164 </span>
163 </div> 165 </div>
164 </div> --> 166 </div> -->
165 </div> 167 </div>
166 168
167 </div> 169 </div>
168 170
src/app/modules/carrito/carrito.component.scss
Diff comments   View file @ 8d599c3
1 .bg-total { 1 .bg-total {
2 width: 75px; 2 width: 75px;
3 border-radius: 1.5rem; 3 border-radius: 1.5rem;
4 } 4 }
5 5
6 #art-carrito.lash{ 6 #art-carrito.media-pantalla{
7 min-height: 130px !important; 7 min-height: 130px !important;
8 } 8 }
9 9
10 #carrito.lash{ 10 #carrito.media-pantalla{
11 max-height: 60% !important; 11 max-height: 60% !important;
12 }
12 }
src/app/modules/carrito/carrito.component.ts
Diff comments   View file @ 8d599c3
1 import { Component, OnInit } from '@angular/core'; 1 import { Component, OnInit } from '@angular/core';
2 import { Location } from '@angular/common'; 2 import { Location } from '@angular/common';
3 import { ArticuloService } from 'src/app/services/articulo/articulo.service'; 3 import { ArticuloService } from 'src/app/services/articulo/articulo.service';
4 import { APP_SETTINGS } from 'src/etc/AppSettings'; 4 import { APP_SETTINGS } from 'src/etc/AppSettings';
5 import { trigger, state, style, transition, animate } from '@angular/animations'; 5 import { trigger, state, style, transition, animate } from '@angular/animations';
6 import { IArticulo } from 'src/app/interfaces/IArticulo'; 6 import { IArticulo } from 'src/app/interfaces/IArticulo';
7 import { Router } from '@angular/router'; 7 import { Router } from '@angular/router';
8 8
9 @Component({ 9 @Component({
10 selector: 'app-carrito', 10 selector: 'app-carrito',
11 templateUrl: './carrito.component.html', 11 templateUrl: './carrito.component.html',
12 styleUrls: ['./carrito.component.scss'], 12 styleUrls: ['./carrito.component.scss'],
13 animations: [ 13 animations: [
14 trigger('EnterLeave', [ 14 trigger('EnterLeave', [
15 state('flyIn', style({ transform: 'translateX(0)' })), 15 state('flyIn', style({ transform: 'translateX(0)' })),
16 transition(':enter', [ 16 transition(':enter', [
17 style({ transform: 'translateX(-100%)' }), 17 style({ transform: 'translateX(-100%)' }),
18 animate('1s ease-in') 18 animate('1s ease-in')
19 ]), 19 ]),
20 transition(':leave', [ 20 transition(':leave', [
21 animate('1s ease-out', style({ transform: 'translateX(-100%)' })) 21 animate('1s ease-out', style({ transform: 'translateX(-100%)' }))
22 ]) 22 ])
23 ]) 23 ])
24 ] 24 ]
25 }) 25 })
26 export class CarritoComponent implements OnInit { 26 export class CarritoComponent implements OnInit {
27 urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`; 27 urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`;
28 maxCantidad = 50; 28 maxCantidad = 50;
29 flagPantalla:boolean = false; 29 flagPantalla = false;
30 constructor( 30 constructor(
31 public articuloService: ArticuloService, 31 public articuloService: ArticuloService,
32 private location: Location, 32 private location: Location,
33 private router: Router, 33 private router: Router,
34 ) { } 34 ) { }
35 35
36 ngOnInit() { 36 ngOnInit() {
37 if (!this.articuloService.carrito.length) { 37 if (!this.articuloService.carrito.length) {
38 this.router.navigate(['']); 38 this.router.navigate(['']);
39 return; 39 return;
40 } 40 }
41 this.mediaPantalla() 41 this.mediaPantalla();
42 } 42 }
43 43
44 deleteArticulo(index: number) { 44 deleteArticulo(index: number) {
45 this.articuloService.carrito.splice(index, 1); 45 this.articuloService.carrito.splice(index, 1);
46 this.articuloService.calcularTotal(); 46 this.articuloService.calcularTotal();
47 } 47 }
48 48
49 substractCant(articulo: IArticulo) { 49 substractCant(articulo: IArticulo) {
50 if (articulo.cantidad === 1) return; 50 if (articulo.cantidad === 1) return;
51 articulo.cantidad--; 51 articulo.cantidad--;
52 this.articuloService.calcularTotal(); 52 this.articuloService.calcularTotal();
53 } 53 }
54 54
55 addCant(articulo: IArticulo) { 55 addCant(articulo: IArticulo) {
56 if (articulo.cantidad >= this.maxCantidad) return; 56 if (articulo.cantidad >= this.maxCantidad) return;
57 articulo.cantidad++; 57 articulo.cantidad++;
58 this.articuloService.calcularTotal(); 58 this.articuloService.calcularTotal();
59 } 59 }
60 60
61 goBack() { 61 goBack() {
62 this.location.back(); 62 this.location.back();
63 } 63 }
64 mediaPantalla(){ 64 mediaPantalla() {
65 if ($("body").hasClass("lash")) { 65 if ($('body').hasClass('media-pantalla')) {
66 $("#carrito").addClass("lash"); 66 $('#carrito').addClass('media-pantalla');
67 this.flagPantalla = true; 67 this.flagPantalla = true;
68 } 68 }
69 } 69 }
70 } 70 }
71 71
src/app/modules/forma-pago/forma-pago.component.scss
Diff comments   View file @ 8d599c3
1 #card1.lash{ 1 #card1.media-pantalla{
2 position: absolute; 2 position: absolute;
3 bottom: 150px; 3 bottom: 150px;
4 -webkit-box-flex: 0; 4 -webkit-box-flex: 0;
5 flex: 0 0 41.6666666667%; 5 flex: 0 0 41.6666666667%;
6 max-width: 41.6666666667%; 6 max-width: 41.6666666667%;
7 left: 10%; 7 left: 10%;
8 margin-left: 0 !important; 8 margin-left: 0 !important;
9 } 9 }
10 10
11 #card2.lash{ 11 #card2.media-pantalla{
12 position: absolute; 12 position: absolute;
13 bottom: 150px; 13 bottom: 150px;
14 -webkit-box-flex: 0; 14 -webkit-box-flex: 0;
15 flex: 0 0 41.6666666667%; 15 flex: 0 0 41.6666666667%;
16 max-width: 41.6666666667%; 16 max-width: 41.6666666667%;
17 right: 10%; 17 right: 10%;
18 margin-right: 0 !important; 18 margin-right: 0 !important;
19 }
19 }
src/app/modules/forma-pago/forma-pago.component.ts
Diff comments   View file @ 8d599c3
1 import { Component, OnInit } from '@angular/core'; 1 import { Component, OnInit } from '@angular/core';
2 import { ArticuloService } from 'src/app/services/articulo/articulo.service'; 2 import { ArticuloService } from 'src/app/services/articulo/articulo.service';
3 import { Router } from '@angular/router'; 3 import { Router } from '@angular/router';
4 4
5 @Component({ 5 @Component({
6 selector: 'app-forma-pago', 6 selector: 'app-forma-pago',
7 templateUrl: './forma-pago.component.html', 7 templateUrl: './forma-pago.component.html',
8 styleUrls: ['./forma-pago.component.scss'] 8 styleUrls: ['./forma-pago.component.scss']
9 }) 9 })
10 export class FormaPagoComponent implements OnInit { 10 export class FormaPagoComponent implements OnInit {
11 11
12 constructor( 12 constructor(
13 private articuloService: ArticuloService, 13 private articuloService: ArticuloService,
14 private router: Router, 14 private router: Router,
15 ) { } 15 ) {}
16 16
17 ngOnInit() { 17 ngOnInit() {
18 if (!this.articuloService.carrito.length) { 18 if (!this.articuloService.carrito.length) {
19 this.router.navigate(['']); 19 this.router.navigate(['']);
20 return; 20 return;
21 } 21 }
22 this.mediaPantalla(); 22 this.mediaPantalla();
23
24 } 23 }
25 24
26 medioPago(medioPago: number) { 25 medioPago(medioPago: number) {
27 this.articuloService.medioPago = medioPago; 26 this.articuloService.medioPago = medioPago;
28 switch (medioPago) { 27 switch (medioPago) {
29 case 4: 28 case 4:
30 this.router.navigate(['pago-tarjeta']); 29 this.router.navigate(['pago-tarjeta']);
31 break; 30 break;
32 case 9: 31 case 9:
33 this.router.navigate(['pago-electronico']); 32 this.router.navigate(['pago-electronico']);
34 break; 33 break;
35 } 34 }
36 } 35 }
37 mediaPantalla(){ 36
38 if ($("body").hasClass("lash")) { 37 mediaPantalla() {
39 $("#card1,#card2").addClass("lash"); 38 if ($('body').hasClass('media-pantalla')) {
39 $('#card1,#card2').addClass('media-pantalla');
40 } 40 }
41 } 41 }
42 } 42 }
src/app/modules/info-formas-pago/info-formas-pago.component.html
Diff comments   View file @ 8d599c3
1 <div class="h-92 bg-white fade-in-left"> 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-15">
3 <div class="col-12 px-0 h-80 my-auto"> 3 <div class="col-12 px-0 h-80 my-auto">
4 <img 4 <img
5 draggable="false" 5 draggable="false"
6 ondragstart="return false;" 6 ondragstart="return false;"
7 (contextmenu)="false" 7 (contextmenu)="false"
8 class="d-block mx-auto h-100" 8 class="d-block mx-auto h-100"
9 src="assets/img/logo-spot.svg"> 9 src="assets/img/logo-spot.svg">
10 </div> 10 </div>
11 </div> 11 </div>
12 <div class="h-85"> 12 <div class="h-85">
13 <div class="row h-auto mt-6 mx-0 justify-content-center text-center" > 13 <div class="row h-auto mt-6 mx-0 justify-content-center text-center" >
14 <div class="col-7 col-lg-4 p-5 m-5 h-auto align-self-end border border-secondary rounded"id="card1"> 14 <div class="col-7 col-lg-4 p-5 m-5 h-auto align-self-end
15 border border-secondary rounded" id="card1">
15 <img 16 <img
16 draggable="false" 17 draggable="false"
17 ondragstart="return false;" 18 ondragstart="return false;"
18 (contextmenu)="false" 19 (contextmenu)="false"
19 class="img-in-top px-4 bg-white" 20 class="img-in-top px-4 bg-white"
20 src="assets/img/icono-tarjetas.svg"> 21 src="assets/img/icono-tarjetas.svg">
21 <p class="h6 m-0">ESTA TERMINAL OPERA CON</p> 22 <p class="h6 m-0">ESTA TERMINAL OPERA CON</p>
22 <p class="h2 mb-3 text-secondary"> 23 <p class="h2 mb-3 text-secondary">
23 tarjetas y 24 tarjetas y
24 <img 25 <img
25 draggable="false" 26 draggable="false"
26 ondragstart="return false;" 27 ondragstart="return false;"
27 (contextmenu)="false" 28 (contextmenu)="false"
28 class="w-15" 29 class="w-15"
29 src="assets/img/icono-mercado-pago.svg"> 30 src="assets/img/icono-mercado-pago.svg">
30 </p> 31 </p>
31 <div 32 <div
32 class="d-inline-block py-1 btn-effect bg-secondary badge-pill text-white" 33 class="d-inline-block py-1 btn-effect bg-secondary badge-pill text-white"
33 [routerLink]="['/opcion-pedido']"> 34 [routerLink]="['/opcion-pedido']">
34 CONTINUAR 35 CONTINUAR
35 <img 36 <img
36 draggable="false" 37 draggable="false"
37 ondragstart="return false;" 38 ondragstart="return false;"
38 (contextmenu)="false" 39 (contextmenu)="false"
39 class="icon-30" 40 class="icon-30"
40 src="assets/img/ir.svg"> 41 src="assets/img/ir.svg">
41 </div> 42 </div>
42 </div> 43 </div>
43 <div class="col-7 col-lg-4 p-5 m-5 h-auto align-self-center border border-primary rounded" id="card2"> 44 <div class="col-7 col-lg-4 p-5 m-5 h-auto align-self-center
45 border border-primary rounded" id="card2">
44 <img 46 <img
45 draggable="false" 47 draggable="false"
46 ondragstart="return false;" 48 ondragstart="return false;"
47 (contextmenu)="false" 49 (contextmenu)="false"
48 class="img-in-top px-4 bg-white" 50 class="img-in-top px-4 bg-white"
49 src="assets/img/icono-efectivo.svg"> 51 src="assets/img/icono-efectivo.svg">
50 <p class="h6 m-0">SI PREFERIS PAGAR EN EFECTIVO</p> 52 <p class="h6 m-0">SI PREFERIS PAGAR EN EFECTIVO</p>
51 <p class="h2 m-0 text-primary">te esperamos en la caja</p> 53 <p class="h2 m-0 text-primary">te esperamos en la caja</p>
52 </div> 54 </div>
53 </div> 55 </div>
54 </div> 56 </div>
55 </div> 57 </div>
56 58
src/app/modules/info-formas-pago/info-formas-pago.component.scss
Diff comments   View file @ 8d599c3
1 .mt-6 { 1 .mt-6 {
2 margin-top: 4.5rem; 2 margin-top: 4.5rem;
3 } 3 }
4 4
5 #card1.lash{ 5 #card1.media-pantalla{
6 position: absolute; 6 position: absolute;
7 bottom: 0; 7 bottom: 0;
8 -webkit-box-flex: 0; 8 -webkit-box-flex: 0;
9 flex: 0 0 41.6666666667%; 9 flex: 0 0 41.6666666667%;
10 max-width: 41.6666666667%; 10 max-width: 41.6666666667%;
11 left: 5%; 11 left: 5%;
12 margin-left: 0 !important; 12 margin-left: 0 !important;
13 } 13 }
14 14
15 #card2.lash{ 15 #card2.media-pantalla{
16 position: absolute; 16 position: absolute;
17 bottom: 0; 17 bottom: 0;
18 -webkit-box-flex: 0; 18 -webkit-box-flex: 0;
19 flex: 0 0 41.6666666667%; 19 flex: 0 0 41.6666666667%;
20 max-width: 41.6666666667%; 20 max-width: 41.6666666667%;
21 right: 5%; 21 right: 5%;
22 margin-right: 0 !important; 22 margin-right: 0 !important;
23 height: 202px !important; 23 height: 202px !important;
24 }
24 }
src/app/modules/info-formas-pago/info-formas-pago.component.ts
Diff comments   View file @ 8d599c3
1 import { Component, OnInit } from '@angular/core'; 1 import { Component, OnInit } from '@angular/core';
2 2
3 @Component({ 3 @Component({
4 selector: 'app-formas-pago', 4 selector: 'app-formas-pago',
5 templateUrl: './info-formas-pago.component.html', 5 templateUrl: './info-formas-pago.component.html',
6 styleUrls: ['./info-formas-pago.component.scss'] 6 styleUrls: ['./info-formas-pago.component.scss']
7 }) 7 })
8 export class InfoFormasPagoComponent implements OnInit { 8 export class InfoFormasPagoComponent implements OnInit {
9 constructor() {} 9 constructor() {}
10 10
11 ngOnInit() { 11 ngOnInit() {
12 this.mediaPantalla(); 12 this.mediaPantalla();
13 } 13 }
14 14 mediaPantalla() {
15 mediaPantalla(){ 15 if ($('body').hasClass('media-pantalla')) {
16 if ($("body").hasClass("lash")) { 16 $('#card1,#card2').addClass('media-pantalla');
17 $("#card1,#card2").addClass("lash");
18 } 17 }
19 } 18 }
20 } 19 }
21
22
23 20
src/app/modules/opcion-pedido/opcion-pedido.component.scss
Diff comments   View file @ 8d599c3
1 #card1.lash{ 1 #card1.media-pantalla{
2 position: absolute; 2 position: absolute;
3 bottom: 150px; 3 bottom: 150px;
4 -webkit-box-flex: 0; 4 -webkit-box-flex: 0;
5 flex: 0 0 41.6666666667%; 5 flex: 0 0 41.6666666667%;
6 max-width: 41.6666666667%; 6 max-width: 41.6666666667%;
7 left: 10%; 7 left: 10%;
8 margin-left: 0 !important; 8 margin-left: 0 !important;
9 } 9 }
10 10
11 #card2.lash{ 11 #card2.media-pantalla{
12 position: absolute; 12 position: absolute;
13 bottom: 150px; 13 bottom: 150px;
14 -webkit-box-flex: 0; 14 -webkit-box-flex: 0;
15 flex: 0 0 41.6666666667%; 15 flex: 0 0 41.6666666667%;
16 max-width: 41.6666666667%; 16 max-width: 41.6666666667%;
17 right: 10%; 17 right: 10%;
18 margin-right: 0 !important; 18 margin-right: 0 !important;
19 } 19 }
src/app/modules/opcion-pedido/opcion-pedido.component.ts
Diff comments   View file @ 8d599c3
1 import { Component, OnInit } from '@angular/core'; 1 import { Component, OnInit } from '@angular/core';
2 import { Router } from '@angular/router'; 2 import { Router } from '@angular/router';
3 3
4 @Component({ 4 @Component({
5 selector: 'app-opcion-pedido', 5 selector: 'app-opcion-pedido',
6 templateUrl: './opcion-pedido.component.html', 6 templateUrl: './opcion-pedido.component.html',
7 styleUrls: ['./opcion-pedido.component.scss'] 7 styleUrls: ['./opcion-pedido.component.scss']
8 }) 8 })
9 export class OpcionPedidoComponent implements OnInit { 9 export class OpcionPedidoComponent implements OnInit {
10 10
11 constructor( 11 constructor(
12 private router: Router, 12 private router: Router,
13 ) { } 13 ) { }
14 14
15 ngOnInit() { 15 ngOnInit() {
16 this.mediaPantalla(); 16 this.mediaPantalla();
17 } 17 }
18 18
19 goTo(path) { 19 goTo(path) {
20 this.router.navigate([path]); 20 this.router.navigate([path]);
21 } 21 }
22 22
23 seleccionPedido(lugar) { 23 seleccionPedido(lugar) {
24 localStorage.setItem('pedidoPara', lugar); 24 localStorage.setItem('pedidoPara', lugar);
25 } 25 }
26 mediaPantalla(){ 26 mediaPantalla() {
27 if ($("body").hasClass("lash")) { 27 if ($('body').hasClass('media-pantalla')) {
28 $("#card1,#card2").addClass("lash"); 28 $('#card1,#card2').addClass('media-pantalla');
29 } 29 }
30 } 30 }
31 } 31 }
32 32
src/app/modules/seleccion-articulos/seleccion-articulos.component.html
Diff comments   View file @ 8d599c3
1 <div class="h-92 bg-white fade-in-left"> 1 <div class="h-92 bg-white fade-in-left">
2 <!-- PUBLICIDADES --> 2 <!-- PUBLICIDADES -->
3 <app-header-publicidad></app-header-publicidad> 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 h-80 align-items-end">
6 <!-- CABECERA --> 6 <!-- CABECERA -->
7 <div class="row w-100 mx-3 h-auto border border-primary rounded-sm"> 7 <div class="row w-100 mx-3 h-auto border border-primary rounded-sm">
8 <div class="col-12 p-2 align-self-center"> 8 <div class="col-12 p-2 align-self-center">
9 <div class="px-3"> 9 <div class="px-3">
10 <p class="h6 text-truncate">SELECCIONÁ TÚ COMIDA Y/O BEBIDA</p> 10 <p class="h6 text-truncate">SELECCIONÁ TÚ COMIDA Y/O BEBIDA</p>
11 </div> 11 </div>
12 </div> 12 </div>
13 </div> 13 </div>
14 <!-- CUERPO --> 14 <!-- CUERPO -->
15 <div class="row w-100 mr-4 h-70" id="content"> 15 <div class="row w-100 mr-4 h-70" id="content">
16 <div class="col-12 h-100 px-0 py-3"> 16 <div class="col-12 h-100 px-0 py-3">
17 <div class="row mx-0 h-100"> 17 <div class="row mx-0 h-100">
18 <!-- FILTRO CATEGORIAS --> 18 <!-- FILTRO CATEGORIAS -->
19 <div class="col-5 col-sm-3 col-xl-2 h-100"> 19 <div class="col-5 col-sm-3 col-xl-2 h-100">
20 <p class="h6 h-6 m-0 text-center"><small>CATEGORÍAS</small></p> 20 <p class="h6 h-6 m-0 text-center"><small>CATEGORÍAS</small></p>
21 <div class="row mx-0 h-94 justify-content-center align-items-center"> 21 <div class="row mx-0 h-94 justify-content-center align-items-center">
22 <div class="col-auto btn-effect h-5 cat-btn"> 22 <div class="col-auto btn-effect h-5 cat-btn">
23 <img 23 <img
24 draggable="false" 24 draggable="false"
25 ondragstart="return false;" 25 ondragstart="return false;"
26 (contextmenu)="false" 26 (contextmenu)="false"
27 class="h-100 d-block mx-auto rotate-90-neg" 27 class="h-100 d-block mx-auto rotate-90-neg"
28 src="assets/img/ir-color.svg" 28 src="assets/img/ir-color.svg"
29 (mousedown)="scrollY(templateCategorias, -100)" 29 (mousedown)="scrollY(templateCategorias, -100)"
30 (mouseup)="mouseup()" 30 (mouseup)="mouseup()"
31 (mouseleave)="mouseup()"> 31 (mouseleave)="mouseup()">
32 </div> 32 </div>
33 <!-- CATEGORIAS --> 33 <!-- CATEGORIAS -->
34 <div 34 <div
35 #templateCategorias 35 #templateCategorias
36 class="col-12 px-0 box-categorias border border-primary border-left-0 rounded-right scroll-y"> 36 class="col-12 px-0 box-categorias border border-primary border-left-0 rounded-right scroll-y">
37 <div 37 <div
38 class="row mx-4 mb-2 h-32 justify-content-center tab catContent" 38 class="row mx-4 mb-2 h-32 justify-content-center tab cat-content"
39 [ngClass]="{ 'active': allActive, 'border-bottom-effect': !allActive }" 39 [ngClass]="{ 'active': allActive, 'border-bottom-effect': !allActive }"
40 (click)="selectCategoria(-1, 0)" id=""> 40 (click)="selectCategoria(-1, 0)" id="">
41 <img 41 <img
42 draggable="false" 42 draggable="false"
43 ondragstart="return false;" 43 ondragstart="return false;"
44 (contextmenu)="false" 44 (contextmenu)="false"
45 class="col-12 h-50 align-self-end d-none d-sm-block rounded-circle" 45 class="col-12 h-50 align-self-end d-none d-sm-block rounded-circle"
46 src="assets/img/ir-color.svg"> 46 src="assets/img/ir-color.svg">
47 <small class="col-12 px-0 my-1 h-25 align-self-end text-center text-truncate">Todos</small> 47 <small class="col-12 px-0 my-1 h-25 align-self-end text-center text-truncate">Todos</small>
48 </div> 48 </div>
49 <div 49 <div
50 class="row mx-4 mb-2 h-32 justify-content-center tab catContent" 50 class="row mx-4 mb-2 h-32 justify-content-center tab cat-content"
51 [ngClass]="{ 'active': categoria.selected, 'border-bottom-effect': !categoria.selected, 'lash':mpActive }" 51 [ngClass]="{ 'active': categoria.selected, 'border-bottom-effect': !categoria.selected,
52 'media-pantalla':mpActive }"
52 (click)="selectCategoria(i, categoria.id)" 53 (click)="selectCategoria(i, categoria.id)"
53 *ngFor="let categoria of categorias; let i = index;" id=""> 54 *ngFor="let categoria of categorias; let i = index;" id="">
54 <img 55 <img
55 draggable="false" 56 draggable="false"
56 ondragstart="return false;" 57 ondragstart="return false;"
57 (contextmenu)="false" 58 (contextmenu)="false"
58 class="col-12 h-50 align-self-end d-none d-sm-block rounded-circle" 59 class="col-12 h-50 align-self-end d-none d-sm-block rounded-circle"
59 src="assets/img/ir-color.svg"> 60 src="assets/img/ir-color.svg">
60 <small class="col-12 px-0 my-1 h-25 align-self-end text-center text-truncate">{{categoria.detalle}}</small> 61 <small class="col-12 px-0 my-1 h-25 align-self-end text-center text-truncate">{{categoria.detalle}}</small>
61 </div> 62 </div>
62 </div> 63 </div>
63 <div class="col-auto btn-effect h-5 cat-btn"> 64 <div class="col-auto btn-effect h-5 cat-btn">
64 <img 65 <img
65 draggable="false" 66 draggable="false"
66 ondragstart="return false;" 67 ondragstart="return false;"
67 (contextmenu)="false" 68 (contextmenu)="false"
68 class="h-100 d-block mx-auto rotate-90" 69 class="h-100 d-block mx-auto rotate-90"
69 src="assets/img/ir-color.svg" 70 src="assets/img/ir-color.svg"
70 (mousedown)="scrollY(templateCategorias, 100)" 71 (mousedown)="scrollY(templateCategorias, 100)"
71 (mouseup)="mouseup()" 72 (mouseup)="mouseup()"
72 (mouseleave)="mouseup()"> 73 (mouseleave)="mouseup()">
73 </div> 74 </div>
74 </div> 75 </div>
75 </div> 76 </div>
76 <!-- LISTA DE ARTICULOS --> 77 <!-- LISTA DE ARTICULOS -->
77 <div class="col-7 col-sm-9 col-xl-10 pb-3 h-80 align-self-center scroll-y-visible"> 78 <div class="col-7 col-sm-9 col-xl-10 pb-3 h-80 align-self-center scroll-y-visible">
78 <div class="row row-cols-1 row-cols-sm-3 row-cols-xl-6"> 79 <div class="row row-cols-1 row-cols-sm-3 row-cols-xl-6">
79 <!-- ARTICULO --> 80 <!-- ARTICULO -->
80 <div 81 <div
81 class="col px-2 my-1 my-md-3 h-auto" 82 class="col px-2 my-1 my-md-3 h-auto"
82 *ngFor="let articulo of auxArticulos | slice:0:showQuantity;"> 83 *ngFor="let articulo of auxArticulos | slice:0:showQuantity;">
83 <div class="swing-in-top-fwd card h-auto"> 84 <div class="swing-in-top-fwd card h-auto">
84 <img 85 <img
85 draggable="false" 86 draggable="false"
86 ondragstart="return false;" 87 ondragstart="return false;"
87 (contextmenu)="false" 88 (contextmenu)="false"
88 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}" 89 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"
89 onerror="this.src='assets/img/image-not-found.jpg'" 90 onerror="this.src='assets/img/image-not-found.jpg'"
90 class="card-img-top h-55 rounded-sm"> 91 class="card-img-top h-55 rounded-sm">
91 <div class="row mx-0 py-1 h-auto justify-content-center"> 92 <div class="row mx-0 py-1 h-auto justify-content-center">
92 <p class="col-12 px-1 h6 h-auto text-primary text-center">{{articulo.DetArt}}</p> 93 <p class="col-12 px-1 h6 h-auto text-primary text-center">{{articulo.DetArt}}</p>
93 <p class="col-12 px-1 h-auto text-center line-height-sm"> 94 <p class="col-12 px-1 h-auto text-center line-height-sm">
94 <small>{{articulo.DET_LAR}}</small> 95 <small>{{articulo.DET_LAR}}</small>
95 </p> 96 </p>
96 <div class="col-12 px-1 align-self-end btn-effect h-auto"> 97 <div class="col-12 px-1 align-self-end btn-effect h-auto">
97 <div 98 <div
98 [ngClass]="{'bg-secondary': articulo.promo}" 99 [ngClass]="{'bg-secondary': articulo.promo}"
99 class="row mx-0 justify-content-between bg-primary badge-pill" 100 class="row mx-0 justify-content-between bg-primary badge-pill"
100 (click)="elegirArticulo(articulo)"> 101 (click)="elegirArticulo(articulo)">
101 <div class="col px-0 align-self-center text-white text-right"> 102 <div class="col px-0 align-self-center text-white text-right">
102 {{articulo.PreVen | currency}} 103 {{articulo.PreVen | currency}}
103 </div> 104 </div>
104 <div class="col-5 px-0"> 105 <div class="col-5 px-0">
105 <img 106 <img
106 draggable="false" 107 draggable="false"
107 ondragstart="return false;" 108 ondragstart="return false;"
108 (contextmenu)="false" 109 (contextmenu)="false"
109 class="d-block ml-auto py-1 icon-30" 110 class="d-block ml-auto py-1 icon-30"
110 src="assets/img/ir.svg"> 111 src="assets/img/ir.svg">
111 </div> 112 </div>
112 </div> 113 </div>
113 </div> 114 </div>
114 </div> 115 </div>
115 </div> 116 </div>
116 </div> 117 </div>
117 </div> 118 </div>
118 <!-- BOTON VER MAS --> 119 <!-- BOTON VER MAS -->
119 <div class="row mx-0"> 120 <div class="row mx-0">
120 <div 121 <div
121 *ngIf="showQuantity <= auxArticulos.slice(0, showQuantity).length" 122 *ngIf="showQuantity <= auxArticulos.slice(0, showQuantity).length"
122 class="col-12 px-0 mb-2"> 123 class="col-12 px-0 mb-2">
123 <button 124 <button
124 (click)="increaseShow()" 125 (click)="increaseShow()"
125 class="btn btn-block btn-outline-primary"> 126 class="btn btn-block btn-outline-primary">
126 Ver Más 127 Ver Más
127 </button> 128 </button>
128 </div> 129 </div>
129 </div> 130 </div>
130 </div> 131 </div>
131 </div> 132 </div>
132 </div> 133 </div>
133 </div> 134 </div>
134 <!-- FOOTER CARRITO DE COMPRAS --> 135 <!-- FOOTER CARRITO DE COMPRAS -->
135 <div class="row w-90 mx-auto h-auto justify-content-center"> 136 <div class="row w-90 mx-auto h-auto justify-content-center">
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 <div class="h-75 px-0 border border-primary rounded"
138 #boxCarrito id="boxCarrito"
139 [ngClass]="boxCarrito.classList.contains('media-pantalla')
140 && articuloService.carrito.length ? 'col-8' : 'col-12'">
137 <!-- CABECERA --> 141 <!-- CABECERA -->
138 <div class="row mx-0 h-15 border-bottom border-primary"> 142 <div class="row mx-0 h-15 border-bottom border-primary">
139 <p class="col align-self-center text-truncate"><small>ARTÍCULOS EN TÚ CARRITO DE COMPRAS</small></p> 143 <p class="col align-self-center text-truncate"><small>ARTÍCULOS EN TÚ CARRITO DE COMPRAS</small></p>
140 </div> 144 </div>
141 <!-- CUERPO --> 145 <!-- CUERPO -->
142 <div class="row h-85 mx-0 justify-content-around"> 146 <div class="row h-85 mx-0 justify-content-around">
143 <!-- BOTON SCROLL IZQUIERDA --> 147 <!-- BOTON SCROLL IZQUIERDA -->
144 <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center"> 148 <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center">
145 <img 149 <img
146 draggable="false" 150 draggable="false"
147 ondragstart="return false;" 151 ondragstart="return false;"
148 (contextmenu)="false" 152 (contextmenu)="false"
149 class="icon-30 rotate-180-neg" 153 class="icon-30 rotate-180-neg"
150 src="assets/img/ir-fondo-color.svg" 154 src="assets/img/ir-fondo-color.svg"
151 (mousedown)="scrollX(templateCarrito, -100)" 155 (mousedown)="scrollX(templateCarrito, -100)"
152 (mouseup)="mouseup()" 156 (mouseup)="mouseup()"
153 (mouseleave)="mouseup()"> 157 (mouseleave)="mouseup()">
154 </div> 158 </div>
155 <!-- CARRITO --> 159 <!-- CARRITO -->
156 <div class="col-6 col-sm-8 col-md-9 col-lg-10 h-100"> 160 <div class="col-6 col-sm-8 col-md-9 col-lg-10 h-100">
157 <div #templateCarrito class="row flex-row flex-nowrap h-100 mx-0 my-2 scroll-x"> 161 <div #templateCarrito class="row flex-row flex-nowrap h-100 mx-0 my-2 scroll-x">
158 <!-- MENSAJE DE ADVERTENCIA --> 162 <!-- MENSAJE DE ADVERTENCIA -->
159 <div *ngIf="!articuloService.carrito.length" class="col h-100"> 163 <div *ngIf="!articuloService.carrito.length" class="col h-100">
160 <p class="text-center py-5">No hay articulos en el carrito</p> 164 <p class="text-center py-5">No hay articulos en el carrito</p>
161 </div> 165 </div>
162 <!-- ARTICULOS --> 166 <!-- ARTICULOS -->
163 <div 167 <div
164 class="col-10 col-sm-4 col-lg-2 px-2 px-xl-4 align-self-center border-right border-primary" 168 class="col-10 col-sm-4 col-lg-2 px-2 px-xl-4 align-self-center border-right border-primary"
165 *ngFor="let articulo of articuloService.carrito; let i = index;"> 169 *ngFor="let articulo of articuloService.carrito; let i = index;">
166 <div class="swing-in-top-fwd"> 170 <div class="swing-in-top-fwd">
167 <img 171 <img
168 draggable="false" 172 draggable="false"
169 ondragstart="return false;" 173 ondragstart="return false;"
170 (contextmenu)="false" 174 (contextmenu)="false"
171 class="d-block img-fluid p-2 mx-auto rounded" 175 class="d-block img-fluid p-2 mx-auto rounded"
172 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}" 176 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"
173 onerror="this.src='assets/img/image-not-found.jpg'"> 177 onerror="this.src='assets/img/image-not-found.jpg'">
174 <p class="d-block mt-auto text-center text-primary text-truncate"> 178 <p class="d-block mt-auto text-center text-primary text-truncate">
175 <small>{{articulo.DetArt}}</small> 179 <small>{{articulo.DetArt}}</small>
176 </p> 180 </p>
177 </div> 181 </div>
178 </div> 182 </div>
179 </div> 183 </div>
180 </div> 184 </div>
181 <!-- BOTON SCROLL DERECHA --> 185 <!-- BOTON SCROLL DERECHA -->
182 <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center"> 186 <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center">
183 <img 187 <img
184 draggable="false" 188 draggable="false"
185 ondragstart="return false;" 189 ondragstart="return false;"
186 (contextmenu)="false" 190 (contextmenu)="false"
187 class="icon-30" 191 class="icon-30"
188 src="assets/img/ir-fondo-color.svg" 192 src="assets/img/ir-fondo-color.svg"
189 (mousedown)="scrollX(templateCarrito, 100)" 193 (mousedown)="scrollX(templateCarrito, 100)"
190 (mouseup)="mouseup()" 194 (mouseup)="mouseup()"
191 (mouseleave)="mouseup()"> 195 (mouseleave)="mouseup()">
192 </div> 196 </div>
193 </div> 197 </div>
194 </div> 198 </div>
195 <!-- VER CARRITO Y TOTAL--> 199 <!-- VER CARRITO Y TOTAL-->
196 <div 200 <div
197 class=" p-0 mt-2 ml-auto h-20" 201 class=" p-0 mt-2 ml-auto h-20"
198 *ngIf="articuloService.carrito.length" 202 *ngIf="articuloService.carrito.length"
199 [ngClass]="boxCarrito.classList.contains('col-8') ? 'col-4' : 'col-auto'" 203 [ngClass]="boxCarrito.classList.contains('col-8') ? 'col-4' : 'col-auto'"
200 id="bagsCarrito"> 204 id="bagsCarrito">
201 <div 205 <div
202 class="btn-effect col-auto align-self-center px-0 bg-white" 206 class="btn-effect col-auto align-self-center px-0 bg-white"
203 [routerLink]="['/carrito']"> 207 [routerLink]="['/carrito']">
204 <div class="row justify-content-between mx-0"> 208 <div class="row justify-content-between mx-0">
205 <div class="col-auto align-self-center text-primary">TOTAL</div> 209 <div class="col-auto align-self-center text-primary">TOTAL</div>
206 <div class="col-auto p-0 bg-primary d-none d-sm-block bg-total"> 210 <div class="col-auto p-0 bg-primary d-none d-sm-block bg-total">
207 <p class="text-center text-white mt-1 py-1">{{articuloService.subTotal | currency}}</p> 211 <p class="text-center text-white mt-1 py-1">{{articuloService.subTotal | currency}}</p>
208 </div> 212 </div>
209 <div class="col-auto align-self-center text-primary ml-2 bg-light" 213 <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> 214 [ngClass]="{'mt-4':boxCarrito.classList.contains('col-8')}"
215 id="ver-car">VER CARRITO</div>
211 <div class="col-auto p-0 bg-primary d-none d-sm-block" 216 <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"> 217 [ngClass]="{'mt-4':boxCarrito.classList.contains('col-8')}" id="img-car">
213 <img 218 <img
214 draggable="false" 219 draggable="false"
215 ondragstart="return false;" 220 ondragstart="return false;"
216 (contextmenu)="false" 221 (contextmenu)="false"
217 class="p-2 icon-40" 222 class="p-2 icon-40"
218 src="assets/img/carrito.svg"> 223 src="assets/img/carrito.svg">
219 </div> 224 </div>
220 </div> 225 </div>
221 </div> 226 </div>
222 </div> 227 </div>
223 228
224 </div> 229 </div>
225 </div> 230 </div>
226 231
227 </div> 232 </div>
228 233
src/app/modules/seleccion-articulos/seleccion-articulos.component.scss
Diff comments   View file @ 8d599c3
1 $primary: #aa006b; 1 $primary: #aa006b;
2 2
3 .box-categorias { 3 .box-categorias {
4 height: calc(100% - 100px) !important; 4 height: calc(100% - 100px) !important;
5 } 5 }
6 6
7 .active { 7 .active {
8 background-color: white; 8 background-color: white;
9 border-bottom: 3px solid $primary !important; 9 border-bottom: 3px solid $primary !important;
10 } 10 }
11 11
12 .border-bottom-effect { 12 .border-bottom-effect {
13 border: none; 13 border: none;
14 position: relative; 14 position: relative;
15 &:hover { 15 &:hover {
16 border: none; 16 border: none;
17 } 17 }
18 &::after { 18 &::after {
19 content: ""; 19 content: "";
20 position: absolute; 20 position: absolute;
21 width: 0px; 21 width: 0px;
22 height: 3px; 22 height: 3px;
23 left: 50%; 23 left: 50%;
24 bottom: 0; 24 bottom: 0;
25 background-color: $primary; 25 background-color: $primary;
26 transition: all ease-in-out 0.2s; 26 transition: all ease-in-out 0.2s;
27 } 27 }
28 &:hover::after { 28 &:hover::after {
29 width: 100%; 29 width: 100%;
30 left: 0; 30 left: 0;
31 } 31 }
32 } 32 }
33 33
34 .card { 34 .card {
35 border: none; 35 border: none;
36 } 36 }
37 37
38 .line-height-sm { 38 .line-height-sm {
39 line-height: 1.2; 39 line-height: 1.2;
40 } 40 }
41 41
42 .bg-total { 42 .bg-total {
43 width: 110px; 43 width: 110px;
44 border-radius: 1.5rem; 44 border-radius: 1.5rem;
45 } 45 }
46 46
47 #content.lash{ 47 #content.media-pantalla{
48 max-height: 60% !important; 48 max-height: 60% !important;
49 } 49 }
50 50
51 .catContent.lash{ 51 .cat-content.media-pantalla{
52 margin: 1.3rem 0.9rem !important; 52 margin: 1.3rem 0.9rem !important;
53 height: 60% !important; 53 height: 60% !important;
54 } 54 }
55 55
56 .cat-btn.lash{ 56 .cat-btn.media-pantalla{
57 height: 7% !important; 57 height: 7% !important;
58 } 58 }
59 59
src/app/modules/seleccion-articulos/seleccion-articulos.component.ts
Diff comments   View file @ 8d599c3
1 import { Component, OnInit } from '@angular/core'; 1 import { Component, OnInit } from '@angular/core';
2 import { BsModalRef } from 'ngx-bootstrap/modal'; 2 import { BsModalRef } from 'ngx-bootstrap/modal';
3 import { ArticuloService } from 'src/app/services/articulo/articulo.service'; 3 import { ArticuloService } from 'src/app/services/articulo/articulo.service';
4 import { IArticulo } from 'src/app/interfaces/IArticulo'; 4 import { IArticulo } from 'src/app/interfaces/IArticulo';
5 import { APP_SETTINGS } from 'src/etc/AppSettings'; 5 import { APP_SETTINGS } from 'src/etc/AppSettings';
6 import { ICategoria } from 'src/app/interfaces/ICategoria'; 6 import { ICategoria } from 'src/app/interfaces/ICategoria';
7 import { CategoriaService } from 'src/app/services/categoria/categoria.service'; 7 import { CategoriaService } from 'src/app/services/categoria/categoria.service';
8 8
9 @Component({ 9 @Component({
10 selector: 'app-seleccion-articulos', 10 selector: 'app-seleccion-articulos',
11 templateUrl: './seleccion-articulos.component.html', 11 templateUrl: './seleccion-articulos.component.html',
12 styleUrls: ['./seleccion-articulos.component.scss'] 12 styleUrls: ['./seleccion-articulos.component.scss']
13 }) 13 })
14 export class SeleccionArticulosComponent implements OnInit { 14 export class SeleccionArticulosComponent implements OnInit {
15 showSpinner = true; 15 showSpinner = true;
16 timeoutHandler: any; 16 timeoutHandler: any;
17 urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`; 17 urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`;
18 articulos: IArticulo[] = []; 18 articulos: IArticulo[] = [];
19 auxArticulos: IArticulo[] = []; 19 auxArticulos: IArticulo[] = [];
20 showQuantity = 100; 20 showQuantity = 100;
21 queMostrar = 'todos'; 21 queMostrar = 'todos';
22 categoriaActive: number = null; 22 categoriaActive: number = null;
23 categorias: ICategoria[] = []; 23 categorias: ICategoria[] = [];
24 searchTerm = ''; 24 searchTerm = '';
25 ordenandoByVendidos = true; 25 ordenandoByVendidos = true;
26 allActive = true; 26 allActive = true;
27 modalRef: BsModalRef; 27 modalRef: BsModalRef;
28 total: number = 0; 28 total: number = 0;
29 mpActive:boolean = false; 29 mpActive = false;
30 constructor( 30 constructor(
31 public articuloService: ArticuloService, 31 public articuloService: ArticuloService,
32 private categoriaService: CategoriaService, 32 private categoriaService: CategoriaService,
33 ) { } 33 ) { }
34 34
35
36 ngOnInit() { 35 ngOnInit() {
37 this.getCategorias(); 36 this.getCategorias();
38 this.mediaPantalla(); 37 this.mediaPantalla();
39 } 38 }
40 39
41 getCategorias() { 40 getCategorias() {
42 this.categoriaService.getCategorias() 41 this.categoriaService.getCategorias()
43 .subscribe((categorias: ICategoria[]) => { 42 .subscribe((categorias: ICategoria[]) => {
44 switch (this.queMostrar) { 43 switch (this.queMostrar) {
45 case 'todos': 44 case 'todos':
46 this.categorias = categorias; 45 this.categorias = categorias;
47 this.categoriaActive = 0; 46 this.categoriaActive = 0;
48 break; 47 break;
49 case 'promociones': 48 case 'promociones':
50 this.categorias = categorias; 49 this.categorias = categorias;
51 this.categoriaActive = 19; 50 this.categoriaActive = 19;
52 break; 51 break;
53 case 'ordenar': 52 case 'ordenar':
54 this.categorias = categorias.filter((categoria: ICategoria) => { 53 this.categorias = categorias.filter((categoria: ICategoria) => {
55 return categoria.ES_PEDIDO; 54 return categoria.ES_PEDIDO;
56 }); 55 });
57 this.categoriaActive = 4; 56 this.categoriaActive = 4;
58 break; 57 break;
59 default: 58 default:
60 this.categorias = categorias; 59 this.categorias = categorias;
61 this.categoriaActive = 0; 60 this.categoriaActive = 0;
62 break; 61 break;
63 } 62 }
64 !localStorage.getItem('articulos') ? 63 !localStorage.getItem('articulos') ?
65 this.getProductos() : 64 this.getProductos() :
66 this.setProductos(); 65 this.setProductos();
67 }); 66 });
68 } 67 }
69 68
70 getProductos() { 69 getProductos() {
71 this.articuloService.getAll() 70 this.articuloService.getAll()
72 .subscribe((result: IArticulo[]) => { 71 .subscribe((result: IArticulo[]) => {
73 this.articuloService.setArticulosSinImagen(result); 72 this.articuloService.setArticulosSinImagen(result);
74 if (this.queMostrar === 'ordenar') { 73 if (this.queMostrar === 'ordenar') {
75 this.categorias.forEach((categoria: ICategoria) => { 74 this.categorias.forEach((categoria: ICategoria) => {
76 const tempArticulos = result.filter((articulo: IArticulo) => { 75 const tempArticulos = result.filter((articulo: IArticulo) => {
77 return articulo.categoria_selfservice === categoria.id; 76 return articulo.categoria_selfservice === categoria.id;
78 }); 77 });
79 result = tempArticulos; 78 result = tempArticulos;
80 }); 79 });
81 } 80 }
82 localStorage.setItem('articulos', JSON.stringify(result)); 81 localStorage.setItem('articulos', JSON.stringify(result));
83 this.setProductos(); 82 this.setProductos();
84 }, (error) => { 83 }, (error) => {
85 this.showSpinner = false; 84 this.showSpinner = false;
86 console.error(error); 85 console.error(error);
87 }); 86 });
88 } 87 }
89 88
90 setProductos() { 89 setProductos() {
91 this.articulos = JSON.parse(localStorage.getItem('articulos')); 90 this.articulos = JSON.parse(localStorage.getItem('articulos'));
92 this.filterItems(); 91 this.filterItems();
93 } 92 }
94 93
95 filterItems() { 94 filterItems() {
96 if (this.categoriaActive === 0) { 95 if (this.categoriaActive === 0) {
97 this.auxArticulos = this.articulos; 96 this.auxArticulos = this.articulos;
98 return; 97 return;
99 } 98 }
100 this.auxArticulos = this.articulos.filter(x => { 99 this.auxArticulos = this.articulos.filter(x => {
101 return x.categoria_selfservice === this.categoriaActive; 100 return x.categoria_selfservice === this.categoriaActive;
102 }); 101 });
103 this.ordenar(); 102 this.ordenar();
104 } 103 }
105 104
106 ordenar() { 105 ordenar() {
107 if (this.ordenandoByVendidos) { 106 if (this.ordenandoByVendidos) {
108 this.auxArticulos.sort((a, b) => { 107 this.auxArticulos.sort((a, b) => {
109 return b.cantidadVendida - a.cantidadVendida; 108 return b.cantidadVendida - a.cantidadVendida;
110 }); 109 });
111 } 110 }
112 } 111 }
113 112
114 selectCategoria(index: number, idCategoria?: number) { 113 selectCategoria(index: number, idCategoria?: number) {
115 if (this.categoriaActive === idCategoria) return; 114 if (this.categoriaActive === idCategoria) return;
116 this.categoriaActive = idCategoria; 115 this.categoriaActive = idCategoria;
117 this.allActive = idCategoria === 0 ? true : false; 116 this.allActive = idCategoria === 0 ? true : false;
118 this.categorias.forEach((categoria, i) => { 117 this.categorias.forEach((categoria, i) => {
119 categoria.selected = index === i ? true : false; 118 categoria.selected = index === i ? true : false;
120 }); 119 });
121 this.filterItems(); 120 this.filterItems();
122 } 121 }
123 122
124 elegirArticulo(articulo: IArticulo) { 123 elegirArticulo(articulo: IArticulo) {
125 this.articuloService.getById(articulo.id) 124 this.articuloService.getById(articulo.id)
126 .subscribe((res: IArticulo) => { 125 .subscribe((res: IArticulo) => {
127 res.cantidad = 1; 126 res.cantidad = 1;
128 this.articuloService.setArticulo(res); 127 this.articuloService.setArticulo(res);
129 }, err => console.error(err)); 128 }, err => console.error(err));
130 } 129 }
131 130
132 increaseShow() { 131 increaseShow() {
133 this.showQuantity += 100; 132 this.showQuantity += 100;
134 } 133 }
135 134
136 mouseup() { 135 mouseup() {
137 if (!this.timeoutHandler) return; 136 if (!this.timeoutHandler) return;
138 clearInterval(this.timeoutHandler); 137 clearInterval(this.timeoutHandler);
139 } 138 }
140 139
141 scrollY(el: HTMLElement, value) { 140 scrollY(el: HTMLElement, value) {
142 el.scroll({ behavior: 'smooth', top: value + el.scrollTop }); 141 el.scroll({ behavior: 'smooth', top: value + el.scrollTop });
143 this.timeoutHandler = setInterval(() => { 142 this.timeoutHandler = setInterval(() => {
144 el.scroll({ behavior: 'smooth', top: value + el.scrollTop }); 143 el.scroll({ behavior: 'smooth', top: value + el.scrollTop });
145 }, 500); 144 }, 500);
146 } 145 }
147 146
148 scrollX(el: HTMLElement, value) { 147 scrollX(el: HTMLElement, value) {
149 el.scroll({ behavior: 'smooth', left: value + el.scrollLeft }); 148 el.scroll({ behavior: 'smooth', left: value + el.scrollLeft });
150 this.timeoutHandler = setInterval(() => { 149 this.timeoutHandler = setInterval(() => {
151 el.scroll({ behavior: 'smooth', left: value + el.scrollLeft }); 150 el.scroll({ behavior: 'smooth', left: value + el.scrollLeft });
152 }, 500); 151 }, 500);
153 } 152 }
154 153
155 mediaPantalla(){ 154 mediaPantalla() {
156 if ($("body").hasClass("lash")) { 155 if ($('body').hasClass('media-pantalla')) {
157 $(".catContent,#content,#headerPub,#headerPad,.cat-btn,#boxCarrito").addClass("lash"); 156 $('.cat-content,#content,#headerPub,#headerPad,.cat-btn,#boxCarrito').addClass('media-pantalla');
158 this.mpActive=true; 157 this.mpActive = true;
159 } 158 }
160 } 159 }
161
162 } 160 }
163
164 161
src/app/modules/splash-screen/splash-screen.component.ts
Diff comments   View file @ 8d599c3
1 import { Component, OnInit } from '@angular/core'; 1 import { Component, OnInit } from '@angular/core';
2 2
3 @Component({ 3 @Component({
4 selector: 'app-splash-screen', 4 selector: 'app-splash-screen',
5 templateUrl: './splash-screen.component.html', 5 templateUrl: './splash-screen.component.html',
6 styleUrls: ['./splash-screen.component.scss'] 6 styleUrls: ['./splash-screen.component.scss']
7 }) 7 })
8 export class SplashScreenComponent implements OnInit { 8 export class SplashScreenComponent implements OnInit {
9 timerSplashScreen = 2000; 9 timerSplashScreen = 2000;
10 showSplashScreen = true; 10 showSplashScreen = true;
11 textWelcome = 'BIENVENIDO A SPOT!'; 11 textWelcome = 'BIENVENIDO A SPOT!';
12 textComoEstas = '¿cómo estás?'; 12 textComoEstas = '¿cómo estás?';
13 textInvitamos = 'TE INVITAMOS A HACER'; 13 textInvitamos = 'TE INVITAMOS A HACER';
14 textTuPedido = 'tu pedido acá'; 14 textTuPedido = 'tu pedido acá';
15 15
16 constructor() { } 16 constructor() { }
17 17
18 ngOnInit() { 18 ngOnInit() {
19 setTimeout(() => { 19 setTimeout(() => {
20 this.showSplashScreen = false; 20 this.showSplashScreen = false;
21 }, this.timerSplashScreen); 21 }, this.timerSplashScreen);
22 // 22
23 $(document).ready(function(){ 23 $(document).ready(function() {
24 $("body").removeClass("lash"); 24 $('body').removeClass('media-pantalla');
25 }); 25 });
26 } 26 }
27
28 } 27 }
29 28
src/app/shared/footer/footer.component.html
Diff comments   View file @ 8d599c3
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 justify-content-between bg-white">
2 <div class="col-auto align-self-center px-0 bg-white"> 2 <div class="col-auto align-self-center px-0 bg-white">
3 <div class="btn-effect row mx-0 bg-light" id="test"> 3 <div class="btn-effect row mx-0 bg-light" id="btn-media-pantalla">
4 <div class="col-auto align-self-center text-primary">ESTAMOS PARA AYUDARTE</div> 4 <div class="col-auto align-self-center text-primary">ESTAMOS PARA AYUDARTE</div>
5 <div class="col-auto p-0 bg-primary d-none d-sm-block"> 5 <div class="col-auto p-0 bg-primary d-none d-sm-block">
6 <img 6 <img
7 draggable="false" 7 draggable="false"
8 ondragstart="return false;" 8 ondragstart="return false;"
9 (contextmenu)="false" 9 (contextmenu)="false"
10 class="p-2 icon-60" 10 class="p-2 icon-60"
11 src="assets/img/iconos-accesibilidad.svg"> 11 src="assets/img/iconos-accesibilidad.svg">
12 </div> 12 </div>
13 </div> 13 </div>
14 </div> 14 </div>
15 <div 15 <div
16 class="btn-effect col-auto align-self-center px-0 bg-white" 16 class="btn-effect col-auto align-self-center px-0 bg-white"
17 (click)="goBack()" [ngClass]="{'lash':activo}"> 17 (click)="goBack()" [ngClass]="{'media-pantalla':activo}">
18 <div class="row mx-0 bg-light"> 18 <div class="row mx-0 bg-light">
19 <div class="col-auto align-self-center text-primary">VOLVER</div> 19 <div class="col-auto align-self-center text-primary">VOLVER</div>
20 <div class="col-auto p-0 bg-primary d-none d-sm-block"> 20 <div class="col-auto p-0 bg-primary d-none d-sm-block">
21 <img 21 <img
22 draggable="false" 22 draggable="false"
23 ondragstart="return false;" 23 ondragstart="return false;"
24 (contextmenu)="false" 24 (contextmenu)="false"
25 class="p-2 icon-40" 25 class="p-2 icon-40"
26 src="assets/img/icono-volver.svg"> 26 src="assets/img/icono-volver.svg">
27 </div> 27 </div>
28 </div> 28 </div>
29 </div> 29 </div>
30 </div> 30 </div>
31 31
src/app/shared/footer/footer.component.ts
Diff comments   View file @ 8d599c3
1 import { Component, OnInit } from '@angular/core'; 1 import { Component, OnInit } from '@angular/core';
2 import { Location } from '@angular/common'; 2 import { Location } from '@angular/common';
3 3
4 @Component({ 4 @Component({
5 selector: 'app-footer', 5 selector: 'app-footer',
6 templateUrl: './footer.component.html', 6 templateUrl: './footer.component.html',
7 styleUrls: ['./footer.component.scss'] 7 styleUrls: ['./footer.component.scss']
8 }) 8 })
9
10 export class FooterComponent implements OnInit { 9 export class FooterComponent implements OnInit {
11 10
12
13 constructor(private location: Location) { 11 constructor(private location: Location) {
14 this.mediaPantalla(); 12 this.mediaPantalla();
15 } 13 }
16 14
17 ngOnInit() {} 15 ngOnInit() {}
18 16
19 goBack() { 17 goBack() {
20 this.location.back(); 18 this.location.back();
21 } 19 }
22 mediaPantalla(){ 20
23 $(document).ready(function(){ 21 mediaPantalla() {
24 $("#test").click(function(){ 22 $(document).ready(function() {
25 $("body,#card1,#card2,#content,.catContent,#headerPub,#headerPad,.cat-btn,#boxCarrito,#cancelImg,#cancelCard,#carrito,#art-carrito").toggleClass("lash"); 23 $('#btn-media-pantalla').click(function() {
26 $("#bagsCarrito").toggleClass(["col-auto","col-4"]); 24 $('body,#card1,#card2,#content,.cat-content,#headerPub,#headerPad,.cat-btn,#boxCarrito,#cancelImg,#cancelCard,#carrito,#art-carrito').toggleClass('media-pantalla');
27 $("#ver-car,#img-car").toggleClass("mt-4"); 25 $('#bagsCarrito').toggleClass(['col-auto','col-4']);
26 $('#ver-car,#img-car').toggleClass('mt-4');
28 }); 27 });
29 }); 28 });
30 } 29 }
31 } 30 }
src/app/shared/header-publicidad/header-publicidad.component.scss
Diff comments   View file @ 8d599c3
1 #headerPub.lash{ 1 #headerPub.media-pantalla{
2 height: 12% !important; 2 height: 12% !important;
3 } 3 }
4 #headerPad.lash{ 4 #headerPad.media-pantalla{
5 padding: 0.5rem !important; 5 padding: 0.5rem !important;
6 }
6 }
1 <!doctype html> 1 <!doctype html>
2 <html lang="en"> 2 <html lang="en">
3 <head> 3 <head>
4 <meta charset="utf-8"> 4 <meta charset="utf-8">
5 <title>Autoservicio Axion</title> 5 <title>Autoservicio Axion</title>
6 <base href="./"> 6 <base href="./">
7 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <meta name="viewport" content="width=device-width, initial-scale=1">
8 <link rel="icon" type="image/x-icon" href="favicon.ico"> 8 <link rel="icon" type="image/x-icon" href="favicon.ico">
9 </head> 9 </head>
10 <body > 10 <body>
11 <app-root></app-root> 11 <app-root></app-root>
12 </body> 12 </body>
13 </html> 13 </html>
14 14
1 @import "scss/styles-bootstrap.scss"; 1 @import "scss/styles-bootstrap.scss";
2 @import "scss/typography.scss"; 2 @import "scss/typography.scss";
3 @import "scss/height-width.scss"; 3 @import "scss/height-width.scss";
4 @import "scss/animations.scss"; 4 @import "scss/animations.scss";
5 @import "scss/icons.scss"; 5 @import "scss/icons.scss";
6 @import "scss/scroll.scss"; 6 @import "scss/scroll.scss";
7 @import "node_modules/bootstrap/scss/_variables.scss"; 7 @import "node_modules/bootstrap/scss/_variables.scss";
8 8
9 @font-face { 9 @font-face {
10 font-family: "Gotham"; 10 font-family: "Gotham";
11 font-style: normal; 11 font-style: normal;
12 font-weight: normal; 12 font-weight: normal;
13 src: url("assets/fonts/gotham-medium.woff") format("woff"); 13 src: url("assets/fonts/gotham-medium.woff") format("woff");
14 } 14 }
15 15
16 html, 16 html,
17 body { 17 body {
18 max-height: 100vh; 18 max-height: 100vh;
19 height: 100%; 19 height: 100%;
20 font-family: "Gotham"; 20 font-family: "Gotham";
21 overflow: hidden; 21 overflow: hidden;
22 user-select: none; 22 user-select: none;
23 } 23 }
24 24
25 .btn-effect { 25 .btn-effect {
26 transition: all 0.3s; 26 transition: all 0.3s;
27 &:hover { 27 &:hover {
28 cursor: pointer; 28 cursor: pointer;
29 opacity: 0.7; 29 opacity: 0.7;
30 } 30 }
31 &:active { 31 &:active {
32 transform: scale(1.02); 32 transform: scale(1.02);
33 } 33 }
34 } 34 }
35 35
36 .cursor-pointer { 36 .cursor-pointer {
37 cursor: pointer; 37 cursor: pointer;
38 } 38 }
39 39
40 p { 40 p {
41 margin: 0 !important; 41 margin: 0 !important;
42 } 42 }
43 43
44 .img-in-top { 44 .img-in-top {
45 position: absolute; 45 position: absolute;
46 top: -35px; 46 top: -35px;
47 left: 50%; 47 left: 50%;
48 height: 70px; 48 height: 70px;
49 -webkit-transform: translateX(-50%); 49 -webkit-transform: translateX(-50%);
50 transform: translateX(-50%); 50 transform: translateX(-50%);
51 } 51 }
52 52
53 .rotate-45 { 53 .rotate-45 {
54 transform: rotate(45deg); 54 transform: rotate(45deg);
55 } 55 }
56 56
57 .rotate-90 { 57 .rotate-90 {
58 transform: rotate(90deg); 58 transform: rotate(90deg);
59 } 59 }
60 60
61 .rotate-90-neg { 61 .rotate-90-neg {
62 transform: rotate(-90deg); 62 transform: rotate(-90deg);
63 } 63 }
64 64
65 .rotate-180-neg { 65 .rotate-180-neg {
66 transform: rotate(-180deg); 66 transform: rotate(-180deg);
67 } 67 }
68 68
69 body.lash{ 69 body.media-pantalla{
70 position: absolute !important; 70 position: absolute !important;
71 bottom: 0; 71 bottom: 0;
72 width: 100%; 72 width: 100%;
73 height: 50%; 73 height: 50%;
74 }
74 }