Martin Macola / autoservicio

Download as
Browse Code »

Commit 1671dbe8c7f6c25b9ded80adbbf2c8bb36bf53dc

Authored by =
2 parents 78c5c6a7ea 5aee6bac60
Exists in master

Merge branch 'master' of http://git.focasoftware.com/angular/autoservicio

Showing 11 changed files   Show diff stats
src/app/app-routing.module.ts
Diff comments   View file @ 1671dbe
1 import { NgModule } from '@angular/core'; 1 import { NgModule } from '@angular/core';
2 import { Routes, RouterModule } from '@angular/router'; 2 import { Routes, RouterModule } from '@angular/router';
3 import { HomeComponent } from './components/home/home.component'; 3 import { HomeComponent } from './components/home/home.component';
4 import { InicioComponent } from './components/inicio/inicio.component'; 4 import { InicioComponent } from './components/inicio/inicio.component';
5 import { BusquedaProductosComponent } from './components/busqueda-productos/busqueda-productos.component'; 5 import { BusquedaProductosComponent } from './components/busqueda-productos/busqueda-productos.component';
6 import { ConfirmacionCarritoComponent } from './components/confirmacion-carrito/confirmacion-carrito.component';
6 7
7 const routes: Routes = [ 8 const routes: Routes = [
8 { path: 'home', component: HomeComponent }, 9 { path: 'home', component: HomeComponent },
9 { path: 'inicio', component: InicioComponent }, 10 { path: 'inicio', component: InicioComponent },
10 { path: 'busqueda-productos', component: BusquedaProductosComponent }, 11 { path: 'busqueda-productos', component: BusquedaProductosComponent },
12 { path: 'confirmacion-carrito', component: ConfirmacionCarritoComponent },
11 { path: '**', redirectTo: '/home', pathMatch: 'full' }, 13 { path: '**', redirectTo: '/home', pathMatch: 'full' },
12 ]; 14 ];
13 15
14 @NgModule({ 16 @NgModule({
15 imports: [RouterModule.forRoot(routes)], 17 imports: [RouterModule.forRoot(routes)],
16 exports: [RouterModule] 18 exports: [RouterModule]
17 }) 19 })
20
18 export class AppRoutingModule { } 21 export class AppRoutingModule { }
19 22
src/app/app.module.ts
Diff comments   View file @ 1671dbe
1 //#region MODULES 1 //#region MODULES
2 import { BrowserModule } from '@angular/platform-browser'; 2 import { BrowserModule } from '@angular/platform-browser';
3 import { NgModule } from '@angular/core'; 3 import { NgModule } from '@angular/core';
4 import { AppRoutingModule } from './app-routing.module'; 4 import { AppRoutingModule } from './app-routing.module';
5 import { HttpClientModule } from '@angular/common/http'; 5 import { HttpClientModule } from '@angular/common/http';
6 //#endregion 6 //#endregion
7 7
8 //#region COMPONENTS 8 //#region COMPONENTS
9 import { AppComponent } from './app.component'; 9 import { AppComponent } from './app.component';
10 import { HeaderComponent } from './components/header/header.component'; 10 import { HeaderComponent } from './components/header/header.component';
11 import { SidebarComponent } from './components/sidebar/sidebar.component'; 11 import { SidebarComponent } from './components/sidebar/sidebar.component';
12 import { CarouselComponent } from './components/carousel/carousel.component'; 12 import { CarouselComponent } from './components/carousel/carousel.component';
13 import { HomeComponent } from './components/home/home.component'; 13 import { HomeComponent } from './components/home/home.component';
14 import { InicioComponent } from './components/inicio/inicio.component'; 14 import { InicioComponent } from './components/inicio/inicio.component';
15 import { BusquedaProductosComponent } from './components/busqueda-productos/busqueda-productos.component'; 15 import { BusquedaProductosComponent } from './components/busqueda-productos/busqueda-productos.component';
16 import { ConfirmacionCarritoComponent } from './components/confirmacion-carrito/confirmacion-carrito.component';
16 //#endregion 17 //#endregion
17 18
18 @NgModule({ 19 @NgModule({
19 declarations: [ 20 declarations: [
20 AppComponent, 21 AppComponent,
21 HeaderComponent, 22 HeaderComponent,
22 SidebarComponent, 23 SidebarComponent,
23 CarouselComponent, 24 CarouselComponent,
24 HomeComponent, 25 HomeComponent,
25 InicioComponent, 26 InicioComponent,
26 BusquedaProductosComponent 27 BusquedaProductosComponent,
28 ConfirmacionCarritoComponent
27 ], 29 ],
28 imports: [ 30 imports: [
29 BrowserModule, 31 BrowserModule,
30 AppRoutingModule, 32 AppRoutingModule,
31 HttpClientModule 33 HttpClientModule
32 ], 34 ],
33 providers: [], 35 providers: [],
34 bootstrap: [AppComponent] 36 bootstrap: [AppComponent]
35 }) 37 })
36 export class AppModule { } 38 export class AppModule { }
37 39
src/app/components/busqueda-productos/busqueda-productos.component.html
Diff comments   View file @ 1671dbe
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">
3 <!-- TOP HEADER --> 3 <!-- TOP HEADER -->
4 <app-header></app-header> 4 <app-header></app-header>
5 5
6 <!-- NOMBRE DE SECCION --> 6 <!-- NOMBRE DE SECCION -->
7 <div class="row m-0"> 7 <div class="row m-0">
8 <div class="col-12 p-0"> 8 <div class="col-12 p-0">
9 <p class="h5 py-1 bg-light text-muted text-center">Búsqueda</p> 9 <p class="h5 py-1 bg-light text-muted text-center">
10 Búsqueda
11 <i class="fa fa-search"></i>
12 </p>
10 </div> 13 </div>
11 </div> 14 </div>
12 15
13 <div class="row m-4 d-flex align-items-center"> 16 <div class="row m-4 disable-user-select">
14 17
15 <div class="col-sm-7"> 18 <!-- FILTROS -->
16 <!-- SEARCH INPUT --> 19 <div class="col-sm-2">
17 <div class="form-group search"> 20 <div class="text-center">
18 <span class="fa fa-search form-control-lg form-control-search pl-3"></span> 21 <p class="font-weight-bold text-muted border-bottom pb-2">Buscar por Categoría</p>
19 <input
20 type="text"
21 class="form-control form-control-lg rounded-pill px-5"
22 placeholder="Búsqueda productos">
23 </div> 22 </div>
23 <ul class="list-group">
24 <li class="list-group-item list-group-item-action my-1 py-2 h6">
25 Combos y Promociones
26 </li>
27 <li
28 class="list-group-item list-group-item-action my-1 p-2 h6 shadow-sm font-weight-bold">
29 Todos
30 </li>
31 <li
32 class="list-group-item list-group-item-action my-1 p-2 h6 shadow-sm">
33 Bebidas
34 </li>
35 <li
36 class="list-group-item list-group-item-action my-1 p-2 h6 shadow-sm">
37 Sandwichería
38 </li>
39 <li
40 class="list-group-item list-group-item-action my-1 p-2 h6 shadow-sm">
41 Panaderia
42 </li>
43 <li
44 class="list-group-item list-group-item-action my-1 p-2 h6 shadow-sm">
45 Golosinas
46 </li>
47 <li
48 class="list-group-item list-group-item-action my-1 p-2 h6 shadow-sm">
49 Tabaqueria
50 </li>
51 </ul>
52 </div>
24 53
25 <div class="row pr-3 vh-50 overflow-scroll"> 54 <!-- SEARCH INPUT -->
55 <div class="col-sm-10">
56
57 <div class="form-group row search">
58 <div class="col-sm-10">
59 <span class="fa fa-search form-control-lg form-control-search pl-3"></span>
60 <input
61 type="text"
62 class="form-control form-control-lg shadow-sm rounded-pill px-5"
63 placeholder="Búsqueda productos">
64 </div>
65 <!-- BOTON VOLVER -->
66 <div class="col-sm-2">
67 <button
68 type="button"
69 class="btn btn-light btn-lg shadow-sm"
70 [routerLink]="['/inicio']">
71 <span class="font-weight-normal h6">Volver&nbsp;&nbsp;</span>
72 <i class="fa fa-undo text-warning" aria-hidden="true"></i>
73 </button>
74 </div>
75 </div>
76
77 <!-- LISTA DE PRODUCTOS -->
78 <div class="row pr-3 vh-50 overflow-scroll disable-user-select">
26 <div 79 <div
27 class="col-4 p-2" 80 class="col-4 p-2"
28 *ngFor="let producto of productos"> 81 *ngFor="let producto of productos">
29 <div class="card card-effect bg-white rounded-sm shadow border-0"> 82 <div class="card card-effect bg-white rounded-sm shadow border-0">
30 <img src="../../../assets/img/descarga.jpg" class="card-img-top w-75 m-auto"> 83 <img src="../../../assets/img/descarga.jpg" class="card-img-top w-75 m-auto">
31 <div class="card-body"> 84 <div class="card-body p-2">
32 <p class="h5 text-left m-0">{{producto.variable}}</p> 85 <p class="h6 text-left m-0">{{producto.DetArt}}</p>
33 <div class="text-left"> 86 <div class="row justify-content-between m-0">
34 <p class="m-0"><small>ASDASDSADASDSA</small></p> 87 <div class="col-12 p-0">
35 <p class="m-0"><small>COD. 1222</small></p> 88 <div class="text-left">
89 <p class="m-0 h6"><small>{{producto.DetArt}}</small></p>
90 <p class="m-0 h6"><small>COD. {{producto.CodRub}}</small></p>
91 </div>
92 </div>
93 <div class="col-12 my-auto pt-2 pr-2 p-0">
94 <p class="text-right m-0 h6">{{producto.PreVen | currency}}</p>
95 </div>
36 </div> 96 </div>
37 </div> 97 </div>
38 </div> 98 </div>
39
40 </div> 99 </div>
41 </div> 100 </div>
42
43 </div> 101 </div>
102
44 </div> 103 </div>
45 104
src/app/components/confirmacion-carrito/confirmacion-carrito.component.html
Diff comments   View file @ 1671dbe
File was created 1 <app-header></app-header>
2 <div class="row">
3 <div class="col-10">
4
5 <!-- NOMBRE DE SECCION -->
6 <div class="row m-0">
7 <div class="col-12 p-0">
8 <p class="h5 py-1 bg-light text-muted text-center">Pago <i class="fa fa-usd"></i></p>
9 </div>
10 </div>
11
12 <div class="row m-4 d-flex align-items-center">
13 <div class="col-4">
14 <h1>Mi Compra <i class="fa fa-shopping-cart "></i></h1>
15 </div>
16 <div class="col-8">
17 <h2>¿Desea finalizar su compra?</h2>
18 <h3>Por favor, controle y confirme su compra.</h3>
19 </div>
20 <div class="col-sm-7">
21
22 <div class="row pr-3 vh-50 overflow-scroll">
23 <div
24 class="col-4 p-2"
25 *ngFor="let producto of productos">
26 <div class="card card-effect bg-white rounded-sm shadow border-0">
27 <img src="../../../assets/img/descarga.jpg" class="card-img-top w-75 m-auto">
28 <div class="card-body">
29 <p class="h5 text-left m-0">{{producto.variable}}</p>
30 <div class="text-left">
31 <p class="m-0"><small>ASDASDSADASDSA</small></p>
32 <p class="m-0"><small>COD. 1222</small></p>
33 <p class="m-0"><strong>$ 563</strong></p>
34 </div>
35 </div>
36 </div>
37 </div>
38 </div>
39 </div>
40 <div class="col-sm-5">
41 <h3>TOTAL: $553</h3>
42 </div>
43 </div>
44
45 <!-- SIDEBAR -->
46 </div>
47 <app-sidebar class="col-3 col-md-2 vh-100 bg-dark text-white"></app-sidebar>
48 </div>
49
src/app/components/confirmacion-carrito/confirmacion-carrito.component.scss
Diff comments   View file @ 1671dbe
src/app/components/confirmacion-carrito/confirmacion-carrito.component.spec.ts
Diff comments   View file @ 1671dbe
File was created 1 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2
3 import { ConfirmacionCarritoComponent } from './confirmacion-carrito.component';
4
5 describe('ConfirmacionCarritoComponent', () => {
6 let component: ConfirmacionCarritoComponent;
7 let fixture: ComponentFixture<ConfirmacionCarritoComponent>;
8
9 beforeEach(async(() => {
10 TestBed.configureTestingModule({
11 declarations: [ ConfirmacionCarritoComponent ]
12 })
13 .compileComponents();
14 }));
15
16 beforeEach(() => {
17 fixture = TestBed.createComponent(ConfirmacionCarritoComponent);
18 component = fixture.componentInstance;
19 fixture.detectChanges();
20 });
21
22 it('should create', () => {
23 expect(component).toBeTruthy();
24 });
25 });
26
src/app/components/confirmacion-carrito/confirmacion-carrito.component.ts
Diff comments   View file @ 1671dbe
File was created 1 import { Component, OnInit } from '@angular/core';
2
3 @Component({
4 selector: 'app-confirmacion-carrito',
5 templateUrl: './confirmacion-carrito.component.html',
6 styleUrls: ['./confirmacion-carrito.component.scss']
7 })
8 export class ConfirmacionCarritoComponent implements OnInit {
9
10 productos = [{}, {}, {}]
11 constructor() { }
12
13 ngOnInit() {
14 }
15
16 }
17
src/app/components/inicio/inicio.component.html
Diff comments   View file @ 1671dbe
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">
3 <!-- TOP HEADER --> 3 <!-- TOP HEADER -->
4 <app-header></app-header> 4 <app-header></app-header>
5 5
6 <!-- NOMBRE DE SECCION --> 6 <!-- NOMBRE DE SECCION -->
7 <div class="row m-0"> 7 <div class="row m-0">
8 <div class="col-12 p-0"> 8 <div class="col-12 p-0">
9 <p class="h5 py-1 bg-light text-muted text-center">Inicio</p> 9 <p class="h5 py-1 bg-light text-muted text-center">Inicio</p>
10 </div> 10 </div>
11 </div> 11 </div>
12 12
13 <div class="row m-4 d-flex align-items-center"> 13 <div class="row m-4 d-flex align-items-center disable-user-select">
14 <div class="col-md-5 d-flex align-items-end flex-column"> 14 <div class="col-md-5 d-flex align-items-end flex-column">
15 15
16 <!-- PROMOCIONES --> 16 <!-- PROMOCIONES -->
17 <div class="card card-effect bg-white border-0 shadow rounded w-100 mb-auto"> 17 <div class="card card-effect bg-white border-0 shadow rounded w-100 mb-auto">
18 <div class="card-body text-left p-4"> 18 <div class="card-body text-left p-4">
19 <p class="h3 card-title">Promociones</p> 19 <p class="h3 card-title">Promociones</p>
20 <p class="h5 card-text text-muted font-weight-light">Conozca las ofertas del momento.</p> 20 <p class="h5 card-text text-muted font-weight-light">Conozca las ofertas del momento.</p>
21 </div> 21 </div>
22 <div id="carouselIndicators" class="carousel slide mb-4" data-ride="carousel"> 22 <div id="carouselIndicators" class="carousel slide mb-4" data-ride="carousel">
23 <ol class="carousel-indicators m-0"> 23 <ol class="carousel-indicators m-0">
24 <li data-target="#carouselIndicators" data-slide-to="0" class="bg-dark active"></li> 24 <li data-target="#carouselIndicators" data-slide-to="0" class="bg-dark active"></li>
25 <li data-target="#carouselIndicators" data-slide-to="1" class="bg-dark"></li> 25 <li data-target="#carouselIndicators" data-slide-to="1" class="bg-dark"></li>
26 <li data-target="#carouselIndicators" data-slide-to="2" class="bg-dark"></li> 26 <li data-target="#carouselIndicators" data-slide-to="2" class="bg-dark"></li>
27 </ol> 27 </ol>
28 <div class="carousel-inner"> 28 <div class="carousel-inner">
29 <div class="carousel-item active"> 29 <div class="carousel-item active">
30 <img src="../../assets/img/descarga.jpg" class="d-block w-50 m-auto rounded" alt="..."> 30 <img src="../../assets/img/descarga.jpg" class="d-block w-50 m-auto rounded" alt="...">
31 </div> 31 </div>
32 <div class="carousel-item"> 32 <div class="carousel-item">
33 <img src="../../assets/img/descarga.jpg" class="d-block w-50 m-auto rounded" alt="..."> 33 <img src="../../assets/img/descarga.jpg" class="d-block w-50 m-auto rounded" alt="...">
34 </div> 34 </div>
35 <div class="carousel-item"> 35 <div class="carousel-item">
36 <img src="../../assets/img/descarga.jpg" class="d-block w-50 m-auto rounded" alt="..."> 36 <img src="../../assets/img/descarga.jpg" class="d-block w-50 m-auto rounded" alt="...">
37 </div> 37 </div>
38 </div> 38 </div>
39 </div> 39 </div>
40 </div> 40 </div>
41 <!-- TOOL TIp --> 41 <!-- TOOL TIp -->
42 42
43 <div class="popover left bs-example-popover"> 43 <div class="popover left bs-example-popover">
44 <div class="arrow"></div> 44 <div class="arrow"></div>
45 <h3 class="popover-title">Popover left</h3> 45 <h3 class="popover-title">Popover left</h3>
46 <div class="popover-content"> 46 <div class="popover-content">
47 <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p> 47 <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
48 </div> 48 </div>
49 </div> 49 </div>
50 50
51 51
52 <!-- ORDENAR --> 52 <!-- ORDENAR -->
53 <div class="card card-effect bg-white border-0 shadow rounded w-100 mt-4"> 53 <div class="card card-effect bg-white border-0 shadow rounded w-100 mt-4">
54 <div class="card-body text-left p-4"> 54 <div class="card-body text-left p-4">
55 <p class="h3 card-title">Ordenar</p> 55 <p class="h3 card-title">Ordenar</p>
56 <p class="h5 card-text text-muted font-weight-light">Arme su pedido y solo pase a retirar.</p> 56 <p class="h5 card-text text-muted font-weight-light">Arme su pedido y solo pase a retirar.</p>
57 </div> 57 </div>
58 <img class="card-img-bottom d-block w-50 mx-auto mb-4 rounded" src="../../assets/img/descarga.jpg"> 58 <img class="card-img-bottom d-block w-50 mx-auto mb-4 rounded" src="../../assets/img/descarga.jpg">
59 </div> 59 </div>
60 60
61 </div> 61 </div>
62 62
63 <div class="col-md-7 d-flex align-items-end flex-column"> 63 <div class="col-md-7 d-flex align-items-end flex-column">
64 64
65 <!-- CARGAR PRODUCTOS --> 65 <!-- CARGAR PRODUCTOS -->
66 <div class="card card-effect bg-white border-0 shadow rounded w-100 mb-auto"> 66 <div class="card card-effect bg-white border-0 shadow rounded w-100 mb-auto">
67 <div class="card-body text-left p-4"> 67 <div class="card-body text-left p-4">
68 <p class="h3 card-title">Cargar Productos</p> 68 <p class="h3 card-title">Cargar Productos</p>
69 <p class="h5 card-text text-muted font-weight-light"> 69 <p class="h5 card-text text-muted font-weight-light">
70 Coloque el código de<br> 70 Coloque el código de<br>
71 barras o QR frente al scanner. 71 barras o QR frente al scanner.
72 </p> 72 </p>
73 </div> 73 </div>
74 <div class="card bg-white border-0 w-75 mx-auto mb-4"> 74 <div class="card bg-white border-0 w-75 mx-auto mb-4">
75 <img class="card-img-top d-block w-50 mx-auto rounded" src="../../assets/img/descarga.jpg"> 75 <img class="card-img-top d-block w-50 mx-auto rounded" src="../../assets/img/descarga.jpg">
76 <div class="card-body text-left p-2"> 76 <div class="card-body text-left p-2">
77 <p class="m-0 card-text text-muted">Galletas Oreo x117 grs Chocolate.</p> 77 <p class="m-0 card-text text-muted">Galletas Oreo x117 grs Chocolate.</p>
78 <p class="m-0 card-text text-muted">COD. 12121222</p> 78 <p class="m-0 card-text text-muted">COD. 12121222</p>
79 </div> 79 </div>
80 </div> 80 </div>
81 </div> 81 </div>
82 82
83 <!-- BUSCAR PRODUCTOS --> 83 <!-- BUSCAR PRODUCTOS -->
84 <div (click)="goPage('busqueda-productos')" 84 <div (click)="goPage('busqueda-productos')"
85 class="card card-effect bg-white border-0 shadow rounded w-100 mt-4"> 85 class="card card-effect bg-white border-0 shadow rounded w-100 mt-4">
86 <div class="card-body text-left p-4"> 86 <div class="card-body text-left p-4">
87 <p class="h3 card-title">Buscar Productos</p> 87 <p class="h3 card-title">Buscar Productos</p>
88 <p class="h5 card-text text-muted font-weight-light"> 88 <p class="h5 card-text text-muted font-weight-light">
89 Busque aquí los productos<br> 89 Busque aquí los productos<br>
90 que no tienen código 90 que no tienen código
91 </p> 91 </p>
92 </div> 92 </div>
93 </div> 93 </div>
94
95 </div> 94
95 </div>
96 96
97 </div> 97 </div>
98 98
99 </div> 99 </div>
100 100
101 <!-- SIDEBAR --> 101 <!-- SIDEBAR -->
102 <app-sidebar class="col-3 col-md-2 vh-100 bg-dark text-white"></app-sidebar> 102 <app-sidebar class="col-3 col-md-2 vh-100 bg-dark text-white"></app-sidebar>
103 </div> 103 </div>
src/app/components/sidebar/sidebar.component.html
Diff comments   View file @ 1671dbe
1 <div class="d-flex align-items-center flex-column h-100 bg-dark pt-2 text-center"> 1 <div class="d-flex align-items-center flex-column h-100 bg-dark pt-2 text-center">
2 2
3 <h4 class="border-bottom border-white"> Mi compra </h4> 3 <h4 class="border-bottom border-white"> Mi compra </h4>
4 <div class="overflow-auto overflow-scroll mb-2"> 4 <div class="overflow-auto overflow-scroll mb-2">
5 <div class="card my-2 bg-primary border-0" *ngFor="let prod of productos; let i = index"> 5 <div class="card my-2 bg-primary border-0" *ngFor="let prod of productos; let i = index">
6 <img src="{{prod.img}}" class="card-img-top" alt="..."> 6 <img src="{{prod.img}}" class="card-img-top" alt="...">
7 <div class="card-body row m-0 p-0 px-1 py-1 shadow rounded"> 7 <div class="card-body row m-0 p-0 px-1 py-1 shadow rounded">
8 <div class="col-8 p-0 text-left my-auto"> 8 <div class="col-8 p-0 text-left my-auto">
9 <p class="m-0 card-description">{{prod.desc}}</p> 9 <p class="m-0 card-description">{{prod.desc}}</p>
10 <p class="m-0 card-description">COD: {{prod.cod}}</p> 10 <p class="m-0 card-description">COD: {{prod.cod}}</p>
11 </div> 11 </div>
12 <div class="col-4 p-1 text-center my-auto"> 12 <div class="col-4 p-1 text-center my-auto">
13 {{prod.precio | currency}} 13 {{prod.precio | currency}}
14 </div> 14 </div>
15 </div> 15 </div>
16 <div class="row m-0 p-0"> 16 <div class="row m-0 p-0">
17 <div class="col p-1 pb-1 mt-2"> 17 <div class="col p-1 pb-1 mt-2">
18 <button type="button" class="btn btn-light btn-sm float-left my-auto" (click)="deleteProducto(i)">X</button> 18 <button type="button" class="btn btn-light btn-sm float-left my-auto" (click)="deleteProducto(i)">X</button>
19 <button type="button" class="btn btn-light btn-sm my-auto">Y</button> 19 <button type="button" class="btn btn-light btn-sm my-auto">Y</button>
20 <div class="btn-group-sm btn-group float-right my-auto" role="group" aria-label="Basic example"> 20 <div class="btn-group-sm btn-group float-right my-auto" role="group" aria-label="Basic example">
21 <button type="button" class="btn btn-light btn-sm mb-2" (click)="aumentarContador(i)">+</button> 21 <button type="button" class="btn btn-light btn-sm mb-2" (click)="aumentarContador(i)">+</button>
22 <label for="" class="border border.white px-1">{{prod.cantidad}}</label> 22 <label for="" class="border border.white px-1">{{prod.cantidad}}</label>
23 <button type="button" class="btn btn-light btn-sm mb-2" (click)="decrementarContador(i)">-</button> 23 <button type="button" class="btn btn-light btn-sm mb-2" (click)="decrementarContador(i)">-</button>
24 </div> 24 </div>
25 </div> 25 </div>
26 </div> 26 </div>
27 </div> 27 </div>
28 </div> 28 </div>
29 29
30 <div class="card mt-auto blue-gradient border-0"> 30 <div class="card mt-auto blue-gradient border-0">
31 <div class="card-body row"> 31 <div class="card-body row">
32 <div class="col"> 32 <div class="col">
33 <h4 class="border-bottom border-secondary text-secondary" *ngIf="cont === 1">({{cont}}) item</h4> 33 <h4 class="border-bottom border-secondary text-secondary" *ngIf="cont === 1">({{cont}}) item</h4>
34 <h4 class="border-bottom border-secondary text-secondary" *ngIf="cont > 1">({{cont}}) items</h4> 34 <h4 class="border-bottom border-secondary text-secondary" *ngIf="cont > 1">({{cont}}) items</h4>
35 <h3 class="text-secondary">Total</h3> 35 <h3 class="text-secondary">Total</h3>
36 <h3 class="text-dark"><strong>{{total | currency}}</strong></h3> 36 <h3 class="text-dark"><strong>{{total | currency}}</strong></h3>
37 </div> 37 </div>
38 <div class="col 12 p-0"> 38 <div class="col 12 p-0">
39 <button type="button" class="btn btn-light shadow mb-2"><strong>Finalizar y pagar</strong></button> 39 <button type="button" class="btn btn-light shadow mb-2" routerLink="/confirmacion-carrito"><strong>Finalizar y pagar</strong></button>
40 <button type="button" class="btn btn-light shadow btn-sm" (click)="clearCar()">Cancelar</button> 40 <button type="button" class="btn btn-light shadow btn-sm" (click)="clearCar()">Cancelar</button>
41 </div> 41 </div>
42 </div> 42 </div>
43 </div> 43 </div>
src/assets/scss/bootstrap-override.scss
Diff comments   View file @ 1671dbe
File was created 1 @import "../../../node_modules/bootstrap/scss/functions";
2 @import "../../../node_modules/bootstrap/scss/variables";
3
4 $theme-colors: (
5 primary: red,
6 light: white,
7 );
8
9 @import "../../../node_modules/bootstrap/scss/bootstrap.scss";
10
1 @import "./assets/scss/animation.scss"; 1 @import "./assets/scss/animation.scss";
2 @import "./assets/scss/bootstrap-override.scss";
2 3
3 html, body { 4 html,
5 body {
4 background-color: rgb(245, 245, 245); 6 background-color: rgb(245, 245, 245);
5 overflow: hidden; 7 overflow: hidden;
6 } 8 }
7 9
8 .blur { 10 .blur {
9 filter: blur(10px); 11 filter: blur(10px);
10 -webkit-filter: blur(10px); 12 -webkit-filter: blur(10px);
11 } 13 }
12 14
13 .disable-user-select { 15 .disable-user-select {
14 -webkit-user-select: none; 16 -webkit-user-select: none;
15 -moz-user-select: none; 17 -moz-user-select: none;
16 -ms-user-select: none; 18 -ms-user-select: none;
17 user-select: none; 19 user-select: none;
18 } 20 }
19 21
20 .blue-gradient { 22 .blue-gradient {
21 background: linear-gradient(0deg, rgb(20, 56, 68), rgb(252, 252, 252)); 23 background: linear-gradient(0deg, rgb(20, 56, 68), rgb(252, 252, 252));
22 } 24 }
23 25
24 .rounded { 26 .rounded {
25 border-radius: 1.5rem !important; 27 border-radius: 1.5rem !important;
26 } 28 }
27 29
28 .rounded-sm { 30 .rounded-sm {
29 border-radius: 0.75rem !important; 31 border-radius: 0.75rem !important;
30 } 32 }
31 33
32 .card-effect { 34 .card-effect {
33 &:active, 35 &:active,
34 img { 36 img {
35 background-color: #c9c9c9b3 !important; 37 background-color: #c9c9c9b3 !important;
36 transition: background-color 0.5s; 38 transition: background-color 0.5s;
37 } 39 }
38 &:focus, 40 &:focus,
39 img { 41 img {
40 background-color: #c9c9c9b3 !important; 42 background-color: #c9c9c9b3 !important;
41 transition: background-color 0.5s; 43 transition: background-color 0.5s;
42 } 44 }
43 } 45 }
44 46
45 .overflow-scroll { 47 .overflow-scroll {
46 overflow-y: scroll !important; 48 overflow-y: scroll !important;
47 overflow-x: hidden !important; 49 overflow-x: hidden !important;
48 &::-webkit-scrollbar { 50 &::-webkit-scrollbar {
49 width: 0.5em; 51 width: 0.5em;
50 } 52 }
51 &::-webkit-scrollbar-track { 53 &::-webkit-scrollbar-track {
52 border-radius: 10px; 54 border-radius: 10px;
53 -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4); 55 -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4);
54 } 56 }
55 &::-webkit-scrollbar-thumb { 57 &::-webkit-scrollbar-thumb {
56 -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.7); 58 -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.7);
57 outline: 1px solid slategrey; 59 outline: 1px solid slategrey;
58 border-radius: 10px; 60 border-radius: 10px;
59 height: 12px; 61 height: 12px;
60 &:active{ 62 &:active {
61 -webkit-box-shadow: inset 0 0 8px rgba(255, 0, 0, 0.9); 63 -webkit-box-shadow: inset 0 0 8px rgba(255, 0, 0, 0.9);
62 } 64 }
63 } 65 }
64 &::-webkit-scrollbar-corner { 66 &::-webkit-scrollbar-corner {
65 border-radius: 10px; 67 border-radius: 10px;
66 } 68 }
67 }
69 }