Marcelo Puebla / autoservicio-axion

Download as
Browse Code »

Commit f27a108fc5d2b795a6f226b4bd84ac086940749e

Authored by Marcelo Puebla
1 parent 4f1f6f3d58
Exists in develop

Fix en responsividad de pantalla seleccion de articulos

Showing 9 changed files with 75 additions and 10 deletions   Show diff stats
src/app/modules/footer/footer.component.html
Diff comments   View file @ f27a108
1   -<div class="row mx-0 h-100 justify-content-around bg-white">
  1 +<div class="row w-90 mx-auto h-100 justify-content-between bg-white">
2 2 <div class="col-auto align-self-center px-0 bg-white">
3 3 <div class="btn-effect row mx-0 bg-light">
4 4 <div class="col-auto align-self-center text-primary">ESTAMOS PARA AYUDARTE</div>
src/app/modules/formas-pago/formas-pago.component.html
Diff comments   View file @ f27a108
1   -<div class="h-92 bg-white">
  1 +<div class="h-92 bg-white fade-in-left">
2 2 <div class="row mx-0 h-15">
3 3 <div class="col-12 px-0 h-80 my-auto">
4 4 <img class="d-block mx-auto h-100" src="assets/img/logo-spot.svg">
src/app/modules/opcion-pedido/opcion-pedido.component.html
Diff comments   View file @ f27a108
1   -<div class="h-92 bg-white">
  1 +<div class="h-92 bg-white fade-in-left">
2 2 <div class="row mx-0 h-15">
3 3 <div class="col-12 px-0 h-80 my-auto">
4 4 <img class="d-block mx-auto h-100" src="assets/img/logo-spot.svg">
src/app/modules/seleccion-articulos/seleccion-articulos.component.html
Diff comments   View file @ f27a108
1   -<div class="h-92 bg-white">
  1 +<div class="h-92 bg-white fade-in-left">
2 2 <!-- PUBLICIDADES -->
3 3 <div class="row mx-0 h-10">
4 4 <div class="col-12 p-3 h-100">
5 5 <div class="bg-dark h-100"></div>
6 6 </div>
7 7 </div>
8   - <div class="h-90">
  8 + <div class="h-90 row mx-0 align-items-end">
9 9 <!-- CABECERA -->
10 10 <div class="row mx-4 h-auto border border-primary rounded-sm">
11 11 <div class="col-12 p-2 align-self-center">
... ... @@ -89,8 +89,9 @@
89 89 </div>
90 90 </div>
91 91 </div>
92   - <div class="row mx-0 h-20 justify-content-center">
93   - <div class="col-11 h-100 px-0 border border-primary rounded">
  92 + <!-- FOOTER CARRITO DE COMPRAS -->
  93 + <div class="row w-90 mx-auto h-auto justify-content-center">
  94 + <div class="col-12 h-75 px-0 border border-primary rounded">
94 95 <div class="row mx-0 h-15 border-bottom border-primary">
95 96 <p class="col align-self-center text-truncate"><small>ARTÍCULOS EN TÚ CARRITO DE COMPRAS</small></p>
96 97 </div>
... ... @@ -113,7 +114,7 @@
113 114 (click)="selectCategoria(i)"
114 115 *ngFor="let categoria of [{},{},{},{},{},{},{},{},{},{},{},{},{},{}]; let i = index;">
115 116 <img
116   - class="d-block h-55 mx-auto"
  117 + class="d-block h-55 p-2 mx-auto"
117 118 src="assets/img/ir-color.svg">
118 119 <p class="d-block mt-auto text-center text-primary"><small>{{'lala'}}</small></p>
119 120 </div>
... ... @@ -132,6 +133,16 @@
132 133 </div>
133 134 </div>
134 135 </div>
  136 + <div class="col-auto p-0 mt-2 ml-auto h-20">
  137 + <div class="btn-effect col-auto align-self-center px-0 bg-white">
  138 + <div class="row mx-0 bg-light">
  139 + <div class="col-auto align-self-center text-primary">VER CARRITO</div>
  140 + <div class="col-auto p-0 bg-primary d-none d-sm-block">
  141 + <img class="p-2 img-volver" src="assets/img/carrito.svg">
  142 + </div>
  143 + </div>
  144 + </div>
  145 + </div>
135 146 </div>
136 147 </div>
137 148  
src/app/modules/splash-screen/splash-screen.component.html
Diff comments   View file @ f27a108
1   -<div *ngIf="showSplashScreen" class="vh-100">
  1 +<div *ngIf="showSplashScreen" class="vh-100 bg-splash">
2 2 <div class="row mx-0 h-100">
3 3 <div class="col-12 px-0 h-30 my-auto">
4 4 <img class="d-block mx-auto h-100 focus-in-blur" src="assets/img/logo-spot.svg">
src/app/modules/splash-screen/splash-screen.component.scss
Diff comments   View file @ f27a108
  1 +.bg-splash {
  2 + background-color: #fcf2e3;
  3 +}
  4 +
1 5 .box:before {
2 6 content: "";
3 7 position: absolute;
src/assets/img/carrito.svg
Diff comments   View file @ f27a108
... ... @@ -0,0 +1,18 @@
  1 +<?xml version="1.0" encoding="UTF-8"?>
  2 +<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
  3 +<!-- Creator: CorelDRAW X7 -->
  4 +<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"
  5 +viewBox="0 0 867 727"
  6 + xmlns:xlink="http://www.w3.org/1999/xlink">
  7 + <defs>
  8 + <style type="text/css">
  9 + <![CDATA[
  10 + .fil0 {fill:#FEFEFE;fill-rule:nonzero}
  11 + ]]>
  12 + </style>
  13 + </defs>
  14 + <g id="Capa_x0020_1">
  15 + <metadata id="CorelCorpID_0Corel-Layer"/>
  16 + <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"/>
  17 + </g>
  18 +</svg>
src/scss/animations.scss
Diff comments   View file @ f27a108
... ... @@ -89,3 +89,36 @@
89 89 background-color: #f4b223;
90 90 }
91 91 }
  92 +
  93 +/*
  94 + * animation fade-in-left
  95 + */
  96 +.fade-in-left {
  97 + -webkit-animation: fade-in-left 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) both;
  98 + animation: fade-in-left 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) both;
  99 +}
  100 +
  101 +@-webkit-keyframes fade-in-left {
  102 + 0% {
  103 + -webkit-transform: translateX(-50px);
  104 + transform: translateX(-50px);
  105 + opacity: 0;
  106 + }
  107 + 100% {
  108 + -webkit-transform: translateX(0);
  109 + transform: translateX(0);
  110 + opacity: 1;
  111 + }
  112 +}
  113 +@keyframes fade-in-left {
  114 + 0% {
  115 + -webkit-transform: translateX(-50px);
  116 + transform: translateX(-50px);
  117 + opacity: 0;
  118 + }
  119 + 100% {
  120 + -webkit-transform: translateX(0);
  121 + transform: translateX(0);
  122 + opacity: 1;
  123 + }
  124 +}
... ... @@ -17,7 +17,6 @@ body {
17 17 min-height: 100vh;
18 18 max-height: 100vh;
19 19 height: 100vh;
20   - background-color: #fcf2e3;
21 20 font-family: "Gotham";
22 21 overflow: hidden;
23 22 user-select: none;