From 378433a0ca6abdf5d69a7138410005a5ec43bdb3 Mon Sep 17 00:00:00 2001
From: mpuebla <mpuebla@focasoftware.com>
Date: Mon, 30 Dec 2019 12:36:41 -0300
Subject: [PATCH] Fix en responsividad de pantalla seleccion de articulos

---
 .../seleccion-articulos.component.html             | 226 +++++++++++----------
 1 file changed, 114 insertions(+), 112 deletions(-)

diff --git a/src/app/modules/seleccion-articulos/seleccion-articulos.component.html b/src/app/modules/seleccion-articulos/seleccion-articulos.component.html
index a085ffe..92371f4 100644
--- a/src/app/modules/seleccion-articulos/seleccion-articulos.component.html
+++ b/src/app/modules/seleccion-articulos/seleccion-articulos.component.html
@@ -5,79 +5,81 @@
       <div class="bg-dark h-100"></div>
     </div>
   </div>
-  <div class="h-90 row mx-0 align-items-end">
-    <!-- CABECERA -->
-    <div class="row mx-4 h-auto border border-primary rounded-sm">
-      <div class="col-12 p-2 align-self-center">
-        <div class="px-3">
-          <p class="h6 text-truncate">SELECCIONÁ TÚ COMIDA Y/O BEBIDA</p>
+  <div class="row mx-0 h-90 align-items-end">
+    <div class="col-12 px-0 h-100">
+      <!-- CABECERA -->
+      <div class="row mx-4 h-auto border border-primary rounded-sm">
+        <div class="col-12 p-2 align-self-center">
+          <div class="px-3">
+            <p class="h6 text-truncate">SELECCIONÁ TÚ COMIDA Y/O BEBIDA</p>
+          </div>
         </div>
       </div>
-    </div>
-    <!-- CUERPO -->
-    <div class="row mr-4 h-70">
-      <div class="col-12 h-100 px-0 py-3">
-        <div class="row mx-0 h-100">
-          <!-- FILTRO CATEGORIAS -->
-          <div class="col-5 col-sm-3 col-xl-2 h-100">
-            <p class="h6 h-6 m-0 text-center"><small>CATEGORÍAS</small></p>
-            <div class="row mx-0 h-94 align-items-center">
-              <div class="col-12 h-5">
-                <img
-                  draggable="false"
-                  ondragstart="return false;"
-                  (contextmenu)="false"
-                  class="h-100 d-block mx-auto rotate-90-neg"
-                  src="assets/img/ir-color.svg"
-                  (mousedown)="scrollY(templateCategorias, -80)"
-                  (mouseup)="mouseup()"
-                  (mouseleave)="mouseup()">
-              </div>
-              <!-- CATEGORIAS -->
-              <div
-                #templateCategorias
-                class="col-12 px-0 box-categorias border border-primary border-left-0 rounded-right scroll-y">
+      <!-- CUERPO -->
+      <div class="row mr-4 h-70">
+        <div class="col-12 h-100 px-0 py-3">
+          <div class="row mx-0 h-100">
+            <!-- FILTRO CATEGORIAS -->
+            <div class="col-5 col-sm-3 col-xl-2 h-100">
+              <p class="h6 h-6 m-0 text-center"><small>CATEGORÍAS</small></p>
+              <div class="row mx-0 h-94 align-items-center">
+                <div class="col-12 h-5">
+                  <img
+                    draggable="false"
+                    ondragstart="return false;"
+                    (contextmenu)="false"
+                    class="h-100 d-block mx-auto rotate-90-neg"
+                    src="assets/img/ir-color.svg"
+                    (mousedown)="scrollY(templateCategorias, -80)"
+                    (mouseup)="mouseup()"
+                    (mouseleave)="mouseup()">
+                </div>
+                <!-- CATEGORIAS -->
                 <div
-                  class="row mx-4 mb-2 h-32 justify-content-center tab"
-                  [ngClass]="{ 'active': categoria.selected, 'border-bottom-effect': !categoria.selected }"
-                  (click)="selectCategoria(i)"
-                  *ngFor="let categoria of categorias; let i = index;">
+                  #templateCategorias
+                  class="col-12 px-0 box-categorias border border-primary border-left-0 rounded-right scroll-y">
+                  <div
+                    class="row mx-4 mb-2 h-32 justify-content-center tab"
+                    [ngClass]="{ 'active': categoria.selected, 'border-bottom-effect': !categoria.selected }"
+                    (click)="selectCategoria(i)"
+                    *ngFor="let categoria of categorias; let i = index;">
+                    <img
+                      class="col-12 h-50 align-self-end d-none d-sm-block"
+                      src="assets/img/ir-color.svg">
+                    <small class="col-10 my-1 h-25 align-self-end text-center">{{categoria.id}}</small>
+                  </div>
+                </div>
+                <div class="col-12 h-5">
                   <img
