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
... ... @@ -14,7 +14,7 @@
14 14  
15 15 <!-- CARRITO -->
16 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 18 (scroll)="scrollEvent($event)">
19 19 <!-- MENSAJE DE ADVERTENCIA -->
20 20 <div class="col-10 align-self-center alert alert-primary" *ngIf="!articuloService.carrito.length">
... ... @@ -22,87 +22,66 @@
22 22 </div>
23 23 <!-- ARTICULOS -->
24 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 26 *ngFor="let articulo of articuloService.carrito; let i = index;"
27 27 @EnterLeave>
28 28 <!-- ARTICULO -->
29   - <div class="h-100 px-2 py-4 border border-primary rounded-sm">
30   - <div class="row mx-0 h-100">
  29 + <div class="h-100 border border-primary rounded-sm">
  30 + <div class="row align-items-center mx-0 h-100">
31 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 33 <img
34 34 draggable="false"
35 35 ondragstart="return false;"
36 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 38 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"
39 39 onerror="this.src='assets/img/image-not-found.jpg'">
40   - <div class="row mx-0 h-45">
41   - <p class="col text-primary text-truncate align-self-end">
  40 + <div class="row mx-0 h-100 h-md-45">
  41 + <p class="col text-primary text-truncate align-self-center">
42 42 <small>{{articulo.DetArt}}</small>
43 43 </p>
44 44 </div>
45 45 </div>
46 46 <!-- CANTIDAD -->
47   - <div class="col-3 border-right border-primary">
48   - <p><small>CANT</small></p>
49   - <div class="row mt-2 mx-0">
50   - <div class="col-12 h-auto">
51   - <div class="row mx-0 justify-content-between bg-primary badge-pill">
52   - <!-- BOTON MENOS -->
53   - <div class="col-auto px-0">
54   - <img
55   - draggable="false"
56   - ondragstart="return false;"
57   - (contextmenu)="false"
58   - class="d-block ml-auto py-2 icon-20 btn-effect"
59   - src="assets/img/menos-blanco.svg"
60   - (click)="substractCant(articulo)">
61   - </div>
62   - <!-- CANTIDAD -->
63   - <div class="col px-0 align-self-center text-white">
64   - <p><small>{{articulo.cantidad}}</small></p>
65   - </div>
66   - <!-- BOTON MAS -->
67   - <div class="col-auto px-0">
68   - <img
69   - draggable="false"
70   - ondragstart="return false;"
71   - (contextmenu)="false"
72   - class="d-block ml-auto py-2 icon-20 btn-effect"
73   - src="assets/img/mas-blanco.svg"
74   - (click)="addCant(articulo)">
75   - </div>
76   - </div>
  47 + <div class="col-6 col-md-3 h-50 h-md-100 border-right border-primary">
  48 + <p class="h-40"><small>CANT</small></p>
  49 + <div class="row mx-0 justify-content-between bg-primary badge-pill">
  50 + <!-- BOTON MENOS -->
  51 + <div class="col-auto px-0 my-auto">
  52 + <img
  53 + draggable="false"
  54 + ondragstart="return false;"
  55 + (contextmenu)="false"
  56 + class="d-block ml-auto py-2 icon-20 btn-effect"
  57 + src="assets/img/menos-blanco.svg"
  58 + (click)="substractCant(articulo)">
  59 + </div>
  60 + <!-- CANTIDAD -->
  61 + <div class="col px-0 py-2 my-auto text-white">
  62 + <p><small>{{articulo.cantidad}}</small></p>
  63 + </div>
  64 + <!-- BOTON MAS -->
  65 + <div class="col-auto px-0 my-auto">
  66 + <img
  67 + draggable="false"
  68 + ondragstart="return false;"
  69 + (contextmenu)="false"
  70 + class="d-block ml-auto py-2 icon-20 btn-effect"
  71 + src="assets/img/mas-blanco.svg"
  72 + (click)="addCant(articulo)">
77 73 </div>
78 74 </div>
79 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 76 <!-- PRECIO -->
98   - <div class="col-3 border-right border-primary">
99   - <p><small>PRECIO</small></p>
100   - <div class="py-1 mt-2 badge-pill bg-dark text-white">
  77 + <div class="col-6 col-md-3 h-50 h-md-100 border-right border-primary">
  78 + <p class="h-40"><small>PRECIO</small></p>
  79 + <div class="py-2 badge-pill bg-dark text-white">
101 80 <p><small>{{articulo.PreVen | currency}}</small></p>
102 81 </div>
103 82 </div>
104 83 <!-- ELIMINAR -->
105   - <div class="col-3 align-self-center">
  84 + <div class="col-6 col-md-3 align-self-center">
106 85 <div class="row mx-0 justify-content-center">
107 86 <div
108 87 class="col-auto px-3 py-1 btn-effect bg-primary badge-pill text-white"
... ... @@ -148,22 +127,6 @@
148 127 </span>
149 128 </div>
150 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 130 </div>
168 131  
169 132 </div>
src/app/modules/info-formas-pago/info-formas-pago.component.html
Diff comments   View file @ a1aacd6
... ... @@ -11,7 +11,7 @@
11 11 </div>
12 12 <div class="h-85">
13 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 15 <img
16 16 draggable="false"
17 17 ondragstart="return false;"
... ... @@ -25,7 +25,7 @@
25 25 draggable="false"
26 26 ondragstart="return false;"
27 27 (contextmenu)="false"
28   - class="w-15"
  28 + class="icon-150"
