Martin Macola / autoservicio

Download as
Browse Code »

Commit 2b7c3afafb102865abf064a04bb2ed6a6e9495e3

Authored by Marcelo Puebla
1 parent fe00b86c4d
Exists in master

Pantalla de buscar productos.

Showing 1 changed file with 67 additions and 15 deletions   Show diff stats
src/app/components/busqueda-productos/busqueda-productos.component.html
Diff comments   View file @ 2b7c3af
1 <div class="row m-0 fade-in"> 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 text-center">Búsqueda</p> 9 <p class="h5 py-1 bg-light text-muted text-center">
10 Búsqueda
11 <i class="fa fa-search"></i>
12 </p>
10 </div> 13 </div>
11 </div> 14 </div>
12 15
13 <div class="row m-4 d-flex align-items-center"> 16 <div class="row m-4 disable-user-select">
14 17
15 <div class="col-sm-7"> 18 <!-- FILTROS -->
16 <!-- SEARCH INPUT --> 19 <div class="col-sm-2">
17 <div class="form-group search"> 20 <div class="text-center">
18 <span class="fa fa-search form-control-lg form-control-search pl-3"></span> 21 <p class="font-weight-bold text-muted border-bottom pb-2">Buscar por Categoría</p>
19 <input
20 type="text"
21 class="form-control form-control-lg rounded-pill px-5"
22 placeholder="Búsqueda productos">
23 </div> 22 </div>
23 <ul class="list-group">
24 <li class="list-group-item list-group-item-action my-1 py-2 h6">
25 Combos y Promociones
26 </li>
27 <li
28 class="list-group-item list-group-item-action my-1 p-2 h6 shadow-sm font-weight-bold">
29 Todos
30 </li>
31 <li
32 class="list-group-item list-group-item-action my-1 p-2 h6 shadow-sm">
33 Bebidas
34 </li>
35 <li
36 class="list-group-item list-group-item-action my-1 p-2 h6 shadow-sm">
37 Sandwichería
38 </li>
39 <li
40 class="list-group-item list-group-item-action my-1 p-2 h6 shadow-sm">
41 Panaderia
42 </li>
43 <li
44 class="list-group-item list-group-item-action my-1 p-2 h6 shadow-sm">
45 Golosinas
46 </li>
47 <li
48 class="list-group-item list-group-item-action my-1 p-2 h6 shadow-sm">
49 Tabaqueria
50 </li>
51 </ul>
52 </div>
24 53
54 <!-- SEARCH INPUT -->
55 <div class="col-sm-10">
56
57 <div class="form-group row search">
58 <div class="col-sm-10">
59 <span class="fa fa-search form-control-lg form-control-search pl-3"></span>
60 <input
61 type="text"
62 class="form-control form-control-lg shadow-sm rounded-pill px-5"
63 placeholder="Búsqueda productos">
64 </div>
65 <!-- BOTON VOLVER -->
66 <div class="col-sm-2">
67 <button
68 type="button"
69 class="btn btn-light btn-lg shadow-sm"
70 [routerLink]="['/inicio']">
71 <span class="font-weight-normal h6">Volver&nbsp;&nbsp;</span>
72 <i class="fa fa-undo text-warning" aria-hidden="true"></i>
73 </button>
74 </div>
75 </div>
76
77 <!-- LISTA DE PRODUCTOS -->
25 <div class="row pr-3 vh-50 overflow-scroll disable-user-select"> 78 <div class="row pr-3 vh-50 overflow-scroll disable-user-select">
26 <div 79 <div
27 class="col-4 p-2" 80 class="col-4 p-2"
28 *ngFor="let producto of productos"> 81 *ngFor="let producto of productos">
29 <div class="card card-effect bg-white rounded-sm shadow border-0"> 82 <div class="card card-effect bg-white rounded-sm shadow border-0">
30 <img src="../../../assets/img/descarga.jpg" class="card-img-top w-75 m-auto"> 83 <img src="../../../assets/img/descarga.jpg" class="card-img-top w-75 m-auto">
31 <div class="card-body p-2"> 84 <div class="card-body p-2">
32 <p class="h6 text-left m-0">{{producto.DetArt}}</p> 85 <p class="h6 text-left m-0">{{producto.DetArt}}</p>
33 <div class="row justify-content-between m-0"> 86 <div class="row justify-content-between m-0">
34 <div class="col-auto p-0"> 87 <div class="col-12 p-0">
35 <div class="text-left"> 88 <div class="text-left">
36 <p class="m-0 h6"><small>{{producto.DetArt}}</small></p> 89 <p class="m-0 h6"><small>{{producto.DetArt}}</small></p>
37 <p class="m-0 h6"><small>COD. {{producto.CodRub}}</small></p> 90 <p class="m-0 h6"><small>COD. {{producto.CodRub}}</small></p>
38 </div> 91 </div>
39 </div> 92 </div>
40 <div class="col-auto my-auto pt-2 pr-2 p-0"> 93 <div class="col-12 my-auto pt-2 pr-2 p-0">
41 <p class="text-right m-0 h6">{{producto.PreVen | currency}}</p> 94 <p class="text-right m-0 h6">{{producto.PreVen | currency}}</p>
42 </div> 95 </div>
43 </div> 96 </div>
44 </div> 97 </div>
45 </div> 98 </div>
46
47 </div> 99 </div>
48 </div> 100 </div>
49
50 </div> 101 </div>
102
51 </div> 103 </div>
52 104