Mauricio Cattafi / autoservicio

Download as
Browse Code »

Commit 2f6aa9ce6c2fe05b6f42d10548b05f767305f4df

Authored by Marcelo Puebla
1 parent 7429ebbf41
Exists in master and in 1 other branch validar_pve

Reducido el tamaño de los cards que se muestran en el sidebar.

Showing 3 changed files with 70 additions and 63 deletions   Show diff stats
src/app/components/master/master.component.html
Diff comments   View file @ 2f6aa9c
... ... @@ -11,7 +11,7 @@
11 11 </div>
12 12  
13 13 <!-- SIDEBAR -->
14   - <app-sidebar class="sidebar position-fixed float-right col-2 col-md-2 vh-100 bg-primary-gradient p-2">
  14 + <app-sidebar class="sidebar position-fixed float-right col-2 col-md-2 vh-100 bg-primary-gradient px-1 pt-2">
15 15 </app-sidebar>
16 16  
17 17 </div>
src/app/components/sidebar/sidebar.component.html
Diff comments   View file @ 2f6aa9c
1   -<div class="disable-user-select d-flex align-items-center flex-column h-100 pt-2 text-center">
  1 +<div class="disable-user-select d-flex align-items-center flex-column h-100 text-center">
2 2  
3 3 <!-- ENCABEZADO -->
4   - <p class="h4 border-bottom border-white text-white mt-4 pb-2">
  4 + <p class="h4 border-bottom border-white text-white pb-2">
5 5 Mi compra
6 6 <i class="fa fa-shopping-cart" aria-hidden="true"></i>
7 7 </p>
8 8  
9 9 <div class="overflow-scroll px-1 mb-2 w-100">
10 10 <!-- PRODUCTOS CARRITO -->
11   - <div
12   - class="my-2 bg-white border-0 rounded-sm"
13   - *ngFor="let producto of productosCarrito.slice().reverse(); let i = index">
14   - <img class="w-100 m-auto rounded-sm shadow" src="{{apiImagenes}}/imagenes/{{producto.imagenes[0].imagen}}">
15   - <div class="row m-0 p-0 px-1 py-1 shadow rounded-sm">
16   - <div class="col-12 p-0 pt-2 text-left my-auto">
17   - <p class="m-0 h6"><small>{{producto.DetArt}}</small></p>
18   - </div>
19   - <div class="col-12 pr-1 text-right h6 my-auto ">
20   - <p class="m-0">{{producto.PreVen | currency}}</p>
21   - </div>
22   - </div>
23   -
24   - <!-- BOTONES -->
25   - <div class="row m-0 d-flex justify-content-between">
  11 + <div class="row m-0">
  12 + <div
  13 + class="col p-0 my-1 bg-white border-0 rounded-sm"
  14 + *ngFor="let producto of productosCarrito">
  15 + <div class="row m-0">
  16 + <div class="col-6 pl-1 pr-0 my-auto">
  17 + <img
  18 + class="w-100 float-left rounded-sm shadow"
  19 + src="{{apiImagenes}}/imagenes/{{producto.imagenes[0].imagen}}">
  20 + </div>
  21 + <div class="col-6 px-1">
  22 + <!-- BOTONES -->
  23 + <div class="row m-0 d-flex justify-content-between">
26 24  
27   - <!-- SUMAR - RESTAR CANTIDAD -->
28   - <div class="col-auto px-1 my-2">
29   - <div class="btn-group-sm btn-group float-left my-auto" role="group">
30   - <button
31   - type="button"
32   - class="btn btn-light btn-sm my-auto border shadow"
33   - (click)="aumentarCantidad(producto)">
34   - <i class="fa fa-plus" aria-hidden="true"></i>
35   - </button>
36   - <div class="bg-white border border-white px-2 my-auto text-dark h5 shadow">
37   - <small>{{producto.cantidad}}</small>
  25 + <!-- SUMAR - RESTAR CANTIDAD -->
  26 + <div class="col p-1">
  27 + <div class="btn-group-sm btn-group float-left" role="group">
  28 + <button
  29 + type="button"
  30 + class="btn btn-light btn-sm border shadow"
  31 + (click)="aumentarCantidad(producto)">
  32 + <i class="fa fa-plus" aria-hidden="true"></i>
  33 + </button>
  34 + <div class="bg-white border border-white my-auto px-2 text-dark h5 shadow">
  35 + <small>{{producto.cantidad}}</small>
  36 + </div>
  37 + <button
  38 + type="button"
  39 + class="btn btn-light btn-sm border shadow"
  40 + (click)="restarCantidad(producto)">
  41 + <i class="fa fa-minus" aria-hidden="true"></i>
  42 + </button>
  43 + </div>
  44 + </div>
  45 +
  46 + <!-- PERSONALIZAR -->
  47 + <div class="col p-1">
  48 + <button
  49 + *ngIf="producto.tieneSinonimos"
  50 + type="button"
  51 + class="btn btn-light btn-sm float-left border shadow"
  52 + (click)="personalizarPromo(producto, i)">
  53 + <i class="fa fa-refresh text-purple" aria-hidden="true"></i>
  54 + </button>
  55 + </div>
  56 +
  57 + <!-- BORRAR -->
  58 + <div class="col p-1">
  59 + <button
  60 + type="button"
  61 + class="btn btn-secondary btn-sm float-right shadow"
  62 + (click)="deleteProducto(producto, i)">
  63 + <i class="fa fa-trash" aria-hidden="true"></i>
  64 + </button>
  65 + </div>
