Martin Macola / autoservicio

Download as
Browse Code »

Commit d05888154cdadc49b1819f6cd65bbad973b26bdf

Authored by =
2 parents fd918561c5 21fa9c785f
Exists in master

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

Showing 50 changed files   Show diff stats
src/app/app-routing.module.ts
Diff comments   View file @ d058881
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 './home/home.component'; 3 import { HomeComponent } from './components/home/home.component';
4 import { InicioComponent } from './inicio/inicio.component'; 4 import { InicioComponent } from './components/inicio/inicio.component';
5 import { BusquedaProductosComponent } from './components/busqueda-productos/busqueda-productos.component';
5 6
6 const routes: Routes = [ 7 const routes: Routes = [
7 { path: 'home', component: HomeComponent }, 8 { path: 'home', component: HomeComponent },
8 { path: 'inicio', component: InicioComponent }, 9 { path: 'inicio', component: InicioComponent },
10 { path: 'busqueda-productos', component: BusquedaProductosComponent },
9 { path: '**', redirectTo: '/home', pathMatch: 'full' }, 11 { path: '**', redirectTo: '/home', pathMatch: 'full' },
10 ]; 12 ];
11 13
12 @NgModule({ 14 @NgModule({
13 imports: [RouterModule.forRoot(routes)], 15 imports: [RouterModule.forRoot(routes)],
14 exports: [RouterModule] 16 exports: [RouterModule]
15 }) 17 })
16 export class AppRoutingModule { } 18 export class AppRoutingModule { }
17 19
src/app/app.module.ts
Diff comments   View file @ d058881
1 //#region MODULES
1 import { BrowserModule } from '@angular/platform-browser'; 2 import { BrowserModule } from '@angular/platform-browser';
2 import { NgModule } from '@angular/core'; 3 import { NgModule } from '@angular/core';
3
4 import { AppRoutingModule } from './app-routing.module'; 4 import { AppRoutingModule } from './app-routing.module';
5 import { HttpClientModule } from '@angular/common/http';
6 //#endregion
7
8 //#region COMPONENTS
5 import { AppComponent } from './app.component'; 9 import { AppComponent } from './app.component';
6 import { HeaderComponent } from './header/header.component'; 10 import { HeaderComponent } from './components/header/header.component';
7 import { SidebarComponent } from './sidebar/sidebar.component'; 11 import { SidebarComponent } from './components/sidebar/sidebar.component';
8 import { CarouselComponent } from './carousel/carousel.component'; 12 import { CarouselComponent } from './components/carousel/carousel.component';
9 import { HomeComponent } from './home/home.component'; 13 import { HomeComponent } from './components/home/home.component';
10 import { InicioComponent } from './inicio/inicio.component'; 14 import { InicioComponent } from './components/inicio/inicio.component';
15 import { BusquedaProductosComponent } from './components/busqueda-productos/busqueda-productos.component';
16 //#endregion
11 17
12 @NgModule({ 18 @NgModule({
13 declarations: [ 19 declarations: [
14 AppComponent, 20 AppComponent,
15 HeaderComponent, 21 HeaderComponent,
16 SidebarComponent, 22 SidebarComponent,
17 CarouselComponent, 23 CarouselComponent,
18 HomeComponent, 24 HomeComponent,
19 InicioComponent 25 InicioComponent,
26 BusquedaProductosComponent
20 ], 27 ],
21 imports: [ 28 imports: [
22 BrowserModule, 29 BrowserModule,
23 AppRoutingModule 30 AppRoutingModule,
31 HttpClientModule
24 ], 32 ],
25 providers: [], 33 providers: [],
26 bootstrap: [AppComponent] 34 bootstrap: [AppComponent]
27 }) 35 })
28 export class AppModule { } 36 export class AppModule { }
src/app/carousel/carousel.component.html
View file @ d058881
1 <div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel"> File was deleted
2 <div class="carousel-inner">
3 <div class="carousel-item active">
4 <div class="card" style="width: 18rem;">
5 <div class="card-body">
6 <h5 class="card-title">Card title</h5>
7 <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
8 <p class="card-text">Some quick example text to build on the card title and make up the bulk of the
9 card's content.</p>
10 <a href="#" class="card-link">Card link</a>
11 <a href="#" class="card-link">Another link</a>
12 </div>
13 </div>
14 </div>
15 <div class="carousel-item">
16 <div class="card" style="width: 18rem;">
17 <div class="card-body">
18 <h5 class="card-title">Card title 2222</h5>
19 <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
20 <p class="card-text">Some quick example text to build on the card title and make up the bulk of the
21 card's content.</p>
22 <a href="#" class="card-link">Card link</a>
23 <a href="#" class="card-link">Another link</a>
24 </div>
25 </div>
26 </div>
27 </div>
28 </div>
src/app/carousel/carousel.component.scss
View file @ d058881
src/app/carousel/carousel.component.spec.ts
View file @ d058881
1 import { async, ComponentFixture, TestBed } from '@angular/core/testing'; File was deleted
2
3 import { CarouselComponent } from './carousel.component';
4
5 describe('CarouselComponent', () => {
6 let component: CarouselComponent;
7 let fixture: ComponentFixture<CarouselComponent>;
8
9 beforeEach(async(() => {
10 TestBed.configureTestingModule({
11 declarations: [ CarouselComponent ]
12 })
13 .compileComponents();
14 }));
15
16 beforeEach(() => {
17 fixture = TestBed.createComponent(CarouselComponent);
18 component = fixture.componentInstance;
19 fixture.detectChanges();
20 });
21
22 it('should create', () => {
23 expect(component).toBeTruthy();
24 });
25 });
26 1 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
src/app/carousel/carousel.component.ts
View file @ d058881
1 import { Component, OnInit } from '@angular/core'; File was deleted
2
3 @Component({
4 selector: 'app-carousel',
5 templateUrl: './carousel.component.html',
6 styleUrls: ['./carousel.component.scss']
7 })
8 export class CarouselComponent implements OnInit {
9
10 constructor() { }
11
12 ngOnInit() {
13 }
14
15 }
16 1 import { Component, OnInit } from '@angular/core';
src/app/components/busqueda-productos/busqueda-productos.component.html
Diff comments   View file @ d058881
File was created 1 <div class="row m-0 fade-in">
2 <div class="col-10 p-0">
3 <!-- TOP HEADER -->
4 <app-header></app-header>
5
6 <!-- NOMBRE DE SECCION -->
7 <div class="row m-0">
8 <div class="col-12 p-0">
9 <p class="h5 py-1 bg-light text-muted font-weight-light text-center"><small>Búsqueda</small></p>
10 </div>
11 </div>
12
13 <div class="row m-4 d-flex align-items-center">
14
15 </div>
16
17 </div>
18
19 <!-- SIDEBAR -->
20 <app-sidebar class="col-3 col-md-2 vh-100 bg-dark text-white"></app-sidebar>
21 </div>
src/app/components/busqueda-productos/busqueda-productos.component.scss
Diff comments   View file @ d058881
src/app/components/busqueda-productos/busqueda-productos.component.spec.ts
Diff comments   View file @ d058881
File was created 1 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2
3 import { BusquedaProductosComponent } from './busqueda-productos.component';
4
5 describe('BusquedaProductosComponent', () => {
6 let component: BusquedaProductosComponent;
7 let fixture: ComponentFixture<BusquedaProductosComponent>;
8
9 beforeEach(async(() => {
10 TestBed.configureTestingModule({
11 declarations: [ BusquedaProductosComponent ]
12 })
13 .compileComponents();
14 }));
15
16 beforeEach(() => {
17 fixture = TestBed.createComponent(BusquedaProductosComponent);
18 component = fixture.componentInstance;
19 fixture.detectChanges();
20 });
21
22 it('should create', () => {
23 expect(component).toBeTruthy();
24 });
25 });
26
src/app/components/busqueda-productos/busqueda-productos.component.ts
Diff comments   View file @ d058881
File was created 1 import { Component, OnInit } from '@angular/core';
2
3 @Component({
4 selector: 'app-busqueda-productos',
5 templateUrl: './busqueda-productos.component.html',
6 styleUrls: ['./busqueda-productos.component.scss']
7 })
8 export class BusquedaProductosComponent implements OnInit {
9
10 constructor() { }
11
12 ngOnInit() {
13 }
14
15 }
16
src/app/components/carousel/carousel.component.html
Diff comments   View file @ d058881
File was created 1 <div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
2 <div class="carousel-inner">
3 <div class="carousel-item active">
4 <div class="card" style="width: 18rem;">
5 <div class="card-body">
6 <h5 class="card-title">Card title</h5>
7 <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
8 <p class="card-text">Some quick example text to build on the card title and make up the bulk of the
9 card's content.</p>
10 <a href="#" class="card-link">Card link</a>
11 <a href="#" class="card-link">Another link</a>
12 </div>
13 </div>
14 </div>
15 <div class="carousel-item">
16 <div class="card" style="width: 18rem;">
17 <div class="card-body">
18 <h5 class="card-title">Card title 2222</h5>
19 <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
20 <p class="card-text">Some quick example text to build on the card title and make up the bulk of the
21 card's content.</p>
22 <a href="#" class="card-link">Card link</a>
23 <a href="#" class="card-link">Another link</a>
24 </div>
25 </div>
26 </div>
27 </div>
28 </div>
src/app/components/carousel/carousel.component.scss
Diff comments   View file @ d058881
src/app/components/carousel/carousel.component.spec.ts
Diff comments   View file @ d058881
File was created 1 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2
3 import { CarouselComponent } from './carousel.component';
4
5 describe('CarouselComponent', () => {
6 let component: CarouselComponent;
7 let fixture: ComponentFixture<CarouselComponent>;
8
9 beforeEach(async(() => {
10 TestBed.configureTestingModule({
11 declarations: [ CarouselComponent ]
12 })
13 .compileComponents();
14 }));
15
16 beforeEach(() => {
17 fixture = TestBed.createComponent(CarouselComponent);
18 component = fixture.componentInstance;
19 fixture.detectChanges();
20 });
21
22 it('should create', () => {
23 expect(component).toBeTruthy();
24 });
25 });
26
src/app/components/carousel/carousel.component.ts
Diff comments   View file @ d058881
File was created 1 import { Component, OnInit } from '@angular/core';
2
3 @Component({
4 selector: 'app-carousel',
5 templateUrl: './carousel.component.html',
6 styleUrls: ['./carousel.component.scss']
7 })
8 export class CarouselComponent implements OnInit {
9
10 constructor() { }
11
12 ngOnInit() {
13 }
14
15 }
16
src/app/components/header/header.component.html
Diff comments   View file @ d058881
File was created 1 <div class="bg-danger py-1 py-sm-2 py-lg-5">
2 <p class="text-center">HEADER</p>
3 </div>
src/app/components/header/header.component.scss
Diff comments   View file @ d058881
src/app/components/header/header.component.spec.ts
Diff comments   View file @ d058881
File was created 1 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2
3 import { HeaderComponent } from './header.component';
4
5 describe('HeaderComponent', () => {
6 let component: HeaderComponent;
7 let fixture: ComponentFixture<HeaderComponent>;
8
9 beforeEach(async(() => {
10 TestBed.configureTestingModule({
11 declarations: [HeaderComponent]
12 })
13 .compileComponents();
14 }));
15
16 beforeEach(() => {
17 fixture = TestBed.createComponent(HeaderComponent);
18 component = fixture.componentInstance;
19 fixture.detectChanges();
20 });
21
22 it('should create', () => {
23 expect(component).toBeTruthy();
24 });
25 });
26
src/app/components/header/header.component.ts
Diff comments   View file @ d058881
File was created 1 import { Component, OnInit } from '@angular/core';
2
3 @Component({
4 selector: 'app-header',
5 templateUrl: './header.component.html',
6 styleUrls: ['./header.component.scss']
7 })
8 export class HeaderComponent implements OnInit {
9
10 constructor() { }
11
12 ngOnInit() {
13 }
14
15 }
16
src/app/components/home/home.component.html
Diff comments   View file @ d058881
File was created 1 <div class="container-fluid">
2 <div class="row">
3 <div class="col p-0">
4 <div class="vh-100 d-flex align-items-start flex-column disable-user-select">
5
6 <!-- HEADER -->
7 <div class="bg-dark py-1 py-sm-2 py-lg-5 w-100">
8 <p class="text-white text-center">HEADER</p>
9 </div>
10
11 <div class="h-100 w-100 position-relative">
12 <div class="background-image blur"></div>
13 <div class="row position-absolute w-100 h-100">
14 <div class="col-5 my-auto">
15 <!-- CAROUSEL -->
16 <div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
17 <div class="carousel-inner">
18 <div class="carousel-item active">
19 <img class="m-auto img-fluid d-block w-75"
20 src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQWhHnLeoxWeJeiBKvVg-9zDzppOVX_AY5tXpRuS7If0mzb_01b"
21 alt="">
22 </div>
23 <div class="carousel-item">
24 <img class="m-auto img-fluid d-block w-75"
25 src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQWhHnLeoxWeJeiBKvVg-9zDzppOVX_AY5tXpRuS7If0mzb_01b"
26 alt="">
27 </div>
28 </div>
29 </div>
30 </div>
31 <div class="col-7 my-auto">
32 <div class="text-center text-white">
33 <h1 class="display-2 font-weight-bold">¡BIENVENIDO!</h1>
34 <h1 class="display-3 font-weight-bold">Toque la pantalla<br>para comenzar.</h1>
35 </div>
36 </div>
37 </div>
38 </div>
39
40 <!-- FOOTER -->
41 <div class="bg-dark py-1 py-sm-2 py-lg-5 w-100">
42 <p class="text-white text-center">FOOTER</p>
43 </div>
44 </div>
45 </div>
46 </div>
47 </div>
src/app/components/home/home.component.scss
Diff comments   View file @ d058881
File was created 1 .background-image {
2 background-image: url(http://www.nortecorrientes.com/content/bucket/7/304027w980.jpg);
3 background-repeat: no-repeat;
4 background-size: cover;
5 position: absolute;
6 width: 100%;
7 height: 100%;
8 }
9
src/app/components/home/home.component.spec.ts
Diff comments   View file @ d058881
File was created 1 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2
3 import { HomeComponent } from './home.component';
4
5 describe('HomeComponent', () => {
6 let component: HomeComponent;
7 let fixture: ComponentFixture<HomeComponent>;
8
9 beforeEach(async(() => {
10 TestBed.configureTestingModule({
11 declarations: [HomeComponent]
12 })
13 .compileComponents();
14 }));
15
16 beforeEach(() => {
17 fixture = TestBed.createComponent(HomeComponent);
18 component = fixture.componentInstance;
19 fixture.detectChanges();
20 });
21
22 it('should create', () => {
23 expect(component).toBeTruthy();
24 });
25 });
26
src/app/components/home/home.component.ts
Diff comments   View file @ d058881
File was created 1 import { Component, OnInit, HostListener } from '@angular/core';
2 import { Router } from '@angular/router';
3
4 @Component({
5 selector: 'app-home',
6 templateUrl: './home.component.html',
7 styleUrls: ['./home.component.scss']
8 })
9 export class HomeComponent implements OnInit {
10
11 constructor(private router: Router) { }
12
13 ngOnInit() {
14 }
15
16 @HostListener('document:click', ['$event'])
17 documentClick(event: MouseEvent) {
18 this.router.navigate(['/inicio']);
19 }
20
21 }
22
src/app/components/inicio/inicio.component.html
Diff comments   View file @ d058881
File was created 1 <div class="row m-0 fade-in">
2 <div class="col-10 p-0">
3 <!-- TOP HEADER -->
4 <app-header></app-header>
5
6 <!-- NOMBRE DE SECCION -->
7 <div class="row m-0">
8 <div class="col-12 p-0">
9 <p class="h5 py-1 bg-light text-muted font-weight-light text-center"><small>Inicio</small></p>
10 </div>
11 </div>
12
13 <div class="row m-4 d-flex align-items-center">
14 <div class="col-md-5 d-flex align-items-end flex-column">
15
16 <!-- PROMOCIONES -->
17 <div class="card card-effect bg-white border-0 shadow rounded w-100 mb-auto">
18 <div class="card-body p-4">
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>
21 </div>
22 <div id="carouselIndicators" class="carousel slide mb-4" data-ride="carousel">
23 <ol class="carousel-indicators m-0">
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>
26 <li data-target="#carouselIndicators" data-slide-to="2" class="bg-dark"></li>
27 </ol>
28 <div class="carousel-inner">
29 <div class="carousel-item active">
30 <img src="../../assets/img/descarga.jpg" class="d-block w-50 m-auto rounded" alt="...">
31 </div>
32 <div class="carousel-item">
33 <img src="../../assets/img/descarga.jpg" class="d-block w-50 m-auto rounded" alt="...">
34 </div>
35 <div class="carousel-item">
36 <img src="../../assets/img/descarga.jpg" class="d-block w-50 m-auto rounded" alt="...">
37 </div>
38 </div>
39 </div>
40 </div>
41
42 <!-- ORDENAR -->
43 <div class="card card-effect bg-white border-0 shadow rounded w-100 mt-4">
44 <div class="card-body p-4">
45 <p class="h3 card-title">Ordenar</p>
46 <p class="h5 card-text text-muted font-weight-light">Arme su pedido y solo pase a retirar.</p>
47 </div>
48 <img class="card-img-bottom d-block w-50 mx-auto mb-4 rounded" src="../../assets/img/descarga.jpg">
49 </div>
50
51 </div>
52
53 <div class="col-md-7 d-flex align-items-end flex-column">
54
55 <!-- CARGAR PRODUCTOS -->
56 <div class="card card-effect bg-white border-0 shadow rounded w-100 mb-auto">
57 <div class="card-body p-4">
58 <p class="h3 card-title">Cargar Productos</p>
59 <p class="h5 card-text text-muted font-weight-light">
60 Coloque el código de<br>
61 barras o QR frente al scanner.
62 </p>
63 </div>
64 <div class="card bg-white border-0 w-75 mx-auto mb-4">
65 <img class="card-img-top d-block w-50 mx-auto rounded" src="../../assets/img/descarga.jpg">
66 <div class="card-body p-2">
67 <p class="m-0 card-text text-muted">Galletas Oreo x117 grs Chocolate.</p>
68 <p class="m-0 card-text text-muted">COD. 12121222</p>
69 </div>
70 </div>
71 </div>
72
73 <!-- BUSCAR PRODUCTOS -->
74 <div
75 (click)="goPage('busqueda-productos')"
76 class="card card-effect bg-white border-0 shadow rounded w-100 mt-4">
77 <div class="card-body p-4">
78 <p class="h3 card-title">Buscar Productos</p>
79 <p class="h5 card-text text-muted font-weight-light">
80 Busque aquí los productos<br>
81 que no tienen código
82 </p>
83 </div>
84 </div>
85
86 </div>
87
88 </div>
89
90 </div>
91
92 <!-- SIDEBAR -->
93 <app-sidebar class="col-3 col-md-2 vh-100 bg-dark text-white"></app-sidebar>
94 </div>
src/app/components/inicio/inicio.component.scss
Diff comments   View file @ d058881
src/app/components/inicio/inicio.component.spec.ts
Diff comments   View file @ d058881
File was created 1 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2
3 import { InicioComponent } from './inicio.component';
4
5 describe('InicioComponent', () => {
6 let component: InicioComponent;
7 let fixture: ComponentFixture<InicioComponent>;
8
9 beforeEach(async(() => {
10 TestBed.configureTestingModule({
11 declarations: [ InicioComponent ]
12 })
13 .compileComponents();
14 }));
15
16 beforeEach(() => {
17 fixture = TestBed.createComponent(InicioComponent);
18 component = fixture.componentInstance;
19 fixture.detectChanges();
20 });
21
22 it('should create', () => {
23 expect(component).toBeTruthy();
24 });
25 });
26
src/app/components/inicio/inicio.component.ts
Diff comments   View file @ d058881
File was created 1 import { Component, OnInit } from '@angular/core';
2 import { Router } from '@angular/router';
3
4 @Component({
5 selector: 'app-inicio',
6 templateUrl: './inicio.component.html',
7 styleUrls: ['./inicio.component.scss']
8 })
9 export class InicioComponent implements OnInit {
10
11 constructor(private router: Router) { }
12
13 ngOnInit() {
14 }
15
16 private goPage(pageUrl) {
17 this.router.navigate([pageUrl]);
18 }
19
20 }
21
src/app/components/sidebar/sidebar.component.html
Diff comments   View file @ d058881
File was created 1 <div class="d-flex align-items-center flex-column h-100 bg-dark pt-2 text-center">
2
3 <h4 class="border-bottom border-white"> Mi compra </h4>
4 <div class="overflow-auto mb-2">
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="...">
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">
9 <p class="m-0 card-description">{{prod.desc}}</p>
10 <p class="m-0 card-description">COD: {{prod.cod}}</p>
11 </div>
12 <div class="col-4 p-1 text-center my-auto">
13 {{prod.precio | currency}}
14 </div>
15 </div>
16 <div class="row m-0 p-0">
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>
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">
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>
23 <button type="button" class="btn btn-light btn-sm mb-2" (click)="decrementarContador(i)">-</button>
24 </div>
25 </div>
26 </div>
27 </div>
28 </div>
29
30 <div class="card mt-auto blue-gradient border-0">
31 <div class="card-body row">
32 <div class="col">
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>
35 <h3 class="text-secondary">Total</h3>
36 <h3 class="text-dark"><strong>{{total | currency}}</strong></h3>
37 </div>
38 <div class="col 12 p-0">
39 <button type="button" class="btn btn-light shadow mb-2"><strong>Finalizar y pagar</strong></button>
40 <button type="button" class="btn btn-light shadow btn-sm">Cancelar</button>
41 </div>
42 </div>
43 </div>
src/app/components/sidebar/sidebar.component.scss
Diff comments   View file @ d058881
File was created 1 .card-description{
2 font-size: 12px;
3 }
src/app/components/sidebar/sidebar.component.spec.ts
Diff comments   View file @ d058881
File was created 1 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2
3 import { SidebarComponent } from './sidebar.component';
4
5 describe('SidebarComponent', () => {
6 let component: SidebarComponent;
7 let fixture: ComponentFixture<SidebarComponent>;
8
9 beforeEach(async(() => {
10 TestBed.configureTestingModule({
11 declarations: [SidebarComponent]
12 })
13 .compileComponents();
14 }));
15
16 beforeEach(() => {
17 fixture = TestBed.createComponent(SidebarComponent);
18 component = fixture.componentInstance;
19 fixture.detectChanges();
20 });
21
22 it('should create', () => {
23 expect(component).toBeTruthy();
24 });
25 });
26
src/app/components/sidebar/sidebar.component.ts
Diff comments   View file @ d058881
File was created 1 import { Component, OnInit } from '@angular/core';
2 import { timingSafeEqual } from 'crypto';
3
4 @Component({
5 selector: 'app-sidebar',
6 templateUrl: './sidebar.component.html',
7 styleUrls: ['./sidebar.component.scss']
8 })
9 export class SidebarComponent implements OnInit {
10
11 private cont: number = 1;
12 private min: number = 1;
13 private max: number = 50;
14 private total: number = 0;
15
16 private productos = [
17 {
18 "id": 1,
19 "desc": "Galletas Oreo",
20 "cod": 225412,
21 "precio": 15,
22 "img": "./assets/descarga.jpg",
23 "cantidad": 1
24 },
25 {
26 "id": 2,
27 "desc": "Coca cola 500ml",
28 "cod": 512632,
29 "precio": 40,
30 "img": "./assets/descarga.jpg",
31 "cantidad": 1
32 },
33 {
34 "id": 3,
35 "desc": "Pancho grande",
36 "cod": 775987,
37 "precio": 45,
38 "img": "./assets/descarga.jpg",
39 "cantidad": 1
40 }
41 ];
42
43 constructor() { }
44
45 ngOnInit() {
46 this.getProductosCarrito();
47 this.getCantidadProductos();
48 this.getTotal();
49 }
50
51 getCantidadProductos(){
52 var aux = 0;
53 for (let i = 0; i < this.productos.length; i++) {
54 ++aux;
55 }
56 return this.cont = aux;
57
58 }
59
60 getProductosCarrito() {
61 return this.productos;
62 }
63
64 getTotal(){
65 var subTotal;
66 for (let i = 0; i < this.productos.length; i++) {
67 this.productos[i].cantidad;
68 }
69 }
70
71 public aumentarContador(index) {
72 ++this.cont;
73 for (let i = 0; i < this.productos.length; i++) {
74 if (i === index) {
75 return (this.productos[i].cantidad === this.max) ?
76 this.productos[i].cantidad : ++this.productos[i].cantidad;
77
78 }
79 }
80 }
81
82 decrementarContador(index) {
83 --this.cont;
84 for (let i = 0; i < this.productos.length; i++) {
85 if (i === index) {
86 return (this.productos[i].cantidad === this.min) ?
87 this.productos[i].cantidad : --this.productos[i].cantidad;
88 }
89 }
90 }
91
92 deleteProducto(index) {
93 --this.cont;
94 for (let i = 0; i < this.productos.length; i++)
95 if (i === index) {
96 this.productos.splice(i, 1);
97 return this.productos;
98 }
99
100 }
101 }
102
src/app/header/header.component.html
View file @ d058881
1 <div class="bg-danger py-1 py-sm-2 py-lg-5"> File was deleted
2 <p class="text-center">HEADER</p>
3 </div>
src/app/header/header.component.scss
View file @ d058881
src/app/header/header.component.spec.ts
View file @ d058881
1 import { async, ComponentFixture, TestBed } from '@angular/core/testing'; File was deleted
2
3 import { HeaderComponent } from './header.component';
4
5 describe('HeaderComponent', () => {
6 let component: HeaderComponent;
7 let fixture: ComponentFixture<HeaderComponent>;
8
9 beforeEach(async(() => {
10 TestBed.configureTestingModule({
11 declarations: [HeaderComponent]
12 })
13 .compileComponents();
14 }));
15
16 beforeEach(() => {
17 fixture = TestBed.createComponent(HeaderComponent);
18 component = fixture.componentInstance;
19 fixture.detectChanges();
20 });
21
22 it('should create', () => {
23 expect(component).toBeTruthy();
24 });
25 });
26 1 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
src/app/header/header.component.ts
View file @ d058881
1 import { Component, OnInit } from '@angular/core'; File was deleted
2
3 @Component({
4 selector: 'app-header',
5 templateUrl: './header.component.html',
6 styleUrls: ['./header.component.scss']
7 })
8 export class HeaderComponent implements OnInit {
9
10 constructor() { }
11
12 ngOnInit() {
13 }
14
15 }
16 1 import { Component, OnInit } from '@angular/core';
src/app/home/home.component.html
View file @ d058881
1 <div class="container-fluid"> File was deleted
2 <div class="row">
3 <div class="col p-0">
4 <div class="vh-100 d-flex align-items-start flex-column disable-user-select">
5
6 <!-- HEADER -->
7 <div class="bg-dark py-1 py-sm-2 py-lg-5 w-100">
8 <p class="text-white text-center">HEADER</p>
9 </div>
10
11 <div class="h-100 w-100 position-relative">
12 <div class="background-image blur"></div>
13 <div class="row position-absolute w-100 h-100">
14 <div class="col-5 my-auto">
15 <!-- CAROUSEL -->
16 <div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
17 <div class="carousel-inner">
18 <div class="carousel-item active">
19 <img class="m-auto img-fluid d-block w-75"
20 src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQWhHnLeoxWeJeiBKvVg-9zDzppOVX_AY5tXpRuS7If0mzb_01b"
21 alt="">
22 </div>
23 <div class="carousel-item">
24 <img class="m-auto img-fluid d-block w-75"
25 src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQWhHnLeoxWeJeiBKvVg-9zDzppOVX_AY5tXpRuS7If0mzb_01b"
26 alt="">
27 </div>
28 </div>
29 </div>
30 </div>
31 <div class="col-7 my-auto">
32 <div class="text-center text-white">
33 <h1 class="display-2 font-weight-bold">¡BIENVENIDO!</h1>
34 <h1 class="display-3 font-weight-bold">Toque la pantalla<br>para comenzar.</h1>
35 </div>
36 </div>
37 </div>
38 </div>
39
40 <!-- FOOTER -->
41 <div class="bg-dark py-1 py-sm-2 py-lg-5 w-100">
42 <p class="text-white text-center">FOOTER</p>
43 </div>
44 </div>
45 </div>
46 </div>
47 </div>
src/app/home/home.component.scss
View file @ d058881
1 .background-image { File was deleted
2 background-image: url(http://www.nortecorrientes.com/content/bucket/7/304027w980.jpg);
3 background-repeat: no-repeat;
4 background-size: cover;
5 position: absolute;
6 width: 100%;
7 height: 100%;
8 }
9 1 .background-image {
src/app/home/home.component.spec.ts
View file @ d058881
1 import { async, ComponentFixture, TestBed } from '@angular/core/testing'; File was deleted
2
3 import { HomeComponent } from './home.component';
4
5 describe('HomeComponent', () => {
6 let component: HomeComponent;
7 let fixture: ComponentFixture<HomeComponent>;
8
9 beforeEach(async(() => {
10 TestBed.configureTestingModule({
11 declarations: [HomeComponent]
12 })
13 .compileComponents();
14 }));
15
16 beforeEach(() => {
17 fixture = TestBed.createComponent(HomeComponent);
18 component = fixture.componentInstance;
19 fixture.detectChanges();
20 });
21
22 it('should create', () => {
23 expect(component).toBeTruthy();
24 });
25 });
26 1 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
src/app/home/home.component.ts
View file @ d058881
1 import { Component, OnInit, HostListener } from '@angular/core'; File was deleted
2 import { Router } from '@angular/router';
3
4 @Component({
5 selector: 'app-home',
6 templateUrl: './home.component.html',
7 styleUrls: ['./home.component.scss']
8 })
9 export class HomeComponent implements OnInit {
10
11 constructor(private router: Router) { }
12
13 ngOnInit() {
14 }
15
16 @HostListener('document:click', ['$event'])
17 documentClick(event: MouseEvent) {
18 this.router.navigate(['/inicio']);
19 }
20
21 }
22 1 import { Component, OnInit, HostListener } from '@angular/core';
src/app/inicio/inicio.component.html
View file @ d058881
1 <div class="row m-0"> File was deleted
2 <div class="col-10 p-0">
3 <!-- TOP HEADER -->
4 <app-header></app-header>
5
6 <!-- NOMBRE DE SECCION -->
7 <div class="row m-0">
8 <div class="col-12 p-0">
9 <p class="h5 py-1 bg-light text-muted font-weight-light text-center"><small>Inicio</small></p>
10 </div>
11 </div>
12
13 <div class="row m-4">
14 <div class="col-md-5 d-flex align-items-end flex-column">
15
16 <!-- PROMOCIONES -->
17 <div class="card bg-white border-0 shadow rounded w-100 mb-auto">
18 <div class="card-body p-4">
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>
21 </div>
22 <div id="carouselIndicators" class="carousel slide mb-4" data-ride="carousel">
23 <ol class="carousel-indicators m-0">
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>
26 <li data-target="#carouselIndicators" data-slide-to="2" class="bg-dark"></li>
27 </ol>
28 <div class="carousel-inner">
29 <div class="carousel-item active">
30 <img src="../../assets/img/descarga.jpg" class="d-block w-50 m-auto rounded" alt="...">
31 </div>
32 <div class="carousel-item">
33 <img src="../../assets/img/descarga.jpg" class="d-block w-50 m-auto rounded" alt="...">
34 </div>
35 <div class="carousel-item">
36 <img src="../../assets/img/descarga.jpg" class="d-block w-50 m-auto rounded" alt="...">
37 </div>
38 </div>
39 </div>
40 </div>
41
42 <!-- ORDENAR -->
43 <div class="card bg-white border-0 shadow rounded w-100 mt-4">
44 <div class="card-body p-4">
45 <p class="h3 card-title">Ordenar</p>
46 <p class="h5 card-text text-muted font-weight-light">Arme su pedido y solo pase a retirar.</p>
47 </div>
48 <img class="card-img-bottom d-block w-50 mx-auto mb-4 rounded" src="../../assets/img/descarga.jpg">
49 </div>
50
51 </div>
52
53 <div class="col-md-7 d-flex align-items-end flex-column">
54
55 <!-- CARGAR PRODUCTOS -->
56 <div class="card bg-white border-0 shadow rounded w-100 mb-auto">
57 <div class="card-body p-4">
58 <p class="h3 card-title">Cargar Productos</p>
59 <p class="h5 card-text text-muted font-weight-light">
60 Coloque el código de<br>
61 barras o QR frente al scanner.
62 </p>
63 </div>
64 <div class="card bg-white border-0 w-75 mx-auto mb-4">
65 <img class="card-img-top d-block w-50 mx-auto rounded" src="../../assets/img/descarga.jpg">
66 <div class="card-body p-2">
67 <p class="m-0 card-text text-muted">Galletas Oreo x117 grs Chocolate.</p>
68 <p class="m-0 card-text text-muted">COD. 12121222</p>
69 </div>
70 </div>
71 </div>
72
73 <!-- BUSCAR PRODUCTOS -->
74 <div class="card bg-white border-0 shadow rounded w-100 mt-4">
75 <div class="card-body p-4">
76 <p class="h3 card-title">Buscar Productos</p>
77 <p class="h5 card-text text-muted font-weight-light">
78 Busque aquí los productos<br>
79 que no tienen código
80 </p>
81 </div>
82 </div>
83
84 </div>
85
86 </div>
87
88 </div>
89
90 <!-- SIDEBAR -->
91 <app-sidebar class="col-3 col-md-2 vh-100 bg-dark text-white"></app-sidebar>
92 </div>
src/app/inicio/inicio.component.scss
View file @ d058881
src/app/inicio/inicio.component.spec.ts
View file @ d058881
1 import { async, ComponentFixture, TestBed } from '@angular/core/testing'; File was deleted
2
3 import { InicioComponent } from './inicio.component';
4
5 describe('InicioComponent', () => {
6 let component: InicioComponent;
7 let fixture: ComponentFixture<InicioComponent>;
8
9 beforeEach(async(() => {
10 TestBed.configureTestingModule({
11 declarations: [ InicioComponent ]
12 })
13 .compileComponents();
14 }));
15
16 beforeEach(() => {
17 fixture = TestBed.createComponent(InicioComponent);
18 component = fixture.componentInstance;
19 fixture.detectChanges();
20 });
21
22 it('should create', () => {
23 expect(component).toBeTruthy();
24 });
25 });
26 1 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
src/app/inicio/inicio.component.ts
View file @ d058881
1 import { Component, OnInit } from '@angular/core'; File was deleted
2
3 @Component({
4 selector: 'app-inicio',
5 templateUrl: './inicio.component.html',
6 styleUrls: ['./inicio.component.scss']
7 })
8 export class InicioComponent implements OnInit {
9
10 constructor() { }
11
12 ngOnInit() {
13 }
14
15 }
16 1 import { Component, OnInit } from '@angular/core';
src/app/services/producto.service.spec.ts
Diff comments   View file @ d058881
File was created 1 import { TestBed } from '@angular/core/testing';
2
3 import { ProductoService } from './producto.service';
4
5 describe('ProductoService', () => {
6 beforeEach(() => TestBed.configureTestingModule({}));
7
8 it('should be created', () => {
9 const service: ProductoService = TestBed.get(ProductoService);
10 expect(service).toBeTruthy();
11 });
12 });
13
src/app/services/producto.service.ts
Diff comments   View file @ d058881
File was created 1 import { Injectable } from '@angular/core';
2 import { HttpClient } from '@angular/common/http';
3 import { Observable } from 'rxjs';
4
5 @Injectable({
6 providedIn: 'root'
7 })
8 export class ProductoService {
9
10 constructor(private http: HttpClient) { }
11
12 getAll(): Observable<any> {
13 return this.http.get('http://10.231.45.179:4705/autoservicio/articulos')
14 }
15
16 }
17
src/app/sidebar/sidebar.component.html
View file @ d058881
1 <div class="d-flex align-items-center flex-column h-100 bg-dark pt-2 text-center"> File was deleted
2
3 <h4 class="border-bottom border-white"> Mi compra </h4>
4 <div class="overflow-auto mb-2">
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="...">
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">
9 <p class="m-0 card-description">{{prod.desc}}</p>
10 <p class="m-0 card-description">COD: {{prod.cod}}</p>
11 </div>
12 <div class="col-4 p-1 text-center my-auto">
13 {{prod.precio | currency}}
14 </div>
15 </div>
16 <div class="row m-0 p-0">
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>
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">
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>
23 <button type="button" class="btn btn-light btn-sm mb-2" (click)="decrementarContador(i)">-</button>
24 </div>
25 </div>
26 </div>
27 </div>
28 </div>
29
30 <div class="card mt-auto blue-gradient border-0">
31 <div class="card-body row">
32 <div class="col">
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>
35 <h3 class="text-secondary">Total</h3>
36 <h3 class="text-dark"><strong>{{total | currency}}</strong></h3>
37 </div>
38 <div class="col 12 p-0">
39 <button type="button" class="btn btn-light shadow mb-2"><strong>Finalizar y pagar</strong></button>
40 <button type="button" class="btn btn-light shadow btn-sm">Cancelar</button>
41 </div>
42 </div>
43 </div> 1 <div class="d-flex align-items-center flex-column h-100 bg-dark pt-2 text-center">
src/app/sidebar/sidebar.component.scss
View file @ d058881
1 .card-description{ File was deleted
2 font-size: 12px;
3 }
src/app/sidebar/sidebar.component.spec.ts
View file @ d058881
1 import { async, ComponentFixture, TestBed } from '@angular/core/testing'; File was deleted
2
3 import { SidebarComponent } from './sidebar.component';
4
5 describe('SidebarComponent', () => {
6 let component: SidebarComponent;
7 let fixture: ComponentFixture<SidebarComponent>;
8
9 beforeEach(async(() => {
10 TestBed.configureTestingModule({
11 declarations: [SidebarComponent]
12 })
13 .compileComponents();
14 }));
15
16 beforeEach(() => {
17 fixture = TestBed.createComponent(SidebarComponent);
18 component = fixture.componentInstance;
19 fixture.detectChanges();
20 });
21
22 it('should create', () => {
23 expect(component).toBeTruthy();
24 });
25 });
26 1 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
src/app/sidebar/sidebar.component.ts
View file @ d058881
1 import { Component, OnInit } from '@angular/core'; File was deleted
2 import { timingSafeEqual } from 'crypto';
3
4 @Component({
5 selector: 'app-sidebar',
6 templateUrl: './sidebar.component.html',
7 styleUrls: ['./sidebar.component.scss']
8 })
9 export class SidebarComponent implements OnInit {
10
11 private cont: number = 1;
12 private min: number = 1;
13 private max: number = 50;
14 private total: number = 0;
15
16 private productos = [ 1 import { Component, OnInit } from '@angular/core';
17 { 2 import { timingSafeEqual } from 'crypto';
18 "id": 1, 3
19 "desc": "Galletas Oreo", 4 @Component({
20 "cod": 225412, 5 selector: 'app-sidebar',
21 "precio": 15, 6 templateUrl: './sidebar.component.html',
22 "img": "./assets/descarga.jpg", 7 styleUrls: ['./sidebar.component.scss']
23 "cantidad": 1 8 })
24 }, 9 export class SidebarComponent implements OnInit {
25 { 10
26 "id": 2, 11 private cont: number = 1;
27 "desc": "Coca cola 500ml", 12 private min: number = 1;
28 "cod": 512632, 13 private max: number = 50;
29 "precio": 40, 14 private total: number = 0;
30 "img": "./assets/descarga.jpg", 15
31 "cantidad": 1 16 private productos = [
32 }, 17 {
33 { 18 "id": 1,
34 "id": 3, 19 "desc": "Galletas Oreo",
35 "desc": "Pancho grande", 20 "cod": 225412,
36 "cod": 775987, 21 "precio": 15,
37 "precio": 45, 22 "img": "./assets/descarga.jpg",
38 "img": "./assets/descarga.jpg", 23 "cantidad": 1
39 "cantidad": 1 24 },
40 } 25 {
41 ]; 26 "id": 2,
42 27 "desc": "Coca cola 500ml",
43 constructor() { } 28 "cod": 512632,
44 29 "precio": 40,
45 ngOnInit() { 30 "img": "./assets/descarga.jpg",
46 this.getProductosCarrito(); 31 "cantidad": 1
47 this.getCantidadProductos(); 32 },
48 this.getTotal(); 33 {
49 } 34 "id": 3,
50 35 "desc": "Pancho grande",
51 getCantidadProductos(){ 36 "cod": 775987,
52 var aux = 0; 37 "precio": 45,
53 for (let i = 0; i < this.productos.length; i++) { 38 "img": "./assets/descarga.jpg",
54 ++aux; 39 "cantidad": 1
55 } 40 }
56 return this.cont = aux; 41 ];
57 42
58 } 43 constructor() { }
59 44
60 getProductosCarrito() { 45 ngOnInit() {
61 return this.productos; 46 this.getProductosCarrito();
62 } 47 this.getCantidadProductos();
63 48 this.getTotal();
64 getTotal(){ 49 }
65 var subTotal; 50
66 for (let i = 0; i < this.productos.length; i++) { 51 getCantidadProductos(){
67 this.productos[i].cantidad; 52 var aux = 0;
68 } 53 for (let i = 0; i < this.productos.length; i++) {
69 } 54 ++aux;
70 55 }
71 public aumentarContador(index) { 56 return this.cont = aux;
72 ++this.cont; 57
73 for (let i = 0; i < this.productos.length; i++) { 58 }
74 if (i === index) { 59
75 return (this.productos[i].cantidad === this.max) ? 60 getProductosCarrito() {
76 this.productos[i].cantidad : ++this.productos[i].cantidad; 61 return this.productos;
77 62 }
78 } 63
79 } 64 getTotal(){
80 } 65 var subTotal;
81 66 for (let i = 0; i < this.productos.length; i++) {
82 decrementarContador(index) { 67 this.productos[i].cantidad;
83 --this.cont; 68 }
84 for (let i = 0; i < this.productos.length; i++) { 69 }
85 if (i === index) { 70
86 return (this.productos[i].cantidad === this.min) ? 71 public aumentarContador(index) {
87 this.productos[i].cantidad : --this.productos[i].cantidad; 72 ++this.cont;
88 } 73 for (let i = 0; i < this.productos.length; i++) {
89 } 74 if (i === index) {
90 } 75 return (this.productos[i].cantidad === this.max) ?
91 76 this.productos[i].cantidad : ++this.productos[i].cantidad;
92 deleteProducto(index) { 77
93 --this.cont; 78 }
94 for (let i = 0; i < this.productos.length; i++) 79 }
95 if (i === index) { 80 }
96 this.productos.splice(i, 1); 81
97 return this.productos; 82 decrementarContador(index) {
98 } 83 --this.cont;
99 84 for (let i = 0; i < this.productos.length; i++) {
100 } 85 if (i === index) {
101 } 86 return (this.productos[i].cantidad === this.min) ?
102 87 this.productos[i].cantidad : --this.productos[i].cantidad;
src/assets/scss/animation.scss
Diff comments   View file @ d058881
File was created 1 .fade-in {
2 margin-top: 25px;
3 font-size: 21px;
4 text-align: center;
5 animation: fadein 1s;
6 -moz-animation: fadein 1s; /* Firefox */
7 -webkit-animation: fadein 1s; /* Safari and Chrome */
8 -o-animation: fadein 1s; /* Opera */
9 }
10
11 @keyframes fadein {
12 from {
13 opacity: 0;
14 }
15 to {
16 opacity: 1;
17 }
18 }
19
20 @-moz-keyframes fadein {
21 /* Firefox */
22 from {
23 opacity: 0;
24 }
25 to {
26 opacity: 1;
27 }
28 }
29
30 @-webkit-keyframes fadein {
31 /* Safari and Chrome */
32 from {
33 opacity: 0;
34 }
35 to {
36 opacity: 1;
37 }
38 }
39
40 @-o-keyframes fadein {
41 /* Opera */
42 from {
43 opacity: 0;
44 }
45 to {
46 opacity: 1;
47 }
48 }
49
1 @import './assets/scss/animation.scss';
2
1 .blur { 3 .blur {
2 filter: blur(10px); 4 filter: blur(10px);
3 -webkit-filter: blur(10px); 5 -webkit-filter: blur(10px);
4 } 6 }
5 7
6 .disable-user-select { 8 .disable-user-select {
7 -webkit-user-select: none; 9 -webkit-user-select: none;
8 -moz-user-select: none; 10 -moz-user-select: none;
9 -ms-user-select: none; 11 -ms-user-select: none;
10 user-select: none; 12 user-select: none;
11 } 13 }
12 14
13 .blue-gradient{ 15 .blue-gradient{
14 background: linear-gradient(0deg, rgb(20,56,68),rgb(252, 252, 252)); 16 background: linear-gradient(0deg, rgb(20,56,68),rgb(252, 252, 252));
15 } 17 }
16 18
17 .rounded { 19 .rounded {
18 border-radius: 1.5rem !important; 20 border-radius: 1.5rem !important;
19 } 21 }
22
23 .card-effect {
24 &:active{
25 background-color: #c9c9c9b3 !important;
26 transition: background-color 0.5s;
27 }
28 &:focus{
29 background-color: #c9c9c9b3 !important;
30 transition: background-color 0.5s;
31 }
32 }
20 33