Commit c7527cd7c2f2a52b388af4f2731fd6d4b1c1ee32

Authored by Marcelo Puebla
Exists in master

Merge branch 'master' into 'master'

Master(mpuebla)

See merge request !6
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
... ... @@ -15,7 +15,7 @@ export class HomeComponent implements OnInit {
15 15  
16 16 @HostListener('document:click', ['$event'])
17 17 documentClick(event: MouseEvent) {
18   - this.router.navigate(['/cargar-productos']);
  18 + this.router.navigate(['/inicio']);
19 19 }
20 20  
21 21 }
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

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 +}