Luis Suarez / autoservicio-axion

Download as
Browse Code »

Commit f5f122fef2965dbce9f3738a0746495a32e9009c

Authored by Marcelo Puebla
1 parent b7527e742f
Exists in master and in 2 other branches 20200117-axion-responsive, develop

Arreglo de responsividad

Showing 7 changed files with 87 additions and 18 deletions   Show diff stats
src/app/modules/footer/footer.component.html
Diff comments   View file @ f5f122f
1 1 <div class="row mx-0 h-100 justify-content-around bg-white">
2 2 <div class="col-auto align-self-center px-0 bg-white">
3   - <div class="btn-effect row mx-0 bg-light rounded-left">
  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>
5   - <div class="col-auto p-0 bg-primary rounded-right d-none d-sm-block">
  5 + <div class="col-auto p-0 bg-primary d-none d-sm-block">
6 6 <img class="p-2 img-accesibilidad" src="assets/img/iconos-accesibilidad.svg">
7 7 </div>
8 8 </div>
... ... @@ -10,9 +10,9 @@
10 10 <div
11 11 class="btn-effect col-auto align-self-center px-0 bg-white"
12 12 (click)="goBack()">
13   - <div class="row mx-0 bg-light rounded-left">
  13 + <div class="row mx-0 bg-light">
14 14 <div class="col-auto align-self-center text-primary">VOLVER</div>
15   - <div class="col-auto p-0 bg-primary rounded-right d-none d-sm-block">
  15 + <div class="col-auto p-0 bg-primary d-none d-sm-block">
16 16 <img class="p-2 img-volver" src="assets/img/icono-volver.svg">
17 17 </div>
18 18 </div>
src/app/modules/formas-pago/formas-pago.component.html
Diff comments   View file @ f5f122f
... ... @@ -6,7 +6,7 @@
6 6 </div>
7 7 <div class="h-85">
8 8 <div class="row h-50 mx-0 justify-content-center text-center">
9   - <div class="col-7 pt-5 pb-3 h-auto align-self-center border border-secondary rounded">
  9 + <div class="col-7 pt-5 pb-3 h-auto align-self-end border border-secondary rounded">
10 10 <img class="img-in-top px-4 bg-white" src="assets/img/icono-tarjetas.svg">
11 11 <p class="h6 m-0">ESTA TERMINAL OPERA CON</p>
12 12 <p class="h2 mb-3 text-secondary">
... ... @@ -17,11 +17,12 @@
17 17 class="d-inline-block py-1 btn-effect bg-secondary badge-pill text-white"
18 18 [routerLink]="['/opcion-pedido']">
19 19 CONTINUAR
  20 + <img class="img-ir" src="assets/img/ir.svg">
20 21 </div>
21 22 </div>
22 23 </div>
23 24 <div class="row h-50 mx-0 justify-content-center text-center">
24   - <div class="col-7 p-5 h-auto align-self-start border border-primary rounded">
  25 + <div class="col-7 p-5 h-auto align-self-center border border-primary rounded">
25 26 <img class="img-in-top px-4 bg-white" src="assets/img/icono-efectivo.svg">
26 27 <p class="h6 m-0">SI PREFERIS PAGAR EN EFECTIVO</p>
27 28 <p class="h2 m-0 text-primary">te esperamos en la caja</p>
src/app/modules/seleccion-productos/seleccion-productos.component.html
Diff comments   View file @ f5f122f
... ... @@ -10,12 +10,12 @@
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">
12 12 <div class="px-3">
13   - <span class="">SELECCIONÁ TÚ COMIDA Y/O BEBIDA</span>
  13 + <p class="h6 text-truncate">SELECCIONÁ TÚ COMIDA Y/O BEBIDA</p>
14 14 </div>
15 15 </div>
16 16 </div>
17 17 <!-- CUERPO -->
18   - <div class="row mr-4 h-75">
  18 + <div class="row mr-4 h-70">
19 19 <div class="col-12 h-100 px-0 py-3">
20 20 <div class="row mx-0 h-100">
21 21 <!-- FILTRO CATEGORIAS -->
... ... @@ -89,8 +89,49 @@
89 89 </div>
90 90 </div>
91 91 </div>
92   - <div class="row mx-0 h-20 bg-primary">
93   -
  92 + <div class="row mx-0 h-20 justify-content-center">
  93 + <div class="col-11 h-100 px-0 border border-primary rounded">
  94 + <div class="row mx-0 h-15 border-bottom border-primary">
  95 + <p class="col align-self-center"><small>PRODUCTOS EN TÚ CARRITO DE COMPRAS</small></p>
  96 + </div>
  97 + <div class="row h-85 mx-auto">
  98 + <div class="col-auto h-20 align-self-center">
  99 + <img
  100 + draggable="false"
  101 + ondragstart="return false;"
  102 + (contextmenu)="false"
  103 + class="img-ir rotate-180-neg"
  104 + src="assets/img/ir-fondo-color.svg"
  105 + (mousedown)="scroll(templateCarrito, -80)"
  106 + (mouseup)="mouseup()"
  107 + (mouseleave)="mouseup()">
  108 + </div>
  109 + <div class="col h-100">
  110 + <div #templateCarrito class="row h-100 mx-0 scroll-x">
  111 + <div
  112 + class="col-12 col-md-3 col-xl-2 p-2 h-100"
  113 + (click)="selectCategoria(i)"
  114 + *ngFor="let categoria of [{},{},{},{},{},{},{}]; let i = index;">
  115 + <img
  116 + class="h-55 mx-auto"
  117 + src="assets/img/ir-color.svg">
  118 + <p class="mt-1 text-center text-primary"><small>{{'lala'}}</small></p>
  119 + </div>
  120 + </div>
  121 + </div>
  122 + <div class="col-auto h-20 align-self-center">
  123 + <img
  124 + draggable="false"
  125 + ondragstart="return false;"
  126 + (contextmenu)="false"
  127 + class="img-ir"
  128 + src="assets/img/ir-fondo-color.svg"
  129 + (mousedown)="scroll(templateCarrito, -80)"
  130 + (mouseup)="mouseup()"
  131 + (mouseleave)="mouseup()">
  132 + </div>
  133 + </div>
  134 + </div>
94 135 </div>
95 136 </div>
96 137  
src/app/modules/seleccion-productos/seleccion-productos.component.scss
Diff comments   View file @ f5f122f
1 1 $primary: #aa006b;
2 2  
3   -.rounded-right {
4   - border-top-right-radius: 1.5rem !important;
5   - border-bottom-right-radius: 1.5rem !important;
6   -}
7   -
8 3 .box-categorias {
9 4 height: calc(100% - 100px) !important;
10 5 }
src/assets/img/ir-fondo-color.svg
Diff comments   View file @ f5f122f
... ... @@ -0,0 +1,20 @@
  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.8306mm" height="19.8306mm" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
  5 +viewBox="0 0 523 523"
  6 + xmlns:xlink="http://www.w3.org/1999/xlink">
  7 + <defs>
  8 + <style type="text/css">
  9 + <![CDATA[
  10 + .fil1 {fill:#FEFEFE;fill-rule:nonzero}
  11 + .fil0 {fill:#AA006B;fill-rule:nonzero}
  12 + ]]>
  13 + </style>
  14 + </defs>
  15 + <g id="Capa_x0020_1">
  16 + <metadata id="CorelCorpID_0Corel-Layer"/>
  17 + <path class="fil0" d="M262 0c72,0 137,29 185,77 47,47 76,112 76,185 0,72 -29,137 -76,185 -48,47 -113,76 -185,76 -73,0 -138,-29 -185,-76 -48,-48 -77,-113 -77,-185 0,-73 29,-138 77,-185 47,-48 112,-77 185,-77z"/>
  18 + <polygon class="fil1" points="225,124 335,262 225,399 209,383 303,262 209,140 "/>
  19 + </g>
  20 +</svg>
src/scss/styles-bootstrap.scss
Diff comments   View file @ f5f122f
... ... @@ -12,8 +12,8 @@ $theme-colors: (
12 12 info: $info,
13 13 light: $light
14 14 );
15   -$border-radius: 1.5rem !default;
16   -$border-radius-lg: 2.5rem !default;
17   -$border-radius-sm: 0.5rem !default;
  15 +$border-radius: 1.5rem;
  16 +$border-radius-lg: 2.5rem;
  17 +$border-radius-sm: 0.5rem;
18 18  
19 19 @import "node_modules/bootstrap/scss/bootstrap";
... ... @@ -59,6 +59,10 @@ p {
59 59 transform: rotate(-90deg);
60 60 }
61 61  
  62 +.rotate-180-neg {
  63 + transform: rotate(-180deg);
  64 +}
  65 +
62 66 .scroll-y {
63 67 overflow-y: auto;
64 68 scrollbar-width: none;
... ... @@ -66,3 +70,11 @@ p {
66 70 display: none;
67 71 }
68 72 }
  73 +
  74 +.scroll-x {
  75 + overflow-x: auto;
  76 + scrollbar-width: none;
  77 + &::-webkit-scrollbar {
  78 + display: none;
  79 + }
  80 +}