Luis Suarez / autoservicio-axion

Download as
Browse Code »

Commit a97eef89312b0d314e77a78291ebb2148ed41ed3

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

Creada pantalla para ver carrito

Showing 11 changed files with 146 additions and 26 deletions   Show diff stats
src/app/app-routing.module.ts
Diff comments   View file @ a97eef8
... ... @@ -21,12 +21,11 @@ const routes: Routes = [
21 21 path: 'seleccion-articulos',
22 22 loadChildren: () => import('./modules/seleccion-articulos/seleccion-articulos.module').then(m => m.SeleccionArticulosModule)
23 23 },
24   - {
25   - path: 'carrito',
26   - loadChildren: () => import('./modules/carrito/carrito.module').then(m => m.CarritoModule)
27   - },
28 24 ]
29 25 },
  26 + {
  27 + path: 'carrito', loadChildren: () => import('./modules/carrito/carrito.module').then(m => m.CarritoModule)
  28 + },
30 29 { path: '**', redirectTo: '', pathMatch: 'full' },
31 30 ];
32 31  
src/app/modules/carrito/carrito.component.html
Diff comments   View file @ a97eef8
... ... @@ -2,8 +2,81 @@
2 2 <!-- PUBLICIDADES -->
3 3 <app-header-publicidad></app-header-publicidad>
4 4  
5   - <div class="row mx-0 h-90 align-items-center">
  5 + <div class="h-85">
  6 + <!-- CABECERA -->
  7 + <div class="row mx-3 h-auto border border-primary rounded-sm">
  8 + <div class="col-12 px-0 py-2 align-self-center">
  9 + <div class="px-3">
  10 + <p class="h6 text-truncate">ESTE ES TÚ CARRITO DE COMPRAS</p>
  11 + </div>
  12 + </div>
  13 + </div>
6 14  
  15 + <!-- ARTICULOS -->
  16 + <div class="row mx-2 mt-4 h-80 scroll-y">
  17 + <div
  18 + class="col-12 col-xl-6 p-2 h-25 text-center text-truncate"
  19 + *ngFor="let item of [{},{},{},{},{},{},{},{},{}]">
  20 + <!-- ARTICULO -->
  21 + <div class="h-100 px-2 py-4 border border-primary rounded-sm">
  22 + <div class="row mx-0 h-100">
  23 + <!-- NOMBRE E IMAGEN -->
  24 + <div class="col-3 h-100 border-right border-primary align-self-center">
  25 + <img class="d-block mx-auto h-55" src="assets/img/icono-efectivo.svg">
  26 + <div class="row mx-0 h-45">
  27 + <p class="col text-primary align-self-end"><small>{{'CORTADO'}}</small></p>
  28 + </div>
  29 + </div>
  30 + <!-- CANTIDAD -->
  31 + <div class="col-3 border-right border-primary">
  32 + <p><small>CANT</small></p>
  33 + <div class="row mt-2 mx-0">
  34 + <div class="col-12 h-auto">
  35 + <div class="row mx-0 justify-content-between bg-primary badge-pill">
  36 + <div class="col-auto px-0">
  37 + <!-- BOTON MENOS -->
  38 + <img class="d-block ml-auto py-2 icon-20 btn-effect" src="assets/img/menos-blanco.svg">
  39 + </div>
  40 + <div class="col px-0 align-self-center text-white">
  41 + <p><small>{{55}}</small></p>
  42 + </div>
  43 + <div class="col-auto px-0">
  44 + <!-- BOTON MAS -->
  45 + <img class="d-block ml-auto py-2 icon-20 btn-effect" src="assets/img/mas-blanco.svg">
  46 + </div>
  47 + </div>
  48 + </div>
  49 + </div>
  50 + </div>
  51 + <!-- OPCIONALES -->
  52 + <div class="col-3 border-right border-primary">
  53 + <p><small>OPCIONALES</small></p>
  54 + <div class="py-1 badge-pill bg-dark text-white"><p><small>{{'AZÚCAR'}}</small></p></div>
  55 + <div class="row mx-0 mt-2 justify-content-center">
  56 + <div class="col-auto pl-3 btn-effect bg-primary badge-pill text-white">
  57 + <span>
  58 + <small class="pr-2">CAMBIAR</small>
  59 + <img class="icon-20" src="assets/img/ir.svg">
  60 + </span>
  61 + </div>
  62 + </div>
  63 + </div>
  64 + <!-- ELIMINAR -->
  65 + <div class="col-3 align-self-center">
  66 + <div class="row mx-0 justify-content-center">
  67 + <div class="col-auto px-3 py-1 btn-effect bg-primary badge-pill text-white">
  68 + <span>
  69 + <small class="pr-2">ELIMINAR</small>
  70 + <img class="icon-20 rotate-45" src="assets/img/mas-blanco.svg">
  71 + </span>
  72 + </div>
  73 + </div>
  74 + </div>
  75 + </div>
  76 + </div>
  77 + </div>
  78 + </div>
  79 +