-                    class="col-12 h-50 align-self-end d-none d-sm-block"
-                    src="assets/img/ir-color.svg">
-                  <small class="col-10 my-1 h-25 align-self-end text-center">{{categoria.id}}</small>
+                    draggable="false"
+                    ondragstart="return false;"
+                    (contextmenu)="false"
+                    class="h-100 d-block mx-auto rotate-90"
+                    src="assets/img/ir-color.svg"
+                    (mousedown)="scrollY(templateCategorias, 80)"
+                    (mouseup)="mouseup()"
+                    (mouseleave)="mouseup()">
                 </div>
               </div>
-              <div class="col-12 h-5">
-                <img
-                  draggable="false"
-                  ondragstart="return false;"
-                  (contextmenu)="false"
-                  class="h-100 d-block mx-auto rotate-90"
-                  src="assets/img/ir-color.svg"
-                  (mousedown)="scrollY(templateCategorias, 80)"
-                  (mouseup)="mouseup()"
-                  (mouseleave)="mouseup()">
-              </div>
             </div>
-          </div>
-          <!-- LISTA DE ARTICULOS -->
-          <div class="col-7 col-sm-9 col-xl-10 pb-3 h-80 align-self-center scroll-y">
-            <div class="row row-cols-1 row-cols-sm-3 row-cols-xl-6 h-100">
-              <!-- ARTICULO -->
-              <div class="col px-2 my-1 my-md-3 h-auto" *ngFor="let lala of [{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}]">
-                <div class="card h-100">
-                  <img src="assets/img/ir-color.svg" class="card-img-top h-55">
-                  <div class="row mx-0 py-1 h-auto justify-content-center">
-                    <p class="col-12 px-1 h6 h-auto text-primary text-center">{{'CORTADO'}}</p>
-                    <p class="col-12 px-1 h-auto text-center"><small>{{'Café con un poco de leche'}}</small></p>
-                    <div class="col-12 px-1 align-self-end btn-effect h-auto">
-                      <div class="row mx-0 justify-content-between bg-primary badge-pill">
-                        <div class="col px-0 align-self-center text-white text-right">
-                          {{55 | currency}}
-                        </div>
-                        <div class="col-5 px-0">
-                          <img class="d-block ml-auto py-1 img-ir" src="assets/img/ir.svg">
+            <!-- LISTA DE ARTICULOS -->
+            <div class="col-7 col-sm-9 col-xl-10 pb-3 h-80 align-self-center scroll-y">
+              <div class="row row-cols-1 row-cols-sm-3 row-cols-xl-6 h-100">
+                <!-- ARTICULO -->
+                <div class="col px-2 my-1 my-md-3 h-auto" *ngFor="let lala of [{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}]">
+                  <div class="card h-100">
+                    <img src="assets/img/ir-color.svg" class="card-img-top h-55">
+                    <div class="row mx-0 py-1 h-auto justify-content-center">
+                      <p class="col-12 px-1 h6 h-auto text-primary text-center">{{'CORTADO'}}</p>
+                      <p class="col-12 px-1 h-auto text-center"><small>{{'Café con un poco de leche'}}</small></p>
+                      <div class="col-12 px-1 align-self-end btn-effect h-auto">
+                        <div class="row mx-0 justify-content-between bg-primary badge-pill">
+                          <div class="col px-0 align-self-center text-white text-right">
+                            {{55 | currency}}
+                          </div>
+                          <div class="col-5 px-0">
+                            <img class="d-block ml-auto py-1 img-ir" src="assets/img/ir.svg">
+                          </div>
                         </div>
                       </div>
                     </div>
@@ -88,57 +90,57 @@
           </div>
         </div>
       </div>
