Commit dce5c66891d26e340af95bdd65a2d42ea44425d9

Authored by Marcelo Puebla
1 parent b1eeb0932c

Fixes en iconos y agregada pantalla 2

src/app/app-routing.module.ts
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 import { FormasPagoModule } from './modules/formas-pago/formas-pago.module'; 5 import { FormasPagoModule } from './modules/formas-pago/formas-pago.module';
6 import { OpcionPedidoModule } from './modules/opcion-pedido/opcion-pedido.module';
6 7
7 const routes: Routes = [ 8 const routes: Routes = [
8 { path: '', component: SplashScreenComponent }, 9 { path: '', component: SplashScreenComponent },
9 { 10 {
10 path: '', 11 path: '',
11 component: AdminComponent, 12 component: AdminComponent,
12 children: [ 13 children: [
13 { path: 'formas-pago', loadChildren: () => FormasPagoModule }, 14 { path: 'formas-pago', loadChildren: () => FormasPagoModule },
15 { path: 'opcion-pedido', loadChildren: () => OpcionPedidoModule },
14 ] 16 ]
15 }, 17 },
16 { path: '**', redirectTo: '', pathMatch: 'full' }, 18 { path: '**', redirectTo: '', pathMatch: 'full' },
17 ]; 19 ];
18 20
19 @NgModule({ 21 @NgModule({
20 imports: [RouterModule.forRoot(routes)], 22 imports: [RouterModule.forRoot(routes)],
21 exports: [RouterModule] 23 exports: [RouterModule]
22 }) 24 })
23 export class AppRoutingModule { } 25 export class AppRoutingModule { }
24 26
src/app/app.module.ts
1 import { BrowserModule } from '@angular/platform-browser'; 1 import { BrowserModule } from '@angular/platform-browser';
2 import { NgModule } from '@angular/core'; 2 import { NgModule } from '@angular/core';
3
4 import { AppRoutingModule } from './app-routing.module'; 3 import { AppRoutingModule } from './app-routing.module';
5 import { AppComponent } from './app.component'; 4 import { AppComponent } from './app.component';
6 import { SplashScreenComponent } from './modules/splash-screen/splash-screen.component'; 5 import { SplashScreenComponent } from './modules/splash-screen/splash-screen.component';
7 import { SplitPipe } from './pipes/split.pipe'; 6 import { SplitPipe } from './pipes/split.pipe';
8 import { AdminComponent } from './modules/admin/admin.component'; 7 import { AdminComponent } from './modules/admin/admin.component';
9 import { FooterComponent } from './modules/footer/footer.component'; 8 import { FooterComponent } from './modules/footer/footer.component';
10 9
11 @NgModule({ 10 @NgModule({
12 declarations: [ 11 declarations: [
13 AppComponent, 12 AppComponent,
14 SplashScreenComponent, 13 SplashScreenComponent,
15 SplitPipe, 14 SplitPipe,
16 AdminComponent, 15 AdminComponent,
17 FooterComponent 16 FooterComponent
18 ], 17 ],
19 imports: [ 18 imports: [
20 BrowserModule, 19 BrowserModule,
21 AppRoutingModule 20 AppRoutingModule
22 ], 21 ],
23 providers: [], 22 providers: [],
24 bootstrap: [AppComponent] 23 bootstrap: [AppComponent]
25 }) 24 })
26 export class AppModule { } 25 export class AppModule { }
27 26
src/app/modules/footer/footer.component.html
1 <div class="row mx-0 h-100 justify-content-around bg-white"> 1 <div class="row mx-0 h-100 justify-content-around bg-white">
2 <div class="col-auto align-self-center px-0 bg-white"> 2 <div class="col-auto align-self-center px-0 bg-white">
3 <div class="btn-effect row mx-0 bg-light rounded-left"> 3 <div class="btn-effect row mx-0 bg-light rounded-left">
4 <div class="col-auto align-self-center text-primary">ESTAMOS PARA AYUDARTE</div> 4 <div class="col-auto align-self-center text-primary">ESTAMOS PARA AYUDARTE</div>
5 <div class="col-auto p-0 bg-primary rounded-right"> 5 <div class="col-auto p-0 bg-primary rounded-right">
6 <img class="p-2 img-button-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 class="btn-effect col-auto align-self-center px-0 bg-white"> 10 <div
11 class="btn-effect col-auto align-self-center px-0 bg-white"
12 (click)="goBack()">
11 <div class="row mx-0 bg-light rounded-left"> 13 <div class="row mx-0 bg-light rounded-left">
12 <div class="col-auto align-self-center text-primary">VOLVER</div> 14 <div class="col-auto align-self-center text-primary">VOLVER</div>
13 <div class="col-auto p-0 bg-primary rounded-right"> 15 <div class="col-auto p-0 bg-primary rounded-right">
14 <img class="p-2 img-button-volver" src="assets/img/icono-volver.svg"> 16 <img class="p-2 img-volver" src="assets/img/icono-volver.svg">
15 </div> 17 </div>
16 </div> 18 </div>
17 </div> 19 </div>
18 </div> 20 </div>
19 21
src/app/modules/footer/footer.component.scss
1 .img-button-accesibilidad {
2 width: 60px;
3 }
4
5 .img-button-volver {
6 width: 40px;
7 }
8
src/app/modules/footer/footer.component.ts
1 import { Component, OnInit } from '@angular/core'; 1 import { Component, OnInit } from "@angular/core";
2 import { Location } from "@angular/common";
2 3
3 @Component({ 4 @Component({
4 selector: 'app-footer', 5 selector: "app-footer",
5 templateUrl: './footer.component.html', 6 templateUrl: "./footer.component.html",
6 styleUrls: ['./footer.component.scss'] 7 styleUrls: ["./footer.component.scss"]
7 }) 8 })
8 export class FooterComponent implements OnInit { 9 export class FooterComponent implements OnInit {
10 constructor(private location: Location) {}
9 11
10 constructor() { } 12 ngOnInit() {}
11 13
12 ngOnInit() { 14 goBack() {
15 this.location.back();
13 } 16 }
14
15 } 17 }
src/app/modules/formas-pago/formas-pago-routing.module.ts
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 { FormasPagoComponent } from './formas-pago.component'; 3 import { FormasPagoComponent } from "./formas-pago.component";
4 4
5 const routes: Routes = [ 5 const routes: Routes = [{ path: "", component: FormasPagoComponent }];
6 { path: '', component: FormasPagoComponent },
7 ];
8 6
9 @NgModule({ 7 @NgModule({
10 imports: [RouterModule.forChild(routes)], 8 imports: [RouterModule.forChild(routes)],
11 exports: [RouterModule] 9 exports: [RouterModule]
12 }) 10 })
13 export class FormasPagoRoutingModule { } 11 export class FormasPagoRoutingModule {}
14 12
src/app/modules/formas-pago/formas-pago.component.html
1 <div class="h-92 bg-white"> 1 <div class="h-92 bg-white">
2 <div class="row mx-0 h-15"> 2 <div class="row mx-0 h-15">
3 <div class="col-12 px-0 h-80 my-auto"> 3 <div class="col-12 px-0 h-80 my-auto">
4 <img class="d-block mx-auto h-100" src="assets/img/logo-spot.svg"> 4 <img class="d-block mx-auto h-100" src="assets/img/logo-spot.svg">
5 </div> 5 </div>
6 </div> 6 </div>
7 <div class="h-85"> 7 <div class="h-85">
8 <div class="row h-50 mx-0 justify-content-center text-center"> 8 <div class="row h-50 mx-0 justify-content-center text-center">
9 <div class="col-7 pt-5 pb-3 h-auto align-self-center border border-secondary rounded"> 9 <div class="col-7 pt-5 pb-3 h-auto align-self-center 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 class="d-inline-block py-1 btn-effect bg-secondary badge-pill text-white">CONTINUAR</div> 16 <div
17 class="d-inline-block py-1 btn-effect bg-secondary badge-pill text-white"
18 [routerLink]="['/opcion-pedido']">
19 CONTINUAR
20 </div>
17 </div> 21 </div>
18 </div> 22 </div>
19 <div class="row h-50 mx-0 justify-content-center text-center"> 23 <div class="row h-50 mx-0 justify-content-center text-center">
20 <div class="col-7 p-5 h-auto align-self-start border border-secondary rounded"> 24 <div class="col-7 p-5 h-auto align-self-start border border-secondary rounded">
21 <img class="img-in-top px-4 bg-white" src="assets/img/icono-efectivo.svg"> 25 <img class="img-in-top px-4 bg-white" src="assets/img/icono-efectivo.svg">
22 <p class="h6 m-0">SI PREFERIS PAGAR EN EFECTIVO</p> 26 <p class="h6 m-0">SI PREFERIS PAGAR EN EFECTIVO</p>
23 <p class="h2 m-0 text-primary">te esperamos en la caja</p> 27 <p class="h2 m-0 text-primary">te esperamos en la caja</p>
24 </div> 28 </div>
25 </div> 29 </div>
26 </div> 30 </div>
27 </div> 31 </div>
28 32
src/app/modules/formas-pago/formas-pago.component.scss
1 .img-in-top {
2 position: absolute;
3 top: -35px;
4 left: 50%;
5 height: 70px;
6 -webkit-transform: translateX(-50%);
7 transform: translateX(-50%);
8 }
9
src/app/modules/formas-pago/formas-pago.component.ts
1 import { Component, OnInit } from '@angular/core'; 1 import { Component, OnInit } from "@angular/core";
2 2
3 @Component({ 3 @Component({
4 selector: 'app-formas-pago', 4 selector: "app-formas-pago",
5 templateUrl: './formas-pago.component.html', 5 templateUrl: "./formas-pago.component.html",
6 styleUrls: ['./formas-pago.component.scss'] 6 styleUrls: ["./formas-pago.component.scss"]
7 }) 7 })
8 export class FormasPagoComponent implements OnInit { 8 export class FormasPagoComponent implements OnInit {
9 constructor() {}
9 10
10 constructor() { } 11 ngOnInit() {}
11
12 ngOnInit() {
13 }
14
15 } 12 }
src/app/modules/opcion-pedido/opcion-pedido-routing.module.ts
File was created 1 import { NgModule } from "@angular/core";
2 import { Routes, RouterModule } from "@angular/router";
3 import { OpcionPedidoComponent } from './opcion-pedido.component';
4
5 const routes: Routes = [{ path: "", component: OpcionPedidoComponent }];
6
7 @NgModule({
8 imports: [RouterModule.forChild(routes)],
9 exports: [RouterModule]
10 })
11 export class OpcionPedidoRoutingModule {}
12
src/app/modules/opcion-pedido/opcion-pedido.component.html
File was created 1 <div class="h-92 bg-white">
2 <div class="row mx-0 h-15">
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">
5 </div>
6 </div>
7 <div class="h-85">
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">
10 <p class="h6 mb-5 text-center">TU PEDIDO ES PARA:</p>
11 </div>
12 </div>
13 <div class="row h-15 justify-content-center mx-0">
14 <div class="col-auto px-0 h-auto align-self-start">
15 <div
16 class="btn-effect col-auto align-self-center px-0 bg-white"
17 (click)="goBack()">
18 <div class="row mx-0 bg-primary badge-pill">
19 <div class="col-auto p-0">
20 <img class="p-1 img-plato" src="assets/img/icono-plato.svg">
21 </div>
22 <div class="col-auto align-self-center text-white">comer acรก</div>
23 <div class="col-auto align-self-center p-0">
24 <img class="p-1 img-ir" src="assets/img/ir.svg">
25 </div>
26 </div>
27 </div>
28 </div>
29 </div>
30 <div class="row h-15 justify-content-center mx-0">
31 <div class="col-auto px-0 h-auto align-self-start">
32 <div
33 class="btn-effect col-auto align-self-center px-0 bg-white"
34 (click)="goBack()">
35 <div class="row mx-0 bg-primary badge-pill">
36 <div class="col-auto p-0">
37 <img class="p-1 img-plato" src="assets/img/icono-take-away.svg">
38 </div>
39 <div class="col-auto align-self-center text-white">para llevar</div>
40 <div class="col-auto align-self-center p-0">
41 <img class="p-1 img-ir" src="assets/img/ir.svg">
42 </div>
43 </div>
44 </div>
45 </div>
46 </div>
47 </div>
48 </div>
49
src/app/modules/opcion-pedido/opcion-pedido.component.scss
src/app/modules/opcion-pedido/opcion-pedido.component.spec.ts
File was created 1 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2
3 import { OpcionPedidoComponent } from './opcion-pedido.component';
4
5 describe('OpcionPedidoComponent', () => {
6 let component: OpcionPedidoComponent;
7 let fixture: ComponentFixture<OpcionPedidoComponent>;
8
9 beforeEach(async(() => {
10 TestBed.configureTestingModule({
11 declarations: [ OpcionPedidoComponent ]
12 })
13 .compileComponents();
14 }));
15
16 beforeEach(() => {
17 fixture = TestBed.createComponent(OpcionPedidoComponent);
18 component = fixture.componentInstance;
19 fixture.detectChanges();
20 });
21
22 it('should create', () => {
23 expect(component).toBeTruthy();
24 });
25 });
26
src/app/modules/opcion-pedido/opcion-pedido.component.ts
File was created 1 import { Component, OnInit } from '@angular/core';
2
3 @Component({
4 selector: 'app-opcion-pedido',
5 templateUrl: './opcion-pedido.component.html',
6 styleUrls: ['./opcion-pedido.component.scss']
7 })
8 export class OpcionPedidoComponent implements OnInit {
9
10 constructor() { }
11
12 ngOnInit() {
13 }
14
15 }
16
src/app/modules/opcion-pedido/opcion-pedido.module.ts
File was created 1 import { NgModule } from "@angular/core";
2 import { CommonModule } from "@angular/common";
3 import { OpcionPedidoRoutingModule } from "./opcion-pedido-routing.module";
4 import { OpcionPedidoComponent } from "./opcion-pedido.component";
5
6 @NgModule({
7 declarations: [OpcionPedidoComponent],
8 imports: [CommonModule, OpcionPedidoRoutingModule]
9 })
10 export class OpcionPedidoModule {}
11
src/app/modules/splash-screen/splash-screen.component.html
1 <div *ngIf="showSplashScreen" class="vh-100"> 1 <div *ngIf="showSplashScreen" class="vh-100">
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/assets/img/ir.svg
File was created 1 <?xml version="1.0" encoding="UTF-8"?>
2 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
3 <!-- Creator: CorelDRAW X7 -->
4 <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="19.8306mm" height="19.8306mm" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
5 viewBox="0 0 9241 9241"
6 xmlns:xlink="http://www.w3.org/1999/xlink">
7 <defs>
8 <style type="text/css">
9 <![CDATA[
10 .fil0 {fill:white;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="M4621 0c1275,0 2431,517 3267,1353 836,837 1353,1992 1353,3268 0,1275 -517,2431 -1353,3267 -836,836 -1992,1353 -3267,1353 -1276,0 -2431,-517 -3268,-1353 -836,-836 -1353,-1992 -1353,-3267 0,-1276 517,-2431 1353,-3268 837,-836 1992,-1353 3268,-1353zm2988 1632c-765,-764 -1821,-1237 -2988,-1237 -1167,0 -2224,473 -2989,1237 -764,765 -1237,1822 -1237,2989 0,1167 473,2223 1237,2988 765,765 1822,1238 2989,1238 1167,0 2223,-473 2988,-1238 765,-765 1238,-1821 1238,-2988 0,-1167 -473,-2224 -1238,-2989zm-3997 564l1944 2425 -1944 2424 -279 -279 1662 -2145 -1662 -2146 279 -279z"/>
17 </g>
18 </svg>
19
File was created 1 .img-ir {
2 width: 30px;
3 }
4
5 .img-plato {
6 width: 50px;
7 }
8
9 .img-accesibilidad {
10 width: 60px;
11 }
12
13 .img-volver {
14 width: 40px;
15 }
16
1 @import "scss/styles-bootstrap.scss"; 1 @import "scss/styles-bootstrap.scss";
2 @import "scss/height-width.scss"; 2 @import "scss/height-width.scss";
3 @import "scss/animations.scss"; 3 @import "scss/animations.scss";
4 @import "scss/icons.scss";
4 @import "node_modules/bootstrap/scss/_variables.scss"; 5 @import "node_modules/bootstrap/scss/_variables.scss";
5 6
6 @font-face { 7 @font-face {
7 font-family: "Gotham"; 8 font-family: "Gotham";
8 font-style: normal; 9 font-style: normal;
9 font-weight: normal; 10 font-weight: normal;
10 src: url("assets/fonts/gotham-medium.woff") format("woff"); 11 src: url("assets/fonts/gotham-medium.woff") format("woff");
11 } 12 }
12 13
13 html, 14 html,
14 body { 15 body {
15 min-height: 100vh; 16 min-height: 100vh;
16 max-height: 100vh; 17 max-height: 100vh;
17 height: 100vh; 18 height: 100vh;
18 background-color: #fcf2e3; 19 background-color: #fcf2e3;
19 font-family: "Gotham"; 20 font-family: "Gotham";
20 overflow: hidden; 21 overflow: hidden;
21 user-select: none; 22 user-select: none;
22 } 23 }
23 24
24 .btn-effect { 25 .btn-effect {
25 transition: all 0.3s; 26 transition: all 0.3s;
26 &:hover { 27 &:hover {
27 cursor: pointer; 28 cursor: pointer;
28 opacity: 0.8; 29 opacity: 0.8;
29 } 30 }
30 &:active { 31 &:active {
31 transform: scale(1.02); 32 transform: scale(1.02);
32 } 33 }
33 } 34 }
34 35
35 .cursor-pointer { 36 .cursor-pointer {
36 cursor: pointer; 37 cursor: pointer;
37 } 38 }
38 39
39 p { 40 p {
40 margin: 0 !important; 41 margin: 0 !important;
41 } 42 }
42 43
43 .rounded { 44 .rounded {
44 border-radius: 1.5rem !important; 45 border-radius: 1.5rem !important;
45 } 46 }
46 47
47 .rounded-sm { 48 .rounded-sm {
48 border-radius: 0.5rem !important; 49 border-radius: 0.5rem !important;
49 } 50 }
51
52 .img-in-top {
53 position: absolute;
54 top: -35px;
55 left: 50%;
56 height: 70px;
57 -webkit-transform: translateX(-50%);
58 transform: translateX(-50%);
59 }
50 60