From 500c8ce6d3675d5eb7a92fcecf4030b25abc9f0b Mon Sep 17 00:00:00 2001
From: Marcelo Puebla <mpuebla@focasoftware.com>
Date: Wed, 22 Jan 2020 16:31:48 -0300
Subject: [PATCH] Fixes de responsividad

---
 src/app/modules/carrito/carrito.component.html     | 113 +++++++--------------
 .../seleccion-articulos.component.html             |  14 +--
 src/scss/height-width.scss                         |  26 ++++-
 3 files changed, 70 insertions(+), 83 deletions(-)

diff --git a/src/app/modules/carrito/carrito.component.html b/src/app/modules/carrito/carrito.component.html
index 931803a..ac988fe 100644
--- a/src/app/modules/carrito/carrito.component.html
+++ b/src/app/modules/carrito/carrito.component.html
@@ -14,7 +14,7 @@
 
     <!-- CARRITO -->
     <div
-      class="row mx-2 mt-4 h-80 justify-content-center align-content-start scroll-y-visible"
+      class="row mx-2 mt-4 h-80 h-lg-60 align-content-start scroll-y-visible"
       (scroll)="scrollEvent($event)">
       <!-- MENSAJE DE ADVERTENCIA -->
       <div class="col-10 align-self-center alert alert-primary" *ngIf="!articuloService.carrito.length">
@@ -22,87 +22,66 @@
       </div>
       <!-- ARTICULOS -->
       <div
-        class="col-12 col-xl-6 p-2 h-25 text-center text-truncate"
+        class="col-12 col-xl-6 p-2 h-50 h-md-25 h-xl-40 text-center text-truncate"
         *ngFor="let articulo of articuloService.carrito; let i = index;"
         @EnterLeave>
         <!-- ARTICULO -->
-        <div class="h-100 px-2 py-4 border border-primary rounded-sm">
-          <div class="row mx-0 h-100">
+        <div class="h-100 border border-primary rounded-sm">
+          <div class="row align-items-center mx-0 h-100">
             <!-- NOMBRE E IMAGEN -->
-            <div class="col-3 h-100 border-right border-primary align-self-center">
+            <div class="col-6 col-md-3 h-50 h-md-100 border-right border-primary">
               <img
                 draggable="false"
                 ondragstart="return false;"
                 (contextmenu)="false"
-                class="d-block mx-auto h-55 rounded-sm shadow-sm"
+                class="d-none d-md-block mx-auto h-55 rounded-sm shadow-sm"
                 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"
                 onerror="this.src='assets/img/image-not-found.jpg'">
-              <div class="row mx-0 h-45">
-                <p class="col text-primary text-truncate align-self-end">
+              <div class="row mx-0 h-100 h-md-45">
+                <p class="col text-primary text-truncate align-self-center">
                   <small>{{articulo.DetArt}}</small>
                 </p>
               </div>
             </div>
             <!-- CANTIDAD -->
