Luis Suarez / autoservicio-axion

Download as
Browse Code »

Commit a1aacd645bb5026fe22249e121d3ead6563a9d96

Authored by Benjamin Rodriguez
2 parents 2161684256 7c8d7edc82
Exists in develop

Merge branch 'develop' of git.focasoftware.com:angular/autoservicio-axion

Showing 7 changed files   Show diff stats
src/app/modules/carrito/carrito.component.html
Diff comments   View file @ a1aacd6
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="h-75"> 5 <div class="h-75">
6 <!-- CABECERA --> 6 <!-- CABECERA -->
7 <div class="row mx-3 h-auto border border-primary rounded-sm"> 7 <div class="row mx-3 h-auto border border-primary rounded-sm">
8 <div class="col-12 px-0 py-2 align-self-center"> 8 <div class="col-12 px-0 py-2 align-self-center">
9 <div class="px-3"> 9 <div class="px-3">
10 <p class="h6 text-truncate">ESTE ES TÚ CARRITO DE COMPRAS</p> 10 <p class="h6 text-truncate">ESTE ES TÚ CARRITO DE COMPRAS</p>
11 </div> 11 </div>
12 </div> 12 </div>
13 </div> 13 </div>
14 14
15 <!-- CARRITO --> 15 <!-- CARRITO -->
16 <div 16 <div
17 class="row mx-2 mt-4 h-80 justify-content-center align-content-start scroll-y-visible" 17 class="row mx-2 mt-4 h-80 h-lg-60 align-content-start scroll-y-visible"
18 (scroll)="scrollEvent($event)"> 18 (scroll)="scrollEvent($event)">
19 <!-- MENSAJE DE ADVERTENCIA --> 19 <!-- MENSAJE DE ADVERTENCIA -->
20 <div class="col-10 align-self-center alert alert-primary" *ngIf="!articuloService.carrito.length"> 20 <div class="col-10 align-self-center alert alert-primary" *ngIf="!articuloService.carrito.length">
21 <p class="h5 text-center">No hay artículos en el carrito</p> 21 <p class="h5 text-center">No hay artículos en el carrito</p>
22 </div> 22 </div>
23 <!-- ARTICULOS --> 23 <!-- ARTICULOS -->
24 <div 24 <div
25 class="col-12 col-xl-6 p-2 h-25 text-center text-truncate" 25 class="col-12 col-xl-6 p-2 h-50 h-md-25 h-xl-40 text-center text-truncate"
26 *ngFor="let articulo of articuloService.carrito; let i = index;" 26 *ngFor="let articulo of articuloService.carrito; let i = index;"
27 @EnterLeave> 27 @EnterLeave>
28 <!-- ARTICULO --> 28 <!-- ARTICULO -->
29 <div class="h-100 px-2 py-4 border border-primary rounded-sm"> 29 <div class="h-100 border border-primary rounded-sm">
30 <div class="row mx-0 h-100"> 30 <div class="row align-items-center mx-0 h-100">
31 <!-- NOMBRE E IMAGEN --> 31 <!-- NOMBRE E IMAGEN -->
32 <div class="col-3 h-100 border-right border-primary align-self-center"> 32 <div class="col-6 col-md-3 h-50 h-md-100 border-right border-primary">
33 <img 33 <img
34 draggable="false" 34 draggable="false"
35 ondragstart="return false;" 35 ondragstart="return false;"
36 (contextmenu)="false" 36 (contextmenu)="false"
37 class="d-block mx-auto h-55 rounded-sm shadow-sm" 37 class="d-none d-md-block mx-auto h-55 rounded-sm shadow-sm"
38 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}" 38 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"
39 onerror="this.src='assets/img/image-not-found.jpg'"> 39 onerror="this.src='assets/img/image-not-found.jpg'">
40 <div class="row mx-0 h-45"> 40 <div class="row mx-0 h-100 h-md-45">
41 <p class="col text-primary text-truncate align-self-end"> 41 <p class="col text-primary text-truncate align-self-center">
42 <small>{{articulo.DetArt}}</small> 42 <small>{{articulo.DetArt}}</small>
43 </p> 43 </p>
44 </div> 44 </div>
45 </div> 45 </div>
46 <!-- CANTIDAD --> 46 <!-- CANTIDAD -->
47 <div class="col-3 border-right border-primary"> 47 <div class="col-6 col-md-3 h-50 h-md-100 border-right border-primary">
48 <p><small>CANT</small></p> 48 <p class="h-40"><small>CANT</small></p>
49 <div class="row mt-2 mx-0"> 49 <div class="row mx-0 justify-content-between bg-primary badge-pill">
50 <div class="col-12 h-auto"> 50 <!-- BOTON MENOS -->
51 <div class="row mx-0 justify-content-between bg-primary badge-pill"> 51 <div class="col-auto px-0 my-auto">
52 <!-- BOTON MENOS --> 52 <img
53 <div class="col-auto px-0"> 53 draggable="false"
54 <img 54 ondragstart="return false;"
55 draggable="false" 55 (contextmenu)="false"
56 ondragstart="return false;" 56 class="d-block ml-auto py-2 icon-20 btn-effect"
57 (contextmenu)="false" 57 src="assets/img/menos-blanco.svg"
58 class="d-block ml-auto py-2 icon-20 btn-effect" 58 (click)="substractCant(articulo)">
59 src="assets/img/menos-blanco.svg" 59 </div>
60 (click)="substractCant(articulo)"> 60 <!-- CANTIDAD -->
61 </div> 61 <div class="col px-0 py-2 my-auto text-white">
62 <!-- CANTIDAD --> 62 <p><small>{{articulo.cantidad}}</small></p>
63 <div class="col px-0 align-self-center text-white"> 63 </div>
64 <p><small>{{articulo.cantidad}}</small></p> 64 <!-- BOTON MAS -->
65 </div> 65 <div class="col-auto px-0 my-auto">
66 <!-- BOTON MAS --> 66 <img
67 <div class="col-auto px-0"> 67 draggable="false"
68 <img 68 ondragstart="return false;"
69 draggable="false" 69 (contextmenu)="false"
70 ondragstart="return false;" 70 class="d-block ml-auto py-2 icon-20 btn-effect"
71 (contextmenu)="false" 71 src="assets/img/mas-blanco.svg"
72 class="d-block ml-auto py-2 icon-20 btn-effect" 72 (click)="addCant(articulo)">
73 src="assets/img/mas-blanco.svg"
74 (click)="addCant(articulo)">
75 </div>
76 </div>
77 </div> 73 </div>
78 </div> 74 </div>
79 </div> 75 </div>
80 <!-- OPCIONALES -->
81 <!-- <div class="col-3 border-right border-primary">
82 <p><small>OPCIONALES</small></p>
83 <div class="py-1 badge-pill bg-dark text-white"><p><small>{{'AZÚCAR'}}</small></p></div>
84 <div class="row mx-0 mt-2 justify-content-center">
85 <div class="col-auto pl-3 btn-effect bg-primary badge-pill text-white">
86 <span>
87 <small class="pr-2">CAMBIAR</small>
88 <img
89 draggable="false"
90 ondragstart="return false;"
91 (contextmenu)="false"
92 class="icon-20"
93 src="assets/img/ir.svg">
94 </span>
95 </div>
96 </div> -->
97 <!-- PRECIO --> 76 <!-- PRECIO -->
98 <div class="col-3 border-right border-primary"> 77 <div class="col-6 col-md-3 h-50 h-md-100 border-right border-primary">
99 <p><small>PRECIO</small></p> 78 <p class="h-40"><small>PRECIO</small></p>
100 <div class="py-1 mt-2 badge-pill bg-dark text-white"> 79 <div class="py-2 badge-pill bg-dark text-white">
101 <p><small>{{articulo.PreVen | currency}}</small></p> 80 <p><small>{{articulo.PreVen | currency}}</small></p>
102 </div> 81 </div>
103 </div> 82 </div>
104 <!-- ELIMINAR --> 83 <!-- ELIMINAR -->
105 <div class="col-3 align-self-center"> 84 <div class="col-6 col-md-3 align-self-center">
106 <div class="row mx-0 justify-content-center"> 85 <div class="row mx-0 justify-content-center">
107 <div 86 <div
108 class="col-auto px-3 py-1 btn-effect bg-primary badge-pill text-white" 87 class="col-auto px-3 py-1 btn-effect bg-primary badge-pill text-white"
109 (click)="deleteArticulo(i)"> 88 (click)="deleteArticulo(i)">
110 <span> 89 <span>
111 <small class="pr-2">ELIMINAR</small> 90 <small class="pr-2">ELIMINAR</small>
112 <img 91 <img
113 draggable="false" 92 draggable="false"
114 ondragstart="return false;" 93 ondragstart="return false;"
115 (contextmenu)="false" 94 (contextmenu)="false"
116 class="icon-20 rotate-45" 95 class="icon-20 rotate-45"
117 src="assets/img/mas-blanco.svg"> 96 src="assets/img/mas-blanco.svg">
118 </span> 97 </span>
119 </div> 98 </div>
120 </div> 99 </div>
121 </div> 100 </div>
122 </div> 101 </div>
123 </div> 102 </div>
124 </div> 103 </div>
125 </div> 104 </div>
126 <!-- TOTAL --> 105 <!-- TOTAL -->
127 <div class="row mx-3 mt-2 h-auto justify-content-end"> 106 <div class="row mx-3 mt-2 h-auto justify-content-end">
128 <div class="col-auto align-self-center text-primary"><small>TOTAL</small></div> 107 <div class="col-auto align-self-center text-primary"><small>TOTAL</small></div>
129 <div class="col-auto px-3 bg-primary badge-pill"> 108 <div class="col-auto px-3 bg-primary badge-pill">
130 <p class="text-center text-white py-1">{{articuloService.subTotal | currency}}</p> 109 <p class="text-center text-white py-1">{{articuloService.subTotal | currency}}</p>
131 </div> 110 </div>
132 </div> 111 </div>
133 <!-- CONTINUAR --> 112 <!-- CONTINUAR -->
134 <div 113 <div
135 *ngIf="articuloService.carrito.length" 114 *ngIf="articuloService.carrito.length"
136 class="row mx-3 mt-4 h-auto justify-content-end"> 115 class="row mx-3 mt-4 h-auto justify-content-end">
137 <div 116 <div
138 class="col-auto py-2 px-3 align-self-center btn-effect bg-primary badge-pill text-white" 117 class="col-auto py-2 px-3 align-self-center btn-effect bg-primary badge-pill text-white"
139 [routerLink]="['/forma-pago']"> 118 [routerLink]="['/forma-pago']">
140 <span> 119 <span>
141 <small class="pr-2">CONTINUAR</small> 120 <small class="pr-2">CONTINUAR</small>
142 <img 121 <img
143 draggable="false" 122 draggable="false"
144 ondragstart="return false;" 123 ondragstart="return false;"
145 (contextmenu)="false" 124 (contextmenu)="false"
146 class="icon-20" 125 class="icon-20"
147 src="assets/img/ir.svg"> 126 src="assets/img/ir.svg">
148 </span> 127 </span>
149 </div> 128 </div>
150 </div> 129 </div>
151 <!-- SEGUIR COMPRANDO -->
152 <!-- <div class="row mx-3 mt-2 h-auto justify-content-end">
153 <div
154 class="col-auto py-2 px-3 align-self-center btn-effect bg-primary badge-pill text-white"
155 (click)="goBack()">
156 <span>
157 <small class="pr-2">SEGUIR COMPRANDO</small>
158 <img
159 draggable="false"
160 ondragstart="return false;"
161 (contextmenu)="false"
162 class="icon-20"
163 src="assets/img/ir.svg">
164 </span>
165 </div>
166 </div> -->
167 </div> 130 </div>
168 131
169 </div> 132 </div>
170 133
src/app/modules/info-formas-pago/info-formas-pago.component.html
Diff comments   View file @ a1aacd6
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 class="col-7 col-lg-4 p-5 m-5 h-auto align-self-end border border-secondary rounded"> 14 <div class="col-7 col-xl-4 p-5 m-5 h-auto align-self-end border border-secondary rounded">
15 <img 15 <img
16 draggable="false" 16 draggable="false"
17 ondragstart="return false;" 17 ondragstart="return false;"
18 (contextmenu)="false" 18 (contextmenu)="false"
19 class="img-in-top px-4 bg-white" 19 class="img-in-top px-4 bg-white"
20 src="assets/img/icono-tarjetas.svg"> 20 src="assets/img/icono-tarjetas.svg">
21 <p class="h6 m-0">ESTA TERMINAL OPERA CON</p> 21 <p class="h6 m-0">ESTA TERMINAL OPERA CON</p>
22 <p class="h2 mb-3 text-secondary"> 22 <p class="h2 mb-3 text-secondary">
23 tarjetas y 23 tarjetas y
24 <img 24 <img
25 draggable="false" 25 draggable="false"
26 ondragstart="return false;" 26 ondragstart="return false;"
27 (contextmenu)="false" 27 (contextmenu)="false"
28 class="w-15" 28 class="icon-150"
29 src="assets/img/icono-mercado-pago.svg"> 29 src="assets/img/icono-mercado-pago.svg">
30 </p> 30 </p>
31 <div 31 <div
32 class="d-inline-block py-1 btn-effect bg-secondary badge-pill text-white" 32 class="d-inline-block py-1 btn-effect bg-secondary badge-pill text-white"
33 [routerLink]="['/opcion-pedido']"> 33 [routerLink]="['/opcion-pedido']">
34 CONTINUAR 34 CONTINUAR
35 <img 35 <img
36 draggable="false" 36 draggable="false"
37 ondragstart="return false;" 37 ondragstart="return false;"
38 (contextmenu)="false" 38 (contextmenu)="false"
39 class="icon-30" 39 class="icon-30"
40 src="assets/img/ir.svg"> 40 src="assets/img/ir.svg">
41 </div> 41 </div>
42 </div> 42 </div>
43 <div class="col-7 col-lg-4 p-5 m-5 h-auto align-self-center border border-primary rounded"> 43 <div class="col-7 col-xl-4 p-5 m-5 h-auto align-self-center border border-primary rounded">
44 <img 44 <img
45 draggable="false" 45 draggable="false"
46 ondragstart="return false;" 46 ondragstart="return false;"
47 (contextmenu)="false" 47 (contextmenu)="false"
48 class="img-in-top px-4 bg-white" 48 class="img-in-top px-4 bg-white"
49 src="assets/img/icono-efectivo.svg"> 49 src="assets/img/icono-efectivo.svg">
50 <p class="h6 m-0">SI PREFERIS PAGAR EN EFECTIVO</p> 50 <p class="h6 m-0">SI PREFERIS PAGAR EN EFECTIVO</p>
51 <p class="h2 m-0 text-primary">te esperamos en la caja</p> 51 <p class="h2 m-0 text-primary">te esperamos en la caja</p>
52 </div> 52 </div>
53 </div> 53 </div>
54 </div> 54 </div>
55 </div> 55 </div>
56 56
src/app/modules/seleccion-articulos/seleccion-articulos.component.html
Diff comments   View file @ a1aacd6
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-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-32 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-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-32 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-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-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 <!-- VER CARRITO Y TOTAL--> 207 <!-- TOTAL-->
207 <div 208 <div
208 class="col-auto p-0 mt-2 ml-auto h-20" 209 class="col-auto mt-2 ml-auto h-20">
210 <div class="row mx-0">
211 <div class="col-auto align-self-center text-primary">TOTAL</div>
212 <div class="col-auto bg-primary badge-pill">
213 <p class="text-center text-white mt-1 py-1">{{articuloService.subTotal | currency}}</p>
214 </div>
215 </div>
216 </div>
217
218 <!-- VER CARRITO -->
219 <div
220 class="col-auto px-0 mt-2 h-20"
209 *ngIf="articuloService.carrito.length"> 221 *ngIf="articuloService.carrito.length">
210 <div 222 <div
211 class="btn-effect col-auto align-self-center px-0 bg-white" 223 class="btn-effect col-auto px-0 align-self-center bg-white"
212 [routerLink]="['/carrito']"> 224 [routerLink]="['/carrito']">
213 <div class="row justify-content-between mx-0"> 225 <div class="row mx-0 bg-light">
214 <div class="col-auto align-self-center text-primary">TOTAL</div> 226 <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"> 227 <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 228 <img
221 draggable="false" 229 draggable="false"
222 ondragstart="return false;" 230 ondragstart="return false;"
223 (contextmenu)="false" 231 (contextmenu)="false"
224 class="p-2 icon-40" 232 class="p-2 icon-40"
225 src="assets/img/carrito.svg"> 233 src="assets/img/carrito.svg">
226 </div> 234 </div>
227 </div> 235 </div>
228 </div> 236 </div>
229 </div> 237 </div>
230 238
src/app/modules/seleccion-articulos/seleccion-articulos.component.scss
Diff comments   View file @ a1aacd6
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
src/app/modules/seleccion-articulos/seleccion-articulos.component.ts
Diff comments   View file @ a1aacd6
1 import { Component, OnInit, TemplateRef, OnDestroy, HostListener } from '@angular/core'; 1 import { Component, OnInit, TemplateRef, OnDestroy, HostListener } from '@angular/core';
2 import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal'; 2 import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';
3 import { ArticuloService } from 'src/app/services/articulo/articulo.service'; 3 import { ArticuloService } from 'src/app/services/articulo/articulo.service';
4 import { IArticulo } from 'src/app/interfaces/IArticulo'; 4 import { IArticulo } from 'src/app/interfaces/IArticulo';
5 import { APP_SETTINGS } from 'src/etc/AppSettings'; 5 import { APP_SETTINGS } from 'src/etc/AppSettings';
6 import { ICategoria } from 'src/app/interfaces/ICategoria'; 6 import { ICategoria } from 'src/app/interfaces/ICategoria';
7 import { CategoriaService } from 'src/app/services/categoria/categoria.service'; 7 import { CategoriaService } from 'src/app/services/categoria/categoria.service';
8 import { PromocionService } from 'src/app/services/promocion/promocion.service'; 8 import { PromocionService } from 'src/app/services/promocion/promocion.service';
9 import { PromocionComponent } from 'src/app/shared/promocion/promocion.component'; 9 import { PromocionComponent } from 'src/app/shared/promocion/promocion.component';
10 import { InactiveScreenService } from 'src/app/services/inactive-screen/inactive-screen.service'; 10 import { InactiveScreenService } from 'src/app/services/inactive-screen/inactive-screen.service';
11 11
12 @Component({ 12 @Component({
13 selector: 'app-seleccion-articulos', 13 selector: 'app-seleccion-articulos',
14 templateUrl: './seleccion-articulos.component.html', 14 templateUrl: './seleccion-articulos.component.html',
15 styleUrls: ['./seleccion-articulos.component.scss'] 15 styleUrls: ['./seleccion-articulos.component.scss']
16 }) 16 })
17 export class SeleccionArticulosComponent implements OnInit, OnDestroy { 17 export class SeleccionArticulosComponent implements OnInit, OnDestroy {
18 showSpinner = true; 18 showSpinner = true;
19 timeoutHandler: any; 19 timeoutHandler: any;
20 urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`; 20 urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`;
21 articulos: IArticulo[] = []; 21 articulos: IArticulo[] = [];
22 auxArticulos: IArticulo[] = []; 22 auxArticulos: IArticulo[] = [];
23 showQuantity = 100; 23 showQuantity = 100;
24 queMostrar = 'todos'; 24 queMostrar = 'todos';
25 categoriaActive = null; 25 categoriaActive = null;
26 categorias: ICategoria[] = []; 26 categorias: ICategoria[] = [];
27 searchTerm = ''; 27 searchTerm = '';
28 ordenandoByVendidos = true; 28 ordenandoByVendidos = true;
29 allActive = true; 29 allActive = true;
30 modalRef: BsModalRef; 30 modalRef: BsModalRef;
31 total = 0; 31 total = 0;
32 32
33 constructor( 33 constructor(
34 public articuloService: ArticuloService, 34 public articuloService: ArticuloService,
35 private categoriaService: CategoriaService, 35 private categoriaService: CategoriaService,
36 private modalService: BsModalService, 36 private modalService: BsModalService,
37 private inactiveScreen: InactiveScreenService, 37 private inactiveScreen: InactiveScreenService,
38 ) { } 38 ) { }
39 39
40 ngOnInit() { 40 ngOnInit() {
41 this.getCategorias(); 41 this.getCategorias();
42 } 42 }
43 43
44 ngOnDestroy() { 44 ngOnDestroy() {
45 if (this.modalRef) this.modalRef.hide(); 45 if (this.modalRef) this.modalRef.hide();
46 } 46 }
47 47
48 getCategorias() { 48 getCategorias() {
49 this.categoriaService.getAll() 49 this.categoriaService.getAll()
50 .subscribe((categorias: ICategoria[]) => { 50 .subscribe((categorias: ICategoria[]) => {
51 switch (this.queMostrar) { 51 switch (this.queMostrar) {
52 case 'todos': 52 case 'todos':
53 this.categorias = categorias; 53 this.categorias = categorias;
54 this.categoriaActive = 0; 54 this.categoriaActive = 0;
55 break; 55 break;
56 case 'promociones': 56 case 'promociones':
57 this.categorias = categorias; 57 this.categorias = categorias;
58 this.categoriaActive = 19; 58 this.categoriaActive = 19;
59 break; 59 break;
60 case 'ordenar': 60 case 'ordenar':
61 this.categorias = categorias.filter((categoria: ICategoria) => { 61 this.categorias = categorias.filter((categoria: ICategoria) => {
62 return categoria.ES_PEDIDO; 62 return categoria.ES_PEDIDO;
63 }); 63 });
64 this.categoriaActive = 4; 64 this.categoriaActive = 4;
65 break; 65 break;
66 default: 66 default:
67 this.categorias = categorias; 67 this.categorias = categorias;
68 this.categoriaActive = 0; 68 this.categoriaActive = 0;
69 break; 69 break;
70 } 70 }
71 !localStorage.getItem('articulos') ? 71 !localStorage.getItem('articulos') ?
72 this.getProductos() : 72 this.getProductos() :
73 this.setProductos(); 73 this.setProductos();
74 }); 74 });
75 } 75 }
76 76
77 getProductos() { 77 getProductos() {
78 this.articuloService.getAll() 78 this.articuloService.getAll()
79 .subscribe((result: IArticulo[]) => { 79 .subscribe((result: IArticulo[]) => {
80 this.articuloService.setArticulosSinImagen(result); 80 this.articuloService.setArticulosSinImagen(result);
81 if (this.queMostrar === 'ordenar') { 81 if (this.queMostrar === 'ordenar') {
82 this.categorias.forEach((categoria: ICategoria) => { 82 this.categorias.forEach((categoria: ICategoria) => {
83 const tempArticulos = result.filter((articulo: IArticulo) => { 83 const tempArticulos = result.filter((articulo: IArticulo) => {
84 return articulo.categoria_selfservice === categoria.id; 84 return articulo.categoria_selfservice === categoria.id;
85 }); 85 });
86 result = tempArticulos; 86 result = tempArticulos;
87 }); 87 });
88 } 88 }
89 localStorage.setItem('articulos', JSON.stringify(result)); 89 localStorage.setItem('articulos', JSON.stringify(result));
90 this.setProductos(); 90 this.setProductos();
91 }, (error) => { 91 }, (error) => {
92 this.showSpinner = false; 92 this.showSpinner = false;
93 console.error(error); 93 console.error(error);
94 }); 94 });
95 } 95 }
96 96
97 setProductos() { 97 setProductos() {
98 this.articulos = JSON.parse(localStorage.getItem('articulos')); 98 this.articulos = JSON.parse(localStorage.getItem('articulos'));
99 this.filterItems(); 99 this.filterItems();
100 } 100 }
101 101
102 filterItems() { 102 filterItems() {
103 if (this.categoriaActive === 0) { 103 if (this.categoriaActive === 0) {
104 this.auxArticulos = this.articulos; 104 this.auxArticulos = this.articulos;
105 return; 105 return;
106 } 106 }
107 this.auxArticulos = this.articulos.filter(x => { 107 this.auxArticulos = this.articulos.filter(x => {
108 return x.categoria_selfservice === this.categoriaActive; 108 return x.categoria_selfservice === this.categoriaActive;
109 }); 109 });
110 this.ordenar(); 110 this.ordenar();
111 } 111 }
112 112
113 ordenar() { 113 ordenar() {
114 if (this.ordenandoByVendidos) { 114 if (this.ordenandoByVendidos) {
115 this.auxArticulos.sort((a, b) => { 115 this.auxArticulos.sort((a, b) => {
116 return b.cantidadVendida - a.cantidadVendida; 116 return b.cantidadVendida - a.cantidadVendida;
117 }); 117 });
118 } 118 }
119 } 119 }
120 120
121 selectCategoria(index: number, idCategoria?: number) { 121 selectCategoria(index: number, idCategoria?: number) {
122 if (this.categoriaActive === idCategoria) return; 122 if (this.categoriaActive === idCategoria) return;
123 this.categoriaActive = idCategoria; 123 this.categoriaActive = idCategoria;
124 this.allActive = idCategoria === 0 ? true : false; 124 this.allActive = idCategoria === 0 ? true : false;
125 this.categorias.forEach((categoria, i) => { 125 this.categorias.forEach((categoria, i) => {
126 categoria.selected = index === i ? true : false; 126 categoria.selected = index === i ? true : false;
127 }); 127 });
128 this.filterItems(); 128 this.filterItems();
129 } 129 }
130 130
131 elegirArticulo(articulo: IArticulo) { 131 elegirArticulo(articulo: IArticulo) {
132 if (!articulo.FPP) { 132 if (!articulo.FPP) {
133 this.getByID(articulo.id); 133 this.getByID(articulo.id);
134 } else { 134 } else {
135 this.openModalPromos(articulo); 135 this.openModalPromos(articulo);
136 } 136 }
137 } 137 }
138 138
139 getByID(id: number) { 139 getByID(id: number) {
140 this.articuloService.getById(id) 140 this.articuloService.getById(id)
141 .subscribe((res: IArticulo) => { 141 .subscribe((res: IArticulo) => {
142 res.cantidad = 1; 142 res.cantidad = 1;
143 this.articuloService.setArticulo(res); 143 this.articuloService.setArticulo(res);
144 }, err => console.error(err)); 144 }, err => console.error(err));
145 } 145 }
146 146
147 openModalPromos(articulo: IArticulo) { 147 openModalPromos(articulo: IArticulo) {
148 this.modalRef = this.modalService.show(PromocionComponent, 148 this.modalRef = this.modalService.show(PromocionComponent,
149 { 149 {
150 initialState: { 150 initialState: {
151 idArticulo: articulo.id 151 idArticulo: articulo.id
152 }, 152 },
153 class: 'modal-promo modal-dialog-centered' 153 class: 'modal-promo modal-dialog-centered'
154 }); 154 });
155 } 155 }
156 156
157 increaseShow() { 157 increaseShow() {
158 this.showQuantity += 100; 158 this.showQuantity += 100;
159 } 159 }
160 160
161 @HostListener('scroll', ['$event']) 161 @HostListener('scroll', ['$event'])
162 scrollEvent(event: Event) { 162 scrollEvent(event: Event) {
163 clearTimeout(this.inactiveScreen.timerReposo); 163 clearTimeout(this.inactiveScreen.timerReposo);
164 this.inactiveScreen.startTimeOutInactividad(); 164 this.inactiveScreen.startTimeOutInactividad();
165 } 165 }
166 166
167 mouseup() { 167 mouseup() {
168 if (!this.timeoutHandler) return; 168 if (!this.timeoutHandler) return;
169 clearInterval(this.timeoutHandler); 169 clearInterval(this.timeoutHandler);
170 } 170 }
171 171
172 scrollY(el: HTMLElement, value) { 172 scrollY(el: HTMLElement, value) {
173 el.scroll({ behavior: 'smooth', top: value + el.scrollTop }); 173 el.scroll({ behavior: 'smooth', top: value + el.scrollTop });
174 this.timeoutHandler = setInterval(() => { 174 this.timeoutHandler = setInterval(() => {
175 el.scroll({ behavior: 'smooth', top: value + el.scrollTop }); 175 el.scroll({ behavior: 'smooth', top: value + el.scrollTop });
176 }, 500); 176 }, 500);
177 } 177 }
178 178
179 scrollX(el: HTMLElement, value) { 179 scrollX(el: HTMLElement, value) {
180 el.scroll({ behavior: 'smooth', left: value + el.scrollLeft }); 180 el.scroll({ behavior: 'smooth', left: value + el.scrollLeft });
181 this.timeoutHandler = setInterval(() => { 181 this.timeoutHandler = setInterval(() => {
182 el.scroll({ behavior: 'smooth', left: value + el.scrollLeft }); 182 el.scroll({ behavior: 'smooth', left: value + el.scrollLeft });
183 }, 500); 183 }, 500);
184 } 184 }
185 } 185 }
186 186
src/scss/height-width.scss
Diff comments   View file @ a1aacd6
1 @for $i from 1 through 100 { 1 @for $i from 1 through 100 {
2 $heightValue: 1% * $i; 2 $heightValue: 1% * $i;
3 .h-#{$i} { 3 .h-#{$i} {
4 height: $heightValue !important; 4 height: $heightValue;
5 }
6 @media (min-width: 576px) {
7 .h-sm-#{$i} {
8 height: $heightValue !important;
9 }
10 }
11 @media (min-width: 768px) {
12 .h-md-#{$i} {
13 height: $heightValue !important;
14 }
15 }
16 @media (min-width: 992px) {
17 .h-lg-#{$i} {
18 height: $heightValue !important;
19 }
20 }
21 @media (min-width: 1200px) {
22 .h-xl-#{$i} {
23 height: $heightValue !important;
24 }
5 } 25 }
6 } 26 }
7 27
8 @for $i from 1 through 100 { 28 @for $i from 1 through 100 {
9 $widthValue: 1% * $i; 29 $widthValue: 1% * $i;
10 .w-#{$i} { 30 .w-#{$i} {
11 width: $widthValue !important; 31 width: $widthValue !important;
12 } 32 }
13 } 33 }
14 34
15 .min-h-50 { 35 .min-h-50 {
16 min-height: 50px; 36 min-height: 50px;
17 } 37 }
18 38
19 .min-h-60 { 39 .min-h-60 {
20 min-height: 60px; 40 min-height: 60px;
21 } 41 }
42
43 .max-h-80 {
44 max-height: 80%;
45 }
22 46
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