From 6b010faac446b8849c4c9b2f269df26dde73a492 Mon Sep 17 00:00:00 2001
From: Marcelo Puebla <mpuebla@focasoftware.com>
Date: Fri, 27 Dec 2019 15:53:25 -0300
Subject: [PATCH] Fix de responsividad

---
 src/app/modules/footer/footer.component.html       |  4 +-
 .../seleccion-productos.component.html             | 52 +++++++++++++++-------
 src/scss/styles-bootstrap.scss                     |  4 +-
 src/styles.scss                                    |  9 +---
 4 files changed, 41 insertions(+), 28 deletions(-)

diff --git a/src/app/modules/footer/footer.component.html b/src/app/modules/footer/footer.component.html
index 01d9c9a..4da15e8 100644
--- a/src/app/modules/footer/footer.component.html
+++ b/src/app/modules/footer/footer.component.html
@@ -2,7 +2,7 @@
   <div class="col-auto align-self-center px-0 bg-white">
     <div class="btn-effect row mx-0 bg-light rounded-left">
       <div class="col-auto align-self-center text-primary">ESTAMOS PARA AYUDARTE</div>
-      <div class="col-auto p-0 bg-primary rounded-right">
+      <div class="col-auto p-0 bg-primary rounded-right d-none d-sm-block">
         <img class="p-2 img-accesibilidad" src="assets/img/iconos-accesibilidad.svg">
       </div>
     </div>
@@ -12,7 +12,7 @@
     (click)="goBack()">
     <div class="row mx-0 bg-light rounded-left">
       <div class="col-auto align-self-center text-primary">VOLVER</div>
-      <div class="col-auto p-0 bg-primary rounded-right">
+      <div class="col-auto p-0 bg-primary rounded-right d-none d-sm-block">
         <img class="p-2 img-volver" src="assets/img/icono-volver.svg">
       </div>
     </div>
diff --git a/src/app/modules/seleccion-productos/seleccion-productos.component.html b/src/app/modules/seleccion-productos/seleccion-productos.component.html
index 4e83e60..cfcccce 100644
--- a/src/app/modules/seleccion-productos/seleccion-productos.component.html
+++ b/src/app/modules/seleccion-productos/seleccion-productos.component.html
@@ -19,38 +19,56 @@
       <div class="col-12 h-100 px-0 py-3">
         <div class="row mx-0 h-100">
           <!-- FILTRO CATEGORIAS -->
-          <div class="col-md-3 col-xl-2 h-100">
+          <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)="scroll(elem, -80)" (mouseup)="mouseup()" (mouseleave)="mouseup()">
+                <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)="scroll(templateCategorias, -80)"
+                  (mouseup)="mouseup()"
+                  (mouseleave)="mouseup()">
               </div>
-              <div #elem 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"
+              <!-- CATEGORIAS -->
+              <div
+                #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" src="assets/img/ir-color.svg">
-                  <small class="col-10 my-1 h-25 align-self-end text-center">{{categoria.id}}
-                  </small>
+                  (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 draggable="false" ondragstart="return false;" (contextmenu)="false"
-                  class="h-100 d-block mx-auto rotate-90" src="assets/img/ir-color.svg" (mousedown)="scroll(elem, 80)"
-                  (mouseup)="mouseup()" (mouseleave)="mouseup()">
+                <img
+                  draggable="false"
+                  ondragstart="return false;"
+                  (contextmenu)="false"
+                  class="h-100 d-block mx-auto rotate-90"
+                  src="assets/img/ir-color.svg"
+                  (mousedown)="scroll(templateCategorias, 80)"
+                  (mouseup)="mouseup()"
+                  (mouseleave)="mouseup()">
               </div>
             </div>
           </div>
           <!-- LISTA DE ARTICULOS -->
-          <div class="col-md-9 col-xl-10 pb-3 h-80 align-self-center scroll-y">
-            <div class="row row-cols-2 row-cols-sm-3 row-cols-xl-4 h-100">
+          <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 py-4 h-50" *ngFor="let lala of [{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}]">
+              <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-45 justify-content-center">
+                  <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">
diff --git a/src/scss/styles-bootstrap.scss b/src/scss/styles-bootstrap.scss
index 1bfbe01..47eee20 100644
--- a/src/scss/styles-bootstrap.scss
+++ b/src/scss/styles-bootstrap.scss
@@ -6,12 +6,14 @@ $primary: #aa006b;
 $secondary: #00acd8;
 $info: #f4b223;
 $light: #e6e7e9;
-
 $theme-colors: (
   primary: $primary,
   secondary: $secondary,
   info: $info,
   light: $light
 );
+$border-radius: 1.5rem !default;
+$border-radius-lg: 2.5rem !default;
+$border-radius-sm: 0.5rem !default;
 
 @import "node_modules/bootstrap/scss/bootstrap";
diff --git a/src/styles.scss b/src/styles.scss
index cd0122c..1778dd7 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -1,4 +1,5 @@
 @import "scss/styles-bootstrap.scss";
+@import "scss/typography.scss";
 @import "scss/height-width.scss";
 @import "scss/animations.scss";
 @import "scss/icons.scss";
@@ -41,14 +42,6 @@ p {
   margin: 0 !important;
 }
 
-.rounded {
-  border-radius: 1.5rem !important;
-}
-
-.rounded-sm {
-  border-radius: 0.5rem !important;
-}
-
 .img-in-top {
   position: absolute;
   top: -35px;
-- 
1.9.1