Luis Suarez / autoservicio-axion

Download as
Browse Code »

Commit f420f4a80524dd5931e7af2232e2425ff3feacd6

Authored by Luis Suarez
1 parent 45bee51722
Exists in 20200117-axion-responsive

cambiar 'Estamos para ayudarte' por 'Reducir Pantalla'

Showing 2 changed files with 3 additions and 3 deletions   Show diff stats
src/app/modules/seleccion-articulos/seleccion-articulos.component.html
Diff comments   View file @ f420f4a
1 <div class="h-92 bg-white fade-in-left"> 1 <div class="h-92 bg-white fade-in-left">
2 <!-- PUBLICIDADES --> 2 <!-- PUBLICIDADES -->
3 <app-header-publicidad></app-header-publicidad> 3 <app-header-publicidad></app-header-publicidad>
4 4
5 <div class="row mx-0 h-80 align-items-end"> 5 <div class="row mx-0 h-80 align-items-end">
6 <!-- CABECERA --> 6 <!-- CABECERA -->
7 <div class="row w-100 mx-3 h-auto border border-primary rounded-sm"> 7 <div class="row w-100 mx-3 h-auto border border-primary rounded-sm">
8 <div class="col-12 p-2 align-self-center"> 8 <div class="col-12 p-2 align-self-center">
9 <div class="px-3"> 9 <div class="px-3">
10 <p class="h6 text-truncate">SELECCIONÁ TÚ COMIDA Y/O BEBIDA</p> 10 <p class="h6 text-truncate">SELECCIONÁ TÚ COMIDA Y/O BEBIDA</p>
11 </div> 11 </div>
12 </div> 12 </div>
13 </div> 13 </div>
14 <!-- CUERPO --> 14 <!-- CUERPO -->
15 <div class="row w-100 mr-4 h-70" id="content"> 15 <div class="row w-100 mr-4 h-70" id="content">
16 <div class="col-12 h-100 px-0 py-3"> 16 <div class="col-12 h-100 px-0 py-3">
17 <div class="row mx-0 h-100"> 17 <div class="row mx-0 h-100">
18 <!-- FILTRO CATEGORIAS --> 18 <!-- FILTRO CATEGORIAS -->
19 <div class="col-5 col-sm-3 col-xl-2 h-100"> 19 <div class="col-5 col-sm-3 col-xl-2 h-100">
20 <p class="h6 h-6 m-0 text-center"><small>CATEGORÍAS</small></p> 20 <p class="h6 h-6 m-0 text-center"><small>CATEGORÍAS</small></p>
21 <div class="row mx-0 h-94 justify-content-center align-items-center"> 21 <div class="row mx-0 h-94 justify-content-center align-items-center">
22 <div class="col-auto btn-effect h-5 cat-btn"> 22 <div class="col-auto btn-effect h-5 cat-btn">
23 <img 23 <img
24 draggable="false" 24 draggable="false"
25 ondragstart="return false;" 25 ondragstart="return false;"
26 (contextmenu)="false" 26 (contextmenu)="false"
27 class="h-100 d-block mx-auto rotate-90-neg" 27 class="h-100 d-block mx-auto rotate-90-neg"
28 src="assets/img/ir-color.svg" 28 src="assets/img/ir-color.svg"
29 (mousedown)="scrollY(templateCategorias, -100)" 29 (mousedown)="scrollY(templateCategorias, -100)"
30 (mouseup)="mouseup()" 30 (mouseup)="mouseup()"
31 (mouseleave)="mouseup()"> 31 (mouseleave)="mouseup()">
32 </div> 32 </div>
33 <!-- CATEGORIAS --> 33 <!-- CATEGORIAS -->
34 <div 34 <div
35 #templateCategorias 35 #templateCategorias
36 class="col-12 px-0 box-categorias border border-primary border-left-0 rounded-right scroll-y"> 36 class="col-12 px-0 box-categorias border border-primary border-left-0 rounded-right scroll-y">
37 <div 37 <div
38 class="row mx-4 mb-2 h-32 justify-content-center tab cat-content" 38 class="row mx-4 mb-2 h-32 justify-content-center tab cat-content"
39 [ngClass]="{ 'active': allActive, 'border-bottom-effect': !allActive }" 39 [ngClass]="{ 'active': allActive, 'border-bottom-effect': !allActive }"
40 (click)="selectCategoria(-1, 0)" id=""> 40 (click)="selectCategoria(-1, 0)">
41 <img 41 <img
42 draggable="false" 42 draggable="false"
43 ondragstart="return false;" 43 ondragstart="return false;"
44 (contextmenu)="false" 44 (contextmenu)="false"
45 class="col-12 h-50 align-self-end d-none d-sm-block rounded-circle" 45 class="col-12 h-50 align-self-end d-none d-sm-block rounded-circle"
46 src="assets/img/ir-color.svg"> 46 src="assets/img/ir-color.svg">
47 <small class="col-12 px-0 my-1 h-25 align-self-end text-center text-truncate">Todos</small> 47 <small class="col-12 px-0 my-1 h-25 align-self-end text-center text-truncate">Todos</small>
48 </div> 48 </div>
49 <div 49 <div
50 class="row mx-4 mb-2 h-32 justify-content-center tab cat-content" 50 class="row mx-4 mb-2 h-32 justify-content-center tab cat-content"
51 [ngClass]="{ 'active': categoria.selected, 'border-bottom-effect': !categoria.selected, 51 [ngClass]="{ 'active': categoria.selected, 'border-bottom-effect': !categoria.selected,
52 'media-pantalla':mpActive }" 52 'media-pantalla':mpActive }"
53 (click)="selectCategoria(i, categoria.id)" 53 (click)="selectCategoria(i, categoria.id)"
54 *ngFor="let categoria of categorias; let i = index;" id=""> 54 *ngFor="let categoria of categorias; let i = index;">
55 <img 55 <img
56 draggable="false" 56 draggable="false"
57 ondragstart="return false;" 57 ondragstart="return false;"
58 (contextmenu)="false" 58 (contextmenu)="false"
59 class="col-12 h-50 align-self-end d-none d-sm-block rounded-circle" 59 class="col-12 h-50 align-self-end d-none d-sm-block rounded-circle"
60 src="assets/img/ir-color.svg"> 60 src="assets/img/ir-color.svg">
61 <small class="col-12 px-0 my-1 h-25 align-self-end text-center text-truncate">{{categoria.detalle}}</small> 61 <small class="col-12 px-0 my-1 h-25 align-self-end text-center text-truncate">{{categoria.detalle}}</small>
62 </div> 62 </div>
63 </div> 63 </div>
64 <div class="col-auto btn-effect h-5 cat-btn"> 64 <div class="col-auto btn-effect h-5 cat-btn">
65 <img 65 <img
66 draggable="false" 66 draggable="false"
67 ondragstart="return false;" 67 ondragstart="return false;"
68 (contextmenu)="false" 68 (contextmenu)="false"
69 class="h-100 d-block mx-auto rotate-90" 69 class="h-100 d-block mx-auto rotate-90"
70 src="assets/img/ir-color.svg" 70 src="assets/img/ir-color.svg"
71 (mousedown)="scrollY(templateCategorias, 100)" 71 (mousedown)="scrollY(templateCategorias, 100)"
72 (mouseup)="mouseup()" 72 (mouseup)="mouseup()"
73 (mouseleave)="mouseup()"> 73 (mouseleave)="mouseup()">
74 </div> 74 </div>
75 </div> 75 </div>
76 </div> 76 </div>
77 <!-- LISTA DE ARTICULOS --> 77 <!-- LISTA DE ARTICULOS -->
78 <div class="col-7 col-sm-9 col-xl-10 pb-3 h-80 align-self-center scroll-y-visible"> 78 <div class="col-7 col-sm-9 col-xl-10 pb-3 h-80 align-self-center scroll-y-visible">
79 <div class="row row-cols-1 row-cols-sm-3 row-cols-xl-6"> 79 <div class="row row-cols-1 row-cols-sm-3 row-cols-xl-6">
80 <!-- ARTICULO --> 80 <!-- ARTICULO -->
81 <div 81 <div
82 class="col px-2 my-1 my-md-3 h-auto" 82 class="col px-2 my-1 my-md-3 h-auto"
83 *ngFor="let articulo of auxArticulos | slice:0:showQuantity;"> 83 *ngFor="let articulo of auxArticulos | slice:0:showQuantity;">
84 <div class="swing-in-top-fwd card h-auto"> 84 <div class="swing-in-top-fwd card h-auto">
85 <img 85 <img
86 draggable="false" 86 draggable="false"
87 ondragstart="return false;" 87 ondragstart="return false;"
88 (contextmenu)="false" 88 (contextmenu)="false"
89 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}" 89 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"
90 onerror="this.src='assets/img/image-not-found.jpg'" 90 onerror="this.src='assets/img/image-not-found.jpg'"
91 class="card-img-top h-55 rounded-sm"> 91 class="card-img-top h-55 rounded-sm">
92 <div class="row mx-0 py-1 h-auto justify-content-center"> 92 <div class="row mx-0 py-1 h-auto justify-content-center">
93 <p class="col-12 px-1 h6 h-auto text-primary text-center">{{articulo.DetArt}}</p> 93 <p class="col-12 px-1 h6 h-auto text-primary text-center">{{articulo.DetArt}}</p>
94 <p class="col-12 px-1 h-auto text-center line-height-sm"> 94 <p class="col-12 px-1 h-auto text-center line-height-sm">
95 <small>{{articulo.DET_LAR}}</small> 95 <small>{{articulo.DET_LAR}}</small>
96 </p> 96 </p>
97 <div class="col-12 px-1 align-self-end btn-effect h-auto"> 97 <div class="col-12 px-1 align-self-end btn-effect h-auto">
98 <div 98 <div
99 [ngClass]="{'bg-secondary': articulo.promo}" 99 [ngClass]="{'bg-secondary': articulo.promo}"
100 class="row mx-0 justify-content-between bg-primary badge-pill" 100 class="row mx-0 justify-content-between bg-primary badge-pill"
101 (click)="elegirArticulo(articulo)"> 101 (click)="elegirArticulo(articulo)">
102 <div class="col px-0 align-self-center text-white text-right"> 102 <div class="col px-0 align-self-center text-white text-right">
103 {{articulo.PreVen | currency}} 103 {{articulo.PreVen | currency}}
104 </div> 104 </div>
105 <div class="col-5 px-0"> 105 <div class="col-5 px-0">
106 <img 106 <img
107 draggable="false" 107 draggable="false"
108 ondragstart="return false;" 108 ondragstart="return false;"
109 (contextmenu)="false" 109 (contextmenu)="false"
110 class="d-block ml-auto py-1 icon-30" 110 class="d-block ml-auto py-1 icon-30"
111 src="assets/img/ir.svg"> 111 src="assets/img/ir.svg">
112 </div> 112 </div>
113 </div> 113 </div>
114 </div> 114 </div>
115 </div> 115 </div>
116 </div> 116 </div>
117 </div> 117 </div>
118 </div> 118 </div>
119 <!-- BOTON VER MAS --> 119 <!-- BOTON VER MAS -->
120 <div class="row mx-0"> 120 <div class="row mx-0">
121 <div 121 <div
122 *ngIf="showQuantity <= auxArticulos.slice(0, showQuantity).length" 122 *ngIf="showQuantity <= auxArticulos.slice(0, showQuantity).length"
123 class="col-12 px-0 mb-2"> 123 class="col-12 px-0 mb-2">
124 <button 124 <button
125 (click)="increaseShow()" 125 (click)="increaseShow()"
126 class="btn btn-block btn-outline-primary"> 126 class="btn btn-block btn-outline-primary">
127 Ver Más 127 Ver Más
128 </button> 128 </button>
129 </div> 129 </div>
130 </div> 130 </div>
131 </div> 131 </div>
132 </div> 132 </div>
133 </div> 133 </div>
134 </div> 134 </div>
135 <!-- FOOTER CARRITO DE COMPRAS --> 135 <!-- FOOTER CARRITO DE COMPRAS -->
136 <div class="row w-90 mx-auto h-auto justify-content-center"> 136 <div class="row w-90 mx-auto h-auto justify-content-center">
137 <div class="h-75 px-0 border border-primary rounded" 137 <div class="h-75 px-0 border border-primary rounded"
138 #boxCarrito id="boxCarrito" 138 #boxCarrito id="boxCarrito"
139 [ngClass]="boxCarrito.classList.contains('media-pantalla') 139 [ngClass]="boxCarrito.classList.contains('media-pantalla')
140 && articuloService.carrito.length ? 'col-8' : 'col-12'"> 140 && articuloService.carrito.length ? 'col-8' : 'col-12'">
141 <!-- CABECERA --> 141 <!-- CABECERA -->
142 <div class="row mx-0 h-15 border-bottom border-primary"> 142 <div class="row mx-0 h-15 border-bottom border-primary">
143 <p class="col align-self-center text-truncate"><small>ARTÍCULOS EN TÚ CARRITO DE COMPRAS</small></p> 143 <p class="col align-self-center text-truncate"><small>ARTÍCULOS EN TÚ CARRITO DE COMPRAS</small></p>
144 </div> 144 </div>
145 <!-- CUERPO --> 145 <!-- CUERPO -->
146 <div class="row h-85 mx-0 justify-content-around"> 146 <div class="row h-85 mx-0 justify-content-around">
147 <!-- BOTON SCROLL IZQUIERDA --> 147 <!-- BOTON SCROLL IZQUIERDA -->
148 <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center"> 148 <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center">
149 <img 149 <img
150 draggable="false" 150 draggable="false"
151 ondragstart="return false;" 151 ondragstart="return false;"
152 (contextmenu)="false" 152 (contextmenu)="false"
153 class="icon-30 rotate-180-neg" 153 class="icon-30 rotate-180-neg"
154 src="assets/img/ir-fondo-color.svg" 154 src="assets/img/ir-fondo-color.svg"
155 (mousedown)="scrollX(templateCarrito, -100)" 155 (mousedown)="scrollX(templateCarrito, -100)"
156 (mouseup)="mouseup()" 156 (mouseup)="mouseup()"
157 (mouseleave)="mouseup()"> 157 (mouseleave)="mouseup()">
158 </div> 158 </div>
159 <!-- CARRITO --> 159 <!-- CARRITO -->
160 <div class="col-6 col-sm-8 col-md-9 col-lg-10 h-100"> 160 <div class="col-6 col-sm-8 col-md-9 col-lg-10 h-100">
161 <div #templateCarrito class="row flex-row flex-nowrap h-100 mx-0 my-2 scroll-x"> 161 <div #templateCarrito class="row flex-row flex-nowrap h-100 mx-0 my-2 scroll-x">
162 <!-- MENSAJE DE ADVERTENCIA --> 162 <!-- MENSAJE DE ADVERTENCIA -->
163 <div *ngIf="!articuloService.carrito.length" class="col h-100"> 163 <div *ngIf="!articuloService.carrito.length" class="col h-100">
164 <p class="text-center py-5">No hay articulos en el carrito</p> 164 <p class="text-center py-5">No hay articulos en el carrito</p>
165 </div> 165 </div>
166 <!-- ARTICULOS --> 166 <!-- ARTICULOS -->
167 <div 167 <div
168 class="col-10 col-sm-4 col-lg-2 px-2 px-xl-4 align-self-center border-right border-primary" 168 class="col-10 col-sm-4 col-lg-2 px-2 px-xl-4 align-self-center border-right border-primary"
169 *ngFor="let articulo of articuloService.carrito; let i = index;"> 169 *ngFor="let articulo of articuloService.carrito; let i = index;">
170 <div class="swing-in-top-fwd"> 170 <div class="swing-in-top-fwd">
171 <img 171 <img
172 draggable="false" 172 draggable="false"
173 ondragstart="return false;" 173 ondragstart="return false;"
174 (contextmenu)="false" 174 (contextmenu)="false"
175 class="d-block img-fluid p-2 mx-auto rounded" 175 class="d-block img-fluid p-2 mx-auto rounded"
176 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}" 176 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"
177 onerror="this.src='assets/img/image-not-found.jpg'"> 177 onerror="this.src='assets/img/image-not-found.jpg'">
178 <p class="d-block mt-auto text-center text-primary text-truncate"> 178 <p class="d-block mt-auto text-center text-primary text-truncate">
179 <small>{{articulo.DetArt}}</small> 179 <small>{{articulo.DetArt}}</small>
180 </p> 180 </p>
181 </div> 181 </div>
182 </div> 182 </div>
183 </div> 183 </div>
184 </div> 184 </div>
185 <!-- BOTON SCROLL DERECHA --> 185 <!-- BOTON SCROLL DERECHA -->
186 <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center"> 186 <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center">
187 <img 187 <img
188 draggable="false" 188 draggable="false"
189 ondragstart="return false;" 189 ondragstart="return false;"
190 (contextmenu)="false" 190 (contextmenu)="false"
191 class="icon-30" 191 class="icon-30"
192 src="assets/img/ir-fondo-color.svg" 192 src="assets/img/ir-fondo-color.svg"
193 (mousedown)="scrollX(templateCarrito, 100)" 193 (mousedown)="scrollX(templateCarrito, 100)"
194 (mouseup)="mouseup()" 194 (mouseup)="mouseup()"
195 (mouseleave)="mouseup()"> 195 (mouseleave)="mouseup()">
196 </div> 196 </div>
197 </div> 197 </div>
198 </div> 198 </div>
199 <!-- VER CARRITO Y TOTAL--> 199 <!-- VER CARRITO Y TOTAL-->
200 <div 200 <div
201 class=" p-0 mt-2 ml-auto h-20" 201 class=" p-0 mt-2 ml-auto h-20"
202 *ngIf="articuloService.carrito.length" 202 *ngIf="articuloService.carrito.length"
203 [ngClass]="boxCarrito.classList.contains('col-8') ? 'col-4' : 'col-auto'" 203 [ngClass]="boxCarrito.classList.contains('col-8') ? 'col-4' : 'col-auto'"
204 id="bagsCarrito"> 204 id="bagsCarrito">
205 <div 205 <div
206 class="btn-effect col-auto align-self-center px-0 bg-white" 206 class="btn-effect col-auto align-self-center px-0 bg-white"
207 [routerLink]="['/carrito']"> 207 [routerLink]="['/carrito']">
208 <div class="row justify-content-between mx-0"> 208 <div class="row justify-content-between mx-0">
209 <div class="col-auto align-self-center text-primary">TOTAL</div> 209 <div class="col-auto align-self-center text-primary">TOTAL</div>
210 <div class="col-auto p-0 bg-primary d-none d-sm-block bg-total"> 210 <div class="col-auto p-0 bg-primary d-none d-sm-block bg-total">
211 <p class="text-center text-white mt-1 py-1">{{articuloService.subTotal | currency}}</p> 211 <p class="text-center text-white mt-1 py-1">{{articuloService.subTotal | currency}}</p>
212 </div> 212 </div>
213 <div class="col-auto align-self-center text-primary ml-2 bg-light" 213 <div class="col-auto align-self-center text-primary ml-2 bg-light"
214 [ngClass]="{'mt-4':boxCarrito.classList.contains('col-8')}" 214 [ngClass]="{'mt-4':boxCarrito.classList.contains('col-8')}"
215 id="ver-car">VER CARRITO</div> 215 id="ver-car">VER CARRITO</div>
216 <div class="col-auto p-0 bg-primary d-none d-sm-block" 216 <div class="col-auto p-0 bg-primary d-none d-sm-block"
217 [ngClass]="{'mt-4':boxCarrito.classList.contains('col-8')}" id="img-car"> 217 [ngClass]="{'mt-4':boxCarrito.classList.contains('col-8')}" id="img-car">
218 <img 218 <img
219 draggable="false" 219 draggable="false"
220 ondragstart="return false;" 220 ondragstart="return false;"
221 (contextmenu)="false" 221 (contextmenu)="false"
222 class="p-2 icon-40" 222 class="p-2 icon-40"
223 src="assets/img/carrito.svg"> 223 src="assets/img/carrito.svg">
224 </div> 224 </div>
225 </div> 225 </div>
226 </div> 226 </div>
227 </div> 227 </div>
228 228
229 </div> 229 </div>
230 </div> 230 </div>
231 231
232 </div> 232 </div>
233 233
src/app/shared/footer/footer.component.html
Diff comments   View file @ f420f4a
1 <div class="row w-90 mx-auto h-100 justify-content-between bg-white"> 1 <div class="row w-90 mx-auto h-100 justify-content-between bg-white">
2 <div class="col-auto align-self-center px-0 bg-white"> 2 <div class="col-auto align-self-center px-0 bg-white">
3 <div class="btn-effect row mx-0 bg-light" id="btn-media-pantalla"> 3 <div class="btn-effect row mx-0 bg-light" id="btn-media-pantalla">
4 <div class="col-auto align-self-center text-primary">ESTAMOS PARA AYUDARTE</div> 4 <div class="col-auto align-self-center text-primary">REDUCIR PANTALLA</div>
5 <div class="col-auto p-0 bg-primary d-none d-sm-block"> 5 <div class="col-auto p-0 bg-primary d-none d-sm-block">
6 <img 6 <img
7 draggable="false" 7 draggable="false"
8 ondragstart="return false;" 8 ondragstart="return false;"
9 (contextmenu)="false" 9 (contextmenu)="false"
10 class="p-2 icon-60" 10 class="p-2 icon-60"
11 src="assets/img/iconos-accesibilidad.svg"> 11 src="assets/img/iconos-accesibilidad.svg">
12 </div> 12 </div>
13 </div> 13 </div>
14 </div> 14 </div>
15 <div 15 <div
16 class="btn-effect col-auto align-self-center px-0 bg-white" 16 class="btn-effect col-auto align-self-center px-0 bg-white"
17 (click)="goBack()" [ngClass]="{'media-pantalla':activo}"> 17 (click)="goBack()" [ngClass]="{'media-pantalla':activo}">
18 <div class="row mx-0 bg-light"> 18 <div class="row mx-0 bg-light">
19 <div class="col-auto align-self-center text-primary">VOLVER</div> 19 <div class="col-auto align-self-center text-primary">VOLVER</div>
20 <div class="col-auto p-0 bg-primary d-none d-sm-block"> 20 <div class="col-auto p-0 bg-primary d-none d-sm-block">
21 <img 21 <img
22 draggable="false" 22 draggable="false"
23 ondragstart="return false;" 23 ondragstart="return false;"
24 (contextmenu)="false" 24 (contextmenu)="false"
25 class="p-2 icon-40" 25 class="p-2 icon-40"
26 src="assets/img/icono-volver.svg"> 26 src="assets/img/icono-volver.svg">
27 </div> 27 </div>
28 </div> 28 </div>
29 </div> 29 </div>
30 </div> 30 </div>
31 31