38 66 </div>
39   - <button
40   - type="button"
41   - class="btn btn-light btn-sm my-auto border shadow"
42   - (click)="restarCantidad(producto)">
43   - <i class="fa fa-minus" aria-hidden="true"></i>
44   - </button>
45 67 </div>
46 68 </div>
47   -
48   - <!-- PERSONALIZAR -->
49   - <div class="col-auto px-1 my-2">
50   - <button
51   - *ngIf="producto.tieneSinonimos"
52   - type="button"
53   - class="btn btn-light btn-sm my-auto float-left border shadow"
54   - (click)="personalizarPromo(producto, i)">
55   - <i class="fa fa-refresh text-purple" aria-hidden="true"></i>
56   - </button>
57   - </div>
58   -
59   - <!-- BORRAR -->
60   - <div class="col-auto px-1 my-2">
61   - <button
62   - type="button"
63   - class="btn btn-secondary btn-sm my-auto shadow"
64   - (click)="deleteProducto(producto, i)">
65   - <i class="fa fa-trash" aria-hidden="true"></i>
66   - </button>
  69 + <div class="row m-0 shadow rounded-sm">
  70 + <div class="col px-2">
  71 + <p class="m-0 text-left h6"><small>{{producto.DetArt}}</small></p>
  72 + <p class="m-0 text-right font-weight-bold h6">{{producto.PreVen | currency}}</p>
  73 + </div>
67 74 </div>
68 75 </div>
69 76 </div>
70 77 </div>
71 78  
72 79 <!-- TOTAL -->
73   - <div class="card rounded-top-sm mt-auto blue-gradient border-0">
74   - <div class="card-body row">
75   - <div class="col-12">
  80 + <div class="card rounded-top-sm mx-2 mt-auto blue-gradient border-0">
  81 + <div class="card-body p-2 pt-3 row m-0">
  82 + <div class="col-12 p-0">
76 83 <p
77 84 class="h4 border-bottom border-secondary text-secondary pb-2">
78 85 ({{getCantidadProductos()}}) artículos
79 86 </p>
80   - <p class="h3 text-secondary">Total</p>
81   - <p class="h3 font-weight-bold">{{getTotal() | currency}}</p>
  87 + <p class="h4 text-secondary">Total</p>
  88 + <p class="h4 font-weight-bold">{{getTotal() | currency}}</p>
82 89 </div>
83   - <div class="col-12">
  90 + <div class="col-12 p-0">
84 91 <button
85 92 *ngIf="getCantidadProductos() > 0"
86 93 type="button"
87 94 class="btn btn-block btn-light btn-lg shadow mb-2 p-1"
88 95 routerLink="/confirmacion-carrito">
89   - <span class="font-weight-bold pr-1">Finalizar y Pagar</span>
  96 + <span class="font-weight-bold pr-1">Pagar</span>
90 97 <i class="fa fa-check text-success" aria-hidden="true"></i>
91 98 </button>
92 99 <button
... ... @@ -53,7 +53,7 @@ body {
53 53 overflow-y: auto !important;
54 54 overflow-x: hidden !important;
55 55 &::-webkit-scrollbar {
56   - width: 1em;
  56 + width: .75em;
57 57 }
58 58 &::-webkit-scrollbar-track {
59 59 border-radius: 10px;