Luis Suarez / autoservicio-axion

Download as
Browse Code »

Commit cf03a4d85f40fe9583720d77c05d1cae82934eeb

Authored by Marcelo Puebla
1 parent 8caf5d3080
Exists in master and in 2 other branches 20200117-axion-responsive, develop

pantalla pago con tarjeta

Showing 9 changed files with 218 additions and 1 deletions   Show diff stats
src/app/app-routing.module.ts
Diff comments   View file @ cf03a4d
... ... @@ -33,6 +33,10 @@ const routes: Routes = [
33 33 path: 'pago-electronico',
34 34 loadChildren: () => import('./modules/pago-electronico/pago-electronico.module').then(m => m.PagoElectronicoModule)
35 35 },
  36 + {
  37 + path: 'pago-tarjeta',
  38 + loadChildren: () => import('./modules/pago-tarjeta/pago-tarjeta.module').then(m => m.PagoTarjetaModule)
  39 + },
36 40 ]
37 41 },
38 42 { path: '**', redirectTo: '', pathMatch: 'full' },
src/app/modules/forma-pago/forma-pago.component.html
Diff comments   View file @ cf03a4d
... ... @@ -50,7 +50,7 @@
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"
53   - (click)="goTo('/seleccion-articulos')">
  53 + [routerLink]="['/pago-tarjeta']">
54 54 <div class="row mx-0 bg-primary badge-pill">
55 55 <div class="col-auto p-0">
56 56 <img
src/app/modules/pago-tarjeta/pago-tarjeta-routing.module.ts
Diff comments   View file @ cf03a4d
... ... @@ -0,0 +1,13 @@
  1 +import { NgModule } from '@angular/core';
  2 +import { Routes, RouterModule } from '@angular/router';
  3 +import { PagoTarjetaComponent } from './pago-tarjeta.component';
  4 +
  5 +const routes: Routes = [
  6 + { path: '', component: PagoTarjetaComponent }
  7 +];
  8 +
  9 +@NgModule({
  10 + imports: [RouterModule.forChild(routes)],
  11 + exports: [RouterModule]
  12 +})
  13 +export class PagoTarjetaRoutingModule { }
src/app/modules/pago-tarjeta/pago-tarjeta.component.html
Diff comments   View file @ cf03a4d
... ... @@ -0,0 +1,59 @@
  1 +<div class="h-92 bg-white fade-in-left">
  2 + <div class="row mx-0 h-15">
  3 + <div class="col-12 px-0 h-80 my-auto">
  4 + <img
  5 + draggable="false"
  6 + ondragstart="return false;"
  7 + (contextmenu)="false"
  8 + class="d-block mx-auto h-100"
  9 + src="assets/img/logo-spot.svg">
  10 + </div>
  11 + </div>
  12 + <div class="h-85">
  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">
  15 + <img
  16 + draggable="false"
  17 + ondragstart="return false;"
  18 + (contextmenu)="false"
  19 + class="img-in-top px-4 bg-white"
  20 + src="assets/img/icono-tarjetas.svg">
  21 + <p class="h6 m-0">AHORA</p>
  22 + <p class="h2 mb-3 text-secondary">
  23 + introducí o insertá tú tarjeta
  24 + </p>
  25 + <p class="h6 m-0">Y SEGUÍ LAS INSTRUCCIONES DEL LECTOR</p>
  26 + </div>
  27 + </div>
  28 + <div class="row mt-5 justify-content-center arrow-slide arrow-delay-1">
  29 + <div class="col-1">
  30 + <img
  31 + draggable="false"
  32 + ondragstart="return false;"
  33 + (contextmenu)="false"
  34 + class="img-fluid"
  35 + src="assets/img/down-chevron.svg">
  36 + </div>
  37 + </div>
  38 + <div class="row justify-content-center arrow-slide arrow-delay-2">
  39 + <div class="col-1">
  40 + <img
  41 + draggable="false"
  42 + ondragstart="return false;"
  43 + (contextmenu)="false"
  44 + class="img-fluid"
  45 + src="assets/img/down-chevron.svg">
  46 + </div>
  47 + </div>
  48 + <div class="row justify-content-center arrow-slide arrow-delay-3">
  49 + <div class="col-1">
  50 + <img
  51 + draggable="false"
  52 + ondragstart="return false;"
  53 + (contextmenu)="false"
  54 + class="img-fluid"
  55 + src="assets/img/down-chevron.svg">
  56 + </div>
  57 + </div>
  58 + </div>
  59 +</div>
