Commit 07cbce8bc25a4a81d1714f2e78be480aca1f498e

Authored by Luis Suarez
1 parent a8811cc942
Exists in develop

reducir botones en pantalla completa

src/app/modules/indicaciones-pago-tarjeta/indicaciones-pago-tarjeta.component.html
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 14 <div
15 #card 15 #card
16 class="p-5 mx-auto mt-4 h-30 align-self-center 16 class="p-5 mx-auto mt-4 h-30 align-self-center
17 btn-effect border border-primary rounded reduce-card-1" 17 btn-effect border border-primary rounded reduce-card-1"
18 [ngClass]="card.classList.contains('media-pantalla') ? 'col-md-4' : 'col-md-8'" 18 [ngClass]="card.classList.contains('media-pantalla') ? 'col-md-4' : 'col-md-8'"
19 [routerLink]="['/pago-tarjeta']"> 19 [routerLink]="['/pago-tarjeta']">
20 <div class="row h-auto"> 20 <div class="row h-auto">
21 <div [ngClass]="card.classList.contains('media-pantalla') ? 'col-12' : 'col-4'"> 21 <div [ngClass]="card.classList.contains('media-pantalla') ? 'col-12' : 'col-4'">
22 <img 22 <img
23 draggable="false" 23 draggable="false"
24 ondragstart="return false;" 24 ondragstart="return false;"
25 (contextmenu)="(false)" 25 (contextmenu)="(false)"
26 class="w-100 h-auto bg-white" 26 class="w-100 h-auto bg-white"
27 src="assets/img/tarjeta-banda.jpg"/> 27 src="assets/img/tarjeta-banda.jpg"/>
28 </div> 28 </div>
29 <div class="h-auto" 29 <div class="h-auto"
30 [ngClass]="card.classList.contains('media-pantalla') ? 'col-12' : 'col-8'"> 30 [ngClass]="card.classList.contains('media-pantalla') ? 'col-12' : 'col-8'">
31 <p class="h2 m-0 text-primary">Banda Magnética</p> 31 <p class="h2 m-0 text-primary">Banda Magnética</p>
32 <small class=" m-0"> 32 <small class=" m-0">
33 DESLIZÁ LA TARJETA POR LA RANURA<br> 33 DESLIZÁ LA TARJETA POR LA RANURA<br>
34 CUANDO LA PANTALLA LO INDIQUE 34 CUANDO LA PANTALLA LO INDIQUE
35 </small> 35 </small>
36 <div class="btn-effect col-12 px-0 bg-white mt-4 mx-auto"> 36 <div
37 class="btn-effect px-0 bg-white mt-4 mx-auto"
38 [ngClass]="card.classList.contains('media-pantalla') ? 'col-12' : 'col-7'">
37 <div class="row mx-0 bg-primary badge-pill h-auto"> 39 <div class="row mx-0 bg-primary badge-pill h-auto">
38 <div class="col-10 align-self-center text-center text-white"> 40 <div class="col-10 align-self-center text-center text-white">
39 Continuar 41 Continuar
40 </div> 42 </div>
41 <div class="col-2 align-self-center p-0"> 43 <div class="col-2 align-self-center p-0">
42 <img 44 <img
43 draggable="false" 45 draggable="false"
44 ondragstart="return false;" 46 ondragstart="return false;"
45 (contextmenu)="(false)" 47 (contextmenu)="(false)"
46 class="p-1 icon-50" 48 class="p-1 icon-50"
47 src="assets/img/ir.svg"/> 49 src="assets/img/ir.svg"/>
48 </div> 50 </div>
49 </div> 51 </div>
50 </div> 52 </div>
51 </div> 53 </div>
52 </div> 54 </div>
53 </div> 55 </div>
54 <div 56 <div
55 class="p-5 mx-auto mt-6 h-auto align-self-center 57 class="p-5 mx-auto mt-6 h-auto align-self-center
56 btn-effect border border-primary rounded reduce-card-1" 58 btn-effect border border-primary rounded reduce-card-1"
57 [ngClass]="card.classList.contains('media-pantalla') ? 'col-md-4' : 'col-md-8'" 59 [ngClass]="card.classList.contains('media-pantalla') ? 'col-md-4' : 'col-md-8'"
58 [routerLink]="['/pago-tarjeta']"> 60 [routerLink]="['/pago-tarjeta']">
59 <div class="row h-auto"> 61 <div class="row h-auto">
60 <div [ngClass]="card.classList.contains('media-pantalla') ? 'col-12' : 'col-4'"> 62 <div [ngClass]="card.classList.contains('media-pantalla') ? 'col-12' : 'col-4'">
61 <img 63 <img
62 draggable="false" 64 draggable="false"
63 ondragstart="return false;" 65 ondragstart="return false;"
64 (contextmenu)="(false)" 66 (contextmenu)="(false)"
65 class="w-100 h-auto bg-white" 67 class="w-100 h-auto bg-white"
66 src="assets/img/tarjeta-chip.jpg"/> 68 src="assets/img/tarjeta-chip.jpg"/>
67 </div> 69 </div>
68 <div 70 <div
69 class="h-auto" 71 class="h-auto"
70 [ngClass]="card.classList.contains('media-pantalla') ? 'col-12' : 'col-8'"> 72 [ngClass]="card.classList.contains('media-pantalla') ? 'col-12' : 'col-8'">
71 <p class="h2 m-0 text-primary">Chip</p> 73 <p class="h2 m-0 text-primary">Chip</p>
72 <small class=" m-0"> 74 <small class=" m-0">
73 INTRODUCÍ TU TARJETA POR LA<br> 75 INTRODUCÍ TU TARJETA POR LA<br>
74 PARTE INFERIOR DE LECTOR <br> 76 PARTE INFERIOR DE LECTOR <br>
75 CUANDO LA PANTALLA LO INDIQUE 77 CUANDO LA PANTALLA LO INDIQUE
76 </small> 78 </small>
77 <div class="btn-effect col-12 px-0 bg-white mt-4 mx-auto"> 79 <div
80 class="btn-effect px-0 bg-white mt-4 mx-auto"
81 [ngClass]="card.classList.contains('media-pantalla') ? 'col-12' : 'col-7'">
78 <div class="row mx-0 bg-primary badge-pill h-auto"> 82 <div class="row mx-0 bg-primary badge-pill h-auto">
79 <div 83 <div
80 class="col-10 align-self-center text-center text-white"> 84 class="col-10 align-self-center text-center text-white">
81 Continuar 85 Continuar
82 </div> 86 </div>
83 <div class="col-2 align-self-center p-0"> 87 <div class="col-2 align-self-center p-0">
84 <img 88 <img
85 draggable="false" 89 draggable="false"
86 ondragstart="return false;" 90 ondragstart="return false;"
87 (contextmenu)="(false)" 91 (contextmenu)="(false)"
88 class="p-1 icon-50" 92 class="p-1 icon-50"
89 src="assets/img/ir.svg"/> 93 src="assets/img/ir.svg"/>
90 </div> 94 </div>
91 </div> 95 </div>
92 </div> 96 </div>
93 </div> 97 </div>
94 </div> 98 </div>
95 </div> 99 </div>
96 <div 100 <div
97 class="col-sm-10 col-md-4 p-5 mx-auto mt-6 align-self-center 101 class="col-sm-10 col-md-4 p-5 mx-auto mt-6 align-self-center
98 btn-effect border border-primary rounded reduce-card-1" 102 btn-effect border border-primary rounded reduce-card-1"
99 [ngClass]="card.classList.contains('media-pantalla') ? 'col-md-4' : 'col-md-8'" 103 [ngClass]="card.classList.contains('media-pantalla') ? 'col-md-4' : 'col-md-8'"
100 [routerLink]="['/pago-tarjeta']"> 104 [routerLink]="['/pago-tarjeta']">
101 <div class="row h-auto"> 105 <div class="row h-auto">
102 <div [ngClass]="card.classList.contains('media-pantalla') ? 'col-12' : 'col-4'"> 106 <div [ngClass]="card.classList.contains('media-pantalla') ? 'col-12' : 'col-4'">
103 <img 107 <img
104 draggable="false" 108 draggable="false"
105 ondragstart="return false;" 109 ondragstart="return false;"
106 (contextmenu)="(false)" 110 (contextmenu)="(false)"
107 class="w-100 h-auto bg-white" 111 class="w-100 h-auto bg-white"
108 src="assets/img/tarjeta-contact-less.jpg"/> 112 src="assets/img/tarjeta-contact-less.jpg"/>
109 </div> 113 </div>
110 <div 114 <div
111 class="h-auto" 115 class="h-auto"
112 [ngClass]="card.classList.contains('media-pantalla') ? 'col-12' : 'col-8'"> 116 [ngClass]="card.classList.contains('media-pantalla') ? 'col-12' : 'col-8'">
113 <p class="h2 m-0 text-primary">Contact-less</p> 117 <p class="h2 m-0 text-primary">Contact-less</p>
114 <small class=" m-0"> 118 <small class=" m-0">
115 ACERCÁ LA TARJETA AL POSNET<br> 119 ACERCÁ LA TARJETA AL POSNET<br>
116 CUANDO LA PANTALLA LO INDIQUE 120 CUANDO LA PANTALLA LO INDIQUE
117 </small> 121 </small>
118 <div class="btn-effect col-12 px-0 bg-white mt-4 mx-auto"> 122 <div
123 class="btn-effect px-0 bg-white mt-4 mx-auto"
124 [ngClass]="card.classList.contains('media-pantalla') ? 'col-12' : 'col-7'">
119 <div class="row mx-0 bg-primary badge-pill h-auto"> 125 <div class="row mx-0 bg-primary badge-pill h-auto">
120 <div 126 <div
121 class="col-10 align-self-center text-center text-white"> 127 class="col-10 align-self-center text-center text-white">
122 <small>Continuar</small> 128 <small>Continuar</small>
123 </div> 129 </div>
124 <div class="col-2 align-self-center p-0"> 130 <div class="col-2 align-self-center p-0">
125 <img 131 <img
126 draggable="false" 132 draggable="false"
127 ondragstart="return false;" 133 ondragstart="return false;"
128 (contextmenu)="(false)" 134 (contextmenu)="(false)"
129 class="p-1 icon-50" 135 class="p-1 icon-50"
130 src="assets/img/ir.svg"/> 136 src="assets/img/ir.svg"/>
131 </div> 137 </div>
132 </div> 138 </div>
133 </div> 139 </div>
134 </div> 140 </div>
135 </div> 141 </div>
136 </div> 142 </div>
137 </div> 143 </div>
138 </div> 144 </div>
139 </div> 145 </div>
140 146