Luis Suarez / autoservicio-axion

Download as
Browse Code »

Commit 7c8d7edc82647521fc904895821197b3137f8577

Authored by Marcelo Puebla
2 parents df76d03326 097f9891f8
Exists in develop

Merge branch 'develop' into 'develop' 

Change

- Toda el area del card articulo es seleccionable

See merge request !40
Showing 2 changed files   Show diff stats
src/app/modules/seleccion-articulos/seleccion-articulos.component.html
Diff comments   View file @ 7c8d7ed
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-50 h-md-70"> 15 <div class="row w-100 mr-4 h-50 h-md-70">
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"> 22 <div class="col-auto btn-effect h-5">
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 (scroll)="scrollEvent($event)"> 37 (scroll)="scrollEvent($event)">
38 <div 38 <div
39 class="row mx-4 mb-2 h-25 h-md-32 h-lg-45 justify-content-center tab" 39 class="row mx-4 mb-2 h-25 h-md-32 h-lg-45 justify-content-center tab"
40 [ngClass]="{ 'active': allActive, 'border-bottom-effect': !allActive }" 40 [ngClass]="{ 'active': allActive, 'border-bottom-effect': !allActive }"
41 (click)="selectCategoria(-1, 0)"> 41 (click)="selectCategoria(-1, 0)">
42 <img 42 <img
43 draggable="false" 43 draggable="false"
44 ondragstart="return false;" 44 ondragstart="return false;"
45 (contextmenu)="false" 45 (contextmenu)="false"
46 class="col-12 h-50 align-self-end d-none d-sm-block rounded-circle" 46 class="col-12 h-50 align-self-end d-none d-sm-block rounded-circle"
47 src="assets/img/logo-spot.svg"> 47 src="assets/img/logo-spot.svg">
48 <small class="col-12 px-0 my-1 h-100 h-md-25 align-self-end text-center text-truncate">Todos</small> 48 <small class="col-12 px-0 my-1 h-100 h-md-25 align-self-end text-center text-truncate">Todos</small>
49 </div> 49 </div>
50 <div 50 <div
51 class="row mx-4 mb-2 h-25 h-md-32 h-lg-45 justify-content-center tab" 51 class="row mx-4 mb-2 h-25 h-md-32 h-lg-45 justify-content-center tab"
52 [ngClass]="{ 'active': categoria.selected, 'border-bottom-effect': !categoria.selected }" 52 [ngClass]="{ 'active': categoria.selected, 'border-bottom-effect': !categoria.selected }"
53 (click)="selectCategoria(i, categoria.id)" 53 (click)="selectCategoria(i, categoria.id)"
54 *ngFor="let categoria of categorias; let i = index;"> 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="{{urlImagenes}}{{categoria.path_imagen}}" 60 src="{{urlImagenes}}{{categoria.path_imagen}}"
61 onerror="this.src='assets/img/image-not-found.jpg'"> 61 onerror="this.src='assets/img/image-not-found.jpg'">
62 <small class="col-12 px-0 my-1 h-100 h-md-25 align-self-end text-center text-truncate">{{categoria.detalle}}</small> 62 <small class="col-12 px-0 my-1 h-100 h-md-25 align-self-end text-center text-truncate">{{categoria.detalle}}</small>
63 </div> 63 </div>
64 </div> 64 </div>
65 <div class="col-auto btn-effect h-5"> 65 <div class="col-auto btn-effect h-5">
66 <img 66 <img
67 draggable="false" 67 draggable="false"
68 ondragstart="return false;" 68 ondragstart="return false;"
69 (contextmenu)="false" 69 (contextmenu)="false"
70 class="h-100 d-block mx-auto rotate-90" 70 class="h-100 d-block mx-auto rotate-90"
71 src="assets/img/ir-color.svg" 71 src="assets/img/ir-color.svg"
72 (mousedown)="scrollY(templateCategorias, 100)" 72 (mousedown)="scrollY(templateCategorias, 100)"
73 (mouseup)="mouseup()" 73 (mouseup)="mouseup()"
74 (mouseleave)="mouseup()"> 74 (mouseleave)="mouseup()">
75 </div> 75 </div>
76 </div> 76 </div>
77 </div> 77 </div>
78 <!-- LISTA DE ARTICULOS --> 78 <!-- LISTA DE ARTICULOS -->
79 <div 79 <div
80 class="col-7 col-sm-9 col-xl-10 pb-3 h-100 align-self-center scroll-y-visible" 80 class="col-7 col-sm-9 col-xl-10 pb-3 h-100 align-self-center scroll-y-visible"
81 (scroll)="scrollEvent($event)"> 81 (scroll)="scrollEvent($event)">
82 <div class="row row-cols-1 row-cols-sm-3 row-cols-xl-6"> 82 <div class="row row-cols-1 row-cols-sm-3 row-cols-xl-6">
83 <!-- ARTICULO --> 83 <!-- ARTICULO -->
84 <div 84 <div
85 class="col px-2 my-1 my-md-3 h-auto" 85 class="col px-2 my-1 my-md-3 h-auto"
86 *ngFor="let articulo of auxArticulos | slice:0:showQuantity;"> 86 *ngFor="let articulo of auxArticulos | slice:0:showQuantity;">
87 <div class="swing-in-top-fwd card h-auto"> 87 <div
88 class="swing-in-top-fwd btn-effect card h-auto"
89 (click)="elegirArticulo(articulo)">
88 <img 90 <img
89 draggable="false" 91 draggable="false"
90 ondragstart="return false;" 92 ondragstart="return false;"
91 (contextmenu)="false" 93 (contextmenu)="false"
92 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}" 94 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"
93 onerror="this.src='assets/img/image-not-found.jpg'" 95 onerror="this.src='assets/img/image-not-found.jpg'"
94 class="card-img-top h-30 h-md-55 rounded-sm"> 96 class="card-img-top h-30 h-md-55 rounded-sm">
95 <div class="row mx-0 py-1 h-auto justify-content-center"> 97 <div class="row mx-0 py-1 h-auto justify-content-center">
96 <p 98 <p
97 [ngClass]="{'text-primary': articulo.PRO, 'text-secondary': !articulo.PRO}" 99 [ngClass]="{'text-primary': articulo.PRO, 'text-secondary': !articulo.PRO}"
98 class="col-12 px-1 h6 h-auto text-center min-h-60"> 100 class="col-12 px-1 h6 h-auto text-center min-h-60">
99 {{articulo.DetArt}} 101 {{articulo.DetArt}}
100 </p> 102 </p>
101 <p class="col-12 px-1 h-auto text-center line-height-sm min-h-50"> 103 <p class="col-12 px-1 h-auto text-center line-height-sm min-h-50">
102 <small>{{articulo.DET_LAR}}</small> 104 <small>{{articulo.DET_LAR}}</small>
103 </p> 105 </p>
104 <div class="col-12 px-1 align-self-end btn-effect h-auto"> 106 <div class="col-12 px-1 align-self-end h-auto">
105 <div 107 <div
106 [ngClass]="{'bg-primary': articulo.PRO, 'bg-secondary': !articulo.PRO}" 108 [ngClass]="{'bg-primary': articulo.PRO, 'bg-secondary': !articulo.PRO}"
107 class="row mx-0 justify-content-between badge-pill" 109 class="row mx-0 justify-content-between badge-pill">
108 (click)="elegirArticulo(articulo)">
109 <div class="col px-0 align-self-center text-white text-right"> 110 <div class="col px-0 align-self-center text-white text-right">
110 {{articulo.PreVen | currency}} 111 {{articulo.PreVen | currency}}
111 </div> 112 </div>
112 <div class="col-5 px-0"> 113 <div class="col-5 px-0">
113 <img 114 <img
114 draggable="false" 115 draggable="false"
115 ondragstart="return false;" 116 ondragstart="return false;"
116 (contextmenu)="false" 117 (contextmenu)="false"
117 class="d-block ml-auto py-1 icon-30" 118 class="d-block ml-auto py-1 icon-30"
118 src="assets/img/ir.svg"> 119 src="assets/img/ir.svg">
119 </div> 120 </div>
120 </div> 121 </div>
121 </div> 122 </div>
122 </div> 123 </div>
123 </div> 124 </div>
124 </div> 125 </div>
125 </div> 126 </div>
126 <!-- BOTON VER MAS --> 127 <!-- BOTON VER MAS -->
127 <div class="row mx-0"> 128 <div class="row mx-0">
128 <div 129 <div
129 *ngIf="showQuantity <= auxArticulos.slice(0, showQuantity).length" 130 *ngIf="showQuantity <= auxArticulos.slice(0, showQuantity).length"
130 class="col-12 px-0 mb-2"> 131 class="col-12 px-0 mb-2">
131 <button 132 <button
132 (click)="increaseShow()" 133 (click)="increaseShow()"
133 class="btn btn-block btn-outline-primary"> 134 class="btn btn-block btn-outline-primary">
134 Ver Más 135 Ver Más
135 </button> 136 </button>
136 </div> 137 </div>
137 </div> 138 </div>
138 </div> 139 </div>
139 </div> 140 </div>
140 </div> 141 </div>
141 </div> 142 </div>
142 <!-- FOOTER CARRITO DE COMPRAS --> 143 <!-- FOOTER CARRITO DE COMPRAS -->
143 <div class="row w-90 mx-auto h-auto justify-content-center"> 144 <div class="row w-90 mx-auto h-auto justify-content-center">
144 <div class="col-12 h-75 px-0 border border-primary rounded"> 145 <div class="col-12 h-75 px-0 border border-primary rounded">
145 <!-- CABECERA --> 146 <!-- CABECERA -->
146 <div class="row mx-0 h-15 border-bottom border-primary"> 147 <div class="row mx-0 h-15 border-bottom border-primary">
147 <p class="col align-self-center text-truncate"><small>ARTÍCULOS EN TÚ CARRITO DE COMPRAS</small></p> 148 <p class="col align-self-center text-truncate"><small>ARTÍCULOS EN TÚ CARRITO DE COMPRAS</small></p>
148 </div> 149 </div>
149 <!-- CUERPO --> 150 <!-- CUERPO -->
150 <div class="row h-85 mx-0 justify-content-around"> 151 <div class="row h-85 mx-0 justify-content-around">
151 <!-- BOTON SCROLL IZQUIERDA --> 152 <!-- BOTON SCROLL IZQUIERDA -->
152 <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center"> 153 <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center">
153 <img 154 <img
154 draggable="false" 155 draggable="false"
155 ondragstart="return false;" 156 ondragstart="return false;"
156 (contextmenu)="false" 157 (contextmenu)="false"
157 class="icon-30 rotate-180-neg" 158 class="icon-30 rotate-180-neg"
158 src="assets/img/ir-fondo-color.svg" 159 src="assets/img/ir-fondo-color.svg"
159 (mousedown)="scrollX(templateCarrito, -100)" 160 (mousedown)="scrollX(templateCarrito, -100)"
160 (mouseup)="mouseup()" 161 (mouseup)="mouseup()"
161 (mouseleave)="mouseup()"> 162 (mouseleave)="mouseup()">
162 </div> 163 </div>
163 <!-- CARRITO --> 164 <!-- CARRITO -->
164 <div class="col-6 col-sm-8 col-md-9 col-lg-10 h-100"> 165 <div class="col-6 col-sm-8 col-md-9 col-lg-10 h-100">
165 <div 166 <div
166 #templateCarrito 167 #templateCarrito
167 class="row flex-row flex-nowrap h-100 mx-0 my-2 scroll-x" 168 class="row flex-row flex-nowrap h-100 mx-0 my-2 scroll-x"
168 (scroll)="scrollEvent($event)"> 169 (scroll)="scrollEvent($event)">
169 <!-- MENSAJE DE ADVERTENCIA --> 170 <!-- MENSAJE DE ADVERTENCIA -->
170 <div *ngIf="!articuloService.carrito.length" class="col h-100"> 171 <div *ngIf="!articuloService.carrito.length" class="col h-100">
171 <p class="text-center py-5">No hay articulos en el carrito</p> 172 <p class="text-center py-5">No hay articulos en el carrito</p>
172 </div> 173 </div>
173 <!-- ARTICULOS --> 174 <!-- ARTICULOS -->
174 <div 175 <div
175 class="col-10 col-sm-4 col-lg-2 px-2 px-xl-4 align-self-center border-right border-primary" 176 class="col-10 col-sm-4 col-lg-2 px-2 px-xl-4 align-self-center border-right border-primary"
176 *ngFor="let articulo of articuloService.carrito; let i = index;"> 177 *ngFor="let articulo of articuloService.carrito; let i = index;">
177 <div class="swing-in-top-fwd"> 178 <div class="swing-in-top-fwd">
178 <img 179 <img
179 draggable="false" 180 draggable="false"
180 ondragstart="return false;" 181 ondragstart="return false;"
181 (contextmenu)="false" 182 (contextmenu)="false"
182 class="d-block img-fluid p-2 mx-auto rounded" 183 class="d-block img-fluid p-2 mx-auto rounded"
183 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}" 184 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"
184 onerror="this.src='assets/img/image-not-found.jpg'"> 185 onerror="this.src='assets/img/image-not-found.jpg'">
185 <p class="d-block mt-auto text-center text-primary text-truncate"> 186 <p class="d-block mt-auto text-center text-primary text-truncate">
186 <small>{{articulo.DetArt}}</small> 187 <small>{{articulo.DetArt}}</small>
187 </p> 188 </p>
188 </div> 189 </div>
189 </div> 190 </div>
190 </div> 191 </div>
191 </div> 192 </div>
192 <!-- BOTON SCROLL DERECHA --> 193 <!-- BOTON SCROLL DERECHA -->
193 <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center"> 194 <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center">
194 <img 195 <img
195 draggable="false" 196 draggable="false"
196 ondragstart="return false;" 197 ondragstart="return false;"
197 (contextmenu)="false" 198 (contextmenu)="false"
198 class="icon-30" 199 class="icon-30"
199 src="assets/img/ir-fondo-color.svg" 200 src="assets/img/ir-fondo-color.svg"
200 (mousedown)="scrollX(templateCarrito, 100)" 201 (mousedown)="scrollX(templateCarrito, 100)"
201 (mouseup)="mouseup()" 202 (mouseup)="mouseup()"
202 (mouseleave)="mouseup()"> 203 (mouseleave)="mouseup()">
203 </div> 204 </div>
204 </div> 205 </div>
205 </div> 206 </div>
206 <!-- TOTAL--> 207 <!-- TOTAL-->
207 <div 208 <div
208 class="col-auto mt-2 ml-auto h-20"> 209 class="col-auto mt-2 ml-auto h-20">
209 <div class="row mx-0"> 210 <div class="row mx-0">
210 <div class="col-auto align-self-center text-primary">TOTAL</div> 211 <div class="col-auto align-self-center text-primary">TOTAL</div>
211 <div class="col-auto bg-primary badge-pill"> 212 <div class="col-auto bg-primary badge-pill">
212 <p class="text-center text-white mt-1 py-1">{{articuloService.subTotal | currency}}</p> 213 <p class="text-center text-white mt-1 py-1">{{articuloService.subTotal | currency}}</p>
213 </div> 214 </div>
214 </div> 215 </div>
215 </div> 216 </div>
216 217
217 <!-- VER CARRITO --> 218 <!-- VER CARRITO -->
218 <div 219 <div
219 class="col-auto px-0 mt-2 h-20" 220 class="col-auto px-0 mt-2 h-20"
220 *ngIf="articuloService.carrito.length"> 221 *ngIf="articuloService.carrito.length">
221 <div 222 <div
222 class="btn-effect col-auto px-0 align-self-center bg-white" 223 class="btn-effect col-auto px-0 align-self-center bg-white"
223 [routerLink]="['/carrito']"> 224 [routerLink]="['/carrito']">
224 <div class="row mx-0 bg-light"> 225 <div class="row mx-0 bg-light">
225 <div class="col-auto align-self-center text-primary d-none d-sm-block">VER CARRITO</div> 226 <div class="col-auto align-self-center text-primary d-none d-sm-block">VER CARRITO</div>
226 <div class="col-auto p-0 bg-primary"> 227 <div class="col-auto p-0 bg-primary">
227 <img 228 <img
228 draggable="false" 229 draggable="false"
229 ondragstart="return false;" 230 ondragstart="return false;"
230 (contextmenu)="false" 231 (contextmenu)="false"
231 class="p-2 icon-40" 232 class="p-2 icon-40"
232 src="assets/img/carrito.svg"> 233 src="assets/img/carrito.svg">
233 </div> 234 </div>
234 </div> 235 </div>
235 </div> 236 </div>
236 </div> 237 </div>
237 238
238 </div> 239 </div>
239 </div> 240 </div>
240 241
241 </div> 242 </div>
1 @import "scss/styles-bootstrap.scss"; 1 @import "scss/styles-bootstrap.scss";
2 @import "scss/typography.scss"; 2 @import "scss/typography.scss";
3 @import "scss/height-width.scss"; 3 @import "scss/height-width.scss";
4 @import "scss/animations.scss"; 4 @import "scss/animations.scss";
5 @import "scss/icons.scss"; 5 @import "scss/icons.scss";
6 @import "scss/scroll.scss"; 6 @import "scss/scroll.scss";
7 @import "node_modules/bootstrap/scss/_variables.scss"; 7 @import "node_modules/bootstrap/scss/_variables.scss";
8 8
9 @font-face { 9 @font-face {
10 font-family: "Gotham"; 10 font-family: "Gotham";
11 font-style: normal; 11 font-style: normal;
12 font-weight: normal; 12 font-weight: normal;
13 src: url("assets/fonts/gotham-medium.woff") format("woff"); 13 src: url("assets/fonts/gotham-medium.woff") format("woff");
14 } 14 }
15 15
16 html, 16 html,
17 body { 17 body {
18 max-height: 100vh; 18 max-height: 100vh;
19 height: 100%; 19 height: 100%;
20 font-family: "Gotham"; 20 font-family: "Gotham";
21 overflow: hidden; 21 overflow: hidden;
22 user-select: none; 22 user-select: none;
23 } 23 }
24 24
25 .btn-effect { 25 .btn-effect {
26 transition: all 0.3s; 26 transition: all 0.3s !important;
27 &:hover { 27 &:hover {
28 cursor: pointer; 28 cursor: pointer !important;
29 opacity: 0.7; 29 opacity: 0.7 !important;
30 } 30 }
31 &:active { 31 &:active {
32 transform: scale(1.02); 32 transform: scale(1.02) !important;
33 } 33 }
34 } 34 }
35 35
36 .cursor-pointer { 36 .cursor-pointer {
37 cursor: pointer; 37 cursor: pointer;
38 } 38 }
39 39
40 p { 40 p {
41 margin: 0 !important; 41 margin: 0 !important;
42 } 42 }
43 43
44 .img-in-top { 44 .img-in-top {
45 position: absolute; 45 position: absolute;
46 top: -35px; 46 top: -35px;
47 left: 50%; 47 left: 50%;
48 height: 70px; 48 height: 70px;
49 -webkit-transform: translateX(-50%); 49 -webkit-transform: translateX(-50%);
50 transform: translateX(-50%); 50 transform: translateX(-50%);
51 } 51 }
52 52
53 .rotate-45 { 53 .rotate-45 {
54 transform: rotate(45deg); 54 transform: rotate(45deg);
55 } 55 }
56 56
57 .rotate-90 { 57 .rotate-90 {
58 transform: rotate(90deg); 58 transform: rotate(90deg);
59 } 59 }
60 60
61 .rotate-90-neg { 61 .rotate-90-neg {
62 transform: rotate(-90deg); 62 transform: rotate(-90deg);
63 } 63 }
64 64
65 .rotate-180-neg { 65 .rotate-180-neg {
66 transform: rotate(-180deg); 66 transform: rotate(-180deg);
67 } 67 }
68 68