7 80 </div>
8 81  
9 82 </div>
src/app/modules/formas-pago/formas-pago.component.html
Diff comments   View file @ a97eef8
... ... @@ -17,7 +17,7 @@
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 + <img class="icon-30" src="assets/img/ir.svg">
21 21 </div>
22 22 </div>
23 23 </div>
src/app/modules/opcion-pedido/opcion-pedido.component.html
Diff comments   View file @ a97eef8
... ... @@ -17,11 +17,11 @@
17 17 (click)="goTo('/seleccion-articulos')">
18 18 <div class="row mx-0 bg-primary badge-pill">
19 19 <div class="col-auto p-0">
20   - <img class="p-1 img-plato" src="assets/img/icono-plato.svg">
  20 + <img class="p-1 icon-50" src="assets/img/icono-plato.svg">
21 21 </div>
22 22 <div class="col-auto align-self-center text-white">comer acá</div>
23 23 <div class="col-auto align-self-center p-0">
24   - <img class="p-1 img-ir" src="assets/img/ir.svg">
  24 + <img class="p-1 icon-30" src="assets/img/ir.svg">
25 25 </div>
26 26 </div>
27 27 </div>
... ... @@ -34,11 +34,11 @@
34 34 (click)="goTo('/seleccion-articulos')">
35 35 <div class="row mx-0 bg-primary badge-pill">
36 36 <div class="col-auto p-0">
37   - <img class="p-1 img-plato" src="assets/img/icono-take-away.svg">
  37 + <img class="p-1 icon-50" src="assets/img/icono-take-away.svg">
38 38 </div>
39 39 <div class="col-auto align-self-center text-white">para llevar</div>
40 40 <div class="col-auto align-self-center p-0">
41   - <img class="p-1 img-ir" src="assets/img/ir.svg">
  41 + <img class="p-1 icon-30" src="assets/img/ir.svg">
42 42 </div>
43 43 </div>
44 44 </div>
src/app/modules/seleccion-articulos/seleccion-articulos.component.html
Diff comments   View file @ a97eef8
... ... @@ -4,7 +4,7 @@
4 4  
5 5 <div class="row mx-0 h-90 align-items-end">
6 6 <!-- CABECERA -->
7   - <div class="row w-100 mx-4 h-auto border border-primary rounded-sm">
  7 + <div class="row w-100 mx-3 h-auto border border-primary rounded-sm">
8 8 <div class="col-12 p-2 align-self-center">
9 9 <div class="px-3">
10 10 <p class="h6 text-truncate">SELECCIONÁ TÚ COMIDA Y/O BEBIDA</p>
... ... @@ -74,7 +74,7 @@
74 74 {{55 | currency}}
75 75 </div>
76 76 <div class="col-5 px-0">
77   - <img class="d-block ml-auto py-1 img-ir" src="assets/img/ir.svg">
  77 + <img class="d-block ml-auto py-1 icon-30" src="assets/img/ir.svg">
