Mauricio Cattafi / autoservicio

Download as
Browse Code »

Commit bb4dd4483bac467f9c0aa56964924e8926d3c5dc

Authored by Marcelo Puebla
1 parent 0e18290652
Exists in master and in 1 other branch validar_pve

Agregado efecto en tarjetas y navegacion hacia busqueda productos.

Showing 2 changed files with 13 additions and 6 deletions   Show diff stats
src/app/inicio/inicio.component.html
Diff comments   View file @ bb4dd44
1 <div class="row m-0"> 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 font-weight-light text-center"><small>Inicio</small></p> 9 <p class="h5 py-1 bg-light text-muted font-weight-light text-center"><small>Inicio</small></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">
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 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 p-4"> 18 <div class="card-body 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 41
42 <!-- ORDENAR --> 42 <!-- ORDENAR -->
43 <div class="card bg-white border-0 shadow rounded w-100 mt-4"> 43 <div class="card card-effect bg-white border-0 shadow rounded w-100 mt-4">
44 <div class="card-body p-4"> 44 <div class="card-body p-4">
45 <p class="h3 card-title">Ordenar</p> 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> 46 <p class="h5 card-text text-muted font-weight-light">Arme su pedido y solo pase a retirar.</p>
47 </div> 47 </div>
48 <img class="card-img-bottom d-block w-50 mx-auto mb-4 rounded" src="../../assets/img/descarga.jpg"> 48 <img class="card-img-bottom d-block w-50 mx-auto mb-4 rounded" src="../../assets/img/descarga.jpg">
49 </div> 49 </div>
50 50
51 </div> 51 </div>
52 52
53 <div class="col-md-7 d-flex align-items-end flex-column"> 53 <div class="col-md-7 d-flex align-items-end flex-column">
54 54
55 <!-- CARGAR PRODUCTOS --> 55 <!-- CARGAR PRODUCTOS -->
56 <div class="card bg-white border-0 shadow rounded w-100 mb-auto"> 56 <div class="card card-effect bg-white border-0 shadow rounded w-100 mb-auto">
57 <div class="card-body p-4"> 57 <div class="card-body p-4">
58 <p class="h3 card-title">Cargar Productos</p> 58 <p class="h3 card-title">Cargar Productos</p>
59 <p class="h5 card-text text-muted font-weight-light"> 59 <p class="h5 card-text text-muted font-weight-light">
60 Coloque el código de<br> 60 Coloque el código de<br>
61 barras o QR frente al scanner. 61 barras o QR frente al scanner.
62 </p> 62 </p>
63 </div> 63 </div>
64 <div class="card bg-white border-0 w-75 mx-auto mb-4"> 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"> 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"> 66 <div class="card-body p-2">
67 <p class="m-0 card-text text-muted">Galletas Oreo x117 grs Chocolate.</p> 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> 68 <p class="m-0 card-text text-muted">COD. 12121222</p>
69 </div> 69 </div>
70 </div> 70 </div>
71 </div> 71 </div>
72 72
73 <!-- BUSCAR PRODUCTOS --> 73 <!-- BUSCAR PRODUCTOS -->
74 <div class="card bg-white border-0 shadow rounded w-100 mt-4"> 74 <div
75 (click)="goPage('busqueda-productos')"
76 class="card card-effect bg-white border-0 shadow rounded w-100 mt-4">
75 <div class="card-body p-4"> 77 <div class="card-body p-4">
76 <p class="h3 card-title">Buscar Productos</p> 78 <p class="h3 card-title">Buscar Productos</p>
77 <p class="h5 card-text text-muted font-weight-light"> 79 <p class="h5 card-text text-muted font-weight-light">
78 Busque aquí los productos<br> 80 Busque aquí los productos<br>
79 que no tienen código 81 que no tienen código
80 </p> 82 </p>
81 </div> 83 </div>
82 </div> 84 </div>
83 85
84 </div> 86 </div>
85 87
86 </div> 88 </div>
87 89
88 </div> 90 </div>
89 91
90 <!-- SIDEBAR --> 92 <!-- SIDEBAR -->
91 <app-sidebar class="col-3 col-md-2 vh-100 bg-dark text-white"></app-sidebar> 93 <app-sidebar class="col-3 col-md-2 vh-100 bg-dark text-white"></app-sidebar>
92 </div> 94 </div>
src/app/inicio/inicio.component.ts
Diff comments   View file @ bb4dd44
1 import { Component, OnInit } from '@angular/core'; 1 import { Component, OnInit } from '@angular/core';
2 import { Router } from '@angular/router';
2 3
3 @Component({ 4 @Component({
4 selector: 'app-inicio', 5 selector: 'app-inicio',
5 templateUrl: './inicio.component.html', 6 templateUrl: './inicio.component.html',
6 styleUrls: ['./inicio.component.scss'] 7 styleUrls: ['./inicio.component.scss']
7 }) 8 })
8 export class InicioComponent implements OnInit { 9 export class InicioComponent implements OnInit {
9 10
10 constructor() { } 11 constructor(private router: Router) { }
11 12
12 ngOnInit() { 13 ngOnInit() {
13 } 14 }
14 15
16 private goPage(pageUrl) {
17 this.router.navigate([pageUrl]);
18 }
19
15 } 20 }
16 21