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
1 <div 1 <div
2 class="row m-0 fade-in" 2 class="row m-0 fade-in"
3 (click)="reiniciarTimer"> 3 (click)="reiniciarTimer">
4 <div class="col-10 p-0 vh-100"> 4 <div class="col-10 p-0 vh-100">
5 5
6 <!-- TOP HEADER --> 6 <!-- TOP HEADER -->
7 <app-header></app-header> 7 <app-header></app-header>
8 8
9 <router-outlet></router-outlet> 9 <router-outlet></router-outlet>
10 10
11 </div> 11 </div>
12 12
13 <!-- SIDEBAR --> 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 </app-sidebar> 15 </app-sidebar>
16 16
17 </div> 17 </div>
18 18
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 <!-- ENCABEZADO --> 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 Mi compra 5 Mi compra
6 <i class="fa fa-shopping-cart" aria-hidden="true"></i> 6 <i class="fa fa-shopping-cart" aria-hidden="true"></i>
7 </p> 7 </p>
8 8
9 <div class="overflow-scroll px-1 mb-2 w-100"> 9 <div class="overflow-scroll px-1 mb-2 w-100">
10 <!-- PRODUCTOS CARRITO --> 10 <!-- PRODUCTOS CARRITO -->
11 <div 11 <div class="row m-0">
12 class="my-2 bg-white border-0 rounded-sm" 12 <div
13 *ngFor="let producto of productosCarrito.slice().reverse(); let i = index"> 13 class="col p-0 my-1 bg-white border-0 rounded-sm"
14 <img class="w-100 m-auto rounded-sm shadow" src="{{apiImagenes}}/imagenes/{{producto.imagenes[0].imagen}}"> 14 *ngFor="let producto of productosCarrito">
15 <div class="row m-0 p-0 px-1 py-1 shadow rounded-sm"> 15 <div class="row m-0">
16 <div class="col-12 p-0 pt-2 text-left my-auto"> 16 <div class="col-6 pl-1 pr-0 my-auto">
17 <p class="m-0 h6"><small>{{producto.DetArt}}</small></p> 17 <img
18 </div> 18 class="w-100 float-left rounded-sm shadow"
19 <div class="col-12 pr-1 text-right h6 my-auto "> 19 src="{{apiImagenes}}/imagenes/{{producto.imagenes[0].imagen}}">
20 <p class="m-0">{{producto.PreVen | currency}}</p> 20 </div>
21 </div> 21 <div class="col-6 px-1">
22 </div> 22 <!-- BOTONES -->
23 23 <div class="row m-0 d-flex justify-content-between">
24 <!-- BOTONES -->
25 <div class="row m-0 d-flex justify-content-between">
26 24
27 <!-- SUMAR - RESTAR CANTIDAD --> 25 <!-- SUMAR - RESTAR CANTIDAD -->
28 <div class="col-auto px-1 my-2"> 26 <div class="col p-1">
29 <div class="btn-group-sm btn-group float-left my-auto" role="group"> 27 <div class="btn-group-sm btn-group float-left" role="group">
30 <button 28 <button
31 type="button" 29 type="button"
32 class="btn btn-light btn-sm my-auto border shadow" 30 class="btn btn-light btn-sm border shadow"
33 (click)="aumentarCantidad(producto)"> 31 (click)="aumentarCantidad(producto)">
34 <i class="fa fa-plus" aria-hidden="true"></i> 32 <i class="fa fa-plus" aria-hidden="true"></i>
35 </button> 33 </button>
36 <div class="bg-white border border-white px-2 my-auto text-dark h5 shadow"> 34 <div class="bg-white border border-white my-auto px-2 text-dark h5 shadow">
37 <small>{{producto.cantidad}}</small> 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 </div> 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 </div> 67 </div>
46 </div> 68 </div>
47 69 <div class="row m-0 shadow rounded-sm">
48 <!-- PERSONALIZAR --> 70 <div class="col px-2">
49 <div class="col-auto px-1 my-2"> 71 <p class="m-0 text-left h6"><small>{{producto.DetArt}}</small></p>
50 <button 72 <p class="m-0 text-right font-weight-bold h6">{{producto.PreVen | currency}}</p>
51 *ngIf="producto.tieneSinonimos" 73 </div>
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>
67 </div> 74 </div>
68 </div> 75 </div>
69 </div> 76 </div>
70 </div> 77 </div>
71 78
72 <!-- TOTAL --> 79 <!-- TOTAL -->
73 <div class="card rounded-top-sm mt-auto blue-gradient border-0"> 80 <div class="card rounded-top-sm mx-2 mt-auto blue-gradient border-0">
74 <div class="card-body row"> 81 <div class="card-body p-2 pt-3 row m-0">
75 <div class="col-12"> 82 <div class="col-12 p-0">
76 <p 83 <p
77 class="h4 border-bottom border-secondary text-secondary pb-2"> 84 class="h4 border-bottom border-secondary text-secondary pb-2">
78 ({{getCantidadProductos()}}) artículos 85 ({{getCantidadProductos()}}) artículos
79 </p> 86 </p>
80 <p class="h3 text-secondary">Total</p> 87 <p class="h4 text-secondary">Total</p>
1 @import "./assets/scss/animation.scss"; 1 @import "./assets/scss/animation.scss";
2 @import "./assets/scss/bootstrap-override.scss"; 2 @import "./assets/scss/bootstrap-override.scss";
3 @import "../node_modules/bootstrap/scss/_variables.scss"; 3 @import "../node_modules/bootstrap/scss/_variables.scss";
4 4
5 html, 5 html,
6 body { 6 body {
7 background-color: #f0f0f0; 7 background-color: #f0f0f0;
8 font-family: bahnschrift; 8 font-family: bahnschrift;
9 overflow: hidden !important; 9 overflow: hidden !important;
10 } 10 }
11 11
12 .blur { 12 .blur {
13 filter: blur(10px); 13 filter: blur(10px);
14 -webkit-filter: blur(10px); 14 -webkit-filter: blur(10px);
15 } 15 }
16 16
17 .disable-user-select { 17 .disable-user-select {
18 -webkit-user-select: none; 18 -webkit-user-select: none;
19 -moz-user-select: none; 19 -moz-user-select: none;
20 -ms-user-select: none; 20 -ms-user-select: none;
21 user-select: none; 21 user-select: none;
22 } 22 }
23 23
24 .blue-gradient { 24 .blue-gradient {
25 background: linear-gradient(0deg, #ffffff00, $white); 25 background: linear-gradient(0deg, #ffffff00, $white);
26 } 26 }
27 27
28 .rounded { 28 .rounded {
29 border-radius: 1.5rem !important; 29 border-radius: 1.5rem !important;
30 } 30 }
31 31
32 .rounded-top-sm { 32 .rounded-top-sm {
33 border-top-left-radius: 0.75rem !important; 33 border-top-left-radius: 0.75rem !important;
34 border-top-right-radius: 0.75rem !important; 34 border-top-right-radius: 0.75rem !important;
35 } 35 }
36 36
37 .rounded-sm { 37 .rounded-sm {
38 border-radius: 0.75rem !important; 38 border-radius: 0.75rem !important;
39 } 39 }
40 40
41 .card-effect { 41 .card-effect {
42 &:active { 42 &:active {
43 background-color: #c9c9c9b3 !important; 43 background-color: #c9c9c9b3 !important;
44 transition: background-color 0.5s; 44 transition: background-color 0.5s;
45 } 45 }
46 &:focus { 46 &:focus {
47 background-color: #c9c9c9b3 !important; 47 background-color: #c9c9c9b3 !important;
48 transition: background-color 0.5s; 48 transition: background-color 0.5s;
49 } 49 }
50 } 50 }
51 51
52 .overflow-scroll { 52 .overflow-scroll {
53 overflow-y: auto !important; 53 overflow-y: auto !important;
54 overflow-x: hidden !important; 54 overflow-x: hidden !important;
55 &::-webkit-scrollbar { 55 &::-webkit-scrollbar {
56 width: 1em; 56 width: .75em;
57 } 57 }
58 &::-webkit-scrollbar-track { 58 &::-webkit-scrollbar-track {
59 border-radius: 10px; 59 border-radius: 10px;
60 box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4); 60 box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4);
61 -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4); 61 -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4);
62 background-color: $white; 62 background-color: $white;
63 } 63 }
64 &::-webkit-scrollbar-thumb { 64 &::-webkit-scrollbar-thumb {
65 box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.7); 65 box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.7);
66 -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.7); 66 -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.7);
67 outline: 1px solid slategrey; 67 outline: 1px solid slategrey;
68 border-radius: 10px; 68 border-radius: 10px;
69 height: 12px; 69 height: 12px;
70 &:active { 70 &:active {
71 box-shadow: inset 0 0 8px $primary; 71 box-shadow: inset 0 0 8px $primary;
72 -webkit-box-shadow: inset 0 0 8px $primary; 72 -webkit-box-shadow: inset 0 0 8px $primary;
73 } 73 }
74 } 74 }
75 &::-webkit-scrollbar-corner { 75 &::-webkit-scrollbar-corner {
76 border-radius: 10px; 76 border-radius: 10px;
77 } 77 }
78 } 78 }
79 79
80 .bg-gray { 80 .bg-gray {
81 background-color: #e6e6e6; 81 background-color: #e6e6e6;
82 } 82 }
83 83
84 .bg-primary-gradient { 84 .bg-primary-gradient {
85 background: linear-gradient(135deg, rgba(40, 112, 175, 1) 0%, rgba(0, 32, 66, 1) 100%); 85 background: linear-gradient(135deg, rgba(40, 112, 175, 1) 0%, rgba(0, 32, 66, 1) 100%);
86 } 86 }
87 87
88 .bg-primary-gradient-horizontal { 88 .bg-primary-gradient-horizontal {
89 background: linear-gradient(90deg, rgba(40, 112, 175, 1) 0%, rgba(0, 32, 66, 1) 100%); 89 background: linear-gradient(90deg, rgba(40, 112, 175, 1) 0%, rgba(0, 32, 66, 1) 100%);
90 } 90 }
91 91
92 .icon-dim { 92 .icon-dim {
93 height: 40px !important; 93 height: 40px !important;
94 width: auto !important; 94 width: auto !important;
95 background-color: white !important; 95 background-color: white !important;
96 } 96 }
97 97
98 .text-purple { 98 .text-purple {
99 color: $purple; 99 color: $purple;
100 } 100 }
101 101
102 .vh-70 { 102 .vh-70 {
103 min-height: auto !important; 103 min-height: auto !important;
104 max-height: 70vh !important; 104 max-height: 70vh !important;
105 } 105 }
106 106
107 .vh-60 { 107 .vh-60 {
108 min-height: auto !important; 108 min-height: auto !important;
109 max-height: 60vh !important; 109 max-height: 60vh !important;
110 } 110 }
111 111
112 .vh-50 { 112 .vh-50 {
113 min-height: auto !important; 113 min-height: auto !important;
114 max-height: 50vh !important; 114 max-height: 50vh !important;
115 } 115 }
116 116
117 .spinner-lg { 117 .spinner-lg {
118 width: 3rem !important; 118 width: 3rem !important;
119 height: 3rem !important; 119 height: 3rem !important;
120 } 120 }
121 121
122 .sidebar { 122 .sidebar {
123 right: 0; 123 right: 0;
124 } 124 }
125 125
126 .background-image { 126 .background-image {
127 background-repeat: no-repeat; 127 background-repeat: no-repeat;
128 background-size: cover; 128 background-size: cover;
129 position: fixed; 129 position: fixed;
130 } 130 }
131 131
132 .rounded-bottom-right { 132 .rounded-bottom-right {
133 border-bottom-right-radius: 10rem; 133 border-bottom-right-radius: 10rem;
134 &:before { 134 &:before {
135 border-radius: 0 40px 40px 0; 135 border-radius: 0 40px 40px 0;
136 background-color: #fff; 136 background-color: #fff;
137 } 137 }
138 } 138 }
139 139
140 .rounded-top-left { 140 .rounded-top-left {
141 border-top-left-radius: 10rem; 141 border-top-left-radius: 10rem;
142 } 142 }
143 143
144 .bg-gray { 144 .bg-gray {
145 background-color: #cccccc; 145 background-color: #cccccc;
146 } 146 }
147 147
148 .cdk-overlay-container { 148 .cdk-overlay-container {
149 position: absolute; 149 position: absolute;
150 top: 65%; 150 top: 65%;
151 width: 100%; 151 width: 100%;
152 } 152 }
153 153
154 .min-h-40 { 154 .min-h-40 {
155 min-height: 40px; 155 min-height: 40px;
156 } 156 }
157 157
158 .min-h-55 { 158 .min-h-55 {
159 min-height: 55px; 159 min-height: 55px;
160 } 160 }
161 161
162 .pagination { 162 .pagination {
163 justify-content: center !important; 163 justify-content: center !important;
164 display: flex !important; 164 display: flex !important;
165 } 165 }
166 166