Marcelo Puebla / autoservicio-axion

Download as
Browse Code »

Commit ed49e716725f175c5d3fc49bf3db8ff915725b7e

Authored by Luis Suarez
1 parent d9e2d82d9d
Exists in develop

margen en pago tarjeta

Showing 4 changed files with 12 additions and 2 deletions   Show diff stats
src/app/modules/pago-tarjeta/pago-tarjeta.component.html
Diff comments   View file @ ed49e71
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 pago-tarjeta">
13 <div class="row h-50 mx-0 justify-content-center text-center"> 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 h-auto align-self-end border border-secondary rounded">
15 <img 15 <img
16 draggable="false" 16 draggable="false"
17 ondragstart="return false;" 17 ondragstart="return false;"
18 (contextmenu)="false" 18 (contextmenu)="false"
19 class="img-in-top px-4 bg-white" 19 class="img-in-top px-4 bg-white"
20 src="assets/img/icono-tarjetas.svg"> 20 src="assets/img/icono-tarjetas.svg">
21 <p class="h6 m-0">AHORA</p> 21 <p class="h6 m-0">AHORA</p>
22 <p class="h2 mb-3 text-secondary"> 22 <p class="h2 mb-3 text-secondary">
23 introducí o insertá tu tarjeta 23 introducí o insertá tu tarjeta
24 </p> 24 </p>
25 <p class="h6 m-0">Y SEGUÍ LAS INSTRUCCIONES DEL LECTOR</p> 25 <p class="h6 m-0">Y SEGUÍ LAS INSTRUCCIONES DEL LECTOR</p>
26 </div> 26 </div>
27 </div> 27 </div>
28 <div class="row mt-5 justify-content-center arrow-slide arrow-delay-1"> 28 <div class="row mt-5 justify-content-center arrow-slide arrow-delay-1">
29 <div class="col-1"> 29 <div class="col-1">
30 <img 30 <img
31 draggable="false" 31 draggable="false"
32 ondragstart="return false;" 32 ondragstart="return false;"
33 (contextmenu)="false" 33 (contextmenu)="false"
34 class="img-fluid" 34 class="img-fluid"
35 src="assets/img/down-chevron.svg"> 35 src="assets/img/down-chevron.svg">
36 </div> 36 </div>
37 </div> 37 </div>
38 <div class="row justify-content-center arrow-slide arrow-delay-2"> 38 <div class="row justify-content-center arrow-slide arrow-delay-2">
39 <div class="col-1"> 39 <div class="col-1">
40 <img 40 <img
41 draggable="false" 41 draggable="false"
42 ondragstart="return false;" 42 ondragstart="return false;"
43 (contextmenu)="false" 43 (contextmenu)="false"
44 class="img-fluid" 44 class="img-fluid"
45 src="assets/img/down-chevron.svg"> 45 src="assets/img/down-chevron.svg">
46 </div> 46 </div>
47 </div> 47 </div>
48 <div class="row justify-content-center arrow-slide arrow-delay-3"> 48 <div class="row justify-content-center arrow-slide arrow-delay-3">
49 <div class="col-1"> 49 <div class="col-1">
50 <img 50 <img
51 draggable="false" 51 draggable="false"
52 ondragstart="return false;" 52 ondragstart="return false;"
53 (contextmenu)="false" 53 (contextmenu)="false"
54 class="img-fluid" 54 class="img-fluid"
55 src="assets/img/down-chevron.svg"> 55 src="assets/img/down-chevron.svg">
56 </div> 56 </div>
57 </div> 57 </div>
58 </div> 58 </div>
59 </div> 59 </div>
60 60
src/app/modules/pago-tarjeta/pago-tarjeta.component.scss
Diff comments   View file @ ed49e71
1 .arrow-slide { 1 .arrow-slide {
2 animation: slide 1.5s infinite; 2 animation: slide 1.5s infinite;
3 -webkit-animation: slide 1.5s infinite; 3 -webkit-animation: slide 1.5s infinite;
4 opacity: 0; 4 opacity: 0;
5 } 5 }
6 6
7 @for $i from 1 through 3 { 7 @for $i from 1 through 3 {
8 $delayValue: $i * 0.2s; 8 $delayValue: $i * 0.2s;
9 .arrow-delay-#{$i} { 9 .arrow-delay-#{$i} {
10 animation-delay: $delayValue; 10 animation-delay: $delayValue;
11 -webkit-animation-delay: $delayValue; 11 -webkit-animation-delay: $delayValue;
12 } 12 }
13 } 13 }
14 14
15 @-webkit-keyframes slide { 15 @-webkit-keyframes slide {
16 0% { 16 0% {
17 opacity: 0; 17 opacity: 0;
18 transform: translateY(-10px); 18 transform: translateY(-10px);
19 } 19 }
20 33% { 20 33% {
21 opacity: 1; 21 opacity: 1;
22 transform: translateY(-5px); 22 transform: translateY(-5px);
23 } 23 }
24 66% { 24 66% {
25 opacity: 0; 25 opacity: 0;
26 transform: translateY(0px); 26 transform: translateY(0px);
27 } 27 }
28 100% { 28 100% {
29 opacity: 0; 29 opacity: 0;
30 transform: translateY(-10px); 30 transform: translateY(-10px);
31 } 31 }
32 } 32 }
33 @keyframes slide { 33 @keyframes slide {
34 0% { 34 0% {
35 opacity: 0; 35 opacity: 0;
36 transform: translateY(-10px); 36 transform: translateY(-10px);
37 } 37 }
38 33% { 38 33% {
39 opacity: 1; 39 opacity: 1;
40 transform: translateY(-5px); 40 transform: translateY(-5px);
41 } 41 }
42 66% { 42 66% {
43 opacity: 0; 43 opacity: 0;
44 transform: translateY(0px); 44 transform: translateY(0px);
45 } 45 }
46 100% { 46 100% {
47 opacity: 0; 47 opacity: 0;
48 transform: translateY(-10px); 48 transform: translateY(-10px);
49 } 49 }
50 } 50 }
51
52 .pago-tarjeta.media-pantalla{
53 margin-top: 50px !important;
54 }
51 55
src/app/modules/pago-tarjeta/pago-tarjeta.component.ts
Diff comments   View file @ ed49e71
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-pago-tarjeta', 6 selector: 'app-pago-tarjeta',
7 templateUrl: './pago-tarjeta.component.html', 7 templateUrl: './pago-tarjeta.component.html',
8 styleUrls: ['./pago-tarjeta.component.scss'] 8 styleUrls: ['./pago-tarjeta.component.scss']
9 }) 9 })
10 export class PagoTarjetaComponent implements OnInit { 10 export class PagoTarjetaComponent 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 const dataPago = { 22 const dataPago = {
23 pedidoAnombreDe: '' 23 pedidoAnombreDe: ''
24 }; 24 };
25 this.articuloService.pay(dataPago) 25 this.articuloService.pay(dataPago)
26 .subscribe((res: any) => { 26 .subscribe((res: any) => {
27 this.articuloService.idComanda = res.data; 27 this.articuloService.idComanda = res.data;
28 this.router.navigate(['mensaje-final']); 28 this.router.navigate(['mensaje-final']);
29 }, err => console.error(err)); 29 }, err => console.error(err));
30 this.mediaPantalla();
30 } 31 }
31 32
33 mediaPantalla() {
34 if ($('body').hasClass('media-pantalla')) {
35 $('.pago-tarjeta').addClass('media-pantalla');
36 }
37 }
32 } 38 }
33 39
src/app/shared/footer/footer.component.ts
Diff comments   View file @ ed49e71
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 export class FooterComponent implements OnInit { 9 export class FooterComponent implements OnInit {
10 constructor(private location: Location) {} 10 constructor(private location: Location) {}
11 11
12 ngOnInit() {} 12 ngOnInit() {}
13 13
14 goBack() { 14 goBack() {
15 this.location.back(); 15 this.location.back();
16 } 16 }
17 17
18 reducirPantalla() { 18 reducirPantalla() {
19 $('body,.reduce-card-1,.reduce-card-2,#content,.cat-content,.cat-btn,.cat-box,#boxCarrito,#headerPublicidad,#headerPad,.img-categoria,.carrito-articulo,.carrito-content,.modal-promo').toggleClass('media-pantalla'); 19 $('body,.reduce-card-1,.reduce-card-2,#content,.cat-content,.cat-btn,.cat-box,#boxCarrito,#headerPublicidad,#headerPad,.img-categoria,.carrito-articulo,.carrito-content,.pago-tarjeta,.modal-promo').toggleClass('media-pantalla');
20 } 20 }
21 } 21 }
22 22