src/app/modules/pago-tarjeta/pago-tarjeta.component.scss
Diff comments   View file @ cf03a4d
... ... @@ -0,0 +1,50 @@
  1 +.arrow-slide {
  2 + animation: slide 1.5s infinite;
  3 + -webkit-animation: slide 1.5s infinite;
  4 + opacity: 0;
  5 +}
  6 +
  7 +@for $i from 1 through 3 {
  8 + $delayValue: $i * 0.2s;
  9 + .arrow-delay-#{$i} {
  10 + animation-delay: $delayValue;
  11 + -webkit-animation-delay: $delayValue;
  12 + }
  13 +}
  14 +
  15 +@-webkit-keyframes slide {
  16 + 0% {
  17 + opacity: 0;
  18 + transform: translateY(-10px);
  19 + }
  20 + 33% {
  21 + opacity: 1;
  22 + transform: translateY(-5px);
  23 + }
  24 + 66% {
  25 + opacity: 0;
  26 + transform: translateY(0px);
  27 + }
  28 + 100% {
  29 + opacity: 0;
  30 + transform: translateY(-10px);
  31 + }
  32 +}
  33 +@keyframes slide {
  34 + 0% {
  35 + opacity: 0;
  36 + transform: translateY(-10px);
  37 + }
  38 + 33% {
  39 + opacity: 1;
  40 + transform: translateY(-5px);
  41 + }
  42 + 66% {
  43 + opacity: 0;
  44 + transform: translateY(0px);
  45 + }
  46 + 100% {
  47 + opacity: 0;
  48 + transform: translateY(-10px);
  49 + }
  50 +}
src/app/modules/pago-tarjeta/pago-tarjeta.component.spec.ts
Diff comments   View file @ cf03a4d
... ... @@ -0,0 +1,25 @@
  1 +import { async, ComponentFixture, TestBed } from '@angular/core/testing';
  2 +
  3 +import { PagoTarjetaComponent } from './pago-tarjeta.component';
  4 +
  5 +describe('PagoTarjetaComponent', () => {
  6 + let component: PagoTarjetaComponent;
  7 + let fixture: ComponentFixture<PagoTarjetaComponent>;
  8 +
  9 + beforeEach(async(() => {
  10 + TestBed.configureTestingModule({
  11 + declarations: [ PagoTarjetaComponent ]
  12 + })
  13 + .compileComponents();
  14 + }));
  15 +
  16 + beforeEach(() => {
  17 + fixture = TestBed.createComponent(PagoTarjetaComponent);
  18 + component = fixture.componentInstance;
  19 + fixture.detectChanges();
  20 + });
  21 +
  22 + it('should create', () => {
  23 + expect(component).toBeTruthy();
  24 + });
  25 +});
src/app/modules/pago-tarjeta/pago-tarjeta.component.ts
Diff comments   View file @ cf03a4d
... ... @@ -0,0 +1,15 @@
  1 +import { Component, OnInit } from '@angular/core';
  2 +
  3 +@Component({
  4 + selector: 'app-pago-tarjeta',
  5 + templateUrl: './pago-tarjeta.component.html',
  6 + styleUrls: ['./pago-tarjeta.component.scss']
  7 +})
  8 +export class PagoTarjetaComponent implements OnInit {
  9 +
  10 + constructor() { }
  11 +
  12 + ngOnInit() {
  13 + }
  14 +
  15 +}
src/app/modules/pago-tarjeta/pago-tarjeta.module.ts
Diff comments   View file @ cf03a4d
... ... @@ -0,0 +1,15 @@
  1 +import { NgModule } from '@angular/core';
  2 +import { CommonModule } from '@angular/common';
  3 +
  4 +import { PagoTarjetaRoutingModule } from './pago-tarjeta-routing.module';
  5 +import { PagoTarjetaComponent } from './pago-tarjeta.component';
  6 +
  7 +
  8 +@NgModule({
  9 + declarations: [PagoTarjetaComponent],
  10 + imports: [
  11 + CommonModule,
  12 + PagoTarjetaRoutingModule
  13 + ]
  14 +})
  15 +export class PagoTarjetaModule { }
src/assets/img/down-chevron.svg
Diff comments   View file @ cf03a4d
... ... @@ -0,0 +1,36 @@
  1 +<?xml version="1.0" encoding="iso-8859-1"?>
  2 +<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
  3 +<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  4 + viewBox="0 0 407.437 407.437" style="enable-background:new 0 0 407.437 407.437;" xml:space="preserve">
  5 +<polygon points="386.258,91.567 203.718,273.512 21.179,91.567 0,112.815 203.718,315.87 407.437,112.815 "/>
  6 +<g>
  7 +</g>
  8 +<g>
  9 +</g>
  10 +<g>
  11 +</g>
  12 +<g>
  13 +</g>
  14 +<g>
  15 +</g>
  16 +<g>
  17 +</g>
  18 +<g>
  19 +</g>
  20 +<g>
  21 +</g>
  22 +<g>
  23 +</g>
  24 +<g>
  25 +</g>
  26 +<g>
  27 +</g>
  28 +<g>
  29 +</g>
  30 +<g>
  31 +</g>
  32 +<g>
  33 +</g>
  34 +<g>
  35 +</g>
  36 +</svg>