Commit c7527cd7c2f2a52b388af4f2731fd6d4b1c1ee32
Exists in
master
Merge branch 'master' into 'master'
Master(mpuebla) See merge request !6
Showing
16 changed files
Show diff stats
src/app/app-routing.module.ts
1 | 1 | import { NgModule } from '@angular/core'; |
2 | 2 | import { Routes, RouterModule } from '@angular/router'; |
3 | 3 | import { HomeComponent } from './home/home.component'; |
4 | -import { CargarProductosComponent } from './cargar-productos/cargar-productos.component'; | |
4 | +import { InicioComponent } from './inicio/inicio.component'; | |
5 | 5 | |
6 | 6 | const routes: Routes = [ |
7 | 7 | { path: 'home', component: HomeComponent }, |
8 | - { path: 'cargar-productos', component: CargarProductosComponent }, | |
8 | + { path: 'inicio', component: InicioComponent }, | |
9 | 9 | { path: '**', redirectTo: '/home', pathMatch: 'full' }, |
10 | 10 | ]; |
11 | 11 |
src/app/app.module.ts
... | ... | @@ -7,7 +7,7 @@ import { HeaderComponent } from './header/header.component'; |
7 | 7 | import { SidebarComponent } from './sidebar/sidebar.component'; |
8 | 8 | import { CarouselComponent } from './carousel/carousel.component'; |
9 | 9 | import { HomeComponent } from './home/home.component'; |
10 | -import { CargarProductosComponent } from './cargar-productos/cargar-productos.component'; | |
10 | +import { InicioComponent } from './inicio/inicio.component'; | |
11 | 11 | |
12 | 12 | @NgModule({ |
13 | 13 | declarations: [ |
... | ... | @@ -16,7 +16,7 @@ import { CargarProductosComponent } from './cargar-productos/cargar-productos.co |
16 | 16 | SidebarComponent, |
17 | 17 | CarouselComponent, |
18 | 18 | HomeComponent, |
19 | - CargarProductosComponent | |
19 | + InicioComponent | |
20 | 20 | ], |
21 | 21 | imports: [ |
22 | 22 | BrowserModule, |
src/app/cargar-productos/cargar-productos.component.html
... | ... | @@ -1,8 +0,0 @@ |
1 | -<div class="row m-0 h-100"> | |
2 | - <div class="col-10 p-0"> | |
3 | - <div class="bg-danger py-1 py-sm-2 py-lg-5"> | |
4 | - <p class="text-center">HEADER</p> | |
5 | - </div> | |
6 | - </div> | |
7 | - <app-sidebar class="col-2 col-md-2 w-100 h-100 bg-dark text-white"></app-sidebar> | |
8 | -</div> | |
9 | 0 | \ No newline at end of file |
src/app/cargar-productos/cargar-productos.component.scss
src/app/cargar-productos/cargar-productos.component.spec.ts
... | ... | @@ -1,25 +0,0 @@ |
1 | -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; | |
2 | - | |
3 | -import { CargarProductosComponent } from './cargar-productos.component'; | |
4 | - | |
5 | -describe('CargarProductosComponent', () => { | |
6 | - let component: CargarProductosComponent; | |
7 | - let fixture: ComponentFixture<CargarProductosComponent>; | |
8 | - | |
9 | - beforeEach(async(() => { | |
10 | - TestBed.configureTestingModule({ | |
11 | - declarations: [ CargarProductosComponent ] | |
12 | - }) | |
13 | - .compileComponents(); | |
14 | - })); | |
15 | - | |
16 | - beforeEach(() => { | |
17 | - fixture = TestBed.createComponent(CargarProductosComponent); | |
18 | - component = fixture.componentInstance; | |
19 | - fixture.detectChanges(); | |
20 | - }); | |
21 | - | |
22 | - it('should create', () => { | |
23 | - expect(component).toBeTruthy(); | |
24 | - }); | |
25 | -}); |
src/app/cargar-productos/cargar-productos.component.ts
... | ... | @@ -1,15 +0,0 @@ |
1 | -import { Component, OnInit } from '@angular/core'; | |
2 | - | |
3 | -@Component({ | |
4 | - selector: 'app-cargar-productos', | |
5 | - templateUrl: './cargar-productos.component.html', | |
6 | - styleUrls: ['./cargar-productos.component.scss'] | |
7 | -}) | |
8 | -export class CargarProductosComponent implements OnInit { | |
9 | - | |
10 | - constructor() { } | |
11 | - | |
12 | - ngOnInit() { | |
13 | - } | |
14 | - | |
15 | -} |
src/app/home/home.component.html
1 | -<div class="container-fluid h-100"> | |
2 | - <div class="row h-100"> | |
1 | +<div class="container-fluid"> | |
2 | + <div class="row"> | |
3 | 3 | <div class="col p-0"> |
4 | - <div class="w-100 h-100 d-flex align-items-start flex-column disable-user-select"> | |
4 | + <div class="vh-100 d-flex align-items-start flex-column disable-user-select"> | |
5 | 5 | |
6 | 6 | <!-- HEADER --> |
7 | 7 | <div class="bg-dark py-1 py-sm-2 py-lg-5 w-100"> |
src/app/home/home.component.ts
src/app/inicio/inicio.component.html
... | ... | @@ -0,0 +1,92 @@ |
1 | +<div class="row m-0"> | |
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> | |
0 | 93 | \ No newline at end of file |
src/app/inicio/inicio.component.scss
src/app/inicio/inicio.component.spec.ts
... | ... | @@ -0,0 +1,25 @@ |
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 | +}); |
src/app/inicio/inicio.component.ts
... | ... | @@ -0,0 +1,15 @@ |
1 | +import { Component, OnInit } from '@angular/core'; | |
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 | +} |
src/app/sidebar/sidebar.component.html
... | ... | @@ -3,7 +3,7 @@ |
3 | 3 | <h4 class="border-bottom border-white"> Mi compra </h4> |
4 | 4 | <div class="overflow-auto mb-2"> |
5 | 5 | <div class="card my-2 bg-primary border-0"> |
6 | - <img src="../../assets/descarga.jpg" class="card-img-top" alt="..."> | |
6 | + <img src="../../assets/img/descarga.jpg" class="card-img-top" alt="..."> | |
7 | 7 | <div class="card-body row m-0 p-0 px-1 py-1 shadow rounded"> |
8 | 8 | <div class="col-8 p-0 text-left my-auto"> |
9 | 9 | <p class="m-0 card-description">Galleta oreo x 199 gs Chocolate</p> |
src/assets/descarga.jpg
6.1 KB
src/assets/img/descarga.jpg
6.1 KB
src/styles.scss
1 | -html, | |
2 | -body { | |
3 | - height: 100% !important; | |
4 | - width: 100% !important; | |
5 | -} | |
6 | - | |
7 | 1 | .blur { |
8 | 2 | filter: blur(10px); |
9 | 3 | -webkit-filter: blur(10px); |
... | ... | @@ -15,6 +9,11 @@ body { |
15 | 9 | -ms-user-select: none; |
16 | 10 | user-select: none; |
17 | 11 | } |
12 | + | |
18 | 13 | .blue-gradient{ |
19 | 14 | background: linear-gradient(0deg, rgb(20,56,68),rgb(252, 252, 252)); |
20 | 15 | } |
16 | + | |
17 | +.rounded { | |
18 | + border-radius: 1.5rem !important; | |
19 | +} |