Martin Macola / autoservicio

Download as
Browse Code ยป

Commit 597bbe4795b38c885f12e1222134dfefff217193

Authored by Eric Fernandez
2 parents d005793511 4e0dac3c3d
Exists in master

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
... ... @@ -11,7 +11,7 @@
11 11 </div>
12 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 16 <!-- FILTROS -->
17 17 <div class="col-sm-2 p-1">
... ... @@ -89,14 +89,14 @@
89 89 </div>
90 90 </div>
91 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 93 <div
94 94 class="col-4 p-2"
95 95 *ngFor="let producto of auxProductos">
96 96 <div
97 97 class="card-effect bg-white rounded-sm shadow border-0"
98 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 100 <div class="p-2">
101 101 <p class="h6 text-left m-0">{{producto.DetArt}}</p>
102 102 <div class="row justify-content-between m-0">
... ... @@ -112,7 +112,12 @@
112 112 </div>
113 113 <div *ngIf="producto.showCargarProducto" class="row mt-2">
114 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 121 </div>
117 122 </div>
118 123 </div>
src/app/components/busqueda-productos/busqueda-productos.component.scss
Diff comments   View file @ 597bbe4
... ... @@ -7,13 +7,3 @@
7 7 color: #aaa;
8 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   -}
src/app/components/busqueda-productos/busqueda-productos.component.ts
Diff comments   View file @ 597bbe4
... ... @@ -2,6 +2,7 @@ import { Component, OnInit, APP_BOOTSTRAP_LISTENER } from &#39;@angular/core&#39;;
2 2 import { ProductoService } from 'src/app/services/producto.service';
3 3 import { Producto } from 'src/app/wrappers/producto';
4 4 import { appSettings } from 'src/etc/AppSettings';
  5 +import { Router } from '@angular/router';
