Marcelo Puebla / autoservicio-axion

Download as
Browse Code »

Commit 1e1ee7e3a8f409a03eb1327d11465d258d5b3b73

Authored by Marcelo Puebla
1 parent e18efd4d6a
Exists in develop

Agregado banners publicitarios y arreglo para cuando no se encuentre imagenes de articulos

Showing 7 changed files with 52 additions and 8 deletions   Show diff stats
src/app/modules/carrito/carrito.component.html
Diff comments   View file @ 1e1ee7e
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-85"> 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 class="row mx-2 mt-4 h-80 justify-content-center align-content-start scroll-y-visible"> 16 <div class="row mx-2 mt-4 h-80 justify-content-center align-content-start scroll-y-visible">
17 <!-- MENSAJE DE ADVERTENCIA --> 17 <!-- MENSAJE DE ADVERTENCIA -->
18 <div class="col-10 align-self-center alert alert-primary" *ngIf="!articuloService.carrito.length"> 18 <div class="col-10 align-self-center alert alert-primary" *ngIf="!articuloService.carrito.length">
19 <p class="h5 text-center">No hay artículos en el carrito</p> 19 <p class="h5 text-center">No hay artículos en el carrito</p>
20 </div> 20 </div>
21 <!-- ARTICULOS --> 21 <!-- ARTICULOS -->
22 <div 22 <div
23 class="col-12 col-xl-6 p-2 h-25 text-center text-truncate" 23 class="col-12 col-xl-6 p-2 h-25 text-center text-truncate"
24 *ngFor="let articulo of articuloService.carrito; let i = index;" 24 *ngFor="let articulo of articuloService.carrito; let i = index;"
25 @EnterLeave> 25 @EnterLeave>
26 <!-- ARTICULO --> 26 <!-- ARTICULO -->
27 <div class="h-100 px-2 py-4 border border-primary rounded-sm"> 27 <div class="h-100 px-2 py-4 border border-primary rounded-sm">
28 <div class="row mx-0 h-100"> 28 <div class="row mx-0 h-100">
29 <!-- NOMBRE E IMAGEN --> 29 <!-- NOMBRE E IMAGEN -->
30 <div class="col-3 h-100 border-right border-primary align-self-center"> 30 <div class="col-3 h-100 border-right border-primary align-self-center">
31 <img 31 <img
32 draggable="false" 32 draggable="false"
33 ondragstart="return false;" 33 ondragstart="return false;"
34 (contextmenu)="false" 34 (contextmenu)="false"
35 class="d-block mx-auto h-55 rounded-sm shadow-sm" 35 class="d-block mx-auto h-55 rounded-sm shadow-sm"
36 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"> 36 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"
37 onerror="this.src='assets/img/image-not-found.jpg'">
37 <div class="row mx-0 h-45"> 38 <div class="row mx-0 h-45">
38 <p class="col text-primary text-truncate align-self-end"> 39 <p class="col text-primary text-truncate align-self-end">
39 <small>{{articulo.DetArt}}</small> 40 <small>{{articulo.DetArt}}</small>
40 </p> 41 </p>
41 </div> 42 </div>
42 </div> 43 </div>
43 <!-- CANTIDAD --> 44 <!-- CANTIDAD -->
44 <div class="col-3 border-right border-primary"> 45 <div class="col-3 border-right border-primary">
45 <p><small>CANT</small></p> 46 <p><small>CANT</small></p>
46 <div class="row mt-2 mx-0"> 47 <div class="row mt-2 mx-0">
47 <div class="col-12 h-auto"> 48 <div class="col-12 h-auto">
48 <div class="row mx-0 justify-content-between bg-primary badge-pill"> 49 <div class="row mx-0 justify-content-between bg-primary badge-pill">
49 <!-- BOTON MENOS --> 50 <!-- BOTON MENOS -->
50 <div class="col-auto px-0"> 51 <div class="col-auto px-0">
51 <img 52 <img
52 draggable="false" 53 draggable="false"
53 ondragstart="return false;" 54 ondragstart="return false;"
54 (contextmenu)="false" 55 (contextmenu)="false"
55 class="d-block ml-auto py-2 icon-20 btn-effect" 56 class="d-block ml-auto py-2 icon-20 btn-effect"
56 src="assets/img/menos-blanco.svg" 57 src="assets/img/menos-blanco.svg"
57 (click)="substractCant(articulo)"> 58 (click)="substractCant(articulo)">
58 </div> 59 </div>
59 <!-- CANTIDAD --> 60 <!-- CANTIDAD -->
60 <div class="col px-0 align-self-center text-white"> 61 <div class="col px-0 align-self-center text-white">
61 <p><small>{{articulo.cantidad}}</small></p> 62 <p><small>{{articulo.cantidad}}</small></p>
62 </div> 63 </div>
63 <!-- BOTON MAS --> 64 <!-- BOTON MAS -->
64 <div class="col-auto px-0"> 65 <div class="col-auto px-0">
65 <img 66 <img
66 draggable="false" 67 draggable="false"
67 ondragstart="return false;" 68 ondragstart="return false;"
68 (contextmenu)="false" 69 (contextmenu)="false"
69 class="d-block ml-auto py-2 icon-20 btn-effect" 70 class="d-block ml-auto py-2 icon-20 btn-effect"
70 src="assets/img/mas-blanco.svg" 71 src="assets/img/mas-blanco.svg"
71 (click)="addCant(articulo)"> 72 (click)="addCant(articulo)">
72 </div> 73 </div>
73 </div> 74 </div>
74 </div> 75 </div>
75 </div> 76 </div>
76 </div> 77 </div>
77 <!-- OPCIONALES --> 78 <!-- OPCIONALES -->
78 <div class="col-3 border-right border-primary"> 79 <div class="col-3 border-right border-primary">
79 <p><small>OPCIONALES</small></p> 80 <p><small>OPCIONALES</small></p>
80 <!-- <div class="py-1 badge-pill bg-dark text-white"><p><small>{{'AZÚCAR'}}</small></p></div> 81 <!-- <div class="py-1 badge-pill bg-dark text-white"><p><small>{{'AZÚCAR'}}</small></p></div>
81 <div class="row mx-0 mt-2 justify-content-center"> 82 <div class="row mx-0 mt-2 justify-content-center">
82 <div class="col-auto pl-3 btn-effect bg-primary badge-pill text-white"> 83 <div class="col-auto pl-3 btn-effect bg-primary badge-pill text-white">
83 <span> 84 <span>
84 <small class="pr-2">CAMBIAR</small> 85 <small class="pr-2">CAMBIAR</small>
85 <img 86 <img
86 draggable="false" 87 draggable="false"
87 ondragstart="return false;" 88 ondragstart="return false;"
88 (contextmenu)="false" 89 (contextmenu)="false"
89 class="icon-20" 90 class="icon-20"
90 src="assets/img/ir.svg"> 91 src="assets/img/ir.svg">
91 </span> 92 </span>
92 </div> 93 </div>
93 </div> --> 94 </div> -->
94 </div> 95 </div>
95 <!-- ELIMINAR --> 96 <!-- ELIMINAR -->
96 <div class="col-3 align-self-center"> 97 <div class="col-3 align-self-center">
97 <div class="row mx-0 justify-content-center"> 98 <div class="row mx-0 justify-content-center">
98 <div 99 <div
99 class="col-auto px-3 py-1 btn-effect bg-primary badge-pill text-white" 100 class="col-auto px-3 py-1 btn-effect bg-primary badge-pill text-white"
100 (click)="deleteArticulo(i)"> 101 (click)="deleteArticulo(i)">
101 <span> 102 <span>
102 <small class="pr-2">ELIMINAR</small> 103 <small class="pr-2">ELIMINAR</small>
103 <img 104 <img
104 draggable="false" 105 draggable="false"
105 ondragstart="return false;" 106 ondragstart="return false;"
106 (contextmenu)="false" 107 (contextmenu)="false"
107 class="icon-20 rotate-45" 108 class="icon-20 rotate-45"
108 src="assets/img/mas-blanco.svg"> 109 src="assets/img/mas-blanco.svg">
109 </span> 110 </span>
110 </div> 111 </div>
111 </div> 112 </div>
112 </div> 113 </div>
113 </div> 114 </div>
114 </div> 115 </div>
115 </div> 116 </div>
116 </div> 117 </div>
117 <!-- CONTINUAR --> 118 <!-- CONTINUAR -->
118 <div 119 <div
119 *ngIf="articuloService.carrito.length" 120 *ngIf="articuloService.carrito.length"
120 class="row mx-3 mt-4 h-auto justify-content-end"> 121 class="row mx-3 mt-4 h-auto justify-content-end">
121 <div 122 <div
122 class="col-auto py-2 px-3 align-self-center btn-effect bg-primary badge-pill text-white" 123 class="col-auto py-2 px-3 align-self-center btn-effect bg-primary badge-pill text-white"
123 [routerLink]="['/forma-pago']"> 124 [routerLink]="['/forma-pago']">
124 <span> 125 <span>
125 <small class="pr-2">CONTINUAR</small> 126 <small class="pr-2">CONTINUAR</small>
126 <img 127 <img
127 draggable="false" 128 draggable="false"
128 ondragstart="return false;" 129 ondragstart="return false;"
129 (contextmenu)="false" 130 (contextmenu)="false"
130 class="icon-20" 131 class="icon-20"
131 src="assets/img/ir.svg"> 132 src="assets/img/ir.svg">
132 </span> 133 </span>
133 </div> 134 </div>
134 </div> 135 </div>
135 <!-- SEGUIR COMPRANDO --> 136 <!-- SEGUIR COMPRANDO -->
136 <div class="row mx-3 mt-2 h-auto justify-content-end"> 137 <div class="row mx-3 mt-2 h-auto justify-content-end">
137 <div 138 <div
138 class="col-auto py-2 px-3 align-self-center btn-effect bg-primary badge-pill text-white" 139 class="col-auto py-2 px-3 align-self-center btn-effect bg-primary badge-pill text-white"
139 (click)="goBack()"> 140 (click)="goBack()">
140 <span> 141 <span>
141 <small class="pr-2">SEGUIR COMPRANDO</small> 142 <small class="pr-2">SEGUIR COMPRANDO</small>
142 <img 143 <img
143 draggable="false" 144 draggable="false"
144 ondragstart="return false;" 145 ondragstart="return false;"
145 (contextmenu)="false" 146 (contextmenu)="false"
146 class="icon-20" 147 class="icon-20"
147 src="assets/img/ir.svg"> 148 src="assets/img/ir.svg">
148 </span> 149 </span>
149 </div> 150 </div>
150 </div> 151 </div>
151 </div> 152 </div>
152 153
153 </div> 154 </div>
154 155
src/app/modules/seleccion-articulos/seleccion-articulos.component.html
Diff comments   View file @ 1e1ee7e
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-90 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/ir-color.svg"> 46 src="assets/img/ir-color.svg">
47 <small class="col-12 px-0 my-1 h-25 align-self-end text-center text-truncate">Todos</small> 47 <small class="col-12 px-0 my-1 h-25 align-self-end text-center text-truncate">Todos</small>
48 </div> 48 </div>
49 <div 49 <div
50 class="row mx-4 mb-2 h-32 justify-content-center tab" 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="assets/img/ir-color.svg"> 59 src="assets/img/ir-color.svg">
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 <img 84 <img
85 draggable="false" 85 draggable="false"
86 ondragstart="return false;" 86 ondragstart="return false;"
87 (contextmenu)="false" 87 (contextmenu)="false"
88 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}" 88 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"
89 onerror="this.src='assets/img/image-not-found.jpg'"
89 class="card-img-top h-55 rounded-sm"> 90 class="card-img-top h-55 rounded-sm">
90 <div class="row mx-0 py-1 h-auto justify-content-center"> 91 <div class="row mx-0 py-1 h-auto justify-content-center">
91 <p class="col-12 px-1 h6 h-auto text-primary text-center">{{articulo.DetArt}}</p> 92 <p class="col-12 px-1 h6 h-auto text-primary text-center">{{articulo.DetArt}}</p>
92 <p class="col-12 px-1 h-auto text-center line-height-sm"> 93 <p class="col-12 px-1 h-auto text-center line-height-sm">
93 <small>{{articulo.DET_LAR}}</small> 94 <small>{{articulo.DET_LAR}}</small>
94 </p> 95 </p>
95 <div class="col-12 px-1 align-self-end btn-effect h-auto"> 96 <div class="col-12 px-1 align-self-end btn-effect h-auto">
96 <div 97 <div
97 [ngClass]="{'bg-secondary': articulo.promo}" 98 [ngClass]="{'bg-secondary': articulo.promo}"
98 class="row mx-0 justify-content-between bg-primary badge-pill" 99 class="row mx-0 justify-content-between bg-primary badge-pill"
99 (click)="elegirArticulo(articulo)"> 100 (click)="elegirArticulo(articulo)">
100 <div class="col px-0 align-self-center text-white text-right"> 101 <div class="col px-0 align-self-center text-white text-right">
101 {{articulo.PreVen | currency}} 102 {{articulo.PreVen | currency}}
102 </div> 103 </div>
103 <div class="col-5 px-0"> 104 <div class="col-5 px-0">
104 <img 105 <img
105 draggable="false" 106 draggable="false"
106 ondragstart="return false;" 107 ondragstart="return false;"
107 (contextmenu)="false" 108 (contextmenu)="false"
108 class="d-block ml-auto py-1 icon-30" 109 class="d-block ml-auto py-1 icon-30"
109 src="assets/img/ir.svg"> 110 src="assets/img/ir.svg">
110 </div> 111 </div>
111 </div> 112 </div>
112 </div> 113 </div>
113 </div> 114 </div>
114 </div> 115 </div>
115 </div> 116 </div>
116 </div> 117 </div>
117 <!-- BOTON VER MAS --> 118 <!-- BOTON VER MAS -->
118 <div class="row mx-0"> 119 <div class="row mx-0">
119 <div 120 <div
120 *ngIf="showQuantity <= auxArticulos.slice(0, showQuantity).length" 121 *ngIf="showQuantity <= auxArticulos.slice(0, showQuantity).length"
121 class="col-12 px-0 mb-2"> 122 class="col-12 px-0 mb-2">
122 <button 123 <button
123 (click)="increaseShow()" 124 (click)="increaseShow()"
124 class="btn btn-block btn-outline-primary"> 125 class="btn btn-block btn-outline-primary">
125 Ver Más 126 Ver Más
126 </button> 127 </button>
127 </div> 128 </div>
128 </div> 129 </div>
129 </div> 130 </div>
130 </div> 131 </div>
131 </div> 132 </div>
132 </div> 133 </div>
133 <!-- FOOTER CARRITO DE COMPRAS --> 134 <!-- FOOTER CARRITO DE COMPRAS -->
134 <div class="row w-90 mx-auto h-auto justify-content-center"> 135 <div class="row w-90 mx-auto h-auto justify-content-center">
135 <div class="col-12 h-75 px-0 border border-primary rounded"> 136 <div class="col-12 h-75 px-0 border border-primary rounded">
136 <!-- CABECERA --> 137 <!-- CABECERA -->
137 <div class="row mx-0 h-15 border-bottom border-primary"> 138 <div class="row mx-0 h-15 border-bottom border-primary">
138 <p class="col align-self-center text-truncate"><small>ARTÍCULOS EN TÚ CARRITO DE COMPRAS</small></p> 139 <p class="col align-self-center text-truncate"><small>ARTÍCULOS EN TÚ CARRITO DE COMPRAS</small></p>
139 </div> 140 </div>
140 <!-- CUERPO --> 141 <!-- CUERPO -->
141 <div class="row h-85 mx-0 justify-content-around"> 142 <div class="row h-85 mx-0 justify-content-around">
142 <!-- BOTON SCROLL IZQUIERDA --> 143 <!-- BOTON SCROLL IZQUIERDA -->
143 <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center"> 144 <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center">
144 <img 145 <img
145 draggable="false" 146 draggable="false"
146 ondragstart="return false;" 147 ondragstart="return false;"
147 (contextmenu)="false" 148 (contextmenu)="false"
148 class="icon-30 rotate-180-neg" 149 class="icon-30 rotate-180-neg"
149 src="assets/img/ir-fondo-color.svg" 150 src="assets/img/ir-fondo-color.svg"
150 (mousedown)="scrollX(templateCarrito, -100)" 151 (mousedown)="scrollX(templateCarrito, -100)"
151 (mouseup)="mouseup()" 152 (mouseup)="mouseup()"
152 (mouseleave)="mouseup()"> 153 (mouseleave)="mouseup()">
153 </div> 154 </div>
154 <!-- CARRITO --> 155 <!-- CARRITO -->
155 <div class="col-6 col-sm-8 col-md-9 col-lg-10 h-100"> 156 <div class="col-6 col-sm-8 col-md-9 col-lg-10 h-100">
156 <div #templateCarrito class="row flex-row flex-nowrap h-100 mx-0 my-2 scroll-x"> 157 <div #templateCarrito class="row flex-row flex-nowrap h-100 mx-0 my-2 scroll-x">
157 <!-- MENSAJE DE ADVERTENCIA --> 158 <!-- MENSAJE DE ADVERTENCIA -->
158 <div *ngIf="!articuloService.carrito.length" class="col h-100"> 159 <div *ngIf="!articuloService.carrito.length" class="col h-100">
159 <p class="text-center py-5">No hay articulos en el carrito</p> 160 <p class="text-center py-5">No hay articulos en el carrito</p>
160 </div> 161 </div>
161 <!-- ARTICULOS --> 162 <!-- ARTICULOS -->
162 <div 163 <div
163 class="col-10 col-sm-4 col-lg-2 px-2 px-xl-4 align-self-center border-right border-primary" 164 class="col-10 col-sm-4 col-lg-2 px-2 px-xl-4 align-self-center border-right border-primary"
164 *ngFor="let articulo of articuloService.carrito; let i = index;"> 165 *ngFor="let articulo of articuloService.carrito; let i = index;">
165 <div class="swing-in-top-fwd"> 166 <div class="swing-in-top-fwd">
166 <img 167 <img
167 draggable="false" 168 draggable="false"
168 ondragstart="return false;" 169 ondragstart="return false;"
169 (contextmenu)="false" 170 (contextmenu)="false"
170 class="d-block img-fluid p-2 mx-auto rounded" 171 class="d-block img-fluid p-2 mx-auto rounded"
171 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"> 172 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"
173 onerror="this.src='assets/img/image-not-found.jpg'">
172 <p class="d-block mt-auto text-center text-primary text-truncate"> 174 <p class="d-block mt-auto text-center text-primary text-truncate">
173 <small>{{articulo.DetArt}}</small> 175 <small>{{articulo.DetArt}}</small>
174 </p> 176 </p>
175 </div> 177 </div>
176 </div> 178 </div>
177 </div> 179 </div>
178 </div> 180 </div>
179 <!-- BOTON SCROLL DERECHA --> 181 <!-- BOTON SCROLL DERECHA -->
180 <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center"> 182 <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center">
181 <img 183 <img
182 draggable="false" 184 draggable="false"
183 ondragstart="return false;" 185 ondragstart="return false;"
184 (contextmenu)="false" 186 (contextmenu)="false"
185 class="icon-30" 187 class="icon-30"
186 src="assets/img/ir-fondo-color.svg" 188 src="assets/img/ir-fondo-color.svg"
187 (mousedown)="scrollX(templateCarrito, 100)" 189 (mousedown)="scrollX(templateCarrito, 100)"
188 (mouseup)="mouseup()" 190 (mouseup)="mouseup()"
189 (mouseleave)="mouseup()"> 191 (mouseleave)="mouseup()">
190 </div> 192 </div>
191 </div> 193 </div>
192 </div> 194 </div>
193 <!-- VER CARRITO --> 195 <!-- VER CARRITO -->
194 <div class="col-auto p-0 mt-2 ml-auto h-20"> 196 <div
197 class="col-auto p-0 mt-2 ml-auto h-20"
198 *ngIf="articuloService.carrito.length">
195 <div 199 <div
196 class="btn-effect col-auto align-self-center px-0 bg-white" 200 class="btn-effect col-auto align-self-center px-0 bg-white"
197 [routerLink]="['/carrito']"> 201 [routerLink]="['/carrito']">
198 <div class="row mx-0 bg-light"> 202 <div class="row mx-0 bg-light">
199 <div class="col-auto align-self-center text-primary">VER CARRITO</div> 203 <div class="col-auto align-self-center text-primary">VER CARRITO</div>
200 <div class="col-auto p-0 bg-primary d-none d-sm-block"> 204 <div class="col-auto p-0 bg-primary d-none d-sm-block">
201 <img 205 <img
202 draggable="false" 206 draggable="false"
203 ondragstart="return false;" 207 ondragstart="return false;"
204 (contextmenu)="false" 208 (contextmenu)="false"
205 class="p-2 icon-40" 209 class="p-2 icon-40"
206 src="assets/img/carrito.svg"> 210 src="assets/img/carrito.svg">
207 </div> 211 </div>
208 </div> 212 </div>
209 </div> 213 </div>
210 </div> 214 </div>
215
211 </div> 216 </div>
212 </div> 217 </div>
213 218
214 </div> 219 </div>
215 220
src/app/modules/seleccion-articulos/seleccion-articulos.module.ts
Diff comments   View file @ 1e1ee7e
1 import { NgModule } from '@angular/core'; 1 import { NgModule } from '@angular/core';
2 import { CommonModule } from '@angular/common'; 2 import { CommonModule } from '@angular/common';
3 import { SeleccionArticulosRoutingModule } from './seleccion-articulos-routing.module'; 3 import { SeleccionArticulosRoutingModule } from './seleccion-articulos-routing.module';
4 import { SeleccionArticulosComponent } from './seleccion-articulos.component'; 4 import { SeleccionArticulosComponent } from './seleccion-articulos.component';
5 import { HeaderPublicidadComponent } from 'src/app/shared/header-publicidad/header-publicidad.component'; 5 import { HeaderPublicidadComponent } from 'src/app/shared/header-publicidad/header-publicidad.component';
6 import { ModalModule } from 'ngx-bootstrap/modal'; 6 import { ModalModule } from 'ngx-bootstrap/modal';
7 import { CarouselModule } from 'ngx-bootstrap/carousel';
7 import { PromocionComponent } from 'src/app/shared/promocion/promocion.component'; 8 import { PromocionComponent } from 'src/app/shared/promocion/promocion.component';
8 import { SharedModule } from '../shared/shared.module'; 9 import { SharedModule } from '../shared/shared.module';
9 10
10 @NgModule({ 11 @NgModule({
11 declarations: [ 12 declarations: [
12 SeleccionArticulosComponent, 13 SeleccionArticulosComponent,
13 HeaderPublicidadComponent, 14 HeaderPublicidadComponent,
14 PromocionComponent 15 PromocionComponent
15 ], 16 ],
16 imports: [ 17 imports: [
17 CommonModule, 18 CommonModule,
18 SeleccionArticulosRoutingModule, 19 SeleccionArticulosRoutingModule,
19 ModalModule.forRoot(), 20 ModalModule.forRoot(),
21 CarouselModule.forRoot(),
20 SharedModule 22 SharedModule
21 ], 23 ],
22 exports: [HeaderPublicidadComponent], 24 exports: [HeaderPublicidadComponent],
23 entryComponents: [PromocionComponent] 25 entryComponents: [PromocionComponent]
24 }) 26 })
25 export class SeleccionArticulosModule { } 27 export class SeleccionArticulosModule { }
26 28
src/app/shared/header-publicidad/header-publicidad.component.html
Diff comments   View file @ 1e1ee7e
1 <div class="row mx-0 h-10"> 1 <div class="row mx-0 h-20">
2 <div class="col-12 p-3 h-100"> 2 <div class="col-12 p-3 h-100">
3 <div class="bg-dark h-100"></div> 3 <div class="h-100">
4 <carousel [showIndicators]="false" [interval]="4000">
5 <slide>
6 <img
7 class="d-block h-100 w-auto mx-auto"
8 src="{{urlImagenes}}spot-promos-combos-02.png">
9 </slide>
10 <!-- <slide>
11 <img
12 class="d-block h-100 w-auto mx-auto"
13 src="{{urlImagenes}}spot-promos-combos-03.png">
14 </slide>
15 <slide>
16 <img
17 class="d-block h-100 w-auto mx-auto"
18 src="{{urlImagenes}}spot-promos-combos-04.png">
19 </slide>
20 <slide>
21 <img
22 class="d-block h-100 w-auto mx-auto"
23 src="{{urlImagenes}}spot-promos-combos-05.png">
24 </slide> -->
25 </carousel>
26 </div>
4 </div> 27 </div>
5 </div>
28 </div>
src/app/shared/header-publicidad/header-publicidad.component.ts
Diff comments   View file @ 1e1ee7e
1 import { Component, OnInit } from '@angular/core'; 1 import { Component, OnInit } from '@angular/core';
2 import { APP_SETTINGS } from 'src/etc/AppSettings';
2 3
3 @Component({ 4 @Component({
4 selector: 'app-header-publicidad', 5 selector: 'app-header-publicidad',
5 templateUrl: './header-publicidad.component.html', 6 templateUrl: './header-publicidad.component.html',
6 styleUrls: ['./header-publicidad.component.scss'] 7 styleUrls: ['./header-publicidad.component.scss']
7 }) 8 })
8 export class HeaderPublicidadComponent implements OnInit { 9 export class HeaderPublicidadComponent implements OnInit {
10 urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`;
9 11
10 constructor() { } 12 constructor() { }
11 13
12 ngOnInit() { 14 ngOnInit() {
13 } 15 }
14 16
15 } 17 }
16 18
src/assets/img/image-not-found.jpg
Diff comments   View file @ 1e1ee7e

41.5 KB
src/scss/styles-bootstrap.scss
Diff comments   View file @ 1e1ee7e
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 {
33 visibility: hidden !important;
34 }
35
36 .carousel,
37 .carousel-inner,
38 .carousel-item,
39 .item {
40 height: 100% !important;
41 }
42
32 @import "node_modules/bootstrap/scss/bootstrap"; 43 @import "node_modules/bootstrap/scss/bootstrap";
33 44