Luis Suarez / autoservicio-axion

Download as
Browse Code »

Commit d5eed28e60b4db0c7f600e78d3a2a3291c1beba5

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

quitado evento drag de imagenes

Showing 7 changed files with 169 additions and 31 deletions   Show diff stats
src/app/app-routing.module.ts
Diff comments   View file @ d5eed28
1 import { NgModule } from '@angular/core'; 1 import { NgModule } from '@angular/core';
2 import { Routes, RouterModule } from '@angular/router'; 2 import { Routes, RouterModule } from '@angular/router';
3 import { SplashScreenComponent } from './modules/splash-screen/splash-screen.component'; 3 import { SplashScreenComponent } from './modules/splash-screen/splash-screen.component';
4 import { AdminComponent } from './modules/admin/admin.component'; 4 import { AdminComponent } from './modules/admin/admin.component';
5 5
6 const routes: Routes = [ 6 const routes: Routes = [
7 { path: '', component: SplashScreenComponent }, 7 { path: '', component: SplashScreenComponent },
8 { 8 {
9 path: '', 9 path: '',
10 component: AdminComponent, 10 component: AdminComponent,
11 children: [ 11 children: [
12 { 12 {
13 path: 'info-formas-pago', 13 path: 'info-formas-pago',
14 loadChildren: () => import('./modules/info-formas-pago/info-formas-pago.module').then(m => m.InfoFormasPagoModule) 14 loadChildren: () => import('./modules/info-formas-pago/info-formas-pago.module').then(m => m.InfoFormasPagoModule)
15 }, 15 },
16 { 16 {
17 path: 'opcion-pedido', 17 path: 'opcion-pedido',
18 loadChildren: () => import('./modules/opcion-pedido/opcion-pedido.module').then(m => m.OpcionPedidoModule) 18 loadChildren: () => import('./modules/opcion-pedido/opcion-pedido.module').then(m => m.OpcionPedidoModule)
19 }, 19 },
20 { 20 {
21 path: 'seleccion-articulos', 21 path: 'seleccion-articulos',
22 loadChildren: () => import('./modules/seleccion-articulos/seleccion-articulos.module').then(m => m.SeleccionArticulosModule) 22 loadChildren: () => import('./modules/seleccion-articulos/seleccion-articulos.module').then(m => m.SeleccionArticulosModule)
23 }, 23 },
24 { 24 {
25 path: 'carrito', loadChildren: () => import('./modules/carrito/carrito.module').then(m => m.CarritoModule) 25 path: 'carrito',
26 loadChildren: () => import('./modules/carrito/carrito.module').then(m => m.CarritoModule)
27 },
28 {
29 path: 'forma-pago',
30 loadChildren: () => import('./modules/forma-pago/forma-pago.module').then(m => m.FormaPagoModule)
31 },
32 {
33 path: 'pago-electronico',
34 loadChildren: () => import('./modules/pago-electronico/pago-electronico.module').then(m => m.PagoElectronicoModule)
26 }, 35 },
27 ] 36 ]
28 }, 37 },
29 { path: '**', redirectTo: '', pathMatch: 'full' }, 38 { path: '**', redirectTo: '', pathMatch: 'full' },
30 ]; 39 ];
31 40
32 @NgModule({ 41 @NgModule({
33 imports: [RouterModule.forRoot(routes, { useHash: true })], 42 imports: [RouterModule.forRoot(routes, { useHash: true })],
34 exports: [RouterModule] 43 exports: [RouterModule]
35 }) 44 })
36 export class AppRoutingModule { } 45 export class AppRoutingModule { }
37 46
src/app/modules/carrito/carrito.component.html
Diff comments   View file @ d5eed28
1 <div class="h-92 bg-white fade-in-left"> 1 <div class="h-92 bg-white fade-in-left">
2 <!-- PUBLICIDADES --> 2 <!-- PUBLICIDADES -->
3 <app-header-publicidad></app-header-publicidad> 3 <app-header-publicidad></app-header-publicidad>
4 4
5 <div class="h-85"> 5 <div class="h-85">
6 <!-- CABECERA --> 6 <!-- CABECERA -->
7 <div class="row mx-3 h-auto border border-primary rounded-sm"> 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"> 8 <div class="col-12 px-0 py-2 align-self-center">
9 <div class="px-3"> 9 <div class="px-3">
10 <p class="h6 text-truncate">ESTE ES TÚ CARRITO DE COMPRAS</p> 10 <p class="h6 text-truncate">ESTE ES TÚ CARRITO DE COMPRAS</p>
11 </div> 11 </div>
12 </div> 12 </div>
13 </div> 13 </div>
14 14
15 <!-- ARTICULOS --> 15 <!-- ARTICULOS -->
16 <div class="row mx-2 mt-4 h-80 scroll-y"> 16 <div class="row mx-2 mt-4 h-80 scroll-y">
17 <div 17 <div
18 class="col-12 col-xl-6 p-2 h-25 text-center text-truncate" 18 class="col-12 col-xl-6 p-2 h-25 text-center text-truncate"
19 *ngFor="let item of [{},{},{},{},{},{},{},{},{}]"> 19 *ngFor="let item of [{},{},{},{},{},{},{},{},{}]">
20 <!-- ARTICULO --> 20 <!-- ARTICULO -->
21 <div class="h-100 px-2 py-4 border border-primary rounded-sm"> 21 <div class="h-100 px-2 py-4 border border-primary rounded-sm">
22 <div class="row mx-0 h-100"> 22 <div class="row mx-0 h-100">
23 <!-- NOMBRE E IMAGEN --> 23 <!-- NOMBRE E IMAGEN -->
24 <div class="col-3 h-100 border-right border-primary align-self-center"> 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"> 25 <img
26 draggable="false"
27 ondragstart="return false;"
28 (contextmenu)="false"
29 class="d-block mx-auto h-55"
30 src="assets/img/icono-efectivo.svg">
26 <div class="row mx-0 h-45"> 31 <div class="row mx-0 h-45">
27 <p class="col text-primary align-self-end"><small>{{'CORTADO'}}</small></p> 32 <p class="col text-primary align-self-end"><small>{{'CORTADO'}}</small></p>
28 </div> 33 </div>
29 </div> 34 </div>
30 <!-- CANTIDAD --> 35 <!-- CANTIDAD -->
31 <div class="col-3 border-right border-primary"> 36 <div class="col-3 border-right border-primary">
32 <p><small>CANT</small></p> 37 <p><small>CANT</small></p>
33 <div class="row mt-2 mx-0"> 38 <div class="row mt-2 mx-0">
34 <div class="col-12 h-auto"> 39 <div class="col-12 h-auto">
35 <div class="row mx-0 justify-content-between bg-primary badge-pill"> 40 <div class="row mx-0 justify-content-between bg-primary badge-pill">
36 <div class="col-auto px-0"> 41 <div class="col-auto px-0">
37 <!-- BOTON MENOS --> 42 <!-- BOTON MENOS -->
38 <img class="d-block ml-auto py-2 icon-20 btn-effect" src="assets/img/menos-blanco.svg"> 43 <img
44 draggable="false"
45 ondragstart="return false;"
46 (contextmenu)="false"
47 class="d-block ml-auto py-2 icon-20 btn-effect"
48 src="assets/img/menos-blanco.svg">
39 </div> 49 </div>
40 <div class="col px-0 align-self-center text-white"> 50 <div class="col px-0 align-self-center text-white">
41 <p><small>{{55}}</small></p> 51 <p><small>{{55}}</small></p>
42 </div> 52 </div>
43 <div class="col-auto px-0"> 53 <div class="col-auto px-0">
44 <!-- BOTON MAS --> 54 <!-- BOTON MAS -->
45 <img class="d-block ml-auto py-2 icon-20 btn-effect" src="assets/img/mas-blanco.svg"> 55 <img
56 draggable="false"
57 ondragstart="return false;"
58 (contextmenu)="false"
59 class="d-block ml-auto py-2 icon-20 btn-effect"
60 src="assets/img/mas-blanco.svg">
46 </div> 61 </div>
47 </div> 62 </div>
48 </div> 63 </div>
49 </div> 64 </div>
50 </div> 65 </div>
51 <!-- OPCIONALES --> 66 <!-- OPCIONALES -->
52 <div class="col-3 border-right border-primary"> 67 <div class="col-3 border-right border-primary">
53 <p><small>OPCIONALES</small></p> 68 <p><small>OPCIONALES</small></p>
54 <div class="py-1 badge-pill bg-dark text-white"><p><small>{{'AZÚCAR'}}</small></p></div> 69 <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"> 70 <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"> 71 <div class="col-auto pl-3 btn-effect bg-primary badge-pill text-white">
57 <span> 72 <span>
58 <small class="pr-2">CAMBIAR</small> 73 <small class="pr-2">CAMBIAR</small>
59 <img class="icon-20" src="assets/img/ir.svg"> 74 <img
75 draggable="false"
76 ondragstart="return false;"
77 (contextmenu)="false"
78 class="icon-20"
79 src="assets/img/ir.svg">
60 </span> 80 </span>
61 </div> 81 </div>
62 </div> 82 </div>
63 </div> 83 </div>
64 <!-- ELIMINAR --> 84 <!-- ELIMINAR -->
65 <div class="col-3 align-self-center"> 85 <div class="col-3 align-self-center">
66 <div class="row mx-0 justify-content-center"> 86 <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"> 87 <div class="col-auto px-3 py-1 btn-effect bg-primary badge-pill text-white">
68 <span> 88 <span>
69 <small class="pr-2">ELIMINAR</small> 89 <small class="pr-2">ELIMINAR</small>
70 <img class="icon-20 rotate-45" src="assets/img/mas-blanco.svg"> 90 <img
91 draggable="false"
92 ondragstart="return false;"
93 (contextmenu)="false"
94 class="icon-20 rotate-45"
95 src="assets/img/mas-blanco.svg">
71 </span> 96 </span>
72 </div> 97 </div>
73 </div> 98 </div>
74 </div> 99 </div>
75 </div> 100 </div>
76 </div> 101 </div>
77 </div> 102 </div>
78 </div> 103 </div>
79 <div class="row mx-3 mt-4 h-auto justify-content-end"> 104 <div class="row mx-3 mt-4 h-auto justify-content-end">
80 <div class="col-auto py-2 px-3 align-self-center btn-effect bg-primary badge-pill text-white"> 105 <div
106 class="col-auto py-2 px-3 align-self-center btn-effect bg-primary badge-pill text-white"
107 [routerLink]="['/forma-pago']">
81 <span> 108 <span>
82 <small class="pr-2">CONTINUAR</small> 109 <small class="pr-2">CONTINUAR</small>
83 <img class="icon-20" src="assets/img/ir.svg"> 110 <img
111 draggable="false"
112 ondragstart="return false;"
113 (contextmenu)="false"
114 class="icon-20"
115 src="assets/img/ir.svg">
84 </span> 116 </span>
85 </div> 117 </div>
86 </div> 118 </div>
119
87 <div class="row mx-3 mt-2 h-auto justify-content-end"> 120 <div class="row mx-3 mt-2 h-auto justify-content-end">
88 <div 121 <div
89 class="col-auto py-2 px-3 align-self-center btn-effect bg-primary badge-pill text-white" 122 class="col-auto py-2 px-3 align-self-center btn-effect bg-primary badge-pill text-white"
90 (click)="goBack()"> 123 (click)="goBack()">
91 <span> 124 <span>
92 <small class="pr-2">SEGUIR COMPRANDO</small> 125 <small class="pr-2">SEGUIR COMPRANDO</small>
93 <img class="icon-20" src="assets/img/ir.svg"> 126 <img
127 draggable="false"
128 ondragstart="return false;"
129 (contextmenu)="false"
130 class="icon-20"
131 src="assets/img/ir.svg">
94 </span> 132 </span>
95 </div> 133 </div>
96 </div> 134 </div>
97 </div> 135 </div>
98 136
99 </div> 137 </div>
100 138
src/app/modules/info-formas-pago/info-formas-pago.component.html
Diff comments   View file @ d5eed28
1 <div class="h-92 bg-white fade-in-left"> 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
5 draggable="false"
6 ondragstart="return false;"
7 (contextmenu)="false"
8 class="d-block mx-auto h-100"
9 src="assets/img/logo-spot.svg">
5 </div> 10 </div>
6 </div> 11 </div>
7 <div class="h-85"> 12 <div class="h-85">
8 <div class="row h-50 mx-0 justify-content-center text-center"> 13 <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"> 14 <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"> 15 <img
16 draggable="false"
17 ondragstart="return false;"
18 (contextmenu)="false"
19 class="img-in-top px-4 bg-white"
20 src="assets/img/icono-tarjetas.svg">
11 <p class="h6 m-0">ESTA TERMINAL OPERA CON</p> 21 <p class="h6 m-0">ESTA TERMINAL OPERA CON</p>
12 <p class="h2 mb-3 text-secondary"> 22 <p class="h2 mb-3 text-secondary">
13 tarjetas y 23 tarjetas y
14 <img class="w-15" src="assets/img/icono-mercado-pago.svg"> 24 <img
25 draggable="false"
26 ondragstart="return false;"
27 (contextmenu)="false"
28 class="w-15"
29 src="assets/img/icono-mercado-pago.svg">
15 </p> 30 </p>
16 <div 31 <div
17 class="d-inline-block py-1 btn-effect bg-secondary badge-pill text-white" 32 class="d-inline-block py-1 btn-effect bg-secondary badge-pill text-white"
18 [routerLink]="['/opcion-pedido']"> 33 [routerLink]="['/opcion-pedido']">
19 CONTINUAR 34 CONTINUAR
20 <img class="icon-30" src="assets/img/ir.svg"> 35 <img
36 draggable="false"
37 ondragstart="return false;"
38 (contextmenu)="false"
39 class="icon-30"
40 src="assets/img/ir.svg">
21 </div> 41 </div>
22 </div> 42 </div>
23 </div> 43 </div>
24 <div class="row h-50 mx-0 justify-content-center text-center"> 44 <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"> 45 <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"> 46 <img
47 draggable="false"
48 ondragstart="return false;"
49 (contextmenu)="false"
50 class="img-in-top px-4 bg-white"
51 src="assets/img/icono-efectivo.svg">
27 <p class="h6 m-0">SI PREFERIS PAGAR EN EFECTIVO</p> 52 <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> 53 <p class="h2 m-0 text-primary">te esperamos en la caja</p>
29 </div> 54 </div>
30 </div> 55 </div>
31 </div> 56 </div>
32 </div> 57 </div>
33 58
src/app/modules/opcion-pedido/opcion-pedido.component.html
Diff comments   View file @ d5eed28
1 <div class="h-92 bg-white fade-in-left"> 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
5 draggable="false"
6 ondragstart="return false;"
7 (contextmenu)="false"
8 class="d-block mx-auto h-100"
9 src="assets/img/logo-spot.svg">
5 </div> 10 </div>
6 </div> 11 </div>
7 <div class="h-85"> 12 <div class="h-85">
8 <div class="row h-25 mx-0 justify-content-center text-center"> 13 <div class="row mt-5 mx-3 h-auto">
9 <div class="col-12 px-0 h-auto align-self-center"> 14 <div class="col-12 px-0 py-2 align-self-center">
10 <p class="h6 mb-5 text-center">TU PEDIDO ES PARA:</p> 15 <p class="h6 text-truncate text-center">TÚ PEDIDO ES PARA</p>
11 </div> 16 </div>
12 </div> 17 </div>
13 <div class="row h-15 justify-content-center mx-0"> 18 <div class="row mt-5 h-auto justify-content-center mx-0">
14 <div class="col-auto px-0 h-auto align-self-start"> 19 <div class="col-auto px-0 h-auto align-self-start">
15 <div 20 <div
16 class="btn-effect col-auto align-self-center px-0 bg-white" 21 class="btn-effect col-auto align-self-center px-0 bg-white"
17 (click)="goTo('/seleccion-articulos')"> 22 (click)="goTo('/seleccion-articulos')">
18 <div class="row mx-0 bg-primary badge-pill"> 23 <div class="row mx-0 bg-primary badge-pill">
19 <div class="col-auto p-0"> 24 <div class="col-auto p-0">
20 <img class="p-1 icon-50" src="assets/img/icono-plato.svg"> 25 <img
26 draggable="false"
27 ondragstart="return false;"
28 (contextmenu)="false"
29 class="p-1 icon-50"
30 src="assets/img/icono-plato.svg">
21 </div> 31 </div>
22 <div class="col-auto align-self-center text-white">comer acá</div> 32 <div class="col-auto align-self-center text-white">comer acá</div>
23 <div class="col-auto align-self-center p-0"> 33 <div class="col-auto align-self-center p-0">
24 <img class="p-1 icon-30" src="assets/img/ir.svg"> 34 <img
35 draggable="false"
36 ondragstart="return false;"
37 (contextmenu)="false"
38 class="p-1 icon-30"
39 src="assets/img/ir.svg">
25 </div> 40 </div>
26 </div> 41 </div>
27 </div> 42 </div>
28 </div> 43 </div>
29 </div> 44 </div>
30 <div class="row h-15 justify-content-center mx-0"> 45 <div class="row mt-4 h-auto justify-content-center mx-0">
31 <div class="col-auto px-0 h-auto align-self-start"> 46 <div class="col-auto px-0 h-auto align-self-start">
32 <div 47 <div
33 class="btn-effect col-auto align-self-center px-0 bg-white" 48 class="btn-effect col-auto align-self-center px-0 bg-white"
34 (click)="goTo('/seleccion-articulos')"> 49 (click)="goTo('/seleccion-articulos')">
35 <div class="row mx-0 bg-primary badge-pill"> 50 <div class="row mx-0 bg-primary badge-pill">
36 <div class="col-auto p-0"> 51 <div class="col-auto p-0">
37 <img class="p-1 icon-50" src="assets/img/icono-take-away.svg"> 52 <img
53 draggable="false"
54 ondragstart="return false;"
55 (contextmenu)="false"
56 class="p-1 icon-50"
57 src="assets/img/icono-take-away.svg">
38 </div> 58 </div>
39 <div class="col-auto align-self-center text-white">para llevar</div> 59 <div class="col-auto align-self-center text-white">para llevar</div>
40 <div class="col-auto align-self-center p-0"> 60 <div class="col-auto align-self-center p-0">
41 <img class="p-1 icon-30" src="assets/img/ir.svg"> 61 <img
62 draggable="false"
63 ondragstart="return false;"
64 (contextmenu)="false"
65 class="p-1 icon-30"
66 src="assets/img/ir.svg">
42 </div> 67 </div>
43 </div> 68 </div>
44 </div> 69 </div>
45 </div> 70 </div>
46 </div> 71 </div>
47 </div> 72 </div>
48 </div> 73 </div>
49 74
src/app/modules/seleccion-articulos/seleccion-articulos.component.html
Diff comments   View file @ d5eed28
1 <div class="h-92 bg-white fade-in-left"> 1 <div class="h-92 bg-white fade-in-left">
2 <!-- PUBLICIDADES --> 2 <!-- PUBLICIDADES -->
3 <app-header-publicidad></app-header-publicidad> 3 <app-header-publicidad></app-header-publicidad>
4 4
5 <div class="row mx-0 h-90 align-items-end"> 5 <div class="row mx-0 h-90 align-items-end">
6 <!-- CABECERA --> 6 <!-- CABECERA -->
7 <div class="row w-100 mx-3 h-auto border border-primary rounded-sm"> 7 <div class="row w-100 mx-3 h-auto border border-primary rounded-sm">
8 <div class="col-12 p-2 align-self-center"> 8 <div class="col-12 p-2 align-self-center">
9 <div class="px-3"> 9 <div class="px-3">
10 <p class="h6 text-truncate">SELECCIONÁ TÚ COMIDA Y/O BEBIDA</p> 10 <p class="h6 text-truncate">SELECCIONÁ TÚ COMIDA Y/O BEBIDA</p>
11 </div> 11 </div>
12 </div> 12 </div>
13 </div> 13 </div>
14 <!-- CUERPO --> 14 <!-- CUERPO -->
15 <div class="row w-100 mr-4 h-70"> 15 <div class="row w-100 mr-4 h-70">
16 <div class="col-12 h-100 px-0 py-3"> 16 <div class="col-12 h-100 px-0 py-3">
17 <div class="row mx-0 h-100"> 17 <div class="row mx-0 h-100">
18 <!-- FILTRO CATEGORIAS --> 18 <!-- FILTRO CATEGORIAS -->
19 <div class="col-5 col-sm-3 col-xl-2 h-100"> 19 <div class="col-5 col-sm-3 col-xl-2 h-100">
20 <p class="h6 h-6 m-0 text-center"><small>CATEGORÍAS</small></p> 20 <p class="h6 h-6 m-0 text-center"><small>CATEGORÍAS</small></p>
21 <div class="row mx-0 h-94 align-items-center"> 21 <div class="row mx-0 h-94 align-items-center">
22 <div class="col-12 h-5"> 22 <div class="col-12 h-5">
23 <img 23 <img
24 draggable="false" 24 draggable="false"
25 ondragstart="return false;" 25 ondragstart="return false;"
26 (contextmenu)="false" 26 (contextmenu)="false"
27 class="h-100 d-block mx-auto rotate-90-neg" 27 class="h-100 d-block mx-auto rotate-90-neg"
28 src="assets/img/ir-color.svg" 28 src="assets/img/ir-color.svg"
29 (mousedown)="scrollY(templateCategorias, -80)" 29 (mousedown)="scrollY(templateCategorias, -80)"
30 (mouseup)="mouseup()" 30 (mouseup)="mouseup()"
31 (mouseleave)="mouseup()"> 31 (mouseleave)="mouseup()">
32 </div> 32 </div>
33 <!-- CATEGORIAS --> 33 <!-- CATEGORIAS -->
34 <div 34 <div
35 #templateCategorias 35 #templateCategorias
36 class="col-12 px-0 box-categorias border border-primary border-left-0 rounded-right scroll-y"> 36 class="col-12 px-0 box-categorias border border-primary border-left-0 rounded-right scroll-y">
37 <div 37 <div
38 class="row mx-4 mb-2 h-32 justify-content-center tab" 38 class="row mx-4 mb-2 h-32 justify-content-center tab"
39 [ngClass]="{ 'active': categoria.selected, 'border-bottom-effect': !categoria.selected }" 39 [ngClass]="{ 'active': categoria.selected, 'border-bottom-effect': !categoria.selected }"
40 (click)="selectCategoria(i)" 40 (click)="selectCategoria(i)"
41 *ngFor="let categoria of categorias; let i = index;"> 41 *ngFor="let categoria of categorias; let i = index;">
42 <img 42 <img
43 draggable="false"
44 ondragstart="return false;"
45 (contextmenu)="false"
43 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"
44 src="assets/img/ir-color.svg"> 47 src="assets/img/ir-color.svg">
45 <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>
46 </div> 49 </div>
47 </div> 50 </div>
48 <div class="col-12 h-5"> 51 <div class="col-12 h-5">
49 <img 52 <img
50 draggable="false" 53 draggable="false"
51 ondragstart="return false;" 54 ondragstart="return false;"
52 (contextmenu)="false" 55 (contextmenu)="false"
53 class="h-100 d-block mx-auto rotate-90" 56 class="h-100 d-block mx-auto rotate-90"
54 src="assets/img/ir-color.svg" 57 src="assets/img/ir-color.svg"
55 (mousedown)="scrollY(templateCategorias, 80)" 58 (mousedown)="scrollY(templateCategorias, 80)"
56 (mouseup)="mouseup()" 59 (mouseup)="mouseup()"
57 (mouseleave)="mouseup()"> 60 (mouseleave)="mouseup()">
58 </div> 61 </div>
59 </div> 62 </div>
60 </div> 63 </div>
61 <!-- LISTA DE ARTICULOS --> 64 <!-- LISTA DE ARTICULOS -->
62 <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">
63 <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">
64 <!-- ARTICULO --> 67 <!-- ARTICULO -->
65 <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 [{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}]">
66 <div class="card h-100"> 69 <div class="card h-100">
67 <img src="assets/img/ir-color.svg" class="card-img-top h-55"> 70 <img
71 draggable="false"
72 ondragstart="return false;"
73 (contextmenu)="false"
74 src="assets/img/ir-color.svg"
75 class="card-img-top h-55">
68 <div class="row mx-0 py-1 h-auto justify-content-center"> 76 <div class="row mx-0 py-1 h-auto justify-content-center">
69 <p class="col-12 px-1 h6 h-auto text-primary text-center">{{'CORTADO'}}</p> 77 <p class="col-12 px-1 h6 h-auto text-primary text-center">{{'CORTADO'}}</p>
70 <p class="col-12 px-1 h-auto text-center"><small>{{'Café con un poco de leche'}}</small></p> 78 <p class="col-12 px-1 h-auto text-center"><small>{{'Café con un poco de leche'}}</small></p>
71 <div class="col-12 px-1 align-self-end btn-effect h-auto"> 79 <div class="col-12 px-1 align-self-end btn-effect h-auto">
72 <div class="row mx-0 justify-content-between bg-primary badge-pill"> 80 <div class="row mx-0 justify-content-between bg-primary badge-pill">
73 <div class="col px-0 align-self-center text-white text-right"> 81 <div class="col px-0 align-self-center text-white text-right">
74 {{55 | currency}} 82 {{55 | currency}}
75 </div> 83 </div>
76 <div class="col-5 px-0"> 84 <div class="col-5 px-0">
77 <img class="d-block ml-auto py-1 icon-30" src="assets/img/ir.svg"> 85 <img
86 draggable="false"
87 ondragstart="return false;"
88 (contextmenu)="false"
89 class="d-block ml-auto py-1 icon-30"
90 src="assets/img/ir.svg">
78 </div> 91 </div>
79 </div> 92 </div>
80 </div> 93 </div>
81 </div> 94 </div>
82 </div> 95 </div>
83 </div> 96 </div>
84 </div> 97 </div>
85 </div> 98 </div>
86 </div> 99 </div>
87 </div> 100 </div>
88 </div> 101 </div>
89 <!-- FOOTER CARRITO DE COMPRAS --> 102 <!-- FOOTER CARRITO DE COMPRAS -->
90 <div class="row w-90 mx-auto h-auto justify-content-center"> 103 <div class="row w-90 mx-auto h-auto justify-content-center">
91 <div class="col-12 h-75 px-0 border border-primary rounded"> 104 <div class="col-12 h-75 px-0 border border-primary rounded">
92 <div class="row mx-0 h-15 border-bottom border-primary"> 105 <div class="row mx-0 h-15 border-bottom border-primary">
93 <p class="col align-self-center text-truncate"><small>ARTÍCULOS EN TÚ CARRITO DE COMPRAS</small></p> 106 <p class="col align-self-center text-truncate"><small>ARTÍCULOS EN TÚ CARRITO DE COMPRAS</small></p>
94 </div> 107 </div>
95 <div class="row h-85 mx-0 justify-content-between"> 108 <div class="row h-85 mx-0 justify-content-between">
96 <div class="col-auto h-20 align-self-center"> 109 <div class="col-auto h-20 align-self-center">
97 <img 110 <img
98 draggable="false" 111 draggable="false"
99 ondragstart="return false;" 112 ondragstart="return false;"
100 (contextmenu)="false" 113 (contextmenu)="false"
101 class="icon-30 rotate-180-neg" 114 class="icon-30 rotate-180-neg"
102 src="assets/img/ir-fondo-color.svg" 115 src="assets/img/ir-fondo-color.svg"
103 (mousedown)="scrollX(templateCarrito, -100)" 116 (mousedown)="scrollX(templateCarrito, -100)"
104 (mouseup)="mouseup()" 117 (mouseup)="mouseup()"
105 (mouseleave)="mouseup()"> 118 (mouseleave)="mouseup()">
106 </div> 119 </div>
107 <div class="col-6 col-sm-8 col-md-9 col-lg-10 h-100"> 120 <div class="col-6 col-sm-8 col-md-9 col-lg-10 h-100">
108 <div #templateCarrito class="row flex-row flex-nowrap h-100 mx-0 scroll-x"> 121 <div #templateCarrito class="row flex-row flex-nowrap h-100 mx-0 scroll-x">
109 <div 122 <div
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" 123 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 (click)="selectCategoria(i)" 124 (click)="selectCategoria(i)"
112 *ngFor="let categoria of [{},{},{},{},{},{},{},{},{},{},{},{},{},{}]; let i = index;"> 125 *ngFor="let categoria of [{},{},{},{},{},{},{},{},{},{},{},{},{},{}]; let i = index;">
113 <img 126 <img
127 draggable="false"
128 ondragstart="return false;"
129 (contextmenu)="false"
114 class="d-block h-55 p-2 mx-auto" 130 class="d-block h-55 p-2 mx-auto"
115 src="assets/img/ir-color.svg"> 131 src="assets/img/ir-color.svg">
116 <p class="d-block mt-auto text-center text-primary"><small>{{'lala'}}</small></p> 132 <p class="d-block mt-auto text-center text-primary"><small>{{'lala'}}</small></p>
117 </div> 133 </div>
118 </div> 134 </div>
119 </div> 135 </div>
120 <div class="col-auto h-20 align-self-center"> 136 <div class="col-auto h-20 align-self-center">
121 <img 137 <img
122 draggable="false" 138 draggable="false"
123 ondragstart="return false;" 139 ondragstart="return false;"
124 (contextmenu)="false" 140 (contextmenu)="false"
125 class="icon-30" 141 class="icon-30"
126 src="assets/img/ir-fondo-color.svg" 142 src="assets/img/ir-fondo-color.svg"
127 (mousedown)="scrollX(templateCarrito, 100)" 143 (mousedown)="scrollX(templateCarrito, 100)"
128 (mouseup)="mouseup()" 144 (mouseup)="mouseup()"
129 (mouseleave)="mouseup()"> 145 (mouseleave)="mouseup()">
130 </div> 146 </div>
131 </div> 147 </div>
132 </div> 148 </div>
133 <div class="col-auto p-0 mt-2 ml-auto h-20"> 149 <div class="col-auto p-0 mt-2 ml-auto h-20">
134 <div 150 <div
135 class="btn-effect col-auto align-self-center px-0 bg-white" 151 class="btn-effect col-auto align-self-center px-0 bg-white"
136 [routerLink]="['/carrito']"> 152 [routerLink]="['/carrito']">
137 <div class="row mx-0 bg-light"> 153 <div class="row mx-0 bg-light">
138 <div class="col-auto align-self-center text-primary">VER CARRITO</div> 154 <div class="col-auto align-self-center text-primary">VER CARRITO</div>
139 <div class="col-auto p-0 bg-primary d-none d-sm-block"> 155 <div class="col-auto p-0 bg-primary d-none d-sm-block">
140 <img class="p-2 icon-40" src="assets/img/carrito.svg"> 156 <img
157 draggable="false"
158 ondragstart="return false;"
159 (contextmenu)="false"
160 class="p-2 icon-40"
161 src="assets/img/carrito.svg">
141 </div> 162 </div>
142 </div> 163 </div>
143 </div> 164 </div>
144 </div> 165 </div>
145 </div> 166 </div>
146 </div> 167 </div>
147 168
148 </div> 169 </div>
149 170
src/app/modules/splash-screen/splash-screen.component.html
Diff comments   View file @ d5eed28
1 <div *ngIf="showSplashScreen" class="vh-100 bg-splash"> 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
5 draggable="false"
6 ondragstart="return false;"
7 (contextmenu)="false"
8 class="d-block mx-auto h-100 focus-in-blur"
9 src="assets/img/logo-spot.svg">
5 </div> 10 </div>
6 </div> 11 </div>
7 </div> 12 </div>
8 13
9 <div *ngIf="!showSplashScreen" class="vh-100 bg-primary fade-in"> 14 <div *ngIf="!showSplashScreen" class="vh-100 bg-primary fade-in">
10 <div class="row mx-0 h-100"> 15 <div class="row mx-0 h-100">
11 <div class="col-12 px-0 h-100 my-auto"> 16 <div class="col-12 px-0 h-100 my-auto">
12 <div class="row mx-0 h-15"> 17 <div class="row mx-0 h-15">
13 <div class="col-12 px-0 h-80 my-auto"> 18 <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"> 19 <img
20 draggable="false"
21 ondragstart="return false;"
22 (contextmenu)="false"
23 class="d-block mx-auto h-100"
24 src="assets/img/negativo-spot.svg">
15 </div> 25 </div>
16 </div> 26 </div>
17 <div class="row mx-0 h-75 justify-content-center text-white text-center"> 27 <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"> 28 <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"> 29 <div class="h6 m-0 welcome-text text-info">
20 <span *ngFor="let letter of textWelcome | split textWelcome">{{letter}}</span> 30 <span *ngFor="let letter of textWelcome | split textWelcome">{{letter}}</span>
21 </div> 31 </div>
22 <div class="h1 m-0 como-estas-text"> 32 <div class="h1 m-0 como-estas-text">
23 <span *ngFor="let letter of textComoEstas | split textComoEstas">{{letter}}</span> 33 <span *ngFor="let letter of textComoEstas | split textComoEstas">{{letter}}</span>
24 </div> 34 </div>
25 </div> 35 </div>
26 <div class="col-7 h-auto px-0 py-5 mt-5 align-self-start box2"> 36 <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"> 37 <div class="h6 m-0 invitamos-text text-info">
28 <span *ngFor="let letter of textInvitamos | split textInvitamos">{{letter}}</span> 38 <span *ngFor="let letter of textInvitamos | split textInvitamos">{{letter}}</span>
29 </div> 39 </div>
30 <div class="h1 m-0 tu-pedido-text"> 40 <div class="h1 m-0 tu-pedido-text">
31 <span *ngFor="let letter of textTuPedido | split textTuPedido">{{letter}}</span> 41 <span *ngFor="let letter of textTuPedido | split textTuPedido">{{letter}}</span>
32 </div> 42 </div>
33 </div> 43 </div>
34 </div> 44 </div>
35 <div 45 <div
36 class="row mx-0 h-10 loop-color cursor-pointer" 46 class="row mx-0 h-10 loop-color cursor-pointer"
37 [routerLink]="['/info-formas-pago']"> 47 [routerLink]="['/info-formas-pago']">
38 <div class="col-12 text-center align-self-center px-0"> 48 <div class="col-12 text-center align-self-center px-0">
39 <p class="h6 text-white">TOCA PARA COMENZAR</p> 49 <p class="h6 text-white">TOCA PARA COMENZAR</p>
40 </div> 50 </div>
41 </div> 51 </div>
42 </div> 52 </div>
43 </div> 53 </div>
44 </div> 54 </div>
45 55
src/app/shared/footer/footer.component.html
Diff comments   View file @ d5eed28
1 <div class="row w-90 mx-auto h-100 justify-content-between 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 icon-60" src="assets/img/iconos-accesibilidad.svg"> 6 <img
7 draggable="false"
8 ondragstart="return false;"
9 (contextmenu)="false"
10 class="p-2 icon-60"
11 src="assets/img/iconos-accesibilidad.svg">
7 </div> 12 </div>
8 </div> 13 </div>
9 </div> 14 </div>
10 <div 15 <div
11 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"
12 (click)="goBack()"> 17 (click)="goBack()">
13 <div class="row mx-0 bg-light"> 18 <div class="row mx-0 bg-light">
14 <div class="col-auto align-self-center text-primary">VOLVER</div> 19 <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"> 20 <div class="col-auto p-0 bg-primary d-none d-sm-block">
16 <img class="p-2 icon-40" src="assets/img/icono-volver.svg"> 21 <img
22 draggable="false"
23 ondragstart="return false;"
24 (contextmenu)="false"
25 class="p-2 icon-40"
26 src="assets/img/icono-volver.svg">
17 </div> 27 </div>
18 </div> 28 </div>
19 </div> 29 </div>
20 </div> 30 </div>
21 31