Luis Suarez / autoservicio-axion

Download as
Browse Code ยป

Commit dce5c66891d26e340af95bdd65a2d42ea44425d9

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

Fixes en iconos y agregada pantalla 2

Showing 19 changed files with 185 additions and 44 deletions   Show diff stats
src/app/app-routing.module.ts
Diff comments   View file @ dce5c66
... ... @@ -3,6 +3,7 @@ import { Routes, RouterModule } from '@angular/router';
3 3 import { SplashScreenComponent } from './modules/splash-screen/splash-screen.component';
4 4 import { AdminComponent } from './modules/admin/admin.component';
5 5 import { FormasPagoModule } from './modules/formas-pago/formas-pago.module';
  6 +import { OpcionPedidoModule } from './modules/opcion-pedido/opcion-pedido.module';
6 7  
7 8 const routes: Routes = [
8 9 { path: '', component: SplashScreenComponent },
... ... @@ -11,6 +12,7 @@ const routes: Routes = [
11 12 component: AdminComponent,
12 13 children: [
13 14 { path: 'formas-pago', loadChildren: () => FormasPagoModule },
  15 + { path: 'opcion-pedido', loadChildren: () => OpcionPedidoModule },
14 16 ]
15 17 },
16 18 { path: '**', redirectTo: '', pathMatch: 'full' },
src/app/app.module.ts
Diff comments   View file @ dce5c66
1 1 import { BrowserModule } from '@angular/platform-browser';
2 2 import { NgModule } from '@angular/core';
3   -
4 3 import { AppRoutingModule } from './app-routing.module';
5 4 import { AppComponent } from './app.component';
6 5 import { SplashScreenComponent } from './modules/splash-screen/splash-screen.component';
src/app/modules/footer/footer.component.html
Diff comments   View file @ dce5c66
... ... @@ -3,15 +3,17 @@
3 3 <div class="btn-effect row mx-0 bg-light rounded-left">
4 4 <div class="col-auto align-self-center text-primary">ESTAMOS PARA AYUDARTE</div>
5 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 7 </div>
8 8 </div>
9 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 13 <div class="row mx-0 bg-light rounded-left">
12 14 <div class="col-auto align-self-center text-primary">VOLVER</div>
13 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 17 </div>
16 18 </div>
17 19 </div>
src/app/modules/footer/footer.component.scss
Diff comments   View file @ dce5c66
... ... @@ -1,7 +0,0 @@
1   -.img-button-accesibilidad {
2   - width: 60px;
3   -}
4   -
5   -.img-button-volver {
6   - width: 40px;
7   -}
src/app/modules/footer/footer.component.ts
Diff comments   View file @ dce5c66
1   -import { Component, OnInit } from '@angular/core';
  1 +import { Component, OnInit } from "@angular/core";
  2 +import { Location } from "@angular/common";
2 3  
3 4 @Component({
4   - selector: 'app-footer',
5   - templateUrl: './footer.component.html',
6   - styleUrls: ['./footer.component.scss']
  5 + selector: "app-footer",
  6 + templateUrl: "./footer.component.html",
  7 + styleUrls: ["./footer.component.scss"]
7 8 })
8 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
Diff comments   View file @ dce5c66
1   -import { NgModule } from '@angular/core';
2   -import { Routes, RouterModule } from '@angular/router';
3   -import { FormasPagoComponent } from './formas-pago.component';
  1 +import { NgModule } from "@angular/core";
  2 +import { Routes, RouterModule } from "@angular/router";
  3 +import { FormasPagoComponent } from "./formas-pago.component";
4 4  
5   -const routes: Routes = [
6   - { path: '', component: FormasPagoComponent },
7   -];
  5 +const routes: Routes = [{ path: "", component: FormasPagoComponent }];
8 6  
9 7 @NgModule({
10 8 imports: [RouterModule.forChild(routes)],
11 9 exports: [RouterModule]
12 10 })
13   -export class FormasPagoRoutingModule { }
  11 +export class FormasPagoRoutingModule {}
src/app/modules/formas-pago/formas-pago.component.html
Diff comments   View file @ dce5c66
... ... @@ -13,7 +13,11 @@
13 13 tarjetas y
14 14 <img class="w-15" src="assets/img/icono-mercado-pago.svg">
15 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 21 </div>
18 22 </div>
19 23 <div class="row h-50 mx-0 justify-content-center text-center">
src/app/modules/formas-pago/formas-pago.component.scss
Diff comments   View file @ dce5c66
... ... @@ -1,8 +0,0 @@
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   -}
src/app/modules/formas-pago/formas-pago.component.ts
Diff comments   View file @ dce5c66
1   -import { Component, OnInit } from '@angular/core';
  1 +import { Component, OnInit } from "@angular/core";
2 2  
3 3 @Component({
4   - selector: 'app-formas-pago',
5   - templateUrl: './formas-pago.component.html',
6   - styleUrls: ['./formas-pago.component.scss']
  4 + selector: "app-formas-pago",
  5 + templateUrl: "./formas-pago.component.html",
  6 + styleUrls: ["./formas-pago.component.scss"]
7 7 })
8 8 export class FormasPagoComponent implements OnInit {
  9 + constructor() {}
9 10  
10   - constructor() { }
11   -
12   - ngOnInit() {
13   - }
14   -
  11 + ngOnInit() {}
15 12 }
src/app/modules/opcion-pedido/opcion-pedido-routing.module.ts
Diff comments   View file @ dce5c66
... ... @@ -0,0 +1,11 @@
  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 {}
src/app/modules/opcion-pedido/opcion-pedido.component.html
Diff comments   View file @ dce5c66
... ... @@ -0,0 +1,48 @@
  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>
src/app/modules/opcion-pedido/opcion-pedido.component.scss
Diff comments   View file @ dce5c66
src/app/modules/opcion-pedido/opcion-pedido.component.spec.ts
Diff comments   View file @ dce5c66
... ... @@ -0,0 +1,25 @@
  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 +});
src/app/modules/opcion-pedido/opcion-pedido.component.ts
Diff comments   View file @ dce5c66
... ... @@ -0,0 +1,15 @@
  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 +}
src/app/modules/opcion-pedido/opcion-pedido.module.ts
Diff comments   View file @ dce5c66
... ... @@ -0,0 +1,10 @@
  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 {}
src/app/modules/splash-screen/splash-screen.component.html
Diff comments   View file @ dce5c66
... ... @@ -34,7 +34,7 @@
34 34 </div>
35 35 <div
36 36 class="row mx-0 h-10 loop-color cursor-pointer"
37   - [routerLink]="['formas-pago']">
  37 + [routerLink]="['/formas-pago']">
38 38 <div class="col-12 text-center align-self-center px-0">
39 39 <p class="h6 text-white">TOCA PARA COMENZAR</p>
40 40 </div>
src/assets/img/ir.svg
Diff comments   View file @ dce5c66
... ... @@ -0,0 +1,18 @@
  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>
... ... @@ -0,0 +1,15 @@
  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 +}
1 1 @import "scss/styles-bootstrap.scss";
2 2 @import "scss/height-width.scss";
3 3 @import "scss/animations.scss";
  4 +@import "scss/icons.scss";
4 5 @import "node_modules/bootstrap/scss/_variables.scss";
5 6  
6 7 @font-face {
... ... @@ -47,3 +48,12 @@ p {
47 48 .rounded-sm {
48 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 +}