Pantalla de buscar productos.

Marcelo Puebla
1 parent fe00b86c4d
Showing 1 changed file with 67 additions and 15 deletions Show diff stats
src/app/components/busqueda-productos/busqueda-productos.component.html
@@ -6,22 +6,75 @@
     <!-- NOMBRE DE SECCION -->
     <div class="row m-0">
       <div class="col-12 p-0">
-        <p class="h5 py-1 bg-light text-muted text-center">Búsqueda</p>
+        <p class="h5 py-1 bg-light text-muted text-center">
+          Búsqueda
+          <i class="fa fa-search"></i>
+        </p>
       </div>
     </div>
  
-    <div class="row m-4 d-flex align-items-center">
+    <div class="row m-4 disable-user-select">
  
-      <div class="col-sm-7">
-        <!-- SEARCH INPUT -->
-        <div class="form-group search">
-          <span class="fa fa-search form-control-lg form-control-search pl-3"></span>
-          <input
-            type="text"
-            class="form-control form-control-lg rounded-pill px-5"
-            placeholder="Búsqueda productos">
+      <!-- FILTROS -->
+      <div class="col-sm-2">
+        <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 class="list-group-item list-group-item-action my-1 py-2 h6">
+            Combos y Promociones
+          </li>
+          <li
+            class="list-group-item list-group-item-action my-1 p-2 h6 shadow-sm font-weight-bold">
+            Todos
+          </li>
+          <li
+            class="list-group-item list-group-item-action my-1 p-2 h6 shadow-sm">
+            Bebidas
+          </li>
+          <li
+            class="list-group-item list-group-item-action my-1 p-2 h6 shadow-sm">
+            Sandwichería
+          </li>
+          <li
+            class="list-group-item list-group-item-action my-1 p-2 h6 shadow-sm">
+            Panaderia
+          </li>
+          <li
+            class="list-group-item list-group-item-action my-1 p-2 h6 shadow-sm">
+            Golosinas
+          </li>
+          <li
+            class="list-group-item list-group-item-action my-1 p-2 h6 shadow-sm">
+            Tabaqueria
+          </li>
+        </ul>
+      </div>      
  
+      <!-- SEARCH INPUT -->
+      <div class="col-sm-10">
+
+        <div class="form-group row search">
+          <div class="col-sm-10">
+            <span class="fa fa-search form-control-lg form-control-search pl-3"></span>
+            <input
+              type="text"
+              class="form-control form-control-lg shadow-sm rounded-pill px-5"
+              placeholder="Búsqueda productos">
+          </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">Volver&nbsp;&nbsp;</span>
+              <i class="fa fa-undo text-warning" aria-hidden="true"></i>
+            </button>
+          </div>
+        </div>
+
+        <!-- LISTA DE PRODUCTOS -->
         <div class="row pr-3 vh-50 overflow-scroll disable-user-select">
           <div
             class="col-4 p-2"
@@ -31,27 +84,26 @@
               <div class="card-body p-2">
                 <p class="h6 text-left m-0">{{producto.DetArt}}</p>
                 <div class="row justify-content-between m-0">
-                  <div class="col-auto p-0">
+                  <div class="col-12 p-0">
                     <div class="text-left">
                       <p class="m-0 h6"><small>{{producto.DetArt}}</small></p>
                       <p class="m-0 h6"><small>COD. {{producto.CodRub}}</small></p>
                     </div>
                   </div>
-                  <div class="col-auto my-auto pt-2 pr-2 p-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>
+
     </div>
  
   </div>
  
   <!-- SIDEBAR -->
   <app-sidebar class="col-3 col-md-2 vh-100 bg-dark text-white"></app-sidebar>
-</div>
 \ No newline at end of file
+</div>
...	...	@@ -6,22 +6,75 @@
6	6	<!-- NOMBRE DE SECCION -->
7	7	<div class="row m-0">
8	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	13	</div>
11	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">
16		- <!-- SEARCH INPUT -->
17		- <div class="form-group search">
18		- <span class="fa fa-search form-control-lg form-control-search pl-3"></span>
19		- <input
20		- type="text"
21		- class="form-control form-control-lg rounded-pill px-5"
22		- placeholder="Búsqueda productos">
	18	+ <!-- FILTROS -->
	19	+ <div class="col-sm-2">
	20	+ <div class="text-center">
	21	+ <p class="font-weight-bold text-muted border-bottom pb-2">Buscar por Categoría</p>
23	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  </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	78	<div class="row pr-3 vh-50 overflow-scroll disable-user-select">
26	79	<div
27	80	class="col-4 p-2"
...	...	@@ -31,27 +84,26 @@
31	84	<div class="card-body p-2">
32	85	<p class="h6 text-left m-0">{{producto.DetArt}}</p>
33	86	<div class="row justify-content-between m-0">
34		- <div class="col-auto p-0">
	87	+ <div class="col-12 p-0">
35	88	<div class="text-left">
36	89	<p class="m-0 h6"><small>{{producto.DetArt}}</small></p>
37	90	<p class="m-0 h6"><small>COD. {{producto.CodRub}}</small></p>
38	91	</div>
39	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	94	<p class="text-right m-0 h6">{{producto.PreVen \| currency}}</p>
42	95	</div>
43	96	</div>
44	97	</div>
45	98	</div>
46		-
47	99	</div>
48	100	</div>
49		-
50	101	</div>
	102	+
51	103	</div>
52	104
53	105	</div>
54	106
55	107	<!-- SIDEBAR -->
56	108	<app-sidebar class="col-3 col-md-2 vh-100 bg-dark text-white"></app-sidebar>
57		-</div>
58	109	\ No newline at end of file
	110	+</div>