-            <div class="col-3 border-right border-primary">
-              <p><small>CANT</small></p>
-              <div class="row mt-2 mx-0">
-                <div class="col-12 h-auto">
-                  <div class="row mx-0 justify-content-between bg-primary badge-pill">
-                    <!-- BOTON MENOS -->
-                    <div class="col-auto px-0">
-                      <img
-                        draggable="false"
-                        ondragstart="return false;"
-                        (contextmenu)="false"
-                        class="d-block ml-auto py-2 icon-20 btn-effect"
-                        src="assets/img/menos-blanco.svg"
-                        (click)="substractCant(articulo)">
-                    </div>
-                    <!-- CANTIDAD -->
-                    <div class="col px-0 align-self-center text-white">
-                      <p><small>{{articulo.cantidad}}</small></p>
-                    </div>
-                    <!-- BOTON MAS -->
-                    <div class="col-auto px-0">
-                      <img
-                        draggable="false"
-                        ondragstart="return false;"
-                        (contextmenu)="false"
-                        class="d-block ml-auto py-2 icon-20 btn-effect"
-                        src="assets/img/mas-blanco.svg"
-                        (click)="addCant(articulo)">
-                    </div>
-                  </div>
+            <div class="col-6 col-md-3 h-50 h-md-100 border-right border-primary">
+              <p class="h-40"><small>CANT</small></p>
+              <div class="row mx-0 justify-content-between bg-primary badge-pill">
+                <!-- BOTON MENOS -->
+                <div class="col-auto px-0 my-auto">
+                  <img
+                    draggable="false"
+                    ondragstart="return false;"
+                    (contextmenu)="false"
+                    class="d-block ml-auto py-2 icon-20 btn-effect"
+                    src="assets/img/menos-blanco.svg"
+                    (click)="substractCant(articulo)">
+                </div>
+                <!-- CANTIDAD -->
+                <div class="col px-0 py-2 my-auto text-white">
+                  <p><small>{{articulo.cantidad}}</small></p>
+                </div>
+                <!-- BOTON MAS -->
+                <div class="col-auto px-0 my-auto">
+                  <img
+                    draggable="false"
+                    ondragstart="return false;"
+                    (contextmenu)="false"
+                    class="d-block ml-auto py-2 icon-20 btn-effect"
+                    src="assets/img/mas-blanco.svg"
+                    (click)="addCant(articulo)">
                 </div>
               </div>
             </div>
-            <!-- OPCIONALES -->
-            <!-- <div class="col-3 border-right border-primary">
-              <p><small>OPCIONALES</small></p>
-             <div class="py-1 badge-pill bg-dark text-white"><p><small>{{'AZÚCAR'}}</small></p></div>
-              <div class="row mx-0 mt-2 justify-content-center">
-                <div class="col-auto pl-3 btn-effect bg-primary badge-pill text-white">
-                  <span>
-                    <small class="pr-2">CAMBIAR</small>
-                    <img
-                      draggable="false"
-                      ondragstart="return false;"
-                      (contextmenu)="false"
-                      class="icon-20"
-                      src="assets/img/ir.svg">
-                  </span>
-                </div>
-              </div> -->
             <!-- PRECIO -->
-            <div class="col-3 border-right border-primary">
-              <p><small>PRECIO</small></p>
-              <div class="py-1 mt-2 badge-pill bg-dark text-white">
+            <div class="col-6 col-md-3 h-50 h-md-100 border-right border-primary">
+              <p class="h-40"><small>PRECIO</small></p>
+              <div class="py-2 badge-pill bg-dark text-white">
                 <p><small>{{articulo.PreVen | currency}}</small></p>
               </div>
             </div>
             <!-- ELIMINAR -->
-            <div class="col-3 align-self-center">
+            <div class="col-6 col-md-3 align-self-center">
               <div class="row mx-0 justify-content-center">
                 <div
                   class="col-auto px-3 py-1 btn-effect bg-primary badge-pill text-white"
@@ -148,22 +127,6 @@
         </span>
       </div>
     </div>
-    <!-- SEGUIR COMPRANDO -->
-    <!-- <div class="row mx-3 mt-2 h-auto justify-content-end">
-      <div
-        class="col-auto py-2 px-3 align-self-center btn-effect bg-primary badge-pill text-white"
-        (click)="goBack()">
-        <span>
-          <small class="pr-2">SEGUIR COMPRANDO</small>
-          <img
-            draggable="false"
-            ondragstart="return false;"
-            (contextmenu)="false"
-            class="icon-20"
-            src="assets/img/ir.svg">
-        </span>
-      </div>
-    </div> -->
   </div>
 
 </div>
diff --git a/src/app/modules/seleccion-articulos/seleccion-articulos.component.html b/src/app/modules/seleccion-articulos/seleccion-articulos.component.html
index 17424bd..b9a58e6 100644
--- a/src/app/modules/seleccion-articulos/seleccion-articulos.component.html
+++ b/src/app/modules/seleccion-articulos/seleccion-articulos.component.html
@@ -12,7 +12,7 @@
       </div>
     </div>
     <!-- CUERPO -->
-    <div class="row w-100 mr-4 h-70">
+    <div class="row w-100 mr-4 h-50 h-md-70">
       <div class="col-12 h-100 px-0 py-3">
         <div class="row mx-0 h-100">
           <!-- FILTRO CATEGORIAS -->
