From 841076904d9dc99aafe24a1d5ed6e07dd8f10831 Mon Sep 17 00:00:00 2001
From: Luis Suarez <lsuarezh23@gmail.com>
Date: Wed, 12 Feb 2020 08:02:01 -0400
Subject: [PATCH] indicaciones pago tarjeta

---
 .../indicaciones-pago-tarjeta.component.html       | 32 +++++++++++-----------
 .../indicaciones-pago-tarjeta.component.scss       |  5 ++++
 .../indicaciones-pago-tarjeta.component.ts         | 11 ++++++--
 .../filtro-categorias.component.ts                 |  3 +-
 4 files changed, 32 insertions(+), 19 deletions(-)

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 60e54bb..eb7f226 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,10 @@
   <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-7 p-5 m-5 h-auto align-self-center
-                btn-effect border border-primary rounded reduce-card-2">
+        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">
         <div class="row h-auto">
-          <div class="col-12 col-md-4">
+          <div class="col-12 col-md-12">
             <img
               draggable="false"
               ondragstart="return false;"
@@ -23,13 +23,13 @@
               class="w-100 h-auto bg-white"
               src="assets/img/tarjeta-banda.jpg"/>
           </div>
-          <div class="col-12 col-md-8 h-auto">
+          <div class="col-12 col-md-12 h-auto">
             <p class="h2 m-0 text-primary">Banda Magnética</p>
             <small class=" m-0">
               DESLIZÁ LA TARJETA POR LA RANURA<br>
               CUANDO LA PANTALLA LO INDIQUE
             </small>
-            <div class="btn-effect col-10 px-0 bg-white mt-4 mx-auto">
+            <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">
                   Continuar
@@ -48,10 +48,10 @@
         </div>
       </div>
       <div
-        class="col-12 col-sm-10 col-md-7 p-5 m-5 h-auto align-self-center
-                btn-effect border border-primary rounded reduce-card-2">
+        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">
         <div class="row h-auto">
-          <div class="col-12 col-md-4">
+          <div class="col-12 col-md-12">
             <img
               draggable="false"
               ondragstart="return false;"
@@ -59,14 +59,14 @@
               class="w-100 h-auto bg-white"
               src="assets/img/tarjeta-chip.jpg"/>
           </div>
-          <div class="col-12 col-md-8 h-auto">
+          <div class="col-12 col-md-12 h-auto">
             <p class="h2 m-0 text-primary">Chip</p>
             <small class=" m-0">
               INTRODUCÍ TU TARJETA POR LA<br>
               PARTE INFERIOR DE LECTOR <br>
               CUANDO LA PANTALLA LO INDIQUE
             </small>
-            <div class="btn-effect col-10 px-0 bg-white mt-4 mx-auto">
+            <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">
                   Continuar
@@ -85,10 +85,10 @@
         </div>
       </div>
       <div
-        class="col-12 col-sm-10 col-md-7 p-5 m-5 h-auto align-self-center
-                btn-effect border border-primary rounded reduce-card-2">
+        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">
         <div class="row h-auto">
-          <div class="col-12 col-md-4">
+          <div class="col-12 col-md-12">
             <img
               draggable="false"
               ondragstart="return false;"
@@ -96,16 +96,16 @@
               class="w-100 h-auto bg-white"
               src="assets/img/tarjeta-contact-less.jpg"/>
           </div>
-          <div class="col-12 col-md-8 h-auto">
+          <div class="col-12 col-md-12 h-auto">
             <p class="h2 m-0 text-primary">Contact-less</p>
             <small class=" m-0">
               ACERCÁ LA TARJETA AL POSNET<br>
               CUANDO LA PANTALLA LO INDIQUE
             </small>
-            <div class="btn-effect col-10 px-0 bg-white mt-4 mx-auto">
+            <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">
-                  Continuar
+                  <small>Continuar</small> 
                 </div>
                 <div class="col-2 align-self-center p-0">
                   <img
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 e69de29..9cbaa9b 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
@@ -0,0 +1,5 @@
+.reduce-card-1.media-pantalla {
+  max-width: 30% !important;
+  margin: 0px 15px !important;
+  height: 670px !important;
+}
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 eb2e648..aceb6f3 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
@@ -6,8 +6,15 @@ import { Component, OnInit, OnChanges } from '@angular/core';
   styleUrls: ['./indicaciones-pago-tarjeta.component.scss']
 })
 export class IndicacionesPagoTarjetaComponent implements OnInit {
-  mediaPantalla: boolean;
   constructor() { }
 
-  ngOnInit() {}
+  ngOnInit() {
+    this.mediaPantalla();
+  }
+
+  mediaPantalla() {
+    if ($('body').hasClass('media-pantalla')) {
+     $('.reduce-card').addClass('media-pantalla') 
+    }
+  }
 }
diff --git a/src/app/modules/seleccion-articulos/filtro-categorias/filtro-categorias.component.ts b/src/app/modules/seleccion-articulos/filtro-categorias/filtro-categorias.component.ts
index e3629a4..041551c 100644
--- a/src/app/modules/seleccion-articulos/filtro-categorias/filtro-categorias.component.ts
+++ b/src/app/modules/seleccion-articulos/filtro-categorias/filtro-categorias.component.ts
@@ -22,7 +22,7 @@ export class FiltroCategoriasComponent implements OnInit {
 
   constructor(
     private categoriaService: CategoriaService,
-    private inactiveScreen: InactiveScreenService,
+    private inactiveScreen: InactiveScreenService
   ) { }
 
   ngOnInit() {
@@ -67,6 +67,7 @@ export class FiltroCategoriasComponent implements OnInit {
       categoria.selected = index === i ? true : false;
     });
     this.filterItems.emit();
+
   }
 
   @HostListener('scroll', ['$event'])
-- 
1.9.1