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 <div class="row mx-0 h-100 justify-content-around bg-white"> 1 <div class="row mx-0 h-100 justify-content-around bg-white">
2 <div class="col-auto align-self-center px-0 bg-white"> 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 <div class="col-auto align-self-center text-primary">ESTAMOS PARA AYUDARTE</div> 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 <img class="p-2 img-accesibilidad" src="assets/img/iconos-accesibilidad.svg"> 6 <img class="p-2 img-accesibilidad" src="assets/img/iconos-accesibilidad.svg">
7 </div> 7 </div>
8 </div> 8 </div>
9 </div> 9 </div>
10 <div 10 <div
11 class="btn-effect col-auto align-self-center px-0 bg-white" 11 class="btn-effect col-auto align-self-center px-0 bg-white"
12 (click)="goBack()"> 12 (click)="goBack()">
13 <div class="row mx-0 bg-light rounded-left"> 13 <div class="row mx-0 bg-light">
14 <div class="col-auto align-self-center text-primary">VOLVER</div> 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 <img class="p-2 img-volver" src="assets/img/icono-volver.svg"> 16 <img class="p-2 img-volver" src="assets/img/icono-volver.svg">
17 </div> 17 </div>
18 </div> 18 </div>
19 </div> 19 </div>
20 </div> 20 </div>
21 21
src/app/modules/formas-pago/formas-pago.component.html
Diff comments   View file @ f5f122f
1 <div class="h-92 bg-white"> 1 <div class="h-92 bg-white">
2 <div class="row mx-0 h-15"> 2 <div class="row mx-0 h-15">
3 <div class="col-12 px-0 h-80 my-auto"> 3 <div class="col-12 px-0 h-80 my-auto">
4 <img class="d-block mx-auto h-100" src="assets/img/logo-spot.svg"> 4 <img class="d-block mx-auto h-100" src="assets/img/logo-spot.svg">
5 </div> 5 </div>
6 </div> 6 </div>
7 <div class="h-85"> 7 <div class="h-85">
8 <div class="row h-50 mx-0 justify-content-center text-center"> 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 <img class="img-in-top px-4 bg-white" src="assets/img/icono-tarjetas.svg"> 10 <img class="img-in-top px-4 bg-white" src="assets/img/icono-tarjetas.svg">
11 <p class="h6 m-0">ESTA TERMINAL OPERA CON</p> 11 <p class="h6 m-0">ESTA TERMINAL OPERA CON</p>
12 <p class="h2 mb-3 text-secondary"> 12 <p class="h2 mb-3 text-secondary">
13 tarjetas y 13 tarjetas y
14 <img class="w-15" src="assets/img/icono-mercado-pago.svg"> 14 <img class="w-15" src="assets/img/icono-mercado-pago.svg">
15 </p> 15 </p>
16 <div 16 <div
17 class="d-inline-block py-1 btn-effect bg-secondary badge-pill text-white" 17 class="d-inline-block py-1 btn-effect bg-secondary badge-pill text-white"
18 [routerLink]="['/opcion-pedido']"> 18 [routerLink]="['/opcion-pedido']">
19 CONTINUAR 19 CONTINUAR
20 <img class="img-ir" src="assets/img/ir.svg">
20 </div> 21 </div>
21 </div> 22 </div>
22 </div> 23 </div>
23 <div class="row h-50 mx-0 justify-content-center text-center"> 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 <img class="img-in-top px-4 bg-white" src="assets/img/icono-efectivo.svg"> 26 <img class="img-in-top px-4 bg-white" src="assets/img/icono-efectivo.svg">
26 <p class="h6 m-0">SI PREFERIS PAGAR EN EFECTIVO</p> 27 <p class="h6 m-0">SI PREFERIS PAGAR EN EFECTIVO</p>
27 <p class="h2 m-0 text-primary">te esperamos en la caja</p> 28 <p class="h2 m-0 text-primary">te esperamos en la caja</p>
28 </div> 29 </div>
29 </div> 30 </div>
30 </div> 31 </div>
31 </div> 32 </div>
32 33
src/app/modules/seleccion-productos/seleccion-productos.component.html
Diff comments   View file @ f5f122f
1 <div class="h-92 bg-white"> 1 <div class="h-92 bg-white">
2 <!-- PUBLICIDADES --> 2 <!-- PUBLICIDADES -->
3 <div class="row mx-0 h-10"> 3 <div class="row mx-0 h-10">
4 <div class="col-12 p-3 h-100"> 4 <div class="col-12 p-3 h-100">
5 <div class="bg-dark h-100"></div> 5 <div class="bg-dark h-100"></div>
6 </div> 6 </div>
7 </div> 7 </div>
8 <div class="h-90"> 8 <div class="h-90">
9 <!-- CABECERA --> 9 <!-- CABECERA -->
10 <div class="row mx-4 h-auto border border-primary rounded-sm"> 10 <div class="row mx-4 h-auto border border-primary rounded-sm">
11 <div class="col-12 p-2 align-self-center"> 11 <div class="col-12 p-2 align-self-center">
12 <div class="px-3"> 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 </div> 14 </div>
15 </div> 15 </div>
16 </div> 16 </div>
17 <!-- CUERPO --> 17 <!-- CUERPO -->
18 <div class="row mr-4 h-75"> 18 <div class="row mr-4 h-70">
19 <div class="col-12 h-100 px-0 py-3"> 19 <div class="col-12 h-100 px-0 py-3">
20 <div class="row mx-0 h-100"> 20 <div class="row mx-0 h-100">
21 <!-- FILTRO CATEGORIAS --> 21 <!-- FILTRO CATEGORIAS -->
22 <div class="col-5 col-sm-3 col-xl-2 h-100"> 22 <div class="col-5 col-sm-3 col-xl-2 h-100">
23 <p class="h6 h-6 m-0 text-center"><small>CATEGORÍAS</small></p> 23 <p class="h6 h-6 m-0 text-center"><small>CATEGORÍAS</small></p>
24 <div class="row mx-0 h-94 align-items-center"> 24 <div class="row mx-0 h-94 align-items-center">
25 <div class="col-12 h-5"> 25 <div class="col-12 h-5">
26 <img 26 <img
27 draggable="false" 27 draggable="false"
28 ondragstart="return false;" 28 ondragstart="return false;"
29 (contextmenu)="false" 29 (contextmenu)="false"
30 class="h-100 d-block mx-auto rotate-90-neg" 30 class="h-100 d-block mx-auto rotate-90-neg"
31 src="assets/img/ir-color.svg" 31 src="assets/img/ir-color.svg"
32 (mousedown)="scroll(templateCategorias, -80)" 32 (mousedown)="scroll(templateCategorias, -80)"
33 (mouseup)="mouseup()" 33 (mouseup)="mouseup()"
34 (mouseleave)="mouseup()"> 34 (mouseleave)="mouseup()">
35 </div> 35 </div>
36 <!-- CATEGORIAS --> 36 <!-- CATEGORIAS -->
37 <div 37 <div
38 #templateCategorias 38 #templateCategorias
39 class="col-12 px-0 box-categorias border border-primary border-left-0 rounded-right scroll-y"> 39 class="col-12 px-0 box-categorias border border-primary border-left-0 rounded-right scroll-y">
40 <div 40 <div
41 class="row mx-4 mb-2 h-32 justify-content-center tab" 41 class="row mx-4 mb-2 h-32 justify-content-center tab"
42 [ngClass]="{ 'active': categoria.selected, 'border-bottom-effect': !categoria.selected }" 42 [ngClass]="{ 'active': categoria.selected, 'border-bottom-effect': !categoria.selected }"
43 (click)="selectCategoria(i)" 43 (click)="selectCategoria(i)"
44 *ngFor="let categoria of categorias; let i = index;"> 44 *ngFor="let categoria of categorias; let i = index;">
45 <img 45 <img
46 class="col-12 h-50 align-self-end d-none d-sm-block" 46 class="col-12 h-50 align-self-end d-none d-sm-block"
47 src="assets/img/ir-color.svg"> 47 src="assets/img/ir-color.svg">
48 <small class="col-10 my-1 h-25 align-self-end text-center">{{categoria.id}}</small> 48 <small class="col-10 my-1 h-25 align-self-end text-center">{{categoria.id}}</small>
49 </div> 49 </div>
50 </div> 50 </div>
51 <div class="col-12 h-5"> 51 <div class="col-12 h-5">
52 <img 52 <img
53 draggable="false" 53 draggable="false"
54 ondragstart="return false;" 54 ondragstart="return false;"
55 (contextmenu)="false" 55 (contextmenu)="false"
56 class="h-100 d-block mx-auto rotate-90" 56 class="h-100 d-block mx-auto rotate-90"
57 src="assets/img/ir-color.svg" 57 src="assets/img/ir-color.svg"
58 (mousedown)="scroll(templateCategorias, 80)" 58 (mousedown)="scroll(templateCategorias, 80)"
59 (mouseup)="mouseup()" 59 (mouseup)="mouseup()"
60 (mouseleave)="mouseup()"> 60 (mouseleave)="mouseup()">
61 </div> 61 </div>
62 </div> 62 </div>
63 </div> 63 </div>
64 <!-- LISTA DE ARTICULOS --> 64 <!-- LISTA DE ARTICULOS -->
65 <div class="col-7 col-sm-9 col-xl-10 pb-3 h-80 align-self-center scroll-y"> 65 <div class="col-7 col-sm-9 col-xl-10 pb-3 h-80 align-self-center scroll-y">
66 <div class="row row-cols-1 row-cols-sm-3 row-cols-xl-6 h-100"> 66 <div class="row row-cols-1 row-cols-sm-3 row-cols-xl-6 h-100">
67 <!-- ARTICULO --> 67 <!-- ARTICULO -->
68 <div class="col px-2 my-1 my-md-3 h-auto" *ngFor="let lala of [{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}]"> 68 <div class="col px-2 my-1 my-md-3 h-auto" *ngFor="let lala of [{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}]">
69 <div class="card h-100"> 69 <div class="card h-100">
70 <img src="assets/img/ir-color.svg" class="card-img-top h-55"> 70 <img src="assets/img/ir-color.svg" class="card-img-top h-55">
71 <div class="row mx-0 py-1 h-auto justify-content-center"> 71 <div class="row mx-0 py-1 h-auto justify-content-center">
72 <p class="col-12 px-1 h6 h-auto text-primary text-center">{{'CORTADO'}}</p> 72 <p class="col-12 px-1 h6 h-auto text-primary text-center">{{'CORTADO'}}</p>
73 <p class="col-12 px-1 h-auto text-center"><small>{{'Café con un poco de leche'}}</small></p> 73 <p class="col-12 px-1 h-auto text-center"><small>{{'Café con un poco de leche'}}</small></p>
74 <div class="col-12 px-1 align-self-end btn-effect h-auto"> 74 <div class="col-12 px-1 align-self-end btn-effect h-auto">
75 <div class="row mx-0 justify-content-between bg-primary badge-pill"> 75 <div class="row mx-0 justify-content-between bg-primary badge-pill">
76 <div class="col px-0 align-self-center text-white text-right"> 76 <div class="col px-0 align-self-center text-white text-right">
77 {{55 | currency}} 77 {{55 | currency}}
78 </div> 78 </div>
79 <div class="col-5 px-0"> 79 <div class="col-5 px-0">
80 <img class="d-block ml-auto py-1 img-ir" src="assets/img/ir.svg"> 80 <img class="d-block ml-auto py-1 img-ir" src="assets/img/ir.svg">
81 </div> 81 </div>
82 </div> 82 </div>
83 </div> 83 </div>
84 </div> 84 </div>
85 </div> 85 </div>
86 </div> 86 </div>
87 </div> 87 </div>
88 </div> 88 </div>
89 </div> 89 </div>
90 </div> 90 </div>
91 </div> 91 </div>
92 <div class="row mx-0 h-20 bg-primary"> 92 <div class="row mx-0 h-20 justify-content-center">
93 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 </div> 135 </div>
95 </div> 136 </div>
96 137
97 </div> 138 </div>
src/app/modules/seleccion-productos/seleccion-productos.component.scss
Diff comments   View file @ f5f122f
1 $primary: #aa006b; 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 .box-categorias { 3 .box-categorias {
9 height: calc(100% - 100px) !important; 4 height: calc(100% - 100px) !important;
10 } 5 }
11 6
12 .active { 7 .active {
13 background-color: white; 8 background-color: white;
14 border-bottom: 3px solid $primary !important; 9 border-bottom: 3px solid $primary !important;
15 } 10 }
16 11
17 .border-bottom-effect { 12 .border-bottom-effect {
18 border: none; 13 border: none;
19 position: relative; 14 position: relative;
20 &:hover { 15 &:hover {
21 border: none; 16 border: none;
22 } 17 }
23 &::after { 18 &::after {
24 content: ""; 19 content: "";
25 position: absolute; 20 position: absolute;
26 width: 0px; 21 width: 0px;
27 height: 3px; 22 height: 3px;
28 left: 50%; 23 left: 50%;
29 bottom: 0; 24 bottom: 0;
30 background-color: $primary; 25 background-color: $primary;
31 transition: all ease-in-out 0.2s; 26 transition: all ease-in-out 0.2s;
32 } 27 }
33 &:hover::after { 28 &:hover::after {
34 width: 100%; 29 width: 100%;
35 left: 0; 30 left: 0;
36 } 31 }
37 } 32 }
38 33
39 .card { 34 .card {
40 border: none; 35 border: none;
41 } 36 }
42 37
src/assets/img/ir-fondo-color.svg
Diff comments   View file @ f5f122f
File was created 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>
21
src/scss/styles-bootstrap.scss
Diff comments   View file @ f5f122f
1 @import "node_modules/bootstrap/scss/functions"; 1 @import "node_modules/bootstrap/scss/functions";
2 @import "node_modules/bootstrap/scss/variables"; 2 @import "node_modules/bootstrap/scss/variables";
3 @import "node_modules/bootstrap/scss/mixins"; 3 @import "node_modules/bootstrap/scss/mixins";
4 4
5 $primary: #aa006b; 5 $primary: #aa006b;
6 $secondary: #00acd8; 6 $secondary: #00acd8;
7 $info: #f4b223; 7 $info: #f4b223;
8 $light: #e6e7e9; 8 $light: #e6e7e9;
9 $theme-colors: ( 9 $theme-colors: (
10 primary: $primary, 10 primary: $primary,
11 secondary: $secondary, 11 secondary: $secondary,
12 info: $info, 12 info: $info,
13 light: $light 13 light: $light
14 ); 14 );
15 $border-radius: 1.5rem !default; 15 $border-radius: 1.5rem;
16 $border-radius-lg: 2.5rem !default; 16 $border-radius-lg: 2.5rem;
17 $border-radius-sm: 0.5rem !default; 17 $border-radius-sm: 0.5rem;
18 18
19 @import "node_modules/bootstrap/scss/bootstrap"; 19 @import "node_modules/bootstrap/scss/bootstrap";
20 20
1 @import "scss/styles-bootstrap.scss"; 1 @import "scss/styles-bootstrap.scss";
2 @import "scss/typography.scss"; 2 @import "scss/typography.scss";
3 @import "scss/height-width.scss"; 3 @import "scss/height-width.scss";
4 @import "scss/animations.scss"; 4 @import "scss/animations.scss";
5 @import "scss/icons.scss"; 5 @import "scss/icons.scss";
6 @import "node_modules/bootstrap/scss/_variables.scss"; 6 @import "node_modules/bootstrap/scss/_variables.scss";
7 7
8 @font-face { 8 @font-face {
9 font-family: "Gotham"; 9 font-family: "Gotham";
10 font-style: normal; 10 font-style: normal;
11 font-weight: normal; 11 font-weight: normal;
12 src: url("assets/fonts/gotham-medium.woff") format("woff"); 12 src: url("assets/fonts/gotham-medium.woff") format("woff");
13 } 13 }
14 14
15 html, 15 html,
16 body { 16 body {
17 min-height: 100vh; 17 min-height: 100vh;
18 max-height: 100vh; 18 max-height: 100vh;
19 height: 100vh; 19 height: 100vh;
20 background-color: #fcf2e3; 20 background-color: #fcf2e3;
21 font-family: "Gotham"; 21 font-family: "Gotham";
22 overflow: hidden; 22 overflow: hidden;
23 user-select: none; 23 user-select: none;
24 } 24 }
25 25
26 .btn-effect { 26 .btn-effect {
27 transition: all 0.3s; 27 transition: all 0.3s;
28 &:hover { 28 &:hover {
29 cursor: pointer; 29 cursor: pointer;
30 opacity: 0.7; 30 opacity: 0.7;
31 } 31 }
32 &:active { 32 &:active {
33 transform: scale(1.02); 33 transform: scale(1.02);
34 } 34 }
35 } 35 }
36 36
37 .cursor-pointer { 37 .cursor-pointer {
38 cursor: pointer; 38 cursor: pointer;
39 } 39 }
40 40
41 p { 41 p {
42 margin: 0 !important; 42 margin: 0 !important;
43 } 43 }
44 44
45 .img-in-top { 45 .img-in-top {
46 position: absolute; 46 position: absolute;
47 top: -35px; 47 top: -35px;
48 left: 50%; 48 left: 50%;
49 height: 70px; 49 height: 70px;
50 -webkit-transform: translateX(-50%); 50 -webkit-transform: translateX(-50%);
51 transform: translateX(-50%); 51 transform: translateX(-50%);
52 } 52 }
53 53
54 .rotate-90 { 54 .rotate-90 {
55 transform: rotate(90deg); 55 transform: rotate(90deg);
56 } 56 }
57 57
58 .rotate-90-neg { 58 .rotate-90-neg {
59 transform: rotate(-90deg); 59 transform: rotate(-90deg);
60 } 60 }
61 61
62 .rotate-180-neg {
63 transform: rotate(-180deg);
64 }
65
62 .scroll-y { 66 .scroll-y {
63 overflow-y: auto; 67 overflow-y: auto;
64 scrollbar-width: none; 68 scrollbar-width: none;
65 &::-webkit-scrollbar { 69 &::-webkit-scrollbar {
66 display: none; 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 }
69 81