Martin Macola / autoservicio

Download as
Browse Code »

Commit aabe3945f0c3269153eb4f1bd1d16d6596aff9cd

Authored by Marcelo Puebla
1 parent 6544f80bf6
Exists in master

Arreglo de responsividad.

Showing 1 changed file with 79 additions and 77 deletions   Show diff stats
src/app/components/busqueda-productos/busqueda-productos.component.html
Diff comments   View file @ aabe394
... ... @@ -4,99 +4,101 @@
4 4 <!-- NOMBRE DE SECCION -->
5 5 <div class="row m-0">
6 6 <div class="col-12 p-0">
7   - <p class="h5 py-1 bg-gray text-muted text-center">
  7 + <p class="h5 m-0 py-1 bg-gray text-muted text-center">
8 8 {{title}}
9 9 <i *ngIf="title === 'Búsqueda'" class="fa fa-search"></i>
10 10 </p>
11 11 </div>
12 12 </div>
13 13  
14   - <div class="row m-3 disable-user-select">
15   -
16   - <!-- FILTROS -->
17   - <div *ngIf="queMostrar != 'promociones'" class="col-sm-2 p-1">
18   - <div class="text-center">
19   - <p class="font-weight-bold text-muted border-bottom pb-2">Buscar por Categoría</p>
20   - </div>
21   - <ul class="list-group">
22   - <li
23   - [ngClass]="{active: categoriaActive == 0}"
24   - (click)="categoriaActive = 0; filterItems()"
25   - class="list-group-item list-group-item-action text-center my-1 p-2 h6">
26   - Todos
27   - </li>
28   - <li
29   - *ngFor="let categoria of categorias"
30   - [ngClass]="{active: categoriaActive == categoria.id}"
31   - (click)="categoriaActive = categoria.id; filterItems()"
32   - class="list-group-item list-group-item-action text-center my-1 p-2 h6">
33   - {{categoria.detalle}}
34   - </li>
35   - </ul>
36   - </div>
37   -
38   - <!-- SEARCH INPUT -->
39   - <div *ngIf="productos.length > 0" class="fade-in col">
40   -
41   - <div class="row search">
42   - <div class="col-sm-10">
43   - <span class="fa fa-search form-control-lg form-control-search pl-3"></span>
44   - <input
45   - [matKeyboard]="'spanish'"
46   - type="text"
47   - class="form-control form-control-lg shadow-sm rounded-pill px-5"
48   - placeholder="Búsqueda productos"
49   - [(ngModel)]="searchTerm"
50   - (ngModelChange)="filterItems()">
51   - </div>
52   - <!-- BOTON VOLVER -->
53   - <div class="col-sm-2">
54   - <button
55   - type="button"
56   - class="btn btn-light btn-lg shadow-sm"
57   - [routerLink]="['/inicio']">
58   - <span class="font-weight-normal h6 pr-2">Volver</span>
59   - <i class="fa fa-undo text-warning" aria-hidden="true"></i>
60   - </button>
61   - </div>
62   - <div class="col-sm-12 my-2 h5">
63   - <button
64   - class="btn btn-outline-primary badge badge-light px-2 shadow-sm"
65   - [ngClass]="{'active': ordenandoByVendidos}"
66   - (click)="ordenandoByVendidos = !ordenandoByVendidos; filterItems()"
67   - >Más vendidos</button>
  14 + <div class="container-fluid">
  15 + <div class="row m-2 disable-user-select">
  16 +
  17 + <!-- FILTROS -->
  18 + <div *ngIf="queMostrar != 'promociones'" class="col-sm-2 p-1">
  19 + <div class="text-center">
  20 + <p class="font-weight-bold text-muted border-bottom pb-2">Buscar por Categoría</p>
68 21 </div>
  22 + <ul class="list-group">
  23 + <li
  24 + [ngClass]="{active: categoriaActive == 0}"
  25 + (click)="categoriaActive = 0; filterItems()"
  26 + class="list-group-item list-group-item-action text-center my-1 p-2 h6">
  27 + Todos
  28 + </li>
  29 + <li
  30 + *ngFor="let categoria of categorias"
  31 + [ngClass]="{active: categoriaActive == categoria.id}"
  32 + (click)="categoriaActive = categoria.id; filterItems()"
  33 + class="list-group-item list-group-item-action text-center my-1 p-2 h6">
  34 + {{categoria.detalle}}
  35 + </li>
  36 + </ul>
69 37 </div>
70   - <!-- LISTA DE PRODUCTOS -->
71   - <div class="row align-items-start vh-70 overflow-scroll disable-user-select">
72   - <div
73   - class="col-4 p-2"
74   - *ngFor="let producto of auxProductos">
  38 +
  39 + <!-- SEARCH INPUT -->
  40 + <div *ngIf="productos.length > 0" class="fade-in col p-0">
  41 +
  42 + <div class="row m-0 search">
  43 + <div class="col-sm-10 p-2">
  44 + <span class="fa fa-search form-control-lg form-control-search pl-3"></span>
  45 + <input
  46 + [matKeyboard]="'spanish'"
  47 + type="text"
  48 + class="form-control form-control-lg shadow-sm rounded-pill px-5"
  49 + placeholder="Búsqueda productos"
  50 + [(ngModel)]="searchTerm"
  51 + (ngModelChange)="filterItems()">
  52 + </div>
  53 + <!-- BOTON VOLVER -->
  54 + <div class="col-sm-2 p-2">
  55 + <button
  56 + type="button"
  57 + class="btn btn-light btn-lg shadow-sm"
  58 + [routerLink]="['/inicio']">
  59 + <span class="font-weight-normal h6 pr-2">Volver</span>
  60 + <i class="fa fa-undo text-warning" aria-hidden="true"></i>
  61 + </button>
  62 + </div>
  63 + <div class="col-sm-12 m-0 p-2 h5">
  64 + <button
  65 + class="btn btn-outline-primary badge badge-light px-2 shadow-sm"
  66 + [ngClass]="{'active': ordenandoByVendidos}"
  67 + (click)="ordenandoByVendidos = !ordenandoByVendidos; filterItems()"
  68 + >Más vendidos</button>
  69 + </div>
  70 + </div>
  71 + <!-- LISTA DE PRODUCTOS -->
  72 + <div class="row m-0 align-items-start vh-70 overflow-scroll disable-user-select">
75 73 <div
76   - class="card-effect bg-white rounded-sm shadow border-0"
77   - (click)="elegirProducto(producto)">
78   - <img src="{{apiImagenes}}/imagenes/{{producto.imagenes[0].imagen}}" class="rounded-sm w-100 m-auto">
79   - <div class="p-2">
80   - <p class="h6 min-h-40 text-left m-0"><small>{{producto.DET_LAR}}</small></p>
81   - <div class="row m-0">
82   - <div class="col-12 my-auto pt-2 pr-2 p-0">
83   - <p class="text-right m-0 h6">{{producto.PreVen | currency}}</p>
  74 + class="col-4 col-lg-3 p-2"
  75 + *ngFor="let producto of auxProductos">
  76 + <div
  77 + class="card-effect bg-white rounded-sm shadow border-0"
  78 + (click)="elegirProducto(producto)">
  79 + <img src="{{apiImagenes}}/imagenes/{{producto.imagenes[0].imagen}}" class="rounded-sm w-100 m-auto">
  80 + <div class="p-2">
  81 + <p class="h6 min-h-40 text-left m-0"><small>{{producto.DET_LAR}}</small></p>
  82 + <div class="row m-0">
  83 + <div class="col-12 my-auto pt-2 pr-2 p-0">
  84 + <p class="text-right m-0 h6">{{producto.PreVen | currency}}</p>
  85 + </div>
84 86 </div>
85 87 </div>
86 88 </div>
87 89 </div>
88 90 </div>
89 91 </div>
  92 +
  93 + <!-- SPINNER -->
  94 + <div
  95 + *ngIf="productos.length === 0 && showSpinner"
  96 + class="col-sm-10 p-0 align-self-center text-center">
  97 + <div class="spinner-border spinner-lg text-secondary" role="status"></div>
  98 + <span class="text-secondary m-2 h5">Cargando información.</span>
  99 + </div>
  100 +
90 101 </div>
91   -
92   - <!-- SPINNER -->
93   - <div
94   - *ngIf="productos.length === 0 && showSpinner"
95   - class="col-sm-10 p-0 align-self-center text-center">
96   - <div class="spinner-border spinner-lg text-secondary" role="status"></div>
97   - <span class="text-secondary m-2 h5">Cargando información.</span>
98   - </div>
99   -
100 102 </div>
101 103  
102 104 </div>