From 036a5163ae71a07abd24b43382da210380f8e1d3 Mon Sep 17 00:00:00 2001
From: Luis Suarez <lsuarezh23@gmail.com>
Date: Mon, 17 Feb 2020 10:25:08 -0400
Subject: [PATCH] indicaciones pago tarjeta, rutas y pantalla adaptada

---
 src/app/modules/forma-pago/forma-pago.component.ts |  2 +-
 .../indicaciones-pago-tarjeta.component.html       | 45 ++++++++++++++--------
 .../indicaciones-pago-tarjeta.component.scss       |  4 ++
 .../indicaciones-pago-tarjeta.component.ts         |  2 +-
 4 files changed, 36 insertions(+), 17 deletions(-)

diff --git a/src/app/modules/forma-pago/forma-pago.component.ts b/src/app/modules/forma-pago/forma-pago.component.ts
index ba1680a..8be7187 100644
--- a/src/app/modules/forma-pago/forma-pago.component.ts
+++ b/src/app/modules/forma-pago/forma-pago.component.ts
@@ -25,7 +25,7 @@ export class FormaPagoComponent implements OnInit {
     this.articuloService.medioPago = medioPago;
     switch (medioPago) {
       case 4:
-        this.router.navigate(['pago-tarjeta']);
+        this.router.navigate(['indicaciones-pago-tarjeta']);
         break;
       case 9:
         this.router.navigate(['pago-electronico']);
diff --git a/src/app/modules/indicaciones-pago-tarjeta/indicaciones-pago-tarjeta.component.html b/src/app/modules/indicaciones-pago-tarjeta/indicaciones-pago-tarjeta.component.html
index eb7f226..2230b75 100644
--- a/src/app/modules/indicaciones-pago-tarjeta/indicaciones-pago-tarjeta.component.html
+++ b/src/app/modules/indicaciones-pago-tarjeta/indicaciones-pago-tarjeta.component.html
@@ -12,10 +12,12 @@
   <div class="h-85">
     <div class="row h-auto mt-6 mx-0 justify-content-center text-center">
       <div
-        class="col-12 col-sm-10 col-md-4 p-5 ml-auto h-auto align-self-center
-                btn-effect border border-primary rounded reduce-card-1">
+        #card
+        class="p-5 mx-auto mt-4 h-30 align-self-center
+        btn-effect border border-primary rounded reduce-card-1"
+        [ngClass]="card.classList.contains('media-pantalla') ? 'col-md-4' : 'col-md-8'">
         <div class="row h-auto">
-          <div class="col-12 col-md-12">
+          <div [ngClass]="card.classList.contains('media-pantalla') ? 'col-12' : 'col-4'">
             <img
               draggable="false"
               ondragstart="return false;"
@@ -23,7 +25,8 @@
               class="w-100 h-auto bg-white"
               src="assets/img/tarjeta-banda.jpg"/>
           </div>
-          <div class="col-12 col-md-12 h-auto">
+          <div class="h-auto"
+               [ngClass]="card.classList.contains('media-pantalla') ? 'col-12' : 'col-8'">
             <p class="h2 m-0 text-primary">Banda Magnética</p>
             <small class=" m-0">
               DESLIZÁ LA TARJETA POR LA RANURA<br>
@@ -31,7 +34,9 @@
             </small>
             <div class="btn-effect col-12 px-0 bg-white mt-4 mx-auto">
               <div class="row mx-0 bg-primary badge-pill h-auto">
-                <div class="col-10 align-self-center text-center text-white">
+                <div
+                 class="col-10 align-self-center text-center text-white"
+                 [routerLink]="['/pago-tarjeta']">
                   Continuar
                 </div>
                 <div class="col-2 align-self-center p-0">
@@ -48,10 +53,11 @@
         </div>
       </div>
       <div
-        class="col-12 col-sm-10 col-md-4 p-5 my-auto mx-3 h-auto align-self-center
-                btn-effect border border-primary rounded reduce-card-1">
+        class="p-5 mx-auto mt-6 h-auto align-self-center
+        btn-effect border border-primary rounded reduce-card-1"
+        [ngClass]="card.classList.contains('media-pantalla') ? 'col-md-4' : 'col-md-8'">
         <div class="row h-auto">
-          <div class="col-12 col-md-12">
+          <div [ngClass]="card.classList.contains('media-pantalla') ? 'col-12' : 'col-4'">
             <img
               draggable="false"
               ondragstart="return false;"
@@ -59,7 +65,9 @@
               class="w-100 h-auto bg-white"
               src="assets/img/tarjeta-chip.jpg"/>
           </div>
-          <div class="col-12 col-md-12 h-auto">
+          <div
+           class="h-auto"
+           [ngClass]="card.classList.contains('media-pantalla') ? 'col-12' : 'col-8'">
             <p class="h2 m-0 text-primary">Chip</p>
             <small class=" m-0">
               INTRODUCÍ TU TARJETA POR LA<br>
@@ -68,7 +76,9 @@
             </small>
             <div class="btn-effect col-12 px-0 bg-white mt-4 mx-auto">
               <div class="row mx-0 bg-primary badge-pill h-auto">
-                <div class="col-10 align-self-center text-center text-white">
+                <div
+                 class="col-10 align-self-center text-center text-white"
+                 [routerLink]="['/pago-tarjeta']">
                   Continuar
                 </div>
                 <div class="col-2 align-self-center p-0">
@@ -85,10 +95,11 @@
         </div>
       </div>
       <div
-        class="col-12 col-sm-10 col-md-4 p-5 mr-auto h-auto align-self-center
-                btn-effect border border-primary rounded reduce-card-1">
+        class="col-sm-10 col-md-4 p-5 mx-auto mt-6 align-self-center
+        btn-effect border border-primary rounded reduce-card-1"
+        [ngClass]="card.classList.contains('media-pantalla') ? 'col-md-4' : 'col-md-8'">  
         <div class="row h-auto">
-          <div class="col-12 col-md-12">
+          <div [ngClass]="card.classList.contains('media-pantalla') ? 'col-12' : 'col-4'">
             <img
               draggable="false"
               ondragstart="return false;"
@@ -96,7 +107,9 @@
               class="w-100 h-auto bg-white"
               src="assets/img/tarjeta-contact-less.jpg"/>
           </div>
-          <div class="col-12 col-md-12 h-auto">
+          <div
+           class="h-auto"
+           [ngClass]="card.classList.contains('media-pantalla') ? 'col-12' : 'col-8'">
             <p class="h2 m-0 text-primary">Contact-less</p>
             <small class=" m-0">
               ACERCÁ LA TARJETA AL POSNET<br>
@@ -104,7 +117,9 @@
             </small>
             <div class="btn-effect col-12 px-0 bg-white mt-4 mx-auto">
               <div class="row mx-0 bg-primary badge-pill h-auto">
-                <div class="col-10 align-self-center text-center text-white">
+                <div
+                 class="col-10 align-self-center text-center text-white"
+                 [routerLink]="['/pago-tarjeta']">
                   <small>Continuar</small> 
                 </div>
                 <div class="col-2 align-self-center p-0">
diff --git a/src/app/modules/indicaciones-pago-tarjeta/indicaciones-pago-tarjeta.component.scss b/src/app/modules/indicaciones-pago-tarjeta/indicaciones-pago-tarjeta.component.scss
index 9cbaa9b..ef4bb46 100644
--- a/src/app/modules/indicaciones-pago-tarjeta/indicaciones-pago-tarjeta.component.scss
+++ b/src/app/modules/indicaciones-pago-tarjeta/indicaciones-pago-tarjeta.component.scss
@@ -3,3 +3,7 @@
   margin: 0px 15px !important;
   height: 670px !important;
 }
+
+.mt-6 {
+  margin-top: 4.5rem;
+}
diff --git a/src/app/modules/indicaciones-pago-tarjeta/indicaciones-pago-tarjeta.component.ts b/src/app/modules/indicaciones-pago-tarjeta/indicaciones-pago-tarjeta.component.ts
index 6f212f5..2a1a29e 100644
--- a/src/app/modules/indicaciones-pago-tarjeta/indicaciones-pago-tarjeta.component.ts
+++ b/src/app/modules/indicaciones-pago-tarjeta/indicaciones-pago-tarjeta.component.ts
@@ -14,7 +14,7 @@ export class IndicacionesPagoTarjetaComponent implements OnInit {
 
   mediaPantalla() {
     if ($('body').hasClass('media-pantalla')) {
-     $('.reduce-card').addClass('media-pantalla');
+     $('.reduce-card-1').addClass('media-pantalla');
     }
   }
 }
-- 
1.9.1