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
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: 'formas-pago', 13 path: 'formas-pago',
14 loadChildren: () => import('./modules/formas-pago/formas-pago.module').then(m => m.FormasPagoModule) 14 loadChildren: () => import('./modules/formas-pago/formas-pago.module').then(m => m.FormasPagoModule)
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 {
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 { path: '**', redirectTo: '', pathMatch: 'full' }, 29 { path: '**', redirectTo: '', pathMatch: 'full' },
31 ]; 30 ];
32 31
33 @NgModule({ 32 @NgModule({
34 imports: [RouterModule.forRoot(routes, { useHash: true })], 33 imports: [RouterModule.forRoot(routes, { useHash: true })],
35 exports: [RouterModule] 34 exports: [RouterModule]
src/app/modules/carrito/carrito.component.html
Diff comments   View file @ a97eef8
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-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 </div> 80 </div>
8 81
9 </div> 82 </div>
10 83
src/app/modules/formas-pago/formas-pago.component.html
Diff comments   View file @ a97eef8
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 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="icon-30" 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 @ a97eef8
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 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 icon-50" 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 icon-30" 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 icon-50" 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 icon-30" 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 @ a97eef8
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-4 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 class="col-12 h-50 align-self-end d-none d-sm-block" 43 class="col-12 h-50 align-self-end d-none d-sm-block"
44 src="assets/img/ir-color.svg"> 44 src="assets/img/ir-color.svg">
45 <small class="col-10 my-1 h-25 align-self-end text-center">{{categoria.id}}</small> 45 <small class="col-10 my-1 h-25 align-self-end text-center">{{categoria.id}}</small>
46 </div> 46 </div>
47 </div> 47 </div>
48 <div class="col-12 h-5"> 48 <div class="col-12 h-5">
49 <img 49 <img
50 draggable="false" 50 draggable="false"
51 ondragstart="return false;" 51 ondragstart="return false;"
52 (contextmenu)="false" 52 (contextmenu)="false"
53 class="h-100 d-block mx-auto rotate-90" 53 class="h-100 d-block mx-auto rotate-90"
54 src="assets/img/ir-color.svg" 54 src="assets/img/ir-color.svg"
55 (mousedown)="scrollY(templateCategorias, 80)" 55 (mousedown)="scrollY(templateCategorias, 80)"
56 (mouseup)="mouseup()" 56 (mouseup)="mouseup()"
57 (mouseleave)="mouseup()"> 57 (mouseleave)="mouseup()">
58 </div> 58 </div>
59 </div> 59 </div>
60 </div> 60 </div>
61 <!-- LISTA DE ARTICULOS --> 61 <!-- LISTA DE ARTICULOS -->
62 <div class="col-7 col-sm-9 col-xl-10 pb-3 h-80 align-self-center scroll-y"> 62 <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"> 63 <div class="row row-cols-1 row-cols-sm-3 row-cols-xl-6 h-100">
64 <!-- ARTICULO --> 64 <!-- ARTICULO -->
65 <div class="col px-2 my-1 my-md-3 h-auto" *ngFor="let lala of [{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}]"> 65 <div class="col px-2 my-1 my-md-3 h-auto" *ngFor="let lala of [{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}]">
66 <div class="card h-100"> 66 <div class="card h-100">
67 <img src="assets/img/ir-color.svg" class="card-img-top h-55"> 67 <img src="assets/img/ir-color.svg" class="card-img-top h-55">
68 <div class="row mx-0 py-1 h-auto justify-content-center"> 68 <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> 69 <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> 70 <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"> 71 <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"> 72 <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"> 73 <div class="col px-0 align-self-center text-white text-right">
74 {{55 | currency}} 74 {{55 | currency}}
75 </div> 75 </div>
76 <div class="col-5 px-0"> 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 </div> 78 </div>
79 </div> 79 </div>
80 </div> 80 </div>
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 <!-- FOOTER CARRITO DE COMPRAS --> 89 <!-- FOOTER CARRITO DE COMPRAS -->
90 <div class="row w-90 mx-auto h-auto justify-content-center"> 90 <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"> 91 <div class="col-12 h-75 px-0 border border-primary rounded">
92 <div class="row mx-0 h-15 border-bottom border-primary"> 92 <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> 93 <p class="col align-self-center text-truncate"><small>ARTÍCULOS EN TÚ CARRITO DE COMPRAS</small></p>
94 </div> 94 </div>
95 <div class="row h-85 mx-0 justify-content-between"> 95 <div class="row h-85 mx-0 justify-content-between">
96 <div class="col-auto h-20 align-self-center"> 96 <div class="col-auto h-20 align-self-center">
97 <img 97 <img
98 draggable="false" 98 draggable="false"
99 ondragstart="return false;" 99 ondragstart="return false;"
100 (contextmenu)="false" 100 (contextmenu)="false"
101 class="img-ir rotate-180-neg" 101 class="icon-30 rotate-180-neg"
102 src="assets/img/ir-fondo-color.svg" 102 src="assets/img/ir-fondo-color.svg"
103 (mousedown)="scrollX(templateCarrito, -100)" 103 (mousedown)="scrollX(templateCarrito, -100)"
104 (mouseup)="mouseup()" 104 (mouseup)="mouseup()"
105 (mouseleave)="mouseup()"> 105 (mouseleave)="mouseup()">
106 </div> 106 </div>
107 <div class="col-6 col-sm-8 col-md-9 col-lg-10 h-100"> 107 <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"> 108 <div #templateCarrito class="row flex-row flex-nowrap h-100 mx-0 scroll-x">
109 <div 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 (click)="selectCategoria(i)" 111 (click)="selectCategoria(i)"
112 *ngFor="let categoria of [{},{},{},{},{},{},{},{},{},{},{},{},{},{}]; let i = index;"> 112 *ngFor="let categoria of [{},{},{},{},{},{},{},{},{},{},{},{},{},{}]; let i = index;">
113 <img 113 <img
114 class="d-block h-55 p-2 mx-auto" 114 class="d-block h-55 p-2 mx-auto"
115 src="assets/img/ir-color.svg"> 115 src="assets/img/ir-color.svg">
116 <p class="d-block mt-auto text-center text-primary"><small>{{'lala'}}</small></p> 116 <p class="d-block mt-auto text-center text-primary"><small>{{'lala'}}</small></p>
117 </div> 117 </div>
118 </div> 118 </div>
119 </div> 119 </div>
120 <div class="col-auto h-20 align-self-center"> 120 <div class="col-auto h-20 align-self-center">
121 <img 121 <img
122 draggable="false" 122 draggable="false"
123 ondragstart="return false;" 123 ondragstart="return false;"
124 (contextmenu)="false" 124 (contextmenu)="false"
125 class="img-ir" 125 class="icon-30"
126 src="assets/img/ir-fondo-color.svg" 126 src="assets/img/ir-fondo-color.svg"
127 (mousedown)="scrollX(templateCarrito, 100)" 127 (mousedown)="scrollX(templateCarrito, 100)"
128 (mouseup)="mouseup()" 128 (mouseup)="mouseup()"
129 (mouseleave)="mouseup()"> 129 (mouseleave)="mouseup()">
130 </div> 130 </div>
131 </div> 131 </div>
132 </div> 132 </div>
133 <div class="col-auto p-0 mt-2 ml-auto h-20"> 133 <div class="col-auto p-0 mt-2 ml-auto h-20">
134 <div 134 <div
135 class="btn-effect col-auto align-self-center px-0 bg-white" 135 class="btn-effect col-auto align-self-center px-0 bg-white"
136 [routerLink]="['/carrito']"> 136 [routerLink]="['/carrito']">
137 <div class="row mx-0 bg-light"> 137 <div class="row mx-0 bg-light">
138 <div class="col-auto align-self-center text-primary">VER CARRITO</div> 138 <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"> 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 </div> 141 </div>
142 </div> 142 </div>
143 </div> 143 </div>
144 </div> 144 </div>
145 </div> 145 </div>
146 </div> 146 </div>
147 147
148 </div> 148 </div>
149 149
src/app/shared/footer/footer.component.html
Diff comments   View file @ a97eef8
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 img-accesibilidad" src="assets/img/iconos-accesibilidad.svg"> 6 <img class="p-2 icon-60" 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 icon-40" 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/assets/img/mas-blanco.svg
Diff comments   View file @ a97eef8
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="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>
20
src/assets/img/menos-blanco.svg
Diff comments   View file @ a97eef8
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="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>
20
1 .img-ir { 1 .icon-20 {
2 width: 20px;
3 }
4
5 .icon-30 {
2 width: 30px; 6 width: 30px;
3 } 7 }
4 8
5 .img-plato { 9 .icon-40 {
6 width: 50px; 10 width: 40px;
7 } 11 }
8 12
9 .img-accesibilidad { 13 .icon-50 {
10 width: 60px; 14 width: 50px;
11 } 15 }
12 16
13 .img-volver { 17 .icon-60 {
14 width: 40px; 18 width: 60px;
15 } 19 }
16 20
src/scss/styles-bootstrap.scss
Diff comments   View file @ a97eef8
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 $dark: #61666c;
9 $theme-colors: ( 10 $theme-colors: (
10 primary: $primary, 11 primary: $primary,
11 secondary: $secondary, 12 secondary: $secondary,
12 info: $info, 13 info: $info,
13 light: $light 14 light: $light,
15 dark: $dark
14 ); 16 );
15 $border-radius: 1.5rem; 17 $border-radius: 1.5rem;
16 $border-radius-lg: 2.5rem; 18 $border-radius-lg: 2.5rem;
17 $border-radius-sm: 0.5rem; 19 $border-radius-sm: 0.5rem;
18 20
19 @import "node_modules/bootstrap/scss/bootstrap"; 21 @import "node_modules/bootstrap/scss/bootstrap";
20 22
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 font-family: "Gotham"; 20 font-family: "Gotham";
21 overflow: hidden; 21 overflow: hidden;
22 user-select: none; 22 user-select: none;
23 } 23 }
24 24
25 .btn-effect { 25 .btn-effect {
26 transition: all 0.3s; 26 transition: all 0.3s;
27 &:hover { 27 &:hover {
28 cursor: pointer; 28 cursor: pointer;
29 opacity: 0.7; 29 opacity: 0.7;
30 } 30 }
31 &:active { 31 &:active {
32 transform: scale(1.02); 32 transform: scale(1.02);
33 } 33 }
34 } 34 }
35 35
36 .cursor-pointer { 36 .cursor-pointer {
37 cursor: pointer; 37 cursor: pointer;
38 } 38 }
39 39
40 p { 40 p {
41 margin: 0 !important; 41 margin: 0 !important;
42 } 42 }
43 43
44 .img-in-top { 44 .img-in-top {
45 position: absolute; 45 position: absolute;
46 top: -35px; 46 top: -35px;
47 left: 50%; 47 left: 50%;
48 height: 70px; 48 height: 70px;
49 -webkit-transform: translateX(-50%); 49 -webkit-transform: translateX(-50%);
50 transform: translateX(-50%); 50 transform: translateX(-50%);
51 } 51 }
52 52
53 .rotate-45 {
54 transform: rotate(45deg);
55 }
56
53 .rotate-90 { 57 .rotate-90 {
54 transform: rotate(90deg); 58 transform: rotate(90deg);
55 } 59 }
56 60
57 .rotate-90-neg { 61 .rotate-90-neg {
58 transform: rotate(-90deg); 62 transform: rotate(-90deg);
59 } 63 }
60 64
61 .rotate-180-neg { 65 .rotate-180-neg {
62 transform: rotate(-180deg); 66 transform: rotate(-180deg);
63 } 67 }
64 68
65 .scroll-y { 69 .scroll-y {
66 overflow-y: auto; 70 overflow-y: auto;
67 scrollbar-width: none; 71 scrollbar-width: none;
68 &::-webkit-scrollbar { 72 &::-webkit-scrollbar {
69 display: none; 73 display: none;
70 } 74 }
71 } 75 }
72 76
73 .scroll-x { 77 .scroll-x {
74 overflow-x: auto; 78 overflow-x: auto;
75 scrollbar-width: none; 79 scrollbar-width: none;
76 &::-webkit-scrollbar { 80 &::-webkit-scrollbar {
77 display: none; 81 display: none;
78 } 82 }
79 } 83 }
80 84