5 6  
6 7 @Component({
7 8 selector: 'app-busqueda-productos',
... ... @@ -18,10 +19,13 @@ export class BusquedaProductosComponent implements OnInit {
18 19 private apiUrl: string = appSettings.apiUrl;
19 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 26 ngOnInit() {
24   -
  27 +
  28 + this.productoService.productoAcargar = undefined;
25 29 this.productoService.getAll()
26 30 .subscribe((data: Producto[]) => {
27 31  
... ... @@ -45,7 +49,7 @@ export class BusquedaProductosComponent implements OnInit {
45 49 this.productoService.productos.push(producto);
46 50 }
47 51  
48   - mostrarBotonCargar(producto: Producto) {
  52 + private mostrarBotonCargar(producto: Producto) {
49 53  
50 54 for (let i = 0; i < this.auxProductos.length; i++) {
51 55 if (this.auxProductos[i].id !== producto.id)
... ... @@ -54,6 +58,12 @@ export class BusquedaProductosComponent implements OnInit {
54 58 }
55 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 69 enum Categorias {
src/app/components/confirmacion-carrito/confirmacion-carrito.component.html
Diff comments   View file @ 597bbe4
... ... @@ -8,7 +8,7 @@
8 8 </div>
9 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 12 <div class="col-4">
13 13 <h1>Mi Compra <i class="fa fa-shopping-cart "></i></h1>
14 14 </div>
src/app/components/inicio/inicio.component.html
Diff comments   View file @ 597bbe4
... ... @@ -8,12 +8,12 @@
8 8 </div>
9 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 12 <div class="col-md-5 d-flex align-items-end flex-column">
13 13  
14 14 <!-- PROMOCIONES -->
15 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 17 <div class="row">
18 18 <div class="col-7">
19 19 <p class="h3 card-title">Promociones</p>
... ... @@ -24,21 +24,16 @@
24 24 </div>
25 25 <p class="h5 card-text text-muted font-weight-light">Conozca las ofertas del momento.</p>
26 26 </div>
27   - <div id="carouselIndicators" class="carousel slide mb-4" 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>
  27 + <div id="carouselIndicators" class="carousel slide" data-ride="carousel">
33 28 <div class="carousel-inner">
34 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 31 </div>
37 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 34 </div>
40 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 37 </div>
43 38 </div>
44 39 </div>
... ... @@ -46,7 +41,7 @@
46 41  
47 42 <!-- ORDENAR -->
48 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 45 <div class="row">
51 46 <div class="col-5">
52 47 <p class="h3 card-title">Ordenar</p>
... ... @@ -63,14 +58,14 @@
63 58 </div>
64 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 63 <!-- CARGAR PRODUCTOS -->
69 64 <ng-template #popTemplate>
70 65 <app-popover
71 66 [popover]="popoverDirective"
72   - [popoverContent]="'que onda'"
73   - class="card bg-primary text-white rounded-sm border-0">
  67 + [popoverContent]="popoverContent"
  68 + class="fade-in text-white rounded-sm border-0">
74 69 </app-popover>
75 70 </ng-template>
76 71 <div
... ... @@ -78,10 +73,9 @@
78 73 triggers=""
79 74 [popover]="popTemplate"
80 75 class="w-100"
81   - #pop="bs-popover"
82   - (click)="open()">
  76 + #pop="bs-popover">
83 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 79 <div class="row">
86 80 <div class="col-6">
87 81 <p class="h3 card-title">Cargar Productos</p>
... ... @@ -95,11 +89,59 @@
95 89 barras o QR frente al scanner.
96 90 </p>
97 91 </div>
98   - <div class="card bg-white border-0 w-75 mx-auto mb-4">
99   - <img class="card-img-top d-block w-50 mx-auto rounded" src="{{apiUrl}}/imagenes/descarga.jpg">
100   - <div class="card-body text-left p-2">
101   - <p class="m-0 card-text text-muted">Galletas Oreo x117 grs Chocolate.</p>
102   - <p class="m-0 card-text text-muted">COD. 12121222</p>
  92 + <div class="row m-4">
  93 + <div class="col card bg-white shadow border-0 w-75 p-0 mx-auto rounded-sm">
  94 + <img
  95 + *ngIf="!productoAcargar"
  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 145 </div>
104 146 </div>
105 147 </div>
... ... @@ -108,7 +150,7 @@
108 150 <!-- BUSCAR PRODUCTOS -->
109 151 <div (click)="goPage('busqueda-productos')"
110 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 154 <div class="row">
113 155 <div class="col-6">
114 156 <p class="h3 card-title">Buscar Productos</p>
src/app/components/inicio/inicio.component.ts
Diff comments   View file @ 597bbe4
1 1 import { Component, OnInit, ViewChild } from '@angular/core';
2   -import { Router } from '@angular/router';
3 2 import { PopoverDirective } from 'ngx-bootstrap';
4 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 10 @Component({
... ... @@ -12,14 +15,44 @@ import { appSettings } from &#39;src/etc/AppSettings&#39;;
12 15 export class InicioComponent implements OnInit {
13 16  
14 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 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 57 this.popoverDirective.show();
25 58 }
... ... @@ -28,4 +61,11 @@ export class InicioComponent implements OnInit {
28 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 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 4 <!-- TOP HEADER -->
5 5 <app-header></app-header>
... ... @@ -9,6 +9,6 @@
9 9 </div>
10 10  
11 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 14 </div>
src/app/components/popover/popover.component.html
Diff comments   View file @ 597bbe4
1 1 <div class="card-body">
2 2 <div class="row">
3   - <div class="col">
  3 + <div class="col text-left">
4 4 <p class="h5 card-title">
5 5 Este producto forma parte<br>
6 6 de Combos y Promociones
... ... @@ -8,16 +8,24 @@
8 8 </div>
9 9 </div>
10 10  
11   - <div class="row">
12   - <div class="col text-dark">
13   - <div class="bg-white rounded-sm p-2 px-3">
14   - <div class="row justify-content-between">
15   - <div class="col-auto">
16   - <p class="h4 font-weight-bold mb-0">Promo 2x1</p>
17   - <p class="h6 mb-0">{{popoverContent}}</p>
18   - </div>
19   - <div class="col-4 text-right my-auto">
20   - <p class="h3 font-weight-bold mb-0">{{28 | currency}}</p>
  11 + <div class="overflow-scroll popover-size pr-2">
  12 + <div
  13 + class="row my-2"
  14 + *ngFor="let promo of popoverContent">
  15 + <div class="col text-dark">
  16 + <div class="bg-white rounded-sm p-2 px-3">
  17 + <div class="row justify-content-between">
  18 + <div class="col-auto text-left">
  19 + <p class="h5 font-weight-bold mb-0">{{promo.nombrePromo}}</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 29 </div>
22 30 </div>
23 31 </div>
src/app/components/popover/popover.component.scss
Diff comments   View file @ 597bbe4
... ... @@ -0,0 +1,4 @@
  1 +.popover-size {
  2 + max-height: 430px !important;
  3 + min-height: 200px !important;
  4 +}
src/app/components/popover/popover.component.ts
Diff comments   View file @ 597bbe4
1 1 import { Component, OnInit, Input } from '@angular/core';
2 2 import { PopoverDirective } from 'ngx-bootstrap/popover';
  3 +import { Promocion } from 'src/app/wrappers/promocion';
3 4  
4 5 @Component({
5 6 selector: 'app-popover',
... ... @@ -9,7 +10,7 @@ import { PopoverDirective } from &#39;ngx-bootstrap/popover&#39;;
9 10 export class PopoverComponent implements OnInit {
10 11  
11 12 @Input() popover: PopoverDirective;
12   - @Input() popoverContent: string;
  13 + @Input() popoverContent: Promocion[];
13 14  
14 15 constructor() { }
15 16  
src/app/components/sidebar/sidebar.component.scss
Diff comments   View file @ 597bbe4
... ... @@ -2,6 +2,3 @@
2 2 font-size: 12px;
3 3 }
4 4  
5   -app-sidebar {
6   - background-color: red !important;
7   -}
src/app/services/producto.service.ts
Diff comments   View file @ 597bbe4
... ... @@ -9,7 +9,8 @@ import { Producto } from &#39;../wrappers/producto&#39;;
9 9 })
10 10 export class ProductoService {
11 11  
12   - productos : Producto[] = [];
  12 + productos: Producto[] = [];
  13 + productoAcargar: Producto;
13 14  
14 15 constructor(private http: HttpClient) { }
15 16  
... ... @@ -18,9 +19,15 @@ export class ProductoService {
18 19 return this.http.get(`${appSettings.apiUrl}/articulos`);
19 20 }
20 21  
21   - setProductos(producto : Producto){
22   -
  22 + setProductos(producto: Producto) {
  23 +
23 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 }
src/app/wrappers/promocion.ts
Diff comments   View file @ 597bbe4
... ... @@ -0,0 +1,7 @@
  1 +import { Producto } from './producto';
  2 +
  3 +export interface Promocion {
  4 + idPromo: number;
  5 + nombrePromo: string;
  6 + productos: Producto[];
  7 +}
src/assets/scss/bootstrap-override.scss
Diff comments   View file @ 597bbe4
1 1 @import "../../../node_modules/bootstrap/scss/functions";
2 2 @import "../../../node_modules/bootstrap/scss/variables";
  3 +@import "../../../node_modules/bootstrap/scss/mixins";
  4 +
  5 +$primary: #2872ae;
3 6  
4 7 $theme-colors: (
5   - primary: #2872ae,
  8 + primary: $primary,
6 9 light: white
7 10 );
8 11  
9 12 .popover {
10   - min-width: 470px !important;
11   - max-width: auto !important;
  13 + transform: translate3d(-464px, 0, -34px) !important;
  14 + min-width: 200px !important;
  15 + max-width: 525px !important;
12 16 border: none !important;
13 17 border-radius: 1.5rem !important;
14 18 padding: 0 !important;
  19 + background-color: $primary !important;
15 20 .popover-body {
16 21 padding: 0 !important;
17 22 }
... ... @@ -19,27 +24,27 @@ $theme-colors: (
19 24  
20 25 .bs-popover-left .arrow::after,
21 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 30 .bs-popover-right .arrow::after,
26 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 35 .bs-popover-top .arrow::after,
31 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 40 .bs-popover-bottom .arrow::after,
36 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 45 .list-group-item.active {
41   - background-color: #2872ae !important;
42   - border-color: #2872ae !important;
  46 + background-color: $primary !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";
No preview for this file type
1 1 @import "./assets/scss/animation.scss";
2 2 @import "./assets/scss/bootstrap-override.scss";
  3 +@import "../node_modules/bootstrap/scss/_variables.scss";
3 4  
4 5 html,
5 6 body {
... ... @@ -20,7 +21,7 @@ body {
20 21 }
21 22  
22 23 .blue-gradient {
23   - background: linear-gradient(0deg, #8093a4, #fcfcfc);
  24 + background: linear-gradient(0deg, #ffffff00, $white);
24 25 }
25 26  
26 27 .rounded {
... ... @@ -57,8 +58,10 @@ body {
57 58 border-radius: 10px;
58 59 box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4);
59 60 -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4);
  61 + background-color: $white;
60 62 }
61 63 &::-webkit-scrollbar-thumb {
  64 + box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.7);
62 65 -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.7);
63 66 outline: 1px solid slategrey;
64 67 border-radius: 10px;
... ... @@ -87,10 +90,25 @@ body {
87 90 background-color: white !important;
88 91 }
89 92  
90   -.carousel-indicators li{
91   - width: 10px !important;
92   - height: 10px !important;
93   - border-radius: 15px !important;
94   - border-top: black !important;
95   - border-bottom: black !important;
  93 +.text-purple {
  94 + color: $purple;
  95 +}
  96 +
  97 +.vh-70 {
  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 }