29 29 src="assets/img/icono-mercado-pago.svg">
30 30 </p>
31 31 <div
... ... @@ -40,7 +40,7 @@
40 40 src="assets/img/ir.svg">
41 41 </div>
42 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 44 <img
45 45 draggable="false"
46 46 ondragstart="return false;"
src/app/modules/seleccion-articulos/seleccion-articulos.component.html
Diff comments   View file @ a1aacd6
... ... @@ -12,7 +12,7 @@
12 12 </div>
13 13 </div>
14 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 16 <div class="col-12 h-100 px-0 py-3">
17 17 <div class="row mx-0 h-100">
18 18 <!-- FILTRO CATEGORIAS -->
... ... @@ -36,7 +36,7 @@
36 36 class="col-12 px-0 box-categorias border border-primary border-left-0 rounded-right scroll-y"
37 37 (scroll)="scrollEvent($event)">
38 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 40 [ngClass]="{ 'active': allActive, 'border-bottom-effect': !allActive }"
41 41 (click)="selectCategoria(-1, 0)">
42 42 <img
... ... @@ -45,10 +45,10 @@
45 45 (contextmenu)="false"
46 46 class="col-12 h-50 align-self-end d-none d-sm-block rounded-circle"
47 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 49 </div>
50 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 52 [ngClass]="{ 'active': categoria.selected, 'border-bottom-effect': !categoria.selected }"
53 53 (click)="selectCategoria(i, categoria.id)"
54 54 *ngFor="let categoria of categorias; let i = index;">
... ... @@ -59,7 +59,7 @@
59 59 class="col-12 h-50 align-self-end d-none d-sm-block rounded-circle"
60 60 src="{{urlImagenes}}{{categoria.path_imagen}}"
61 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 63 </div>
64 64 </div>
65 65 <div class="col-auto btn-effect h-5">
... ... @@ -84,14 +84,16 @@
84 84 <div
85 85 class="col px-2 my-1 my-md-3 h-auto"
86 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 90 <img
89 91 draggable="false"
90 92 ondragstart="return false;"
91 93 (contextmenu)="false"
92 94 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"
93 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 97 <div class="row mx-0 py-1 h-auto justify-content-center">
96 98 <p
97 99 [ngClass]="{'text-primary': articulo.PRO, 'text-secondary': !articulo.PRO}"
... ... @@ -101,11 +103,10 @@
101 103 <p class="col-12 px-1 h-auto text-center line-height-sm min-h-50">
102 104 <small>{{articulo.DET_LAR}}</small>
103 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 107 <div
106 108 [ngClass]="{'bg-primary': articulo.PRO, 'bg-secondary': !articulo.PRO}"
107   - class="row mx-0 justify-content-between badge-pill"
108   - (click)="elegirArticulo(articulo)">
  109 + class="row mx-0 justify-content-between badge-pill">
109 110 <div class="col px-0 align-self-center text-white text-right">
110 111 {{articulo.PreVen | currency}}
111 112 </div>
... ... @@ -203,20 +204,27 @@
203 204 </div>
204 205 </div>
205 206 </div>
206   - <!-- VER CARRITO Y TOTAL-->
  207 + <!-- TOTAL-->
207 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 221 *ngIf="articuloService.carrito.length">
210 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 224 [routerLink]="['/carrito']">
213   - <div class="row justify-content-between mx-0">
214   - <div class="col-auto align-self-center text-primary">TOTAL</div>
215   - <div class="col-auto p-0 bg-primary d-none d-sm-block bg-total">
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">
  225 + <div class="row mx-0 bg-light">
  226 + <div class="col-auto align-self-center text-primary d-none d-sm-block">VER CARRITO</div>
  227 + <div class="col-auto p-0 bg-primary">
220 228 <img
221 229 draggable="false"
222 230 ondragstart="return false;"
src/app/modules/seleccion-articulos/seleccion-articulos.component.scss
Diff comments   View file @ a1aacd6
... ... @@ -38,8 +38,3 @@ $primary: #aa006b;
38 38 .line-height-sm {
39 39 line-height: 1.2;
40 40 }
41   -
42   -.bg-total {
43   - width: 110px;
44   - border-radius: 1.5rem;
45   -}
src/app/modules/seleccion-articulos/seleccion-articulos.component.ts
Diff comments   View file @ a1aacd6
... ... @@ -158,7 +158,7 @@ export class SeleccionArticulosComponent implements OnInit, OnDestroy {
158 158 this.showQuantity += 100;
159 159 }
160 160  
161   - @HostListener("scroll", ['$event'])
  161 + @HostListener('scroll', ['$event'])
162 162 scrollEvent(event: Event) {
163 163 clearTimeout(this.inactiveScreen.timerReposo);
164 164 this.inactiveScreen.startTimeOutInactividad();
src/scss/height-width.scss
Diff comments   View file @ a1aacd6
1 1 @for $i from 1 through 100 {
2 2 $heightValue: 1% * $i;
3 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  
... ... @@ -19,3 +39,7 @@
19 39 .min-h-60 {
20 40 min-height: 60px;
21 41 }
  42 +
  43 +.max-h-80 {
  44 + max-height: 80%;
  45 +}
... ... @@ -23,13 +23,13 @@ body {
23 23 }
24 24  
25 25 .btn-effect {
26   - transition: all 0.3s;
  26 + transition: all 0.3s !important;
27 27 &:hover {
28   - cursor: pointer;
29   - opacity: 0.7;
  28 + cursor: pointer !important;
  29 + opacity: 0.7 !important;
30 30 }
31 31 &:active {
32   - transform: scale(1.02);
  32 + transform: scale(1.02) !important;
33 33 }
34 34 }
35 35