@@ -36,7 +36,7 @@
                 class="col-12 px-0 box-categorias border border-primary border-left-0 rounded-right scroll-y"
                 (scroll)="scrollEvent($event)">
                 <div
-                  class="row mx-4 mb-2 h-32 justify-content-center tab"
+                  class="row mx-4 mb-2 h-25 h-md-32 h-lg-45 justify-content-center tab"
                   [ngClass]="{ 'active': allActive, 'border-bottom-effect': !allActive }"
                   (click)="selectCategoria(-1, 0)">
                   <img
@@ -45,10 +45,10 @@
                     (contextmenu)="false"
                     class="col-12 h-50 align-self-end d-none d-sm-block rounded-circle"
                     src="assets/img/logo-spot.svg">
-                  <small class="col-12 px-0 my-1 h-25 align-self-end text-center text-truncate">Todos</small>
+                  <small class="col-12 px-0 my-1 h-100 h-md-25 align-self-end text-center text-truncate">Todos</small>
                 </div>
                 <div
-                  class="row mx-4 mb-2 h-32 justify-content-center tab"
+                  class="row mx-4 mb-2 h-25 h-md-32 h-lg-45 justify-content-center tab"
                   [ngClass]="{ 'active': categoria.selected, 'border-bottom-effect': !categoria.selected }"
                   (click)="selectCategoria(i, categoria.id)"
                   *ngFor="let categoria of categorias; let i = index;">
@@ -59,7 +59,7 @@
                     class="col-12 h-50 align-self-end d-none d-sm-block rounded-circle"
                     src="{{urlImagenes}}{{categoria.path_imagen}}"
                     onerror="this.src='assets/img/image-not-found.jpg'">
-                  <small class="col-12 px-0 my-1 h-25 align-self-end text-center text-truncate">{{categoria.detalle}}</small>
+                  <small class="col-12 px-0 my-1 h-100 h-md-25 align-self-end text-center text-truncate">{{categoria.detalle}}</small>
                 </div>
               </div>
               <div class="col-auto btn-effect h-5">
@@ -91,7 +91,7 @@
                     (contextmenu)="false"
                     src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"
                     onerror="this.src='assets/img/image-not-found.jpg'"
-                    class="card-img-top h-55 rounded-sm">
+                    class="card-img-top h-30 h-md-55 rounded-sm">
                   <div class="row mx-0 py-1 h-auto justify-content-center">
                     <p
                     [ngClass]="{'text-primary': articulo.PRO, 'text-secondary': !articulo.PRO}"
@@ -216,7 +216,7 @@
 
       <!-- VER CARRITO -->
       <div
-        class="col-auto mt-2 h-20"
+        class="col-auto px-0 mt-2 h-20"
         *ngIf="articuloService.carrito.length">
         <div
           class="btn-effect col-auto px-0 align-self-center bg-white"
diff --git a/src/scss/height-width.scss b/src/scss/height-width.scss
index f9b3493..c8b57b7 100644
--- a/src/scss/height-width.scss
+++ b/src/scss/height-width.scss
@@ -1,7 +1,27 @@
 @for $i from 1 through 100 {
   $heightValue: 1% * $i;
   .h-#{$i} {
-    height: $heightValue !important;
+    height: $heightValue;
+  }
+  @media (min-width: 576px) {
+    .h-sm-#{$i} {
+      height: $heightValue !important;
+    }
+  }
+  @media (min-width: 768px) {
+    .h-md-#{$i} {
+      height: $heightValue !important;
+    }
+  }
+  @media (min-width: 992px) {
+    .h-lg-#{$i} {
+      height: $heightValue !important;
+    }
+  }
+  @media (min-width: 1200px) {
+    .h-xl-#{$i} {
+      height: $heightValue !important;
+    }
   }
 }
 
@@ -19,3 +39,7 @@
 .min-h-60 {
   min-height: 60px;
 }
+
+.max-h-80 {
+  max-height: 80%;
+}
-- 
1.9.1