Mauricio Cattafi / autoservicio

Download as
Browse Code »

Commit 597bbe4795b38c885f12e1222134dfefff217193

Authored by Eric Fernandez
2 parents d005793511 4e0dac3c3d
Exists in master and in 1 other branch validar_pve

Merge branch 'master' into 'master' 

Master(mpuebla)

See merge request !22
Showing 16 changed files   Show diff stats
src/app/components/busqueda-productos/busqueda-productos.component.html
Diff comments   View file @ 597bbe4
1 <div class="row m-0 fade-in"> 1 <div class="row m-0 fade-in">
2 <div class="col-12 p-0"> 2 <div class="col-12 p-0">
3 3
4 <!-- NOMBRE DE SECCION --> 4 <!-- NOMBRE DE SECCION -->
5 <div class="row m-0"> 5 <div class="row m-0">
6 <div class="col-12 p-0"> 6 <div class="col-12 p-0">
7 <p class="h5 py-1 bg-gray text-muted text-center"> 7 <p class="h5 py-1 bg-gray text-muted text-center">
8 Búsqueda 8 Búsqueda
9 <i class="fa fa-search"></i> 9 <i class="fa fa-search"></i>
10 </p> 10 </p>
11 </div> 11 </div>
12 </div> 12 </div>
13 13
14 <div class="row m-4 disable-user-select"> 14 <div class="row m-3 disable-user-select">
15 15
16 <!-- FILTROS --> 16 <!-- FILTROS -->
17 <div class="col-sm-2 p-1"> 17 <div class="col-sm-2 p-1">
18 <div class="text-center"> 18 <div class="text-center">
19 <p class="font-weight-bold text-muted border-bottom pb-2">Buscar por Categoría</p> 19 <p class="font-weight-bold text-muted border-bottom pb-2">Buscar por Categoría</p>
20 </div> 20 </div>
21 <ul class="list-group"> 21 <ul class="list-group">
22 <li 22 <li
23 [ngClass]="{active: categoria == 1}" 23 [ngClass]="{active: categoria == 1}"
24 (click)="categoria = 1" 24 (click)="categoria = 1"
25 class="list-group-item list-group-item-action text-center my-1 p-2 h6"> 25 class="list-group-item list-group-item-action text-center my-1 p-2 h6">
26 Combos y Promociones 26 Combos y Promociones
27 </li> 27 </li>
28 <li 28 <li
29 [ngClass]="{active: categoria == 2}" 29 [ngClass]="{active: categoria == 2}"
30 (click)="categoria = 2" 30 (click)="categoria = 2"
31 class="list-group-item list-group-item-action text-center my-1 p-2 h6 shadow-sm"> 31 class="list-group-item list-group-item-action text-center my-1 p-2 h6 shadow-sm">
32 Todos 32 Todos
33 </li> 33 </li>
34 <li 34 <li
35 [ngClass]="{active: categoria == 3}" 35 [ngClass]="{active: categoria == 3}"
36 (click)="categoria = 3" 36 (click)="categoria = 3"
37 class="list-group-item list-group-item-action text-center my-1 p-2 h6 shadow-sm"> 37 class="list-group-item list-group-item-action text-center my-1 p-2 h6 shadow-sm">
38 Bebidas 38 Bebidas
39 </li> 39 </li>
40 <li 40 <li
41 [ngClass]="{active: categoria == 4}" 41 [ngClass]="{active: categoria == 4}"
42 (click)="categoria = 4" 42 (click)="categoria = 4"
43 class="list-group-item list-group-item-action text-center my-1 p-2 h6 shadow-sm"> 43 class="list-group-item list-group-item-action text-center my-1 p-2 h6 shadow-sm">
44 Sandwichería 44 Sandwichería
45 </li> 45 </li>
46 <li 46 <li
47 [ngClass]="{active: categoria == 5}" 47 [ngClass]="{active: categoria == 5}"
48 (click)="categoria = 5" 48 (click)="categoria = 5"
49 class="list-group-item list-group-item-action text-center my-1 p-2 h6 shadow-sm"> 49 class="list-group-item list-group-item-action text-center my-1 p-2 h6 shadow-sm">
50 Panaderia 50 Panaderia
51 </li> 51 </li>
52 <li 52 <li
53 [ngClass]="{active: categoria == 6}" 53 [ngClass]="{active: categoria == 6}"
54 (click)="categoria = 6" 54 (click)="categoria = 6"
55 class="list-group-item list-group-item-action text-center my-1 p-2 h6 shadow-sm"> 55 class="list-group-item list-group-item-action text-center my-1 p-2 h6 shadow-sm">
56 Golosinas 56 Golosinas
57 </li> 57 </li>
58 <li 58 <li
59 [ngClass]="{active: categoria == 7}" 59 [ngClass]="{active: categoria == 7}"
60 (click)="categoria = 7" 60 (click)="categoria = 7"
61 class="list-group-item list-group-item-action text-center my-1 p-2 h6 shadow-sm"> 61 class="list-group-item list-group-item-action text-center my-1 p-2 h6 shadow-sm">
62 Tabaqueria 62 Tabaqueria
63 </li> 63 </li>
64 </ul> 64 </ul>
65 </div> 65 </div>
66 66
67 <!-- SEARCH INPUT --> 67 <!-- SEARCH INPUT -->
68 <div *ngIf="productos.length > 0" class="fade-in col-sm-10"> 68 <div *ngIf="productos.length > 0" class="fade-in col-sm-10">
69 69
70 <div class="form-group row search"> 70 <div class="form-group row search">
71 <div class="col-sm-10"> 71 <div class="col-sm-10">
72 <span class="fa fa-search form-control-lg form-control-search pl-3"></span> 72 <span class="fa fa-search form-control-lg form-control-search pl-3"></span>
73 <input 73 <input
74 type="text" 74 type="text"
75 class="form-control form-control-lg shadow-sm rounded-pill px-5" 75 class="form-control form-control-lg shadow-sm rounded-pill px-5"
76 placeholder="Búsqueda productos" 76 placeholder="Búsqueda productos"
77 [(ngModel)]="searchTerm" 77 [(ngModel)]="searchTerm"
78 (ngModelChange)="filterItems()"> 78 (ngModelChange)="filterItems()">
79 </div> 79 </div>
80 <!-- BOTON VOLVER --> 80 <!-- BOTON VOLVER -->
81 <div class="col-sm-2"> 81 <div class="col-sm-2">
82 <button 82 <button
83 type="button" 83 type="button"
84 class="btn btn-light btn-lg shadow-sm" 84 class="btn btn-light btn-lg shadow-sm"
85 [routerLink]="['/inicio']"> 85 [routerLink]="['/inicio']">
86 <span class="font-weight-normal h6 pr-2">Volver</span> 86 <span class="font-weight-normal h6 pr-2">Volver</span>
87 <i class="fa fa-undo text-warning" aria-hidden="true"></i> 87 <i class="fa fa-undo text-warning" aria-hidden="true"></i>
88 </button> 88 </button>
89 </div> 89 </div>
90 </div> 90 </div>
91 <!-- LISTA DE PRODUCTOS --> 91 <!-- LISTA DE PRODUCTOS -->
92 <div class="row align-items-start vh-70 overflow-scroll disable-user-select"> 92 <div class="row align-items-start vh-60 overflow-scroll disable-user-select">
93 <div 93 <div
94 class="col-4 p-2" 94 class="col-4 p-2"
95 *ngFor="let producto of auxProductos"> 95 *ngFor="let producto of auxProductos">
96 <div 96 <div
97 class="card-effect bg-white rounded-sm shadow border-0" 97 class="card-effect bg-white rounded-sm shadow border-0"
98 (click)="mostrarBotonCargar(producto)"> 98 (click)="mostrarBotonCargar(producto)">
99 <img src="{{apiUrl}}/imagenes/accesoPLAYA.png" class="w-75 m-auto"> 99 <img src="{{apiUrl}}/imagenes/cafe.jpg" class="rounded-sm w-100 m-auto">
100 <div class="p-2"> 100 <div class="p-2">
101 <p class="h6 text-left m-0">{{producto.DetArt}}</p> 101 <p class="h6 text-left m-0">{{producto.DetArt}}</p>
102 <div class="row justify-content-between m-0"> 102 <div class="row justify-content-between m-0">
103 <div class="col-12 p-0"> 103 <div class="col-12 p-0">
104 <div class="text-left"> 104 <div class="text-left">
105 <p class="m-0 h6"><small>{{producto.DetArt}}</small></p> 105 <p class="m-0 h6"><small>{{producto.DetArt}}</small></p>
106 <p class="m-0 h6"><small>COD. {{producto.CodRub}}</small></p> 106 <p class="m-0 h6"><small>COD. {{producto.CodRub}}</small></p>
107 </div> 107 </div>
108 </div> 108 </div>
109 <div class="col-12 my-auto pt-2 pr-2 p-0"> 109 <div class="col-12 my-auto pt-2 pr-2 p-0">
110 <p class="text-right m-0 h6">{{producto.PreVen | currency}}</p> 110 <p class="text-right m-0 h6">{{producto.PreVen | currency}}</p>
111 </div> 111 </div>
112 </div> 112 </div>
113 <div *ngIf="producto.showCargarProducto" class="row mt-2"> 113 <div *ngIf="producto.showCargarProducto" class="row mt-2">
114 <div class="col-sm-12"> 114 <div class="col-sm-12">
115 <div class="btn btn-block btn-outline-primary shadow">Cargar Producto</div> 115 <button
116 type="button"
117 class="btn btn-block btn-outline-primary shadow"
118 (click)="elegirProducto(producto)">
119 Cargar Producto
120 </button>
116 </div> 121 </div>
117 </div> 122 </div>
118 </div> 123 </div>
119 </div> 124 </div>
120 </div> 125 </div>
121 </div> 126 </div>
122 </div> 127 </div>
123 128
124 <!-- SPINNER --> 129 <!-- SPINNER -->
125 <div *ngIf="productos.length === 0 && showSpinner" class="col-sm-10 align-self-center"> 130 <div *ngIf="productos.length === 0 && showSpinner" class="col-sm-10 align-self-center">
126 <div class="spinner-border spinner-lg text-secondary" role="status"></div> 131 <div class="spinner-border spinner-lg text-secondary" role="status"></div>
127 <span class="text-secondary m-2 h5">Cargando información.</span> 132 <span class="text-secondary m-2 h5">Cargando información.</span>
128 </div> 133 </div>
129 134
130 </div> 135 </div>
131 136
132 </div> 137 </div>
133 138
134 </div> 139 </div>
135 140
src/app/components/busqueda-productos/busqueda-productos.component.scss
Diff comments   View file @ 597bbe4
1 .search .form-control-search { 1 .search .form-control-search {
2 position: absolute; 2 position: absolute;
3 z-index: 2; 3 z-index: 2;
4 display: block; 4 display: block;
5 text-align: center; 5 text-align: center;
6 pointer-events: none; 6 pointer-events: none;
7 color: #aaa; 7 color: #aaa;
8 line-height: inherit; 8 line-height: inherit;
9 } 9 }
10
11 .vh-70 {
12 min-height: auto !important;
13 max-height: 70vh !important;
14 }
15
16 .spinner-lg{
17 width: 3rem !important;
18 height: 3rem !important;
19 }
20 10
src/app/components/busqueda-productos/busqueda-productos.component.ts
Diff comments   View file @ 597bbe4
1 import { Component, OnInit, APP_BOOTSTRAP_LISTENER } from '@angular/core'; 1 import { Component, OnInit, APP_BOOTSTRAP_LISTENER } from '@angular/core';
2 import { ProductoService } from 'src/app/services/producto.service'; 2 import { ProductoService } from 'src/app/services/producto.service';
3 import { Producto } from 'src/app/wrappers/producto'; 3 import { Producto } from 'src/app/wrappers/producto';
4 import { appSettings } from 'src/etc/AppSettings'; 4 import { appSettings } from 'src/etc/AppSettings';
5 import { Router } from '@angular/router';
5 6
6 @Component({ 7 @Component({
7 selector: 'app-busqueda-productos', 8 selector: 'app-busqueda-productos',
8 templateUrl: './busqueda-productos.component.html', 9 templateUrl: './busqueda-productos.component.html',
9 styleUrls: ['./busqueda-productos.component.scss'] 10 styleUrls: ['./busqueda-productos.component.scss']
10 }) 11 })
11 export class BusquedaProductosComponent implements OnInit { 12 export class BusquedaProductosComponent implements OnInit {
12 13
13 private productos: Producto[] = []; 14 private productos: Producto[] = [];
14 private auxProductos: Producto[] = []; 15 private auxProductos: Producto[] = [];
15 private searchTerm: string = ''; 16 private searchTerm: string = '';
16 private showSpinner: boolean = true; 17 private showSpinner: boolean = true;
17 private categoria: Categorias = Categorias.todos; 18 private categoria: Categorias = Categorias.todos;
18 private apiUrl: string = appSettings.apiUrl; 19 private apiUrl: string = appSettings.apiUrl;
19 private showBtnCargarProducto: boolean = false; 20 private showBtnCargarProducto: boolean = false;
20 21
21 constructor(private productoService: ProductoService) { } 22 constructor(
23 private productoService: ProductoService,
24 private router: Router) { }
22 25
23 ngOnInit() { 26 ngOnInit() {
24 27
28 this.productoService.productoAcargar = undefined;
25 this.productoService.getAll() 29 this.productoService.getAll()
26 .subscribe((data: Producto[]) => { 30 .subscribe((data: Producto[]) => {
27 31
28 this.auxProductos = this.productos = data; 32 this.auxProductos = this.productos = data;
29 }, (error) => { 33 }, (error) => {
30 this.showSpinner = false; 34 this.showSpinner = false;
31 console.error(error); 35 console.error(error);
32 }); 36 });
33 } 37 }
34 38
35 filterItems() { 39 filterItems() {
36 40
37 this.auxProductos = this.productos.filter(x => { 41 this.auxProductos = this.productos.filter(x => {
38 return x.DetArt.toLowerCase().includes(this.searchTerm.toLowerCase()) 42 return x.DetArt.toLowerCase().includes(this.searchTerm.toLowerCase())
39 }); 43 });
40 } 44 }
41 45
42 agregarAlCarrito(producto: Producto) { 46 agregarAlCarrito(producto: Producto) {
43 47
44 producto.cantidad = 1; 48 producto.cantidad = 1;
45 this.productoService.productos.push(producto); 49 this.productoService.productos.push(producto);
46 } 50 }
47 51
48 mostrarBotonCargar(producto: Producto) { 52 private mostrarBotonCargar(producto: Producto) {
49 53
50 for (let i = 0; i < this.auxProductos.length; i++) { 54 for (let i = 0; i < this.auxProductos.length; i++) {
51 if (this.auxProductos[i].id !== producto.id) 55 if (this.auxProductos[i].id !== producto.id)
52 this.auxProductos[i].showCargarProducto = false; 56 this.auxProductos[i].showCargarProducto = false;
53 else if (producto.showCargarProducto) return; 57 else if (producto.showCargarProducto) return;
54 } 58 }
55 producto.showCargarProducto = !producto.showCargarProducto 59 producto.showCargarProducto = !producto.showCargarProducto
56 } 60 }
61
62 private elegirProducto(producto: Producto) {
63
64 this.productoService.productoAcargar = producto;
65 this.router.navigate(['inicio']);
66 }
57 } 67 }
58 68
59 enum Categorias { 69 enum Categorias {
60 promosCombos = 1, 70 promosCombos = 1,
61 todos = 2, 71 todos = 2,
62 bebidas = 3, 72 bebidas = 3,
63 sandwicheria = 4, 73 sandwicheria = 4,
64 panaderia = 5, 74 panaderia = 5,
65 golosinas = 6, 75 golosinas = 6,
66 tabaqueria = 7, 76 tabaqueria = 7,
67 } 77 }
68 78
src/app/components/confirmacion-carrito/confirmacion-carrito.component.html
Diff comments   View file @ 597bbe4
1 <div class="row"> 1 <div class="row">
2 <div class="col-12"> 2 <div class="col-12">
3 3
4 <!-- NOMBRE DE SECCION --> 4 <!-- NOMBRE DE SECCION -->
5 <div class="row m-0"> 5 <div class="row m-0">
6 <div class="col-12 p-0"> 6 <div class="col-12 p-0">
7 <p class="h5 py-1 bg-gray text-muted text-center">Pago <i class="fa fa-usd"></i></p> 7 <p class="h5 py-1 bg-gray text-muted text-center">Pago <i class="fa fa-usd"></i></p>
8 </div> 8 </div>
9 </div> 9 </div>
10 10
11 <div class="row m-4 d-flex align-items-center"> 11 <div class="row m-3 d-flex align-items-center">
12 <div class="col-4"> 12 <div class="col-4">
13 <h1>Mi Compra <i class="fa fa-shopping-cart "></i></h1> 13 <h1>Mi Compra <i class="fa fa-shopping-cart "></i></h1>
14 </div> 14 </div>
15 <div class="col-8"> 15 <div class="col-8">
16 <h2>¿Desea finalizar su compra?</h2> 16 <h2>¿Desea finalizar su compra?</h2>
17 <h3>Por favor, controle y confirme su compra.</h3> 17 <h3>Por favor, controle y confirme su compra.</h3>
18 </div> 18 </div>
19 <div class="col-sm-7"> 19 <div class="col-sm-7">
20 20
21 <div class="row pr-3 vh-50 overflow-scroll"> 21 <div class="row pr-3 vh-50 overflow-scroll">
22 <div class="col-4 p-2" *ngFor="let producto of productos"> 22 <div class="col-4 p-2" *ngFor="let producto of productos">
23 <div class="card card-effect bg-white rounded-sm shadow border-0"> 23 <div class="card card-effect bg-white rounded-sm shadow border-0">
24 <img src="{{apiUrl}}/imagenes/{{producto.nombreImagen}}" class="card-img-top w-75 m-auto"> 24 <img src="{{apiUrl}}/imagenes/{{producto.nombreImagen}}" class="card-img-top w-75 m-auto">
25 <div class="card-body"> 25 <div class="card-body">
26 <p class="h5 text-left m-0">{{producto.variable}}</p> 26 <p class="h5 text-left m-0">{{producto.variable}}</p>
27 <div class="text-left"> 27 <div class="text-left">
28 <p class="m-0"><small>ASDASDSADASDSA</small></p> 28 <p class="m-0"><small>ASDASDSADASDSA</small></p>
29 <p class="m-0"><small>COD. 1222</small></p> 29 <p class="m-0"><small>COD. 1222</small></p>
30 <p class="m-0"><strong>$ 563</strong></p> 30 <p class="m-0"><strong>$ 563</strong></p>
31 </div> 31 </div>
32 </div> 32 </div>
33 </div> 33 </div>
34 </div> 34 </div>
35 </div> 35 </div>
36 </div> 36 </div>
37 <div class="col-sm-5"> 37 <div class="col-sm-5">
38 <h3>TOTAL: $553</h3> 38 <h3>TOTAL: $553</h3>
39 </div> 39 </div>
40 </div> 40 </div>
41 </div> 41 </div>
42 </div> 42 </div>
43 43
src/app/components/inicio/inicio.component.html
Diff comments   View file @ 597bbe4
1 <div class="row m-0 fade-in"> 1 <div class="row m-0 fade-in">
2 <div class="col-12 p-0"> 2 <div class="col-12 p-0">
3 3
4 <!-- NOMBRE DE SECCION --> 4 <!-- NOMBRE DE SECCION -->
5 <div class="row m-0"> 5 <div class="row m-0">
6 <div class="col-12 p-0"> 6 <div class="col-12 p-0">
7 <p class="h5 py-1 bg-gray text-muted text-center">Inicio</p> 7 <p class="h5 py-1 bg-gray text-muted text-center">Inicio</p>
8 </div> 8 </div>
9 </div> 9 </div>
10 10
11 <div class="row m-4 d-flex align-items-center disable-user-select"> 11 <div class="row m-3 d-flex align-items-start disable-user-select">
12 <div class="col-md-5 d-flex align-items-end flex-column"> 12 <div class="col-md-5 d-flex align-items-end flex-column">
13 13
14 <!-- PROMOCIONES --> 14 <!-- PROMOCIONES -->
15 <div class="card bg-white border-0 shadow rounded w-100 mb-auto"> 15 <div class="card bg-white border-0 shadow rounded w-100 mb-auto">
16 <div class="card-body text-left p-4"> 16 <div class="card-body text-left px-4 py-3">
17 <div class="row"> 17 <div class="row">
18 <div class="col-7"> 18 <div class="col-7">
19 <p class="h3 card-title">Promociones</p> 19 <p class="h3 card-title">Promociones</p>
20 </div> 20 </div>
21 <div class="col-5 p-0"> 21 <div class="col-5 p-0">
22 <img src="{{apiUrl}}/imagenes/primario.promociones.png" class="icon-dim m-0"> 22 <img src="{{apiUrl}}/imagenes/primario.promociones.png" class="icon-dim m-0">
23 </div> 23 </div>
24 </div> 24 </div>
25 <p class="h5 card-text text-muted font-weight-light">Conozca las ofertas del momento.</p> 25 <p class="h5 card-text text-muted font-weight-light">Conozca las ofertas del momento.</p>
26 </div> 26 </div>
27 <div id="carouselIndicators" class="carousel slide mb-4" data-ride="carousel"> 27 <div id="carouselIndicators" class="carousel slide" data-ride="carousel">
28 <ol class="carousel-indicators m-0">
29 <li data-target="#carouselIndicators" data-slide-to="0" class="bg-dark active"></li>
30 <li data-target="#carouselIndicators" data-slide-to="1" class="bg-dark"></li>
31 <li data-target="#carouselIndicators" data-slide-to="2" class="bg-dark"></li>
32 </ol>
33 <div class="carousel-inner"> 28 <div class="carousel-inner">
34 <div class="carousel-item active"> 29 <div class="carousel-item active">
35 <img src="{{apiUrl}}/imagenes/descarga.jpg" class="d-block w-50 m-auto rounded"> 30 <img src="{{apiUrl}}/imagenes/cafe.jpg" class="d-block w-100 m-auto rounded">
36 </div> 31 </div>
37 <div class="carousel-item"> 32 <div class="carousel-item">
38 <img src="{{apiUrl}}/imagenes/descarga.jpg" class="d-block w-50 m-auto rounded"> 33 <img src="{{apiUrl}}/imagenes/cafe.jpg" class="d-block w-100 m-auto rounded">
39 </div> 34 </div>
40 <div class="carousel-item"> 35 <div class="carousel-item">
41 <img src="{{apiUrl}}/imagenes/descarga.jpg" class="d-block w-50 m-auto rounded"> 36 <img src="{{apiUrl}}/imagenes/cafe.jpg" class="d-block w-100 m-auto rounded">
42 </div> 37 </div>
43 </div> 38 </div>
44 </div> 39 </div>
45 </div> 40 </div>
46 41
47 <!-- ORDENAR --> 42 <!-- ORDENAR -->
48 <div class="card card-effect bg-white border-0 shadow rounded w-100 mt-4"> 43 <div class="card card-effect bg-white border-0 shadow rounded w-100 mt-4">
49 <div class="card-body text-left p-4"> 44 <div class="card-body text-left px-4 py-3">
50 <div class="row"> 45 <div class="row">
51 <div class="col-5"> 46 <div class="col-5">
52 <p class="h3 card-title">Ordenar</p> 47 <p class="h3 card-title">Ordenar</p>
53 </div> 48 </div>
54 <div class="col-7 p-0"> 49 <div class="col-7 p-0">
55 <img src="{{apiUrl}}/imagenes/primario.ordenar.png" class="icon-dim"> 50 <img src="{{apiUrl}}/imagenes/primario.ordenar.png" class="icon-dim">
56 </div> 51 </div>
57 </div> 52 </div>
58 <p class="h5 card-text text-muted font-weight-light">Arme su pedido y solo pase a retirar.</p> 53 <p class="h5 card-text text-muted font-weight-light">Arme su pedido y solo pase a retirar.</p>
59 </div> 54 </div>
60 <img 55 <img
61 class="card-img-bottom d-block w-100 mx-auto rounded" 56 class="card-img-bottom d-block w-100 mx-auto rounded"
62 src="{{apiUrl}}/imagenes/cafe.jpg"> 57 src="{{apiUrl}}/imagenes/cafe.jpg">
63 </div> 58 </div>
64 </div> 59 </div>
65 60
66 <div class="col-md-7 d-flex align-items-end flex-column"> 61 <div class="col-md-7 d-flex align-items-end flex-column mt-4 mt-md-0">
67 62
68 <!-- CARGAR PRODUCTOS --> 63 <!-- CARGAR PRODUCTOS -->
69 <ng-template #popTemplate> 64 <ng-template #popTemplate>
70 <app-popover 65 <app-popover
71 [popover]="popoverDirective" 66 [popover]="popoverDirective"
72 [popoverContent]="'que onda'" 67 [popoverContent]="popoverContent"
73 class="card bg-primary text-white rounded-sm border-0"> 68 class="fade-in text-white rounded-sm border-0">
74 </app-popover> 69 </app-popover>
75 </ng-template> 70 </ng-template>
76 <div 71 <div
77 placement="left" 72 placement="left"
78 triggers="" 73 triggers=""
79 [popover]="popTemplate" 74 [popover]="popTemplate"
80 class="w-100" 75 class="w-100"
81 #pop="bs-popover" 76 #pop="bs-popover">
82 (click)="open()">
83 <div class="card bg-white border-0 shadow rounded mb-auto"> 77 <div class="card bg-white border-0 shadow rounded mb-auto">
84 <div class="card-body text-left p-4"> 78 <div class="card-body text-left px-4 py-3">
85 <div class="row"> 79 <div class="row">
86 <div class="col-6"> 80 <div class="col-6">
87 <p class="h3 card-title">Cargar Productos</p> 81 <p class="h3 card-title">Cargar Productos</p>
88 </div> 82 </div>
89 <div class="col-6 p-0"> 83 <div class="col-6 p-0">
90 <img src="{{apiUrl}}/imagenes/escanear.png" class="icon-dim mb-2"> 84 <img src="{{apiUrl}}/imagenes/escanear.png" class="icon-dim mb-2">
91 </div> 85 </div>
92 </div> 86 </div>
93 <p class="h5 card-text text-muted font-weight-light"> 87 <p class="h5 card-text text-muted font-weight-light">
94 Coloque el código de<br> 88 Coloque el código de<br>
95 barras o QR frente al scanner. 89 barras o QR frente al scanner.
96 </p> 90 </p>
97 </div> 91 </div>
98 <div class="card bg-white border-0 w-75 mx-auto mb-4"> 92 <div class="row m-4">
99 <img class="card-img-top d-block w-50 mx-auto rounded" src="{{apiUrl}}/imagenes/descarga.jpg"> 93 <div class="col card bg-white shadow border-0 w-75 p-0 mx-auto rounded-sm">
100 <div class="card-body text-left p-2"> 94 <img
101 <p class="m-0 card-text text-muted">Galletas Oreo x117 grs Chocolate.</p> 95 *ngIf="!productoAcargar"
102 <p class="m-0 card-text text-muted">COD. 12121222</p> 96 class="card-img-top d-block w-100 mx-auto rounded-sm"
97 src="{{apiUrl}}/imagenes/escanner.jpg">
98 <div *ngIf="productoAcargar">
99 <img
100 class="card-img-top d-block w-100 mx-auto rounded-sm"
101 src="{{apiUrl}}/imagenes/cafe.jpg">
102
103 <div class="row justify-content-between m-3">
104 <div class="col-auto text-left px-1">
105 <p class="h6 font-weight-bold mb-0">{{productoAcargar.DetArt}}</p>
106 <p class="h6 mb-0"><small>{{productoAcargar.DetArt}}</small></p>
107 </div>
108 <div class="col-4 text-right my-auto">
109 <p class="h5 font-weight-bold mb-0">{{productoAcargar.PreVen | currency}}</p>
110 </div>
111 </div>
112 </div>
113 </div>
114 <!-- BOTONES -->
115 <div
116 class="col-5 pr-0"
117 *ngIf="productoAcargar && tienePromo">
118 <button
119 *ngIf="productoEsPromo"
120 type="button"
121 class="btn btn-light btn-block shadow-sm"
122 (click)="pop.show()">
123 <span class="pr-2">Personalizar</span>
124 <i class="fa fa-hand-o-up text-purple" aria-hidden="true"></i>
125 </button>
126 <button
127 *ngIf="!productoEsPromo"
128 type="button"
129 class="btn btn-primary btn-block shadow-sm"
130 (click)="pop.show()">
131 <span class="pr-2">Mostrar promociones</span>
132 <i class="fa fa-bullhorn fa-flip-horizontal" aria-hidden="true"></i>
133 </button>
134 <button type="button" class="btn btn-light btn-block shadow-sm my-3">
135 <span class="pr-2 font-weight-bold">Confirmar</span>
136 <i class="fa fa-check text-success" aria-hidden="true"></i>
137 </button>
138 <button
139 type="button"
140 class="btn btn-light btn-block shadow-sm"
141 (click)="deshacerCarga()">
142 <span class="pr-2">Deshacer</span>
143 <i class="fa fa-undo text-warning" aria-hidden="true"></i>
144 </button>
103 </div> 145 </div>
104 </div> 146 </div>
105 </div> 147 </div>
106 </div> 148 </div>
107 149
108 <!-- BUSCAR PRODUCTOS --> 150 <!-- BUSCAR PRODUCTOS -->
109 <div (click)="goPage('busqueda-productos')" 151 <div (click)="goPage('busqueda-productos')"
110 class="card card-effect bg-white border-0 shadow rounded w-100 mt-4"> 152 class="card card-effect bg-white border-0 shadow rounded w-100 mt-4">
111 <div class="card-body text-left p-4"> 153 <div class="card-body text-left px-4 py-3">
112 <div class="row"> 154 <div class="row">
113 <div class="col-6"> 155 <div class="col-6">
114 <p class="h3 card-title">Buscar Productos</p> 156 <p class="h3 card-title">Buscar Productos</p>
115 <p class="h5 card-text text-muted font-weight-light"> 157 <p class="h5 card-text text-muted font-weight-light">
116 Busque aquí los productos<br> 158 Busque aquí los productos<br>
117 que no tienen código </p> 159 que no tienen código </p>
118 </div> 160 </div>
119 <div class="col-6 p-0"> 161 <div class="col-6 p-0">
120 <img src="{{apiUrl}}/imagenes/primario.buscar.png" class="icon-dim mb-2"> 162 <img src="{{apiUrl}}/imagenes/primario.buscar.png" class="icon-dim mb-2">
121 </div> 163 </div>
122 </div> 164 </div>
123 165
124 </div> 166 </div>
125 </div> 167 </div>
126 168
127 </div> 169 </div>
src/app/components/inicio/inicio.component.ts
Diff comments   View file @ 597bbe4
1 import { Component, OnInit, ViewChild } from '@angular/core'; 1 import { Component, OnInit, ViewChild } from '@angular/core';
2 import { Router } from '@angular/router';
3 import { PopoverDirective } from 'ngx-bootstrap'; 2 import { PopoverDirective } from 'ngx-bootstrap';
4 import { appSettings } from 'src/etc/AppSettings'; 3 import { appSettings } from 'src/etc/AppSettings';
4 import { Producto } from 'src/app/wrappers/producto';
5 import { ProductoService } from 'src/app/services/producto.service';
6 import { Router } from '@angular/router';
7 import { Promocion } from 'src/app/wrappers/promocion';
5 8
6 9
7 @Component({ 10 @Component({
8 selector: 'app-inicio', 11 selector: 'app-inicio',
9 templateUrl: './inicio.component.html', 12 templateUrl: './inicio.component.html',
10 styleUrls: ['./inicio.component.scss'] 13 styleUrls: ['./inicio.component.scss']
11 }) 14 })
12 export class InicioComponent implements OnInit { 15 export class InicioComponent implements OnInit {
13 16
14 @ViewChild('pop', { static: false }) popoverDirective: PopoverDirective; 17 @ViewChild('pop', { static: false }) popoverDirective: PopoverDirective;
15 apiUrl : string = appSettings.apiUrl 18 private productoAcargar: Producto;
19 private tienePromo = false;
20 private productoEsPromo = false;
21
22 popoverContent: Promocion[] = []
23 apiUrl: string = appSettings.apiUrl
16 24
17 constructor(private router: Router) { } 25 constructor(
26 private router: Router,
27 private productoService: ProductoService) { }
18 28
19 ngOnInit() { 29 ngOnInit() {
30
31 this.productoAcargar = this.productoService.productoAcargar;
32 if (this.productoAcargar) {
33 var sector = this.productoAcargar.CodSec;
34 var codigo = this.productoAcargar.CodArt;
35 this.productoService.getPromocion(sector, codigo)
36 .subscribe((promociones: Promocion[]) => {
37
38 if (promociones.length === 0) {
39 //Si no tiene promociones la cargará al carrito despues de un tiempo
40 setTimeout(() => {
41 this.productoService.productos.push(this.productoAcargar);
42 this.productoAcargar = undefined;
43 this.tienePromo = false;
44 }, 2000)
45 } else {
46
47 this.popoverContent = promociones;
48 this.tienePromo = true;
49 this.popoverDirective.show();
50 }
51 }, error => { console.error(error); })
52 }
20 } 53 }
21 54
22 open() { 55 showPopover() {
23 56
24 this.popoverDirective.show(); 57 this.popoverDirective.show();
25 } 58 }
26 59
27 private goPage(pageUrl) { 60 private goPage(pageUrl) {
28 this.router.navigate([pageUrl]); 61 this.router.navigate([pageUrl]);
29 } 62 }
30 63
64 deshacerCarga() {
65
66 this.productoAcargar = undefined;
67 this.tienePromo = false;
68 this.popoverDirective.hide();
69 }
70
31 } 71 }
src/app/components/master/master.component.html
Diff comments   View file @ 597bbe4
1 <div class="row m-0 fade-in"> 1 <div class="row m-0 fade-in">
2 <div class="col-10 p-0"> 2 <div class="col-10 p-0 vh-100">
3 3
4 <!-- TOP HEADER --> 4 <!-- TOP HEADER -->
5 <app-header></app-header> 5 <app-header></app-header>
6 6
7 <router-outlet></router-outlet> 7 <router-outlet></router-outlet>
8 8
9 </div> 9 </div>
10 10
11 <!-- SIDEBAR --> 11 <!-- SIDEBAR -->
12 <app-sidebar class="col-2 col-md-2 vh-100 bg-primary-gradient"></app-sidebar> 12 <app-sidebar class="sidebar position-fixed float-right col-2 col-md-2 vh-100 bg-primary-gradient"></app-sidebar>
13 13
14 </div> 14 </div>
15 15
src/app/components/popover/popover.component.html
Diff comments   View file @ 597bbe4
1 <div class="card-body"> 1 <div class="card-body">
2 <div class="row"> 2 <div class="row">
3 <div class="col"> 3 <div class="col text-left">
4 <p class="h5 card-title"> 4 <p class="h5 card-title">
5 Este producto forma parte<br> 5 Este producto forma parte<br>
6 de Combos y Promociones 6 de Combos y Promociones
7 </p> 7 </p>
8 </div> 8 </div>
9 </div> 9 </div>
10 10
11 <div class="row"> 11 <div class="overflow-scroll popover-size pr-2">
12 <div class="col text-dark"> 12 <div
13 <div class="bg-white rounded-sm p-2 px-3"> 13 class="row my-2"
14 <div class="row justify-content-between"> 14 *ngFor="let promo of popoverContent">
15 <div class="col-auto"> 15 <div class="col text-dark">
16 <p class="h4 font-weight-bold mb-0">Promo 2x1</p> 16 <div class="bg-white rounded-sm p-2 px-3">
17 <p class="h6 mb-0">{{popoverContent}}</p> 17 <div class="row justify-content-between">
18 </div> 18 <div class="col-auto text-left">
19 <div class="col-4 text-right my-auto"> 19 <p class="h5 font-weight-bold mb-0">{{promo.nombrePromo}}</p>
20 <p class="h3 font-weight-bold mb-0">{{28 | currency}}</p> 20 <p
21 class="h6 mb-0"
22 *ngFor="let producto of promo.productos">
23 {{producto.DetArt}}
24 </p>
25 </div>
26 <div class="col-auto text-right align-self-end">
27 <p class="h4 font-weight-bold mb-0">{{28 | currency}}</p>
28 </div>
21 </div> 29 </div>
22 </div> 30 </div>
23 </div> 31 </div>
24 </div> 32 </div>
25 </div> 33 </div>
26 34
27 <div class="row mt-3 justify-content-end"> 35 <div class="row mt-3 justify-content-end">
28 <div class="col-auto"> 36 <div class="col-auto">
29 <button 37 <button
30 type="button" 38 type="button"
31 class="btn btn-sm btn-light shadow" 39 class="btn btn-sm btn-light shadow"
32 (click)="hide()"> 40 (click)="hide()">
33 <span class="pr-2">No, gracias</span> 41 <span class="pr-2">No, gracias</span>
34 <i class="fa fa-times text-danger" aria-hidden="true"></i> 42 <i class="fa fa-times text-danger" aria-hidden="true"></i>
35 </button> 43 </button>
36 </div> 44 </div>
37 </div> 45 </div>
38 46
39 </div> 47 </div>
40 48
src/app/components/popover/popover.component.scss
Diff comments   View file @ 597bbe4
1 .popover-size {
2 max-height: 430px !important;
3 min-height: 200px !important;
4 }
5
src/app/components/popover/popover.component.ts
Diff comments   View file @ 597bbe4
1 import { Component, OnInit, Input } from '@angular/core'; 1 import { Component, OnInit, Input } from '@angular/core';
2 import { PopoverDirective } from 'ngx-bootstrap/popover'; 2 import { PopoverDirective } from 'ngx-bootstrap/popover';
3 import { Promocion } from 'src/app/wrappers/promocion';
3 4
4 @Component({ 5 @Component({
5 selector: 'app-popover', 6 selector: 'app-popover',
6 templateUrl: './popover.component.html', 7 templateUrl: './popover.component.html',
7 styleUrls: ['./popover.component.scss'] 8 styleUrls: ['./popover.component.scss']
8 }) 9 })
9 export class PopoverComponent implements OnInit { 10 export class PopoverComponent implements OnInit {
10 11
11 @Input() popover: PopoverDirective; 12 @Input() popover: PopoverDirective;
12 @Input() popoverContent: string; 13 @Input() popoverContent: Promocion[];
13 14
14 constructor() { } 15 constructor() { }
15 16
16 ngOnInit() { 17 ngOnInit() {
17 } 18 }
18 19
19 hide() { 20 hide() {
20 this.popover.hide(); 21 this.popover.hide();
21 } 22 }
22 23
23 } 24 }
24 25
src/app/components/sidebar/sidebar.component.scss
Diff comments   View file @ 597bbe4
1 .card-description{ 1 .card-description{
2 font-size: 12px; 2 font-size: 12px;
3 } 3 }
4 4
5 app-sidebar {
6 background-color: red !important;
7 }
8 5
src/app/services/producto.service.ts
Diff comments   View file @ 597bbe4
1 import { Injectable } from '@angular/core'; 1 import { Injectable } from '@angular/core';
2 import { HttpClient } from '@angular/common/http'; 2 import { HttpClient } from '@angular/common/http';
3 import { Observable } from 'rxjs'; 3 import { Observable } from 'rxjs';
4 import { appSettings } from 'src/etc/AppSettings'; 4 import { appSettings } from 'src/etc/AppSettings';
5 import { Producto } from '../wrappers/producto'; 5 import { Producto } from '../wrappers/producto';
6 6
7 @Injectable({ 7 @Injectable({
8 providedIn: 'root' 8 providedIn: 'root'
9 }) 9 })
10 export class ProductoService { 10 export class ProductoService {
11 11
12 productos : Producto[] = []; 12 productos: Producto[] = [];
13 productoAcargar: Producto;
13 14
14 constructor(private http: HttpClient) { } 15 constructor(private http: HttpClient) { }
15 16
16 getAll(): Observable<any> { 17 getAll(): Observable<any> {
17 18
18 return this.http.get(`${appSettings.apiUrl}/articulos`); 19 return this.http.get(`${appSettings.apiUrl}/articulos`);
19 } 20 }
20 21
21 setProductos(producto : Producto){ 22 setProductos(producto: Producto) {
22 23
23 this.productos.push(producto); 24 this.productos.push(producto);
24 } 25 }
25 26
27 getPromocion(sector, codigo): Observable<any> {
28
29 var url = `${appSettings.apiUrl}/promociones/incluir-articulo/${sector}/${codigo}`;
30 return this.http.get(url);
31 }
32
26 } 33 }
27 34
src/app/wrappers/promocion.ts
Diff comments   View file @ 597bbe4
File was created 1 import { Producto } from './producto';
2
3 export interface Promocion {
4 idPromo: number;
5 nombrePromo: string;
6 productos: Producto[];
7 }
8
src/assets/scss/bootstrap-override.scss
Diff comments   View file @ 597bbe4
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";
4
5 $primary: #2872ae;
3 6
4 $theme-colors: ( 7 $theme-colors: (
5 primary: #2872ae, 8 primary: $primary,
6 light: white 9 light: white
7 ); 10 );
8 11
9 .popover { 12 .popover {
10 min-width: 470px !important; 13 transform: translate3d(-464px, 0, -34px) !important;
11 max-width: auto !important; 14 min-width: 200px !important;
15 max-width: 525px !important;
12 border: none !important; 16 border: none !important;
13 border-radius: 1.5rem !important; 17 border-radius: 1.5rem !important;
14 padding: 0 !important; 18 padding: 0 !important;
19 background-color: $primary !important;
15 .popover-body { 20 .popover-body {
16 padding: 0 !important; 21 padding: 0 !important;
17 } 22 }
18 } 23 }
19 24
20 .bs-popover-left .arrow::after, 25 .bs-popover-left .arrow::after,
21 .bs-popover-auto[x-placement^="left"] .arrow::after { 26 .bs-popover-auto[x-placement^="left"] .arrow::after {
22 border-left-color: #2872ae !important; // Any color here 27 border-left-color: $primary !important;
23 } 28 }
24 29
25 .bs-popover-right .arrow::after, 30 .bs-popover-right .arrow::after,
26 .bs-popover-auto[x-placement^="right"] .arrow::after { 31 .bs-popover-auto[x-placement^="right"] .arrow::after {
27 border-right-color: #2872ae !important; // Any color here 32 border-right-color: $primary !important;
28 } 33 }
29 34
30 .bs-popover-top .arrow::after, 35 .bs-popover-top .arrow::after,
31 .bs-popover-auto[x-placement^="top"] .arrow::after { 36 .bs-popover-auto[x-placement^="top"] .arrow::after {
32 border-top-color: #2872ae !important; // Any color here 37 border-top-color: $primary !important;
33 } 38 }
34 39
35 .bs-popover-bottom .arrow::after, 40 .bs-popover-bottom .arrow::after,
36 .bs-popover-auto[x-placement^="bottom"] .arrow::after { 41 .bs-popover-auto[x-placement^="bottom"] .arrow::after {
37 border-bottom-color: #2872ae !important; // Any color here 42 border-bottom-color: $primary !important;
38 } 43 }
39 44
40 .list-group-item.active { 45 .list-group-item.active {
41 background-color: #2872ae !important; 46 background-color: $primary !important;
42 border-color: #2872ae !important; 47 border-color: $primary !important;
43 } 48 }
44 49
45 @import "../../../node_modules/bootstrap/scss/bootstrap.scss"; 50 @import "../../../node_modules/bootstrap/scss/bootstrap";
46 51
No preview for this file type
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 4
4 html, 5 html,
5 body { 6 body {
6 background-color: #f0f0f0; 7 background-color: #f0f0f0;
7 overflow: hidden; 8 overflow: hidden;
8 } 9 }
9 10
10 .blur { 11 .blur {
11 filter: blur(10px); 12 filter: blur(10px);
12 -webkit-filter: blur(10px); 13 -webkit-filter: blur(10px);
13 } 14 }
14 15
15 .disable-user-select { 16 .disable-user-select {
16 -webkit-user-select: none; 17 -webkit-user-select: none;
17 -moz-user-select: none; 18 -moz-user-select: none;
18 -ms-user-select: none; 19 -ms-user-select: none;
19 user-select: none; 20 user-select: none;
20 } 21 }
21 22
22 .blue-gradient { 23 .blue-gradient {
23 background: linear-gradient(0deg, #8093a4, #fcfcfc); 24 background: linear-gradient(0deg, #ffffff00, $white);
24 } 25 }
25 26
26 .rounded { 27 .rounded {
27 border-radius: 1.5rem !important; 28 border-radius: 1.5rem !important;
28 } 29 }
29 30
30 .rounded-top-sm { 31 .rounded-top-sm {
31 border-top-left-radius: 0.75rem !important; 32 border-top-left-radius: 0.75rem !important;
32 border-top-right-radius: 0.75rem !important; 33 border-top-right-radius: 0.75rem !important;
33 } 34 }
34 35
35 .rounded-sm { 36 .rounded-sm {
36 border-radius: 0.75rem !important; 37 border-radius: 0.75rem !important;
37 } 38 }
38 39
39 .card-effect { 40 .card-effect {
40 &:active { 41 &:active {
41 background-color: #c9c9c9b3 !important; 42 background-color: #c9c9c9b3 !important;
42 transition: background-color 0.5s; 43 transition: background-color 0.5s;
43 } 44 }
44 &:focus { 45 &:focus {
45 background-color: #c9c9c9b3 !important; 46 background-color: #c9c9c9b3 !important;
46 transition: background-color 0.5s; 47 transition: background-color 0.5s;
47 } 48 }
48 } 49 }
49 50
50 .overflow-scroll { 51 .overflow-scroll {
51 overflow-y: auto !important; 52 overflow-y: auto !important;
52 overflow-x: hidden !important; 53 overflow-x: hidden !important;
53 &::-webkit-scrollbar { 54 &::-webkit-scrollbar {
54 width: 0.5em; 55 width: 0.5em;
55 } 56 }
56 &::-webkit-scrollbar-track { 57 &::-webkit-scrollbar-track {
57 border-radius: 10px; 58 border-radius: 10px;
58 box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4); 59 box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4);
59 -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4); 60 -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4);
61 background-color: $white;
60 } 62 }
61 &::-webkit-scrollbar-thumb { 63 &::-webkit-scrollbar-thumb {
64 box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.7);
62 -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.7); 65 -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.7);
63 outline: 1px solid slategrey; 66 outline: 1px solid slategrey;
64 border-radius: 10px; 67 border-radius: 10px;
65 height: 12px; 68 height: 12px;
66 &:active { 69 &:active {
67 box-shadow: inset 0 0 8px rgba(255, 0, 0, 0.9); 70 box-shadow: inset 0 0 8px rgba(255, 0, 0, 0.9);
68 -webkit-box-shadow: inset 0 0 8px rgba(255, 0, 0, 0.9); 71 -webkit-box-shadow: inset 0 0 8px rgba(255, 0, 0, 0.9);
69 } 72 }
70 } 73 }
71 &::-webkit-scrollbar-corner { 74 &::-webkit-scrollbar-corner {
72 border-radius: 10px; 75 border-radius: 10px;
73 } 76 }
74 } 77 }
75 78
76 .bg-gray { 79 .bg-gray {
77 background-color: #e6e6e6; 80 background-color: #e6e6e6;
78 } 81 }
79 82
80 .bg-primary-gradient { 83 .bg-primary-gradient {
81 background: linear-gradient(135deg, rgba(40, 112, 175, 1) 0%, rgba(0, 32, 66, 1) 100%); 84 background: linear-gradient(135deg, rgba(40, 112, 175, 1) 0%, rgba(0, 32, 66, 1) 100%);
82 } 85 }
83 86
84 .icon-dim { 87 .icon-dim {
85 height: 40px !important; 88 height: 40px !important;
86 width: auto !important; 89 width: auto !important;
87 background-color: white !important; 90 background-color: white !important;
88 } 91 }
89 92
90 .carousel-indicators li{ 93 .text-purple {
91 width: 10px !important; 94 color: $purple;
92 height: 10px !important; 95 }
93 border-radius: 15px !important; 96
94 border-top: black !important; 97 .vh-70 {
95 border-bottom: black !important; 98 min-height: auto !important;
99 max-height: 70vh !important;
100 }
101
102 .vh-60 {
103 min-height: auto !important;
104 max-height: 60vh !important;
105 }
106
107 .spinner-lg {
108 width: 3rem !important;
109 height: 3rem !important;
110 }
111
112 .sidebar {
113 right: 0;
96 } 114 }
97 115