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 <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"> 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 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"> 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 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 @ f27a108
1 <div class="h-92 bg-white"> 1 <div class="h-92 bg-white fade-in-left">
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-end 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 <img class="img-ir" src="assets/img/ir.svg">
21 </div> 21 </div>
22 </div> 22 </div>
23 </div> 23 </div>
24 <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">
25 <div class="col-7 p-5 h-auto align-self-center border border-primary rounded"> 25 <div class="col-7 p-5 h-auto align-self-center border border-primary rounded">
26 <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">
27 <p class="h6 m-0">SI PREFERIS PAGAR EN EFECTIVO</p> 27 <p class="h6 m-0">SI PREFERIS PAGAR EN EFECTIVO</p>
28 <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>
29 </div> 29 </div>
30 </div> 30 </div>
31 </div> 31 </div>
32 </div> 32 </div>
33 33
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 <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-25 mx-0 justify-content-center text-center"> 8 <div class="row h-25 mx-0 justify-content-center text-center">
9 <div class="col-12 px-0 h-auto align-self-center"> 9 <div class="col-12 px-0 h-auto align-self-center">
10 <p class="h6 mb-5 text-center">TU PEDIDO ES PARA:</p> 10 <p class="h6 mb-5 text-center">TU PEDIDO ES PARA:</p>
11 </div> 11 </div>
12 </div> 12 </div>
13 <div class="row h-15 justify-content-center mx-0"> 13 <div class="row h-15 justify-content-center mx-0">
14 <div class="col-auto px-0 h-auto align-self-start"> 14 <div class="col-auto px-0 h-auto align-self-start">
15 <div 15 <div
16 class="btn-effect col-auto align-self-center px-0 bg-white" 16 class="btn-effect col-auto align-self-center px-0 bg-white"
17 (click)="goTo('/seleccion-articulos')"> 17 (click)="goTo('/seleccion-articulos')">
18 <div class="row mx-0 bg-primary badge-pill"> 18 <div class="row mx-0 bg-primary badge-pill">
19 <div class="col-auto p-0"> 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 img-plato" src="assets/img/icono-plato.svg">
21 </div> 21 </div>
22 <div class="col-auto align-self-center text-white">comer acá</div> 22 <div class="col-auto align-self-center text-white">comer acá</div>
23 <div class="col-auto align-self-center p-0"> 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 img-ir" src="assets/img/ir.svg">
25 </div> 25 </div>
26 </div> 26 </div>
27 </div> 27 </div>
28 </div> 28 </div>
29 </div> 29 </div>
30 <div class="row h-15 justify-content-center mx-0"> 30 <div class="row h-15 justify-content-center mx-0">
31 <div class="col-auto px-0 h-auto align-self-start"> 31 <div class="col-auto px-0 h-auto align-self-start">
32 <div 32 <div
33 class="btn-effect col-auto align-self-center px-0 bg-white" 33 class="btn-effect col-auto align-self-center px-0 bg-white"
34 (click)="goTo('/seleccion-articulos')"> 34 (click)="goTo('/seleccion-articulos')">
35 <div class="row mx-0 bg-primary badge-pill"> 35 <div class="row mx-0 bg-primary badge-pill">
36 <div class="col-auto p-0"> 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 img-plato" src="assets/img/icono-take-away.svg">
38 </div> 38 </div>
39 <div class="col-auto align-self-center text-white">para llevar</div> 39 <div class="col-auto align-self-center text-white">para llevar</div>
40 <div class="col-auto align-self-center p-0"> 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 img-ir" src="assets/img/ir.svg">
42 </div> 42 </div>
43 </div> 43 </div>
44 </div> 44 </div>
45 </div> 45 </div>
46 </div> 46 </div>
47 </div> 47 </div>
48 </div> 48 </div>
49 49
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 <!-- 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 row mx-0 align-items-end">
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 <p class="h6 text-truncate">SELECCIONÁ TÚ COMIDA Y/O BEBIDA</p> 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-70"> 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)="scrollY(templateCategorias, -80)" 32 (mousedown)="scrollY(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)="scrollY(templateCategorias, 80)" 58 (mousedown)="scrollY(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 justify-content-center"> 92 <!-- FOOTER CARRITO DE COMPRAS -->
93 <div class="col-11 h-100 px-0 border border-primary rounded"> 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 <div class="row mx-0 h-15 border-bottom border-primary"> 95 <div class="row mx-0 h-15 border-bottom border-primary">
95 <p class="col align-self-center text-truncate"><small>ARTÍCULOS EN TÚ CARRITO DE COMPRAS</small></p> 96 <p class="col align-self-center text-truncate"><small>ARTÍCULOS EN TÚ CARRITO DE COMPRAS</small></p>
96 </div> 97 </div>
97 <div class="row h-85 mx-0 justify-content-between"> 98 <div class="row h-85 mx-0 justify-content-between">
98 <div class="col-auto h-20 align-self-center"> 99 <div class="col-auto h-20 align-self-center">
99 <img 100 <img
100 draggable="false" 101 draggable="false"
101 ondragstart="return false;" 102 ondragstart="return false;"
102 (contextmenu)="false" 103 (contextmenu)="false"
103 class="img-ir rotate-180-neg" 104 class="img-ir rotate-180-neg"
104 src="assets/img/ir-fondo-color.svg" 105 src="assets/img/ir-fondo-color.svg"
105 (mousedown)="scrollX(templateCarrito, -100)" 106 (mousedown)="scrollX(templateCarrito, -100)"
106 (mouseup)="mouseup()" 107 (mouseup)="mouseup()"
107 (mouseleave)="mouseup()"> 108 (mouseleave)="mouseup()">
108 </div> 109 </div>
109 <div class="col-6 col-sm-8 col-md-9 col-lg-10 h-100"> 110 <div class="col-6 col-sm-8 col-md-9 col-lg-10 h-100">
110 <div #templateCarrito class="row flex-row flex-nowrap h-100 mx-0 scroll-x"> 111 <div #templateCarrito class="row flex-row flex-nowrap h-100 mx-0 scroll-x">
111 <div 112 <div
112 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" 113 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"
113 (click)="selectCategoria(i)" 114 (click)="selectCategoria(i)"
114 *ngFor="let categoria of [{},{},{},{},{},{},{},{},{},{},{},{},{},{}]; let i = index;"> 115 *ngFor="let categoria of [{},{},{},{},{},{},{},{},{},{},{},{},{},{}]; let i = index;">
115 <img 116 <img
116 class="d-block h-55 mx-auto" 117 class="d-block h-55 p-2 mx-auto"
117 src="assets/img/ir-color.svg"> 118 src="assets/img/ir-color.svg">
118 <p class="d-block mt-auto text-center text-primary"><small>{{'lala'}}</small></p> 119 <p class="d-block mt-auto text-center text-primary"><small>{{'lala'}}</small></p>
119 </div> 120 </div>
120 </div> 121 </div>
121 </div> 122 </div>
122 <div class="col-auto h-20 align-self-center"> 123 <div class="col-auto h-20 align-self-center">
123 <img 124 <img
124 draggable="false" 125 draggable="false"
125 ondragstart="return false;" 126 ondragstart="return false;"
126 (contextmenu)="false" 127 (contextmenu)="false"
127 class="img-ir" 128 class="img-ir"
128 src="assets/img/ir-fondo-color.svg" 129 src="assets/img/ir-fondo-color.svg"
129 (mousedown)="scrollX(templateCarrito, 100)" 130 (mousedown)="scrollX(templateCarrito, 100)"
130 (mouseup)="mouseup()" 131 (mouseup)="mouseup()"
131 (mouseleave)="mouseup()"> 132 (mouseleave)="mouseup()">
132 </div> 133 </div>
133 </div> 134 </div>
134 </div> 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 </div> 146 </div>
136 </div> 147 </div>
137 148
138 </div> 149 </div>
139 150
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 <div class="row mx-0 h-100"> 2 <div class="row mx-0 h-100">
3 <div class="col-12 px-0 h-30 my-auto"> 3 <div class="col-12 px-0 h-30 my-auto">
4 <img class="d-block mx-auto h-100 focus-in-blur" src="assets/img/logo-spot.svg"> 4 <img class="d-block mx-auto h-100 focus-in-blur" src="assets/img/logo-spot.svg">
5 </div> 5 </div>
6 </div> 6 </div>
7 </div> 7 </div>
8 8
9 <div *ngIf="!showSplashScreen" class="vh-100 bg-primary fade-in"> 9 <div *ngIf="!showSplashScreen" class="vh-100 bg-primary fade-in">
10 <div class="row mx-0 h-100"> 10 <div class="row mx-0 h-100">
11 <div class="col-12 px-0 h-100 my-auto"> 11 <div class="col-12 px-0 h-100 my-auto">
12 <div class="row mx-0 h-15"> 12 <div class="row mx-0 h-15">
13 <div class="col-12 px-0 h-80 my-auto"> 13 <div class="col-12 px-0 h-80 my-auto">
14 <img class="d-block mx-auto h-100" src="assets/img/negativo-spot.svg"> 14 <img class="d-block mx-auto h-100" src="assets/img/negativo-spot.svg">
15 </div> 15 </div>
16 </div> 16 </div>
17 <div class="row mx-0 h-75 justify-content-center text-white text-center"> 17 <div class="row mx-0 h-75 justify-content-center text-white text-center">
18 <div class="col-7 h-auto px-0 py-5 mb-5 align-self-end box"> 18 <div class="col-7 h-auto px-0 py-5 mb-5 align-self-end box">
19 <div class="h6 m-0 welcome-text text-info"> 19 <div class="h6 m-0 welcome-text text-info">
20 <span *ngFor="let letter of textWelcome | split textWelcome">{{letter}}</span> 20 <span *ngFor="let letter of textWelcome | split textWelcome">{{letter}}</span>
21 </div> 21 </div>
22 <div class="h1 m-0 como-estas-text"> 22 <div class="h1 m-0 como-estas-text">
23 <span *ngFor="let letter of textComoEstas | split textComoEstas">{{letter}}</span> 23 <span *ngFor="let letter of textComoEstas | split textComoEstas">{{letter}}</span>
24 </div> 24 </div>
25 </div> 25 </div>
26 <div class="col-7 h-auto px-0 py-5 mt-5 align-self-start box2"> 26 <div class="col-7 h-auto px-0 py-5 mt-5 align-self-start box2">
27 <div class="h6 m-0 invitamos-text text-info"> 27 <div class="h6 m-0 invitamos-text text-info">
28 <span *ngFor="let letter of textInvitamos | split textInvitamos">{{letter}}</span> 28 <span *ngFor="let letter of textInvitamos | split textInvitamos">{{letter}}</span>
29 </div> 29 </div>
30 <div class="h1 m-0 tu-pedido-text"> 30 <div class="h1 m-0 tu-pedido-text">
31 <span *ngFor="let letter of textTuPedido | split textTuPedido">{{letter}}</span> 31 <span *ngFor="let letter of textTuPedido | split textTuPedido">{{letter}}</span>
32 </div> 32 </div>
33 </div> 33 </div>
34 </div> 34 </div>
35 <div 35 <div
36 class="row mx-0 h-10 loop-color cursor-pointer" 36 class="row mx-0 h-10 loop-color cursor-pointer"
37 [routerLink]="['/formas-pago']"> 37 [routerLink]="['/formas-pago']">
38 <div class="col-12 text-center align-self-center px-0"> 38 <div class="col-12 text-center align-self-center px-0">
39 <p class="h6 text-white">TOCA PARA COMENZAR</p> 39 <p class="h6 text-white">TOCA PARA COMENZAR</p>
40 </div> 40 </div>
41 </div> 41 </div>
42 </div> 42 </div>
43 </div> 43 </div>
44 </div> 44 </div>
45 45
src/app/modules/splash-screen/splash-screen.component.scss
Diff comments   View file @ f27a108
1 .bg-splash {
2 background-color: #fcf2e3;
3 }
4
1 .box:before { 5 .box:before {
2 content: ""; 6 content: "";
3 position: absolute; 7 position: absolute;
4 top: 0; 8 top: 0;
5 left: 0; 9 left: 0;
6 width: 0; 10 width: 0;
7 height: 0; 11 height: 0;
8 background: transparent; 12 background: transparent;
9 border: 2px solid transparent; 13 border: 2px solid transparent;
10 animation: animate 2.5s 1s linear forwards; 14 animation: animate 2.5s 1s linear forwards;
11 -webkit-animation: animate 2.5s 1s linear forwards; 15 -webkit-animation: animate 2.5s 1s linear forwards;
12 } 16 }
13 17
14 @keyframes animate { 18 @keyframes animate {
15 0% { 19 0% {
16 width: 0; 20 width: 0;
17 height: 0; 21 height: 0;
18 border-top-color: white; 22 border-top-color: white;
19 border-bottom-color: transparent; 23 border-bottom-color: transparent;
20 border-left-color: transparent; 24 border-left-color: transparent;
21 border-right-color: transparent; 25 border-right-color: transparent;
22 } 26 }
23 25% { 27 25% {
24 width: 100%; 28 width: 100%;
25 height: 0; 29 height: 0;
26 border-top-color: white; 30 border-top-color: white;
27 border-top-right-radius: 1.5rem; 31 border-top-right-radius: 1.5rem;
28 border-bottom-color: transparent; 32 border-bottom-color: transparent;
29 border-left-color: transparent; 33 border-left-color: transparent;
30 border-right-color: white; 34 border-right-color: white;
31 } 35 }
32 50% { 36 50% {
33 width: 100%; 37 width: 100%;
34 height: 100%; 38 height: 100%;
35 border-top-right-radius: 1.5rem; 39 border-top-right-radius: 1.5rem;
36 border-bottom-right-radius: 1.5rem; 40 border-bottom-right-radius: 1.5rem;
37 border-top-color: white; 41 border-top-color: white;
38 border-bottom-color: transparent; 42 border-bottom-color: transparent;
39 border-left-color: transparent; 43 border-left-color: transparent;
40 border-right-color: white; 44 border-right-color: white;
41 } 45 }
42 100% { 46 100% {
43 width: 100%; 47 width: 100%;
44 height: 100%; 48 height: 100%;
45 border-top-right-radius: 1.5rem; 49 border-top-right-radius: 1.5rem;
46 border-bottom-right-radius: 1.5rem; 50 border-bottom-right-radius: 1.5rem;
47 border-top-color: white; 51 border-top-color: white;
48 border-bottom-color: white; 52 border-bottom-color: white;
49 border-left-color: transparent; 53 border-left-color: transparent;
50 border-right-color: white; 54 border-right-color: white;
51 } 55 }
52 } 56 }
53 57
54 .box2:before { 58 .box2:before {
55 content: ""; 59 content: "";
56 position: absolute; 60 position: absolute;
57 top: 0; 61 top: 0;
58 left: 0; 62 left: 0;
59 width: 0; 63 width: 0;
60 height: 0; 64 height: 0;
61 background: transparent; 65 background: transparent;
62 border: 2px solid transparent; 66 border: 2px solid transparent;
63 animation: animate2 2.5s 2.5s linear forwards; 67 animation: animate2 2.5s 2.5s linear forwards;
64 -webkit-animation: animate2 2.5s 2.5s linear forwards; 68 -webkit-animation: animate2 2.5s 2.5s linear forwards;
65 } 69 }
66 70
67 @keyframes animate2 { 71 @keyframes animate2 {
68 0% { 72 0% {
69 width: 100%; 73 width: 100%;
70 height: 0; 74 height: 0;
71 border-top-color: white; 75 border-top-color: white;
72 border-bottom-color: transparent; 76 border-bottom-color: transparent;
73 border-left-color: transparent; 77 border-left-color: transparent;
74 border-right-color: transparent; 78 border-right-color: transparent;
75 } 79 }
76 25% { 80 25% {
77 width: 100%; 81 width: 100%;
78 height: 0; 82 height: 0;
79 border-top-color: white; 83 border-top-color: white;
80 border-top-left-radius: 1.5rem; 84 border-top-left-radius: 1.5rem;
81 border-bottom-color: transparent; 85 border-bottom-color: transparent;
82 border-right-color: transparent; 86 border-right-color: transparent;
83 border-left-color: white; 87 border-left-color: white;
84 } 88 }
85 50% { 89 50% {
86 width: 100%; 90 width: 100%;
87 height: 100%; 91 height: 100%;
88 border-top-left-radius: 1.5rem; 92 border-top-left-radius: 1.5rem;
89 border-bottom-left-radius: 1.5rem; 93 border-bottom-left-radius: 1.5rem;
90 border-top-color: white; 94 border-top-color: white;
91 border-bottom-color: transparent; 95 border-bottom-color: transparent;
92 border-right-color: transparent; 96 border-right-color: transparent;
93 border-left-color: white; 97 border-left-color: white;
94 } 98 }
95 100% { 99 100% {
96 width: 100%; 100 width: 100%;
97 height: 100%; 101 height: 100%;
98 border-top-left-radius: 1.5rem; 102 border-top-left-radius: 1.5rem;
99 border-bottom-left-radius: 1.5rem; 103 border-bottom-left-radius: 1.5rem;
100 border-top-color: white; 104 border-top-color: white;
101 border-bottom-color: white; 105 border-bottom-color: white;
102 border-right-color: transparent; 106 border-right-color: transparent;
103 border-left-color: white; 107 border-left-color: white;
104 } 108 }
105 } 109 }
106 110
107 /* 111 /*
108 * animation slide-in-top 112 * animation slide-in-top
109 */ 113 */
110 .welcome-text span, 114 .welcome-text span,
111 .como-estas-text span, 115 .como-estas-text span,
112 .invitamos-text span, 116 .invitamos-text span,
113 .tu-pedido-text span { 117 .tu-pedido-text span {
114 opacity: 0; 118 opacity: 0;
115 -webkit-animation: slide-in-top 1s forwards; 119 -webkit-animation: slide-in-top 1s forwards;
116 animation: slide-in-top 1s forwards; 120 animation: slide-in-top 1s forwards;
117 display: inline-block; 121 display: inline-block;
118 white-space: break-spaces; 122 white-space: break-spaces;
119 } 123 }
120 124
121 @-webkit-keyframes slide-in-top { 125 @-webkit-keyframes slide-in-top {
122 0% { 126 0% {
123 -webkit-transform: translateY(-500px); 127 -webkit-transform: translateY(-500px);
124 transform: translateY(-500px); 128 transform: translateY(-500px);
125 opacity: 0; 129 opacity: 0;
126 } 130 }
127 80% { 131 80% {
128 -webkit-transform: translateY(10px); 132 -webkit-transform: translateY(10px);
129 transform: translateY(10px); 133 transform: translateY(10px);
130 opacity: 1; 134 opacity: 1;
131 } 135 }
132 100% { 136 100% {
133 -webkit-transform: translateY(0); 137 -webkit-transform: translateY(0);
134 transform: translateY(0); 138 transform: translateY(0);
135 opacity: 1; 139 opacity: 1;
136 } 140 }
137 } 141 }
138 142
139 @keyframes slide-in-top { 143 @keyframes slide-in-top {
140 0% { 144 0% {
141 -webkit-transform: translateY(-500px); 145 -webkit-transform: translateY(-500px);
142 transform: translateY(-500px); 146 transform: translateY(-500px);
143 opacity: 0; 147 opacity: 0;
144 } 148 }
145 80% { 149 80% {
146 -webkit-transform: translateY(15px); 150 -webkit-transform: translateY(15px);
147 transform: translateY(15px); 151 transform: translateY(15px);
148 opacity: 1; 152 opacity: 1;
149 } 153 }
150 100% { 154 100% {
151 -webkit-transform: translateY(0); 155 -webkit-transform: translateY(0);
152 transform: translateY(0); 156 transform: translateY(0);
153 opacity: 1; 157 opacity: 1;
154 } 158 }
155 } 159 }
156 160
157 @for $i from 1 through 18 { 161 @for $i from 1 through 18 {
158 $delayValue: $i * 0.05s; 162 $delayValue: $i * 0.05s;
159 .welcome-text span:nth-child(#{$i}) { 163 .welcome-text span:nth-child(#{$i}) {
160 -webkit-animation-delay: $delayValue; 164 -webkit-animation-delay: $delayValue;
161 animation-delay: $delayValue; 165 animation-delay: $delayValue;
162 } 166 }
163 } 167 }
164 168
165 @for $i from 1 through 12 { 169 @for $i from 1 through 12 {
166 $delayValue: ($i + 18) * 0.05s; 170 $delayValue: ($i + 18) * 0.05s;
167 .como-estas-text span:nth-child(#{$i}) { 171 .como-estas-text span:nth-child(#{$i}) {
168 -webkit-animation-delay: $delayValue; 172 -webkit-animation-delay: $delayValue;
169 animation-delay: $delayValue; 173 animation-delay: $delayValue;
170 } 174 }
171 } 175 }
172 176
173 @for $i from 1 through 20 { 177 @for $i from 1 through 20 {
174 $delayValue: ($i + 30) * 0.05s; 178 $delayValue: ($i + 30) * 0.05s;
175 .invitamos-text span:nth-child(#{$i}) { 179 .invitamos-text span:nth-child(#{$i}) {
176 -webkit-animation-delay: $delayValue; 180 -webkit-animation-delay: $delayValue;
177 animation-delay: $delayValue; 181 animation-delay: $delayValue;
178 } 182 }
179 } 183 }
180 184
181 @for $i from 1 through 13 { 185 @for $i from 1 through 13 {
182 $delayValue: ($i + 50) * 0.05s; 186 $delayValue: ($i + 50) * 0.05s;
183 .tu-pedido-text span:nth-child(#{$i}) { 187 .tu-pedido-text span:nth-child(#{$i}) {
184 -webkit-animation-delay: $delayValue; 188 -webkit-animation-delay: $delayValue;
185 animation-delay: $delayValue; 189 animation-delay: $delayValue;
186 } 190 }
187 } 191 }
188 192
src/assets/img/carrito.svg
Diff comments   View file @ f27a108
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.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>
19
src/scss/animations.scss
Diff comments   View file @ f27a108
1 /* 1 /*
2 * animation focus-in-blur 2 * animation focus-in-blur
3 */ 3 */
4 .focus-in-blur { 4 .focus-in-blur {
5 -webkit-animation: focus-in-blur 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both; 5 -webkit-animation: focus-in-blur 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
6 animation: focus-in-blur 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both; 6 animation: focus-in-blur 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
7 } 7 }
8 8
9 @-webkit-keyframes focus-in-blur { 9 @-webkit-keyframes focus-in-blur {
10 0% { 10 0% {
11 -webkit-filter: blur(12px); 11 -webkit-filter: blur(12px);
12 filter: blur(12px); 12 filter: blur(12px);
13 opacity: 0; 13 opacity: 0;
14 } 14 }
15 100% { 15 100% {
16 -webkit-filter: blur(0px); 16 -webkit-filter: blur(0px);
17 filter: blur(0px); 17 filter: blur(0px);
18 opacity: 1; 18 opacity: 1;
19 } 19 }
20 } 20 }
21 21
22 @keyframes focus-in-blur { 22 @keyframes focus-in-blur {
23 0% { 23 0% {
24 -webkit-filter: blur(12px); 24 -webkit-filter: blur(12px);
25 filter: blur(12px); 25 filter: blur(12px);
26 opacity: 0; 26 opacity: 0;
27 } 27 }
28 100% { 28 100% {
29 -webkit-filter: blur(0px); 29 -webkit-filter: blur(0px);
30 filter: blur(0px); 30 filter: blur(0px);
31 opacity: 1; 31 opacity: 1;
32 } 32 }
33 } 33 }
34 34
35 /* 35 /*
36 * animation fade-in 36 * animation fade-in
37 */ 37 */
38 .fade-in { 38 .fade-in {
39 -webkit-animation: fade-in 1.2s cubic-bezier(0.39, 0.575, 0.565, 1) both; 39 -webkit-animation: fade-in 1.2s cubic-bezier(0.39, 0.575, 0.565, 1) both;
40 animation: fade-in 1.2s cubic-bezier(0.39, 0.575, 0.565, 1) both; 40 animation: fade-in 1.2s cubic-bezier(0.39, 0.575, 0.565, 1) both;
41 } 41 }
42 42
43 @-webkit-keyframes fade-in { 43 @-webkit-keyframes fade-in {
44 0% { 44 0% {
45 opacity: 0; 45 opacity: 0;
46 } 46 }
47 100% { 47 100% {
48 opacity: 1; 48 opacity: 1;
49 } 49 }
50 } 50 }
51 51
52 @keyframes fade-in { 52 @keyframes fade-in {
53 0% { 53 0% {
54 opacity: 0; 54 opacity: 0;
55 } 55 }
56 100% { 56 100% {
57 opacity: 1; 57 opacity: 1;
58 } 58 }
59 } 59 }
60 60
61 /* 61 /*
62 * animation fade-in 62 * animation fade-in
63 */ 63 */
64 .loop-color { 64 .loop-color {
65 -webkit-animation: loop-color 1.2s cubic-bezier(0.39, 0.575, 0.565, 1) infinite both; 65 -webkit-animation: loop-color 1.2s cubic-bezier(0.39, 0.575, 0.565, 1) infinite both;
66 animation: loop-color 1.2s cubic-bezier(0.39, 0.575, 0.565, 1) infinite both; 66 animation: loop-color 1.2s cubic-bezier(0.39, 0.575, 0.565, 1) infinite both;
67 } 67 }
68 68
69 @-webkit-keyframes loop-color { 69 @-webkit-keyframes loop-color {
70 0% { 70 0% {
71 background-color: #f4b223; 71 background-color: #f4b223;
72 } 72 }
73 50% { 73 50% {
74 background-color: #ba8b29; 74 background-color: #ba8b29;
75 } 75 }
76 100% { 76 100% {
77 background-color: #f4b223; 77 background-color: #f4b223;
78 } 78 }
79 } 79 }
80 80
81 @keyframes loop-color { 81 @keyframes loop-color {
82 0% { 82 0% {
83 background-color: #f4b223; 83 background-color: #f4b223;
84 } 84 }
85 50% { 85 50% {
86 background-color: #ba8b29; 86 background-color: #ba8b29;
87 } 87 }
88 100% { 88 100% {
89 background-color: #f4b223; 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 }
92 125
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;
21 font-family: "Gotham"; 20 font-family: "Gotham";
22 overflow: hidden; 21 overflow: hidden;
23 user-select: none; 22 user-select: none;
24 } 23 }
25 24
26 .btn-effect { 25 .btn-effect {
27 transition: all 0.3s; 26 transition: all 0.3s;
28 &:hover { 27 &:hover {
29 cursor: pointer; 28 cursor: pointer;
30 opacity: 0.7; 29 opacity: 0.7;
31 } 30 }
32 &:active { 31 &:active {
33 transform: scale(1.02); 32 transform: scale(1.02);
34 } 33 }
35 } 34 }
36 35
37 .cursor-pointer { 36 .cursor-pointer {
38 cursor: pointer; 37 cursor: pointer;
39 } 38 }
40 39
41 p { 40 p {
42 margin: 0 !important; 41 margin: 0 !important;
43 } 42 }
44 43
45 .img-in-top { 44 .img-in-top {
46 position: absolute; 45 position: absolute;
47 top: -35px; 46 top: -35px;
48 left: 50%; 47 left: 50%;
49 height: 70px; 48 height: 70px;
50 -webkit-transform: translateX(-50%); 49 -webkit-transform: translateX(-50%);
51 transform: translateX(-50%); 50 transform: translateX(-50%);
52 } 51 }
53 52
54 .rotate-90 { 53 .rotate-90 {
55 transform: rotate(90deg); 54 transform: rotate(90deg);
56 } 55 }
57 56
58 .rotate-90-neg { 57 .rotate-90-neg {
59 transform: rotate(-90deg); 58 transform: rotate(-90deg);
60 } 59 }
61 60
62 .rotate-180-neg { 61 .rotate-180-neg {
63 transform: rotate(-180deg); 62 transform: rotate(-180deg);
64 } 63 }
65 64
66 .scroll-y { 65 .scroll-y {
67 overflow-y: auto; 66 overflow-y: auto;
68 scrollbar-width: none; 67 scrollbar-width: none;
69 &::-webkit-scrollbar { 68 &::-webkit-scrollbar {
70 display: none; 69 display: none;
71 } 70 }
72 } 71 }
73 72
74 .scroll-x { 73 .scroll-x {
75 overflow-x: auto; 74 overflow-x: auto;
76 scrollbar-width: none; 75 scrollbar-width: none;
77 &::-webkit-scrollbar { 76 &::-webkit-scrollbar {
78 display: none; 77 display: none;
79 } 78 }
80 } 79 }
81 80