Luis Suarez / autoservicio-axion

Download as
Browse Code »

Commit d5f68f760797a4e35615b17af679ef8c1cd91036

Authored by Marcelo Puebla
1 parent 0832dfca47
Exists in develop

arreglo en boton ver carrito y total de seleccion de articulos

Showing 2 changed files with 17 additions and 15 deletions   Show diff stats
src/app/modules/seleccion-articulos/seleccion-articulos.component.html
Diff comments   View file @ d5f68f7
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"> 15 <div class="row w-100 mr-4 h-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-32 justify-content-center tab" 39 class="row mx-4 mb-2 h-32 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-25 align-self-end text-center text-truncate">Todos</small> 48 <small class="col-12 px-0 my-1 h-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-32 justify-content-center tab" 51 class="row mx-4 mb-2 h-32 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-25 align-self-end text-center text-truncate">{{categoria.detalle}}</small> 62 <small class="col-12 px-0 my-1 h-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 class="swing-in-top-fwd card h-auto">
88 <img 88 <img
89 draggable="false" 89 draggable="false"
90 ondragstart="return false;" 90 ondragstart="return false;"
91 (contextmenu)="false" 91 (contextmenu)="false"
92 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}" 92 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"
93 onerror="this.src='assets/img/image-not-found.jpg'" 93 onerror="this.src='assets/img/image-not-found.jpg'"
94 class="card-img-top h-55 rounded-sm"> 94 class="card-img-top h-55 rounded-sm">
95 <div class="row mx-0 py-1 h-auto justify-content-center"> 95 <div class="row mx-0 py-1 h-auto justify-content-center">
96 <p 96 <p
97 [ngClass]="{'text-primary': articulo.PRO, 'text-secondary': !articulo.PRO}" 97 [ngClass]="{'text-primary': articulo.PRO, 'text-secondary': !articulo.PRO}"
98 class="col-12 px-1 h6 h-auto text-center min-h-60"> 98 class="col-12 px-1 h6 h-auto text-center min-h-60">
99 {{articulo.DetArt}} 99 {{articulo.DetArt}}
100 </p> 100 </p>
101 <p class="col-12 px-1 h-auto text-center line-height-sm min-h-50"> 101 <p class="col-12 px-1 h-auto text-center line-height-sm min-h-50">
102 <small>{{articulo.DET_LAR}}</small> 102 <small>{{articulo.DET_LAR}}</small>
103 </p> 103 </p>
104 <div class="col-12 px-1 align-self-end btn-effect h-auto"> 104 <div class="col-12 px-1 align-self-end btn-effect h-auto">
105 <div 105 <div
106 [ngClass]="{'bg-primary': articulo.PRO, 'bg-secondary': !articulo.PRO}" 106 [ngClass]="{'bg-primary': articulo.PRO, 'bg-secondary': !articulo.PRO}"
107 class="row mx-0 justify-content-between badge-pill" 107 class="row mx-0 justify-content-between badge-pill"
108 (click)="elegirArticulo(articulo)"> 108 (click)="elegirArticulo(articulo)">
109 <div class="col px-0 align-self-center text-white text-right"> 109 <div class="col px-0 align-self-center text-white text-right">
110 {{articulo.PreVen | currency}} 110 {{articulo.PreVen | currency}}
111 </div> 111 </div>
112 <div class="col-5 px-0"> 112 <div class="col-5 px-0">
113 <img 113 <img
114 draggable="false" 114 draggable="false"
115 ondragstart="return false;" 115 ondragstart="return false;"
116 (contextmenu)="false" 116 (contextmenu)="false"
117 class="d-block ml-auto py-1 icon-30" 117 class="d-block ml-auto py-1 icon-30"
118 src="assets/img/ir.svg"> 118 src="assets/img/ir.svg">
119 </div> 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 <!-- BOTON VER MAS --> 126 <!-- BOTON VER MAS -->
127 <div class="row mx-0"> 127 <div class="row mx-0">
128 <div 128 <div
129 *ngIf="showQuantity <= auxArticulos.slice(0, showQuantity).length" 129 *ngIf="showQuantity <= auxArticulos.slice(0, showQuantity).length"
130 class="col-12 px-0 mb-2"> 130 class="col-12 px-0 mb-2">
131 <button 131 <button
132 (click)="increaseShow()" 132 (click)="increaseShow()"
133 class="btn btn-block btn-outline-primary"> 133 class="btn btn-block btn-outline-primary">
134 Ver Más 134 Ver Más
135 </button> 135 </button>
136 </div> 136 </div>
137 </div> 137 </div>
138 </div> 138 </div>
139 </div> 139 </div>
140 </div> 140 </div>
141 </div> 141 </div>
142 <!-- FOOTER CARRITO DE COMPRAS --> 142 <!-- FOOTER CARRITO DE COMPRAS -->
143 <div class="row w-90 mx-auto h-auto justify-content-center"> 143 <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"> 144 <div class="col-12 h-75 px-0 border border-primary rounded">
145 <!-- CABECERA --> 145 <!-- CABECERA -->
146 <div class="row mx-0 h-15 border-bottom border-primary"> 146 <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> 147 <p class="col align-self-center text-truncate"><small>ARTÍCULOS EN TÚ CARRITO DE COMPRAS</small></p>
148 </div> 148 </div>
149 <!-- CUERPO --> 149 <!-- CUERPO -->
150 <div class="row h-85 mx-0 justify-content-around"> 150 <div class="row h-85 mx-0 justify-content-around">
151 <!-- BOTON SCROLL IZQUIERDA --> 151 <!-- BOTON SCROLL IZQUIERDA -->
152 <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center"> 152 <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center">
153 <img 153 <img
154 draggable="false" 154 draggable="false"
155 ondragstart="return false;" 155 ondragstart="return false;"
156 (contextmenu)="false" 156 (contextmenu)="false"
157 class="icon-30 rotate-180-neg" 157 class="icon-30 rotate-180-neg"
158 src="assets/img/ir-fondo-color.svg" 158 src="assets/img/ir-fondo-color.svg"
159 (mousedown)="scrollX(templateCarrito, -100)" 159 (mousedown)="scrollX(templateCarrito, -100)"
160 (mouseup)="mouseup()" 160 (mouseup)="mouseup()"
161 (mouseleave)="mouseup()"> 161 (mouseleave)="mouseup()">
162 </div> 162 </div>
163 <!-- CARRITO --> 163 <!-- CARRITO -->
164 <div class="col-6 col-sm-8 col-md-9 col-lg-10 h-100"> 164 <div class="col-6 col-sm-8 col-md-9 col-lg-10 h-100">
165 <div 165 <div
166 #templateCarrito 166 #templateCarrito
167 class="row flex-row flex-nowrap h-100 mx-0 my-2 scroll-x" 167 class="row flex-row flex-nowrap h-100 mx-0 my-2 scroll-x"
168 (scroll)="scrollEvent($event)"> 168 (scroll)="scrollEvent($event)">
169 <!-- MENSAJE DE ADVERTENCIA --> 169 <!-- MENSAJE DE ADVERTENCIA -->
170 <div *ngIf="!articuloService.carrito.length" class="col h-100"> 170 <div *ngIf="!articuloService.carrito.length" class="col h-100">
171 <p class="text-center py-5">No hay articulos en el carrito</p> 171 <p class="text-center py-5">No hay articulos en el carrito</p>
172 </div> 172 </div>
173 <!-- ARTICULOS --> 173 <!-- ARTICULOS -->
174 <div 174 <div
175 class="col-10 col-sm-4 col-lg-2 px-2 px-xl-4 align-self-center border-right border-primary" 175 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;"> 176 *ngFor="let articulo of articuloService.carrito; let i = index;">
177 <div class="swing-in-top-fwd"> 177 <div class="swing-in-top-fwd">
178 <img 178 <img
179 draggable="false" 179 draggable="false"
180 ondragstart="return false;" 180 ondragstart="return false;"
181 (contextmenu)="false" 181 (contextmenu)="false"
182 class="d-block img-fluid p-2 mx-auto rounded" 182 class="d-block img-fluid p-2 mx-auto rounded"
183 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}" 183 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"
184 onerror="this.src='assets/img/image-not-found.jpg'"> 184 onerror="this.src='assets/img/image-not-found.jpg'">
185 <p class="d-block mt-auto text-center text-primary text-truncate"> 185 <p class="d-block mt-auto text-center text-primary text-truncate">
186 <small>{{articulo.DetArt}}</small> 186 <small>{{articulo.DetArt}}</small>
187 </p> 187 </p>
188 </div> 188 </div>
189 </div> 189 </div>
190 </div> 190 </div>
191 </div> 191 </div>
192 <!-- BOTON SCROLL DERECHA --> 192 <!-- BOTON SCROLL DERECHA -->
193 <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center"> 193 <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center">
194 <img 194 <img
195 draggable="false" 195 draggable="false"
196 ondragstart="return false;" 196 ondragstart="return false;"
197 (contextmenu)="false" 197 (contextmenu)="false"
198 class="icon-30" 198 class="icon-30"
199 src="assets/img/ir-fondo-color.svg" 199 src="assets/img/ir-fondo-color.svg"
200 (mousedown)="scrollX(templateCarrito, 100)" 200 (mousedown)="scrollX(templateCarrito, 100)"
201 (mouseup)="mouseup()" 201 (mouseup)="mouseup()"
202 (mouseleave)="mouseup()"> 202 (mouseleave)="mouseup()">
203 </div> 203 </div>
204 </div> 204 </div>
205 </div> 205 </div>
206 <!-- VER CARRITO Y TOTAL--> 206 <!-- TOTAL-->
207 <div 207 <div
208 class="col-auto p-0 mt-2 ml-auto h-20" 208 class="col-auto mt-2 ml-auto h-20">
209 <div class="row mx-0">
210 <div class="col-auto align-self-center text-primary">TOTAL</div>
211 <div class="col-auto bg-primary badge-pill">
212 <p class="text-center text-white mt-1 py-1">{{articuloService.subTotal | currency}}</p>
213 </div>
214 </div>
215 </div>
216
217 <!-- VER CARRITO -->
218 <div
219 class="col-auto mt-2 h-20"
209 *ngIf="articuloService.carrito.length"> 220 *ngIf="articuloService.carrito.length">
210 <div 221 <div
211 class="btn-effect col-auto align-self-center px-0 bg-white" 222 class="btn-effect col-auto px-0 align-self-center bg-white"
212 [routerLink]="['/carrito']"> 223 [routerLink]="['/carrito']">
213 <div class="row justify-content-between mx-0"> 224 <div class="row mx-0 bg-light">
214 <div class="col-auto align-self-center text-primary">TOTAL</div> 225 <div class="col-auto align-self-center text-primary d-none d-sm-block">VER CARRITO</div>
215 <div class="col-auto p-0 bg-primary d-none d-sm-block bg-total"> 226 <div class="col-auto p-0 bg-primary">
216 <p class="text-center text-white mt-1 py-1">{{articuloService.subTotal | currency}}</p>
217 </div>
218 <div class="col-auto align-self-center text-primary ml-2 bg-light">VER CARRITO</div>
219 <div class="col-auto p-0 bg-primary d-none d-sm-block">
220 <img 227 <img
221 draggable="false" 228 draggable="false"
222 ondragstart="return false;" 229 ondragstart="return false;"
223 (contextmenu)="false" 230 (contextmenu)="false"
224 class="p-2 icon-40" 231 class="p-2 icon-40"
225 src="assets/img/carrito.svg"> 232 src="assets/img/carrito.svg">
226 </div> 233 </div>
227 </div> 234 </div>
228 </div> 235 </div>
229 </div> 236 </div>
230 237
231 </div> 238 </div>
src/app/modules/seleccion-articulos/seleccion-articulos.component.scss
Diff comments   View file @ d5f68f7
1 $primary: #aa006b; 1 $primary: #aa006b;
2 2
3 .box-categorias { 3 .box-categorias {
4 height: calc(100% - 100px) !important; 4 height: calc(100% - 100px) !important;
5 } 5 }
6 6
7 .active { 7 .active {
8 background-color: white; 8 background-color: white;
9 border-bottom: 3px solid $primary !important; 9 border-bottom: 3px solid $primary !important;
10 } 10 }
11 11
12 .border-bottom-effect { 12 .border-bottom-effect {
13 border: none; 13 border: none;
14 position: relative; 14 position: relative;
15 &:hover { 15 &:hover {
16 border: none; 16 border: none;
17 } 17 }
18 &::after { 18 &::after {
19 content: ""; 19 content: "";
20 position: absolute; 20 position: absolute;
21 width: 0px; 21 width: 0px;
22 height: 3px; 22 height: 3px;
23 left: 50%; 23 left: 50%;
24 bottom: 0; 24 bottom: 0;
25 background-color: $primary; 25 background-color: $primary;
26 transition: all ease-in-out 0.2s; 26 transition: all ease-in-out 0.2s;
27 } 27 }
28 &:hover::after { 28 &:hover::after {
29 width: 100%; 29 width: 100%;
30 left: 0; 30 left: 0;
31 } 31 }
32 } 32 }
33 33
34 .card { 34 .card {
35 border: none; 35 border: none;
36 } 36 }
37 37
38 .line-height-sm { 38 .line-height-sm {
39 line-height: 1.2; 39 line-height: 1.2;
40 } 40 }
41
42 .bg-total {
43 width: 110px;
44 border-radius: 1.5rem;
45 }
46 41