Marcelo Puebla / autoservicio-axion

Download as
Browse Code »

Commit d36ba066381f73743fb48c1f88bf47c328134168

Authored by Marcelo Puebla
2 parents 1f0b7384d2 0832dfca47
Exists in develop

Merge branch 'develop' into 'develop' 

Develop

See merge request !37
Showing 2 changed files   Show diff stats
src/app/modules/carrito/carrito.component.html
Diff comments   View file @ d36ba06
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 justify-content-center 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-25 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 px-2 py-4 border border-primary rounded-sm">
30 <div class="row mx-0 h-100"> 30 <div class="row 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-3 h-100 border-right border-primary align-self-center">
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-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-45">
41 <p class="col text-primary text-truncate align-self-end"> 41 <p class="col text-primary text-truncate align-self-end">
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-3 border-right border-primary">
48 <p><small>CANT</small></p> 48 <p><small>CANT</small></p>
49 <div class="row mt-2 mx-0"> 49 <div class="row mt-2 mx-0">
50 <div class="col-12 h-auto"> 50 <div class="col-12 h-auto">
51 <div class="row mx-0 justify-content-between bg-primary badge-pill"> 51 <div class="row mx-0 justify-content-between bg-primary badge-pill">
52 <!-- BOTON MENOS --> 52 <!-- BOTON MENOS -->
53 <div class="col-auto px-0"> 53 <div class="col-auto px-0">
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="d-block ml-auto py-2 icon-20 btn-effect" 58 class="d-block ml-auto py-2 icon-20 btn-effect"
59 src="assets/img/menos-blanco.svg" 59 src="assets/img/menos-blanco.svg"
60 (click)="substractCant(articulo)"> 60 (click)="substractCant(articulo)">
61 </div> 61 </div>
62 <!-- CANTIDAD --> 62 <!-- CANTIDAD -->
63 <div class="col px-0 align-self-center text-white"> 63 <div class="col px-0 align-self-center text-white">
64 <p><small>{{articulo.cantidad}}</small></p> 64 <p><small>{{articulo.cantidad}}</small></p>
65 </div> 65 </div>
66 <!-- BOTON MAS --> 66 <!-- BOTON MAS -->
67 <div class="col-auto px-0"> 67 <div class="col-auto px-0">
68 <img 68 <img
69 draggable="false" 69 draggable="false"
70 ondragstart="return false;" 70 ondragstart="return false;"
71 (contextmenu)="false" 71 (contextmenu)="false"
72 class="d-block ml-auto py-2 icon-20 btn-effect" 72 class="d-block ml-auto py-2 icon-20 btn-effect"
73 src="assets/img/mas-blanco.svg" 73 src="assets/img/mas-blanco.svg"
74 (click)="addCant(articulo)"> 74 (click)="addCant(articulo)">
75 </div> 75 </div>
76 </div> 76 </div>
77 </div> 77 </div>
78 </div> 78 </div>
79 </div> 79 </div>
80 <!-- OPCIONALES --> 80 <!-- OPCIONALES -->
81 <!-- <div class="col-3 border-right border-primary"> 81 <!-- <div class="col-3 border-right border-primary">
82 <p><small>OPCIONALES</small></p> 82 <p><small>OPCIONALES</small></p>
83 <div class="py-1 badge-pill bg-dark text-white"><p><small>{{'AZÚCAR'}}</small></p></div> 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"> 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"> 85 <div class="col-auto pl-3 btn-effect bg-primary badge-pill text-white">
86 <span> 86 <span>
87 <small class="pr-2">CAMBIAR</small> 87 <small class="pr-2">CAMBIAR</small>
88 <img 88 <img
89 draggable="false" 89 draggable="false"
90 ondragstart="return false;" 90 ondragstart="return false;"
91 (contextmenu)="false" 91 (contextmenu)="false"
92 class="icon-20" 92 class="icon-20"
93 src="assets/img/ir.svg"> 93 src="assets/img/ir.svg">
94 </span> 94 </span>
95 </div> 95 </div>
96 </div> --> 96 </div> -->
97 <!-- PRECIO --> 97 <!-- PRECIO -->
98 <div class="col-3 border-right border-primary"> 98 <div class="col-3 border-right border-primary">
99 <p><small>PRECIO</small></p> 99 <p><small>PRECIO</small></p>
100 <div class="py-1 mt-2 badge-pill bg-dark text-white"> 100 <div class="py-1 mt-2 badge-pill bg-dark text-white">
101 <p><small>{{articulo.PreVen | currency}}</small></p> 101 <p><small>{{articulo.PreVen | currency}}</small></p>
102 </div> 102 </div>
103 </div> 103 </div>
104 <!-- ELIMINAR --> 104 <!-- ELIMINAR -->
105 <div class="col-3 align-self-center"> 105 <div class="col-3 align-self-center">
106 <div class="row mx-0 justify-content-center"> 106 <div class="row mx-0 justify-content-center">
107 <div 107 <div
108 class="col-auto px-3 py-1 btn-effect bg-primary badge-pill text-white" 108 class="col-auto px-3 py-1 btn-effect bg-primary badge-pill text-white"
109 (click)="deleteArticulo(i)"> 109 (click)="deleteArticulo(i)">
110 <span> 110 <span>
111 <small class="pr-2">ELIMINAR</small> 111 <small class="pr-2">ELIMINAR</small>
112 <img 112 <img
113 draggable="false" 113 draggable="false"
114 ondragstart="return false;" 114 ondragstart="return false;"
115 (contextmenu)="false" 115 (contextmenu)="false"
116 class="icon-20 rotate-45" 116 class="icon-20 rotate-45"
117 src="assets/img/mas-blanco.svg"> 117 src="assets/img/mas-blanco.svg">
118 </span> 118 </span>
119 </div> 119 </div>
120 </div> 120 </div>
121 </div> 121 </div>
122 </div> 122 </div>
123 </div> 123 </div>
124 </div> 124 </div>
125 </div> 125 </div>
126 <!-- TOTAL --> 126 <!-- TOTAL -->
127 <div class="row mx-3 mt-2 h-auto justify-content-end"> 127 <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> 128 <div class="col-auto align-self-center text-primary"><small>TOTAL</small></div>
129 <div class="col-2 p-0 bg-primary d-none d-sm-block bg-total"> 129 <div class="col-auto px-3 bg-primary badge-pill">
130 <p class="text-center text-white mt-1 py-1">{{articuloService.subTotal | currency}}</p> 130 <p class="text-center text-white py-1">{{articuloService.subTotal | currency}}</p>
131 </div> 131 </div>
132 </div> 132 </div>
133 <!-- CONTINUAR --> 133 <!-- CONTINUAR -->
134 <div 134 <div
135 *ngIf="articuloService.carrito.length" 135 *ngIf="articuloService.carrito.length"
136 class="row mx-3 mt-4 h-auto justify-content-end"> 136 class="row mx-3 mt-4 h-auto justify-content-end">
137 <div 137 <div
138 class="col-auto py-2 px-3 align-self-center btn-effect bg-primary badge-pill text-white" 138 class="col-auto py-2 px-3 align-self-center btn-effect bg-primary badge-pill text-white"
139 [routerLink]="['/forma-pago']"> 139 [routerLink]="['/forma-pago']">
140 <span> 140 <span>
141 <small class="pr-2">CONTINUAR</small> 141 <small class="pr-2">CONTINUAR</small>
142 <img 142 <img
143 draggable="false" 143 draggable="false"
144 ondragstart="return false;" 144 ondragstart="return false;"
145 (contextmenu)="false" 145 (contextmenu)="false"
146 class="icon-20" 146 class="icon-20"
147 src="assets/img/ir.svg"> 147 src="assets/img/ir.svg">
148 </span> 148 </span>
149 </div> 149 </div>
150 </div> 150 </div>
151 <!-- SEGUIR COMPRANDO --> 151 <!-- SEGUIR COMPRANDO -->
152 <!-- <div class="row mx-3 mt-2 h-auto justify-content-end"> 152 <!-- <div class="row mx-3 mt-2 h-auto justify-content-end">
153 <div 153 <div
154 class="col-auto py-2 px-3 align-self-center btn-effect bg-primary badge-pill text-white" 154 class="col-auto py-2 px-3 align-self-center btn-effect bg-primary badge-pill text-white"
155 (click)="goBack()"> 155 (click)="goBack()">
156 <span> 156 <span>
157 <small class="pr-2">SEGUIR COMPRANDO</small> 157 <small class="pr-2">SEGUIR COMPRANDO</small>
158 <img 158 <img
159 draggable="false" 159 draggable="false"
160 ondragstart="return false;" 160 ondragstart="return false;"
161 (contextmenu)="false" 161 (contextmenu)="false"
162 class="icon-20" 162 class="icon-20"
163 src="assets/img/ir.svg"> 163 src="assets/img/ir.svg">
164 </span> 164 </span>
165 </div> 165 </div>
166 </div> --> 166 </div> -->
167 </div> 167 </div>
168 168
169 </div> 169 </div>
170 170
src/app/modules/carrito/carrito.component.scss
Diff comments   View file @ d36ba06
1 .bg-total {
2 width: 75px;
3 border-radius: 1.5rem;
4 }
5