-    </div>
-    <!-- FOOTER CARRITO DE COMPRAS -->
-    <div class="row w-90 mx-auto h-auto justify-content-center">
-      <div class="col-12 h-75 px-0 border border-primary rounded">
-        <div class="row mx-0 h-15 border-bottom border-primary">
-          <p class="col align-self-center text-truncate"><small>ARTÍCULOS EN TÚ CARRITO DE COMPRAS</small></p>
-        </div>
-        <div class="row h-85 mx-0 justify-content-between">
-          <div class="col-auto h-20 align-self-center">
-            <img
-              draggable="false"
-              ondragstart="return false;"
-              (contextmenu)="false"
-              class="img-ir rotate-180-neg"
-              src="assets/img/ir-fondo-color.svg"
-              (mousedown)="scrollX(templateCarrito, -100)"
-              (mouseup)="mouseup()"
-              (mouseleave)="mouseup()">
+      <!-- FOOTER CARRITO DE COMPRAS -->
+      <div class="row w-90 mx-auto h-auto justify-content-center">
+        <div class="col-12 h-75 px-0 border border-primary rounded">
+          <div class="row mx-0 h-15 border-bottom border-primary">
+            <p class="col align-self-center text-truncate"><small>ARTÍCULOS EN TÚ CARRITO DE COMPRAS</small></p>
           </div>
-          <div class="col-6 col-sm-8 col-md-9 col-lg-10 h-100">
-            <div #templateCarrito class="row flex-row flex-nowrap h-100 mx-0 scroll-x">
-              <div
-                class="col-10 col-sm-4 col-lg-2 col-xl-auto px-2 px-xl-4 h-auto align-self-center border-right border-primary"
-                (click)="selectCategoria(i)"
-                *ngFor="let categoria of [{},{},{},{},{},{},{},{},{},{},{},{},{},{}]; let i = index;">
-                <img
-                  class="d-block h-55 p-2 mx-auto"
-                  src="assets/img/ir-color.svg">
-                <p class="d-block mt-auto text-center text-primary"><small>{{'lala'}}</small></p>
+          <div class="row h-85 mx-0 justify-content-between">
+            <div class="col-auto h-20 align-self-center">
+              <img
+                draggable="false"
+                ondragstart="return false;"
+                (contextmenu)="false"
+                class="img-ir rotate-180-neg"
+                src="assets/img/ir-fondo-color.svg"
+                (mousedown)="scrollX(templateCarrito, -100)"
+                (mouseup)="mouseup()"
+                (mouseleave)="mouseup()">
+            </div>
+            <div class="col-6 col-sm-8 col-md-9 col-lg-10 h-100">
+              <div #templateCarrito class="row flex-row flex-nowrap h-100 mx-0 scroll-x">
+                <div
+                  class="col-10 col-sm-4 col-lg-2 col-xl-auto px-2 px-xl-4 h-auto align-self-center border-right border-primary"
+                  (click)="selectCategoria(i)"
+                  *ngFor="let categoria of [{},{},{},{},{},{},{},{},{},{},{},{},{},{}]; let i = index;">
+                  <img
+                    class="d-block h-55 p-2 mx-auto"
+                    src="assets/img/ir-color.svg">
+                  <p class="d-block mt-auto text-center text-primary"><small>{{'lala'}}</small></p>
+                </div>
               </div>
             </div>
-          </div>
-          <div class="col-auto h-20 align-self-center">
-            <img
-              draggable="false"
-              ondragstart="return false;"
-              (contextmenu)="false"
-              class="img-ir"
-              src="assets/img/ir-fondo-color.svg"
-              (mousedown)="scrollX(templateCarrito, 100)"
-              (mouseup)="mouseup()"
-              (mouseleave)="mouseup()">
+            <div class="col-auto h-20 align-self-center">
+              <img
+                draggable="false"
+                ondragstart="return false;"
+                (contextmenu)="false"
+                class="img-ir"
+                src="assets/img/ir-fondo-color.svg"
+                (mousedown)="scrollX(templateCarrito, 100)"
+                (mouseup)="mouseup()"
+                (mouseleave)="mouseup()">
+            </div>
           </div>
         </div>
-      </div>
-      <div class="col-auto p-0 mt-2 ml-auto h-20">
-        <div class="btn-effect col-auto align-self-center px-0 bg-white">
-          <div class="row mx-0 bg-light">
-            <div class="col-auto align-self-center text-primary">VER CARRITO</div>
-            <div class="col-auto p-0 bg-primary d-none d-sm-block">
-              <img class="p-2 img-volver" src="assets/img/carrito.svg">
+        <div class="col-auto p-0 mt-2 ml-auto h-20">
+          <div class="btn-effect col-auto align-self-center px-0 bg-white">
+            <div class="row mx-0 bg-light">
+              <div class="col-auto align-self-center text-primary">VER CARRITO</div>
+              <div class="col-auto p-0 bg-primary d-none d-sm-block">
+                <img class="p-2 img-volver" src="assets/img/carrito.svg">
+              </div>
             </div>
           </div>
         </div>
-- 
1.9.1