78 78 </div>
79 79 </div>
80 80 </div>
... ... @@ -98,7 +98,7 @@
98 98 draggable="false"
99 99 ondragstart="return false;"
100 100 (contextmenu)="false"
101   - class="img-ir rotate-180-neg"
  101 + class="icon-30 rotate-180-neg"
102 102 src="assets/img/ir-fondo-color.svg"
103 103 (mousedown)="scrollX(templateCarrito, -100)"
104 104 (mouseup)="mouseup()"
... ... @@ -107,7 +107,7 @@
107 107 <div class="col-6 col-sm-8 col-md-9 col-lg-10 h-100">
108 108 <div #templateCarrito class="row flex-row flex-nowrap h-100 mx-0 scroll-x">
109 109 <div
110   - class="col-10 col-sm-4 col-lg-2 col-xl-auto px-2 px-xl-4 h-auto align-self-center border-right border-primary"
  110 + class="col-10 col-sm-4 col-lg-2 col-xl-auto px-2 px-xl-4 h-100 align-self-center border-right border-primary"
111 111 (click)="selectCategoria(i)"
112 112 *ngFor="let categoria of [{},{},{},{},{},{},{},{},{},{},{},{},{},{}]; let i = index;">
113 113 <img
... ... @@ -122,7 +122,7 @@
122 122 draggable="false"
123 123 ondragstart="return false;"
124 124 (contextmenu)="false"
125   - class="img-ir"
  125 + class="icon-30"
126 126 src="assets/img/ir-fondo-color.svg"
127 127 (mousedown)="scrollX(templateCarrito, 100)"
128 128 (mouseup)="mouseup()"
... ... @@ -137,7 +137,7 @@
137 137 <div class="row mx-0 bg-light">
138 138 <div class="col-auto align-self-center text-primary">VER CARRITO</div>
139 139 <div class="col-auto p-0 bg-primary d-none d-sm-block">
140   - <img class="p-2 img-volver" src="assets/img/carrito.svg">
  140 + <img class="p-2 icon-40" src="assets/img/carrito.svg">
141 141 </div>
142 142 </div>
143 143 </div>
src/app/shared/footer/footer.component.html
Diff comments   View file @ a97eef8
... ... @@ -3,7 +3,7 @@
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>
5 5 <div class="col-auto p-0 bg-primary d-none d-sm-block">
6   - <img class="p-2 img-accesibilidad" src="assets/img/iconos-accesibilidad.svg">
  6 + <img class="p-2 icon-60" src="assets/img/iconos-accesibilidad.svg">
7 7 </div>
8 8 </div>
9 9 </div>
... ... @@ -13,7 +13,7 @@
13 13 <div class="row mx-0 bg-light">
14 14 <div class="col-auto align-self-center text-primary">VOLVER</div>
15 15 <div class="col-auto p-0 bg-primary d-none d-sm-block">
16   - <img class="p-2 img-volver" src="assets/img/icono-volver.svg">
  16 + <img class="p-2 icon-40" src="assets/img/icono-volver.svg">
17 17 </div>
18 18 </div>
19 19 </div>
src/assets/img/mas-blanco.svg
Diff comments   View file @ a97eef8
... ... @@ -0,0 +1,19 @@
  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="15.7612mm" height="15.7612mm" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
  5 +viewBox="0 0 172 172"
  6 + xmlns:xlink="http://www.w3.org/1999/xlink">
  7 + <defs>
  8 + <style type="text/css">
  9 + <![CDATA[
  10 + .str0 {stroke:white;stroke-width:0.829257}
  11 + .fil0 {fill:white;fill-rule:nonzero}
  12 + ]]>
  13 + </style>
  14 + </defs>
  15 + <g id="Capa_x0020_1">
  16 + <metadata id="CorelCorpID_0Corel-Layer"/>
  17 + <path class="fil0 str0" d="M141 31c-14,-15 -34,-23 -55,-23 -22,0 -41,8 -55,23 -15,14 -23,33 -23,55 0,21 8,41 23,55 14,14 33,23 55,23 21,0 41,-9 55,-23 14,-14 23,-34 23,-55 0,-22 -9,-41 -23,-55zm-55 -31c23,0 45,10 60,25 16,16 25,37 25,61 0,23 -9,45 -25,60 -15,16 -37,25 -60,25 -24,0 -45,-9 -61,-25 -15,-15 -25,-37 -25,-60 0,-24 10,-45 25,-61 16,-15 37,-25 61,-25zm-5 37l9 0 0 44 44 0 0 9 -44 0 0 44 -9 0 0 -44 -44 0 0 -9 44 0 0 -44z"/>
  18 + </g>
  19 +</svg>
src/assets/img/menos-blanco.svg
Diff comments   View file @ a97eef8
... ... @@ -0,0 +1,19 @@
  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="15.7612mm" height="15.7612mm" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
  5 +viewBox="0 0 246 246"
  6 + xmlns:xlink="http://www.w3.org/1999/xlink">
  7 + <defs>
  8 + <style type="text/css">
  9 + <![CDATA[
  10 + .str0 {stroke:#FEFEFE;stroke-width:1.18899}
  11 + .fil0 {fill:#FEFEFE;fill-rule:nonzero}
  12 + ]]>
  13 + </style>
  14 + </defs>
  15 + <g id="Capa_x0020_1">
  16 + <metadata id="CorelCorpID_0Corel-Layer"/>
  17 + <path class="fil0 str0" d="M202 44c-20,-20 -48,-33 -79,-33 -31,0 -59,13 -79,33 -20,20 -33,48 -33,79 0,31 13,59 33,79 20,20 48,33 79,33 31,0 59,-13 79,-33 20,-20 33,-48 33,-79 0,-31 -13,-59 -33,-79zm-79 -43c34,0 64,13 86,35 23,23 36,53 36,87 0,34 -13,64 -36,86 -22,23 -52,36 -86,36 -34,0 -64,-13 -87,-36 -22,-22 -35,-52 -35,-86 0,-34 13,-64 35,-87 23,-22 53,-35 87,-35zm-69 129l0 -14 138 0 0 14 -138 0z"/>
  18 + </g>
  19 +</svg>
1   -.img-ir {
  1 +.icon-20 {
  2 + width: 20px;
  3 +}
  4 +
  5 +.icon-30 {
2 6 width: 30px;
3 7 }
4 8  
5   -.img-plato {
6   - width: 50px;
  9 +.icon-40 {
  10 + width: 40px;
7 11 }
8 12  
9   -.img-accesibilidad {
10   - width: 60px;
  13 +.icon-50 {
  14 + width: 50px;
11 15 }
12 16  
13   -.img-volver {
14   - width: 40px;
  17 +.icon-60 {
  18 + width: 60px;
15 19 }
src/scss/styles-bootstrap.scss
Diff comments   View file @ a97eef8
... ... @@ -6,11 +6,13 @@ $primary: #aa006b;
6 6 $secondary: #00acd8;
7 7 $info: #f4b223;
8 8 $light: #e6e7e9;
  9 +$dark: #61666c;
9 10 $theme-colors: (
10 11 primary: $primary,
11 12 secondary: $secondary,
12 13 info: $info,
13   - light: $light
  14 + light: $light,
  15 + dark: $dark
14 16 );
15 17 $border-radius: 1.5rem;
16 18 $border-radius-lg: 2.5rem;
... ... @@ -50,6 +50,10 @@ p {
50 50 transform: translateX(-50%);
51 51 }
52 52  
  53 +.rotate-45 {
  54 + transform: rotate(45deg);
  55 +}
  56 +
53 57 .rotate-90 {
54 58 transform: rotate(90deg);
55 59 }