Commit 21c400ff81ee7b0f3f43812acce7bd88fa5ad0de
1 parent
fbfb312d3f
Exists in
master
Cambio en componente home, agregadas rutas.
Showing
6 changed files
with
60 additions
and
44 deletions
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 | +import { HomeComponent } from './home/home.component'; | |
4 | +import { CargarProductosComponent } from './cargar-productos/cargar-productos.component'; | |
3 | 5 | |
4 | -const routes: Routes = []; | |
6 | +const routes: Routes = [ | |
7 | + { path: 'home', component: HomeComponent }, | |
8 | + { path: 'cargar-productos', component: CargarProductosComponent }, | |
9 | + { path: '**', redirectTo: '/home', pathMatch: 'full' }, | |
10 | +]; | |
5 | 11 | |
6 | 12 | @NgModule({ |
7 | 13 | imports: [RouterModule.forRoot(routes)], |
src/app/app.component.html
src/app/app.module.ts
... | ... | @@ -7,6 +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 | 11 | |
11 | 12 | @NgModule({ |
12 | 13 | declarations: [ |
... | ... | @@ -14,7 +15,8 @@ import { HomeComponent } from './home/home.component'; |
14 | 15 | HeaderComponent, |
15 | 16 | SidebarComponent, |
16 | 17 | CarouselComponent, |
17 | - HomeComponent | |
18 | + HomeComponent, | |
19 | + CargarProductosComponent | |
18 | 20 | ], |
19 | 21 | imports: [ |
20 | 22 | BrowserModule, |
src/app/home/home.component.html
1 | -<!-- HEADER --> | |
2 | -<div class="bg-dark py-1 py-sm-2 py-lg-5 w-100"> | |
3 | - <p class="text-white text-center">HEADER</p> | |
4 | -</div> | |
1 | +<div class="container-fluid h-100"> | |
2 | + <div class="row h-100"> | |
3 | + <div class="col p-0"> | |
4 | + <div class="w-100 h-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> | |
5 | 10 | |
6 | -<div class="h-100 w-100 position-relative"> | |
7 | - <div class="background-image blur"></div> | |
8 | - <div class="row position-absolute w-100 h-100"> | |
9 | - <div class="col-5 my-auto"> | |
10 | - <!-- CAROUSEL --> | |
11 | - <div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel"> | |
12 | - <div class="carousel-inner"> | |
13 | - <div class="carousel-item active"> | |
14 | - <img class="m-auto img-fluid d-block w-75" | |
15 | - src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQWhHnLeoxWeJeiBKvVg-9zDzppOVX_AY5tXpRuS7If0mzb_01b" | |
16 | - alt=""> | |
17 | - </div> | |
18 | - <div class="carousel-item"> | |
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=""> | |
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> | |
22 | 37 | </div> |
23 | 38 | </div> |
24 | - </div> | |
25 | - </div> | |
26 | - <div class="col-7 my-auto"> | |
27 | - <div class="text-center text-white"> | |
28 | - <h1 class="display-2 font-weight-bold">¡BIENVENIDO!</h1> | |
29 | - <h1 class="display-3 font-weight-bold">Toque la pantalla<br>para comenzar.</h1> | |
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> | |
30 | 44 | </div> |
31 | 45 | </div> |
32 | 46 | </div> |
33 | -</div> | |
34 | - | |
35 | -<!-- FOOTER --> | |
36 | -<div class="bg-dark py-1 py-sm-2 py-lg-5 w-100"> | |
37 | - <p class="text-white text-center">FOOTER</p> | |
38 | 47 | </div> |
39 | 48 | \ No newline at end of file |
src/app/home/home.component.ts
1 | -import { Component, OnInit } from '@angular/core'; | |
1 | +import { Component, OnInit, HostListener } from '@angular/core'; | |
2 | +import { Router } from '@angular/router'; | |
2 | 3 | |
3 | 4 | @Component({ |
4 | 5 | selector: 'app-home', |
... | ... | @@ -7,9 +8,14 @@ import { Component, OnInit } from '@angular/core'; |
7 | 8 | }) |
8 | 9 | export class HomeComponent implements OnInit { |
9 | 10 | |
10 | - constructor() { } | |
11 | + constructor(private router: Router) { } | |
11 | 12 | |
12 | 13 | ngOnInit() { |
13 | 14 | } |
14 | 15 | |
16 | + @HostListener('document:click', ['$event']) | |
17 | + documentClick(event: MouseEvent) { | |
18 | + this.router.navigate(['/cargar-productos']); | |
19 | + } | |
20 | + | |
15 | 21 | } |
src/app/sidebar/sidebar.component.html
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 | 3 | <h4 class="border-bottom border-white"> Mi compra </h4> |
4 | 4 | |
... | ... | @@ -39,4 +39,4 @@ |
39 | 39 | </div> |
40 | 40 | </div> |
41 | 41 | </div> |
42 | - </div> | |
43 | 42 | \ No newline at end of file |
43 | +</div> | |
44 | 44 | \ No newline at end of file |