Luis Suarez / autoservicio-axion

Download as
Browse Code »

Commit ed70cd18e767e47486b0f53f951ae484ec4215e7

Authored by Benjamin Rodriguez
1 parent 195c30de66
Exists in develop

arreglor MR

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