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

---
 src/app/modules/footer/footer.component.html       |  2 +-
 .../modules/formas-pago/formas-pago.component.html |  2 +-
 .../opcion-pedido/opcion-pedido.component.html     |  2 +-
 .../seleccion-articulos.component.html             | 21 ++++++++++----
 .../splash-screen/splash-screen.component.html     |  2 +-
 .../splash-screen/splash-screen.component.scss     |  4 +++
 src/assets/img/carrito.svg                         | 18 ++++++++++++
 src/scss/animations.scss                           | 33 ++++++++++++++++++++++
 src/styles.scss                                    |  1 -
 9 files changed, 75 insertions(+), 10 deletions(-)
 create mode 100644 src/assets/img/carrito.svg

diff --git a/src/app/modules/footer/footer.component.html b/src/app/modules/footer/footer.component.html
index 03c57f3..d495f35 100644
--- a/src/app/modules/footer/footer.component.html
+++ b/src/app/modules/footer/footer.component.html
@@ -1,4 +1,4 @@
-<div class="row mx-0 h-100 justify-content-around bg-white">
+<div class="row w-90 mx-auto h-100 justify-content-between bg-white">
   <div class="col-auto align-self-center px-0 bg-white">
     <div class="btn-effect row mx-0 bg-light">
       <div class="col-auto align-self-center text-primary">ESTAMOS PARA AYUDARTE</div>
diff --git a/src/app/modules/formas-pago/formas-pago.component.html b/src/app/modules/formas-pago/formas-pago.component.html
index e374043..b1dc040 100644
--- a/src/app/modules/formas-pago/formas-pago.component.html
+++ b/src/app/modules/formas-pago/formas-pago.component.html
@@ -1,4 +1,4 @@
-<div class="h-92 bg-white">
+<div class="h-92 bg-white fade-in-left">
   <div class="row mx-0 h-15">
     <div class="col-12 px-0 h-80 my-auto">
       <img class="d-block mx-auto h-100" src="assets/img/logo-spot.svg">
diff --git a/src/app/modules/opcion-pedido/opcion-pedido.component.html b/src/app/modules/opcion-pedido/opcion-pedido.component.html
index 55f2819..61e3add 100644
--- a/src/app/modules/opcion-pedido/opcion-pedido.component.html
+++ b/src/app/modules/opcion-pedido/opcion-pedido.component.html
@@ -1,4 +1,4 @@
-<div class="h-92 bg-white">
+<div class="h-92 bg-white fade-in-left">
   <div class="row mx-0 h-15">
     <div class="col-12 px-0 h-80 my-auto">
       <img class="d-block mx-auto h-100" src="assets/img/logo-spot.svg">
diff --git a/src/app/modules/seleccion-articulos/seleccion-articulos.component.html b/src/app/modules/seleccion-articulos/seleccion-articulos.component.html
index db0e108..a085ffe 100644
--- a/src/app/modules/seleccion-articulos/seleccion-articulos.component.html
+++ b/src/app/modules/seleccion-articulos/seleccion-articulos.component.html
@@ -1,11 +1,11 @@
-<div class="h-92 bg-white">
+<div class="h-92 bg-white fade-in-left">
   <!-- PUBLICIDADES -->
   <div class="row mx-0 h-10">
     <div class="col-12 p-3 h-100">
       <div class="bg-dark h-100"></div>
     </div>
   </div>
-  <div class="h-90">
+  <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">
@@ -89,8 +89,9 @@
         </div>
       </div>
     </div>
-    <div class="row mx-0 h-20 justify-content-center">
-      <div class="col-11 h-100 px-0 border border-primary rounded">
+    <!-- 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>
@@ -113,7 +114,7 @@
                 (click)="selectCategoria(i)"
                 *ngFor="let categoria of [{},{},{},{},{},{},{},{},{},{},{},{},{},{}]; let i = index;">
                 <img
-                  class="d-block h-55 mx-auto"
+                  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>
@@ -132,6 +133,16 @@
           </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>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 
diff --git a/src/app/modules/splash-screen/splash-screen.component.html b/src/app/modules/splash-screen/splash-screen.component.html
index 74ded20..daa16d8 100644
--- a/src/app/modules/splash-screen/splash-screen.component.html
+++ b/src/app/modules/splash-screen/splash-screen.component.html
@@ -1,4 +1,4 @@
-<div *ngIf="showSplashScreen" class="vh-100">
+<div *ngIf="showSplashScreen" class="vh-100 bg-splash">
   <div class="row mx-0 h-100">
     <div class="col-12 px-0 h-30 my-auto">
       <img class="d-block mx-auto h-100 focus-in-blur" src="assets/img/logo-spot.svg">
diff --git a/src/app/modules/splash-screen/splash-screen.component.scss b/src/app/modules/splash-screen/splash-screen.component.scss
index d50e403..cd6dacb 100644
--- a/src/app/modules/splash-screen/splash-screen.component.scss
+++ b/src/app/modules/splash-screen/splash-screen.component.scss
@@ -1,3 +1,7 @@
+.bg-splash {
+  background-color: #fcf2e3;
+}
+
 .box:before {
   content: "";
   position: absolute;
diff --git a/src/assets/img/carrito.svg b/src/assets/img/carrito.svg
new file mode 100644
index 0000000..d107293
--- /dev/null
+++ b/src/assets/img/carrito.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Creator: CorelDRAW X7 -->
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="19.4868mm" height="16.3449mm" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
+viewBox="0 0 867 727"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <defs>
+  <style type="text/css">
+   <![CDATA[
+    .fil0 {fill:#FEFEFE;fill-rule:nonzero}
+   ]]>
+  </style>
+ </defs>
+ <g id="Capa_x0020_1">
+  <metadata id="CorelCorpID_0Corel-Layer"/>
+  <path class="fil0" d="M851 0c9,0 16,7 16,15 0,8 -7,15 -16,15l-129 0c-16,0 -30,5 -32,22l-71 444c-2,16 -11,33 -24,45 -12,12 -27,21 -44,21l-2 0c17,17 28,41 28,67 0,27 -11,52 -29,69l0 0c-18,18 -42,29 -69,29 -27,0 -51,-11 -69,-29l0 0c-17,-17 -28,-42 -28,-69 0,-26 10,-50 27,-67l-156 0c17,17 27,41 27,67 0,27 -10,52 -28,69l0 0c-18,18 -42,29 -69,29 -27,0 -51,-11 -69,-29l0 0c-17,-17 -28,-42 -28,-69 0,-26 10,-51 28,-68 -10,-1 -22,-4 -31,-8 -14,-5 -24,-15 -27,-29l-55 -275c-1,-4 -1,-9 -1,-14 0,-17 5,-36 14,-51 9,-17 31,-31 48,-34 3,-1 6,-1 9,-1l345 0c8,0 15,7 15,15 0,8 -7,15 -15,15l-345 0c-1,0 -2,0 -3,0 -8,2 -23,9 -28,19 -6,11 -10,25 -10,37 0,3 0,6 1,9l25 125 254 0c9,0 15,6 15,15 0,8 -6,15 -15,15l-248 0 24 119c0,3 4,6 9,8 10,4 24,5 35,5l421 0c8,0 16,-4 23,-11l0 0c8,-8 14,-19 16,-29l70 -443c2,-14 11,-31 22,-38 12,-6 28,-10 40,-10l129 0zm-620 582c-13,-12 -29,-20 -48,-20 -19,0 -35,8 -48,20l0 0c-12,12 -19,29 -19,47 0,19 7,36 19,48l0 0c13,12 29,20 48,20 19,0 35,-8 48,-20l0 0c12,-12 19,-29 19,-48 0,-18 -7,-35 -19,-47l0 0zm296 0c-12,-12 -29,-20 -48,-20 -19,0 -35,8 -47,20l-1 0c-12,12 -19,29 -19,47 0,19 7,36 19,48l1 0c12,12 28,20 47,20 19,0 36,-8 48,-20l0 0c12,-12 19,-29 19,-48 0,-18 -7,-35 -19,-47l0 0z"/>
+ </g>
+</svg>
diff --git a/src/scss/animations.scss b/src/scss/animations.scss
index 2462e0a..b651aea 100644
--- a/src/scss/animations.scss
+++ b/src/scss/animations.scss
@@ -89,3 +89,36 @@
     background-color: #f4b223;
   }
 }
+
+/*
+ * animation fade-in-left
+ */
+.fade-in-left {
+  -webkit-animation: fade-in-left 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) both;
+  animation: fade-in-left 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) both;
+}
+
+@-webkit-keyframes fade-in-left {
+  0% {
+    -webkit-transform: translateX(-50px);
+    transform: translateX(-50px);
+    opacity: 0;
+  }
+  100% {
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+@keyframes fade-in-left {
+  0% {
+    -webkit-transform: translateX(-50px);
+    transform: translateX(-50px);
+    opacity: 0;
+  }
+  100% {
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
diff --git a/src/styles.scss b/src/styles.scss
index e854fa8..a59d509 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -17,7 +17,6 @@ body {
   min-height: 100vh;
   max-height: 100vh;
   height: 100vh;
-  background-color: #fcf2e3;
   font-family: "Gotham";
   overflow: hidden;
   user-select: none;
-- 
1.9.1