From aabe3945f0c3269153eb4f1bd1d16d6596aff9cd Mon Sep 17 00:00:00 2001
From: mpuebla <mpuebla@focasoftware.com>
Date: Fri, 6 Sep 2019 17:47:10 -0300
Subject: [PATCH] Arreglo de responsividad.

---
 .../busqueda-productos.component.html              | 156 +++++++++++----------
 1 file changed, 79 insertions(+), 77 deletions(-)

diff --git a/src/app/components/busqueda-productos/busqueda-productos.component.html b/src/app/components/busqueda-productos/busqueda-productos.component.html
index 8727d1f..6fced0f 100644
--- a/src/app/components/busqueda-productos/busqueda-productos.component.html
+++ b/src/app/components/busqueda-productos/busqueda-productos.component.html
@@ -4,99 +4,101 @@
     <!-- NOMBRE DE SECCION -->
     <div class="row m-0">
       <div class="col-12 p-0">
-        <p class="h5 py-1 bg-gray text-muted text-center">
+        <p class="h5 m-0 py-1 bg-gray text-muted text-center">
           {{title}}
           <i *ngIf="title === 'Búsqueda'" class="fa fa-search"></i>
         </p>
       </div>
     </div>
 
-    <div class="row m-3 disable-user-select">
-
-      <!-- FILTROS -->
-      <div *ngIf="queMostrar != 'promociones'" class="col-sm-2 p-1">
-        <div class="text-center">
-          <p class="font-weight-bold text-muted border-bottom pb-2">Buscar por Categoría</p>
-        </div>
-        <ul class="list-group">
-          <li
-            [ngClass]="{active: categoriaActive == 0}"
-            (click)="categoriaActive = 0; filterItems()"
-            class="list-group-item list-group-item-action text-center my-1 p-2 h6">
-            Todos
-          </li>
-          <li
-            *ngFor="let categoria of categorias"
-            [ngClass]="{active: categoriaActive == categoria.id}"
-            (click)="categoriaActive = categoria.id; filterItems()"
-            class="list-group-item list-group-item-action text-center my-1 p-2 h6">
-            {{categoria.detalle}}
-          </li>
-        </ul>
-      </div>
-
-      <!-- SEARCH INPUT -->
-      <div *ngIf="productos.length > 0" class="fade-in col">
-
-        <div class="row search">
-          <div class="col-sm-10">
-            <span class="fa fa-search form-control-lg form-control-search pl-3"></span>
-            <input
-              [matKeyboard]="'spanish'"
-              type="text"
-              class="form-control form-control-lg shadow-sm rounded-pill px-5"
-              placeholder="Búsqueda productos"
-              [(ngModel)]="searchTerm"
-              (ngModelChange)="filterItems()">
-          </div>
-          <!-- BOTON VOLVER -->
-          <div class="col-sm-2">
-            <button
-              type="button"
-              class="btn btn-light btn-lg shadow-sm"
-              [routerLink]="['/inicio']">
-              <span class="font-weight-normal h6 pr-2">Volver</span>
-              <i class="fa fa-undo text-warning" aria-hidden="true"></i>
-            </button>
-          </div>
-          <div class="col-sm-12 my-2 h5">
-            <button
-              class="btn btn-outline-primary badge badge-light px-2 shadow-sm"
-              [ngClass]="{'active': ordenandoByVendidos}"
-              (click)="ordenandoByVendidos = !ordenandoByVendidos; filterItems()"
-            >Más vendidos</button>
+    <div class="container-fluid">
+      <div class="row m-2 disable-user-select">
+  
+        <!-- FILTROS -->
+        <div *ngIf="queMostrar != 'promociones'" class="col-sm-2 p-1">
+          <div class="text-center">
+            <p class="font-weight-bold text-muted border-bottom pb-2">Buscar por Categoría</p>
           </div>
+          <ul class="list-group">
+            <li
+              [ngClass]="{active: categoriaActive == 0}"
+              (click)="categoriaActive = 0; filterItems()"
+              class="list-group-item list-group-item-action text-center my-1 p-2 h6">
+              Todos
+            </li>
+            <li
+              *ngFor="let categoria of categorias"
+              [ngClass]="{active: categoriaActive == categoria.id}"
+              (click)="categoriaActive = categoria.id; filterItems()"
+              class="list-group-item list-group-item-action text-center my-1 p-2 h6">
+              {{categoria.detalle}}
+            </li>
+          </ul>
         </div>
-        <!-- LISTA DE PRODUCTOS -->
-        <div class="row align-items-start vh-70 overflow-scroll disable-user-select">
-          <div
-            class="col-4 p-2"
-            *ngFor="let producto of auxProductos">
+  
+        <!-- SEARCH INPUT -->
+        <div *ngIf="productos.length > 0" class="fade-in col p-0">
+  
+          <div class="row m-0 search">
+            <div class="col-sm-10 p-2">
+              <span class="fa fa-search form-control-lg form-control-search pl-3"></span>
+              <input
+                [matKeyboard]="'spanish'"
+                type="text"
+                class="form-control form-control-lg shadow-sm rounded-pill px-5"
+                placeholder="Búsqueda productos"
+                [(ngModel)]="searchTerm"
+                (ngModelChange)="filterItems()">
+            </div>
+            <!-- BOTON VOLVER -->
+            <div class="col-sm-2 p-2">
+              <button
+                type="button"
+                class="btn btn-light btn-lg shadow-sm"
+                [routerLink]="['/inicio']">
+                <span class="font-weight-normal h6 pr-2">Volver</span>
+                <i class="fa fa-undo text-warning" aria-hidden="true"></i>
+              </button>
+            </div>
+            <div class="col-sm-12 m-0 p-2 h5">
+              <button
+                class="btn btn-outline-primary badge badge-light px-2 shadow-sm"
+                [ngClass]="{'active': ordenandoByVendidos}"
+                (click)="ordenandoByVendidos = !ordenandoByVendidos; filterItems()"
+              >Más vendidos</button>
+            </div>
+          </div>
+          <!-- LISTA DE PRODUCTOS -->
+          <div class="row m-0 align-items-start vh-70 overflow-scroll disable-user-select">
             <div
-              class="card-effect bg-white rounded-sm shadow border-0"
-              (click)="elegirProducto(producto)">
-              <img src="{{apiImagenes}}/imagenes/{{producto.imagenes[0].imagen}}" class="rounded-sm w-100 m-auto">
-              <div class="p-2">
-                <p class="h6 min-h-40 text-left m-0"><small>{{producto.DET_LAR}}</small></p>
-                <div class="row m-0">
-                  <div class="col-12 my-auto pt-2 pr-2 p-0">
-                    <p class="text-right m-0 h6">{{producto.PreVen | currency}}</p>
+              class="col-4 col-lg-3 p-2"
+              *ngFor="let producto of auxProductos">
+              <div
+                class="card-effect bg-white rounded-sm shadow border-0"
+                (click)="elegirProducto(producto)">
+                <img src="{{apiImagenes}}/imagenes/{{producto.imagenes[0].imagen}}" class="rounded-sm w-100 m-auto">
+                <div class="p-2">
+                  <p class="h6 min-h-40 text-left m-0"><small>{{producto.DET_LAR}}</small></p>
+                  <div class="row m-0">
+                    <div class="col-12 my-auto pt-2 pr-2 p-0">
+                      <p class="text-right m-0 h6">{{producto.PreVen | currency}}</p>
+                    </div>
                   </div>
                 </div>
               </div>
             </div>
           </div>
         </div>
+  
+        <!-- SPINNER -->
+        <div
+          *ngIf="productos.length === 0 && showSpinner"
+          class="col-sm-10 p-0 align-self-center text-center">
+          <div class="spinner-border spinner-lg text-secondary" role="status"></div>
+          <span class="text-secondary m-2 h5">Cargando información.</span>
+        </div>
+  
       </div>
-
-      <!-- SPINNER -->
-      <div
-        *ngIf="productos.length === 0 && showSpinner"
-        class="col-sm-10 p-0 align-self-center text-center">
-        <div class="spinner-border spinner-lg text-secondary" role="status"></div>
-        <span class="text-secondary m-2 h5">Cargando información.</span>
-      </div>
-
     </div>
 
   </div>
-- 
1.9.1