Commit bc14f172bd811513e2ff886b6d81438f843d3132
1 parent
2091357cd6
Exists in
develop
Creado componente formas de pago
Showing
14 changed files
with
135 additions
and
3 deletions
Show diff stats
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'; | ||
| 5 | import { FormasPagoModule } from './modules/formas-pago/formas-pago.module'; | ||
| 4 | 6 | ||
| 5 | const routes: Routes = [ | 7 | const routes: Routes = [ |
| 6 | { path: '', component: SplashScreenComponent }, | 8 | { path: '', component: SplashScreenComponent }, |
| 9 | { | ||
| 10 | path: '', | ||
| 11 | component: AdminComponent, | ||
| 12 | children: [ | ||
| 13 | { path: 'formas-pago', loadChildren: () => FormasPagoModule }, | ||
| 14 | ] | ||
| 15 | }, | ||
| 16 | { path: '**', redirectTo: '', pathMatch: 'full' }, | ||
| 7 | ]; | 17 | ]; |
| 8 | 18 | ||
| 9 | @NgModule({ | 19 | @NgModule({ |
| 10 | imports: [RouterModule.forRoot(routes)], | 20 | imports: [RouterModule.forRoot(routes)], |
| 11 | exports: [RouterModule] | 21 | exports: [RouterModule] |
| 12 | }) | 22 | }) |
| 13 | export class AppRoutingModule { } | 23 | export class AppRoutingModule { } |
| 14 | 24 |
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 | 3 | ||
| 4 | import { AppRoutingModule } from './app-routing.module'; | 4 | import { AppRoutingModule } from './app-routing.module'; |
| 5 | import { AppComponent } from './app.component'; | 5 | import { AppComponent } from './app.component'; |
| 6 | import { SplashScreenComponent } from './modules/splash-screen/splash-screen.component'; | 6 | import { SplashScreenComponent } from './modules/splash-screen/splash-screen.component'; |
| 7 | import { SplitPipe } from './pipes/split.pipe'; | 7 | import { SplitPipe } from './pipes/split.pipe'; |
| 8 | import { AdminComponent } from './modules/admin/admin.component'; | ||
| 8 | 9 | ||
| 9 | @NgModule({ | 10 | @NgModule({ |
| 10 | declarations: [ | 11 | declarations: [ |
| 11 | AppComponent, | 12 | AppComponent, |
| 12 | SplashScreenComponent, | 13 | SplashScreenComponent, |
| 13 | SplitPipe | 14 | SplitPipe, |
| 15 | AdminComponent | ||
| 14 | ], | 16 | ], |
| 15 | imports: [ | 17 | imports: [ |
| 16 | BrowserModule, | 18 | BrowserModule, |
| 17 | AppRoutingModule | 19 | AppRoutingModule |
| 18 | ], | 20 | ], |
| 19 | providers: [], | 21 | providers: [], |
| 20 | bootstrap: [AppComponent] | 22 | bootstrap: [AppComponent] |
| 21 | }) | 23 | }) |
| 22 | export class AppModule { } | 24 | export class AppModule { } |
| 23 | 25 |
src/app/modules/admin/admin.component.html
| File was created | 1 | <router-outlet></router-outlet> | |
| 2 | <div class="h-8 bg-dark"></div> |
src/app/modules/admin/admin.component.scss
src/app/modules/admin/admin.component.spec.ts
| File was created | 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; | |
| 2 | |||
| 3 | import { AdminComponent } from './admin.component'; | ||
| 4 | |||
| 5 | describe('AdminComponent', () => { | ||
| 6 | let component: AdminComponent; | ||
| 7 | let fixture: ComponentFixture<AdminComponent>; | ||
| 8 | |||
| 9 | beforeEach(async(() => { | ||
| 10 | TestBed.configureTestingModule({ | ||
| 11 | declarations: [ AdminComponent ] | ||
| 12 | }) | ||
| 13 | .compileComponents(); | ||
| 14 | })); | ||
| 15 | |||
| 16 | beforeEach(() => { | ||
| 17 | fixture = TestBed.createComponent(AdminComponent); | ||
| 18 | component = fixture.componentInstance; | ||
| 19 | fixture.detectChanges(); | ||
| 20 | }); | ||
| 21 | |||
| 22 | it('should create', () => { | ||
| 23 | expect(component).toBeTruthy(); | ||
| 24 | }); | ||
| 25 | }); | ||
| 26 |
src/app/modules/admin/admin.component.ts
| File was created | 1 | import { Component, OnInit } from '@angular/core'; | |
| 2 | |||
| 3 | @Component({ | ||
| 4 | selector: 'app-admin', | ||
| 5 | templateUrl: './admin.component.html', | ||
| 6 | styleUrls: ['./admin.component.scss'] | ||
| 7 | }) | ||
| 8 | export class AdminComponent implements OnInit { | ||
| 9 | |||
| 10 | constructor() { } | ||
| 11 | |||
| 12 | ngOnInit() { | ||
| 13 | } | ||
| 14 | |||
| 15 | } | ||
| 16 |
src/app/modules/formas-pago/formas-pago-routing.module.ts
| File was created | 1 | import { NgModule } from '@angular/core'; | |
| 2 | import { Routes, RouterModule } from '@angular/router'; | ||
| 3 | import { FormasPagoComponent } from './formas-pago.component'; | ||
| 4 | |||
| 5 | const routes: Routes = [ | ||
| 6 | { path: '', component: FormasPagoComponent }, | ||
| 7 | ]; | ||
| 8 | |||
| 9 | @NgModule({ | ||
| 10 | imports: [RouterModule.forChild(routes)], | ||
| 11 | exports: [RouterModule] | ||
| 12 | }) | ||
| 13 | export class FormasPagoRoutingModule { } | ||
| 14 |
src/app/modules/formas-pago/formas-pago.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> |
src/app/modules/formas-pago/formas-pago.component.scss
src/app/modules/formas-pago/formas-pago.component.spec.ts
| File was created | 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; | |
| 2 | |||
| 3 | import { FormasPagoComponent } from './formas-pago.component'; | ||
| 4 | |||
| 5 | describe('FormasPagoComponent', () => { | ||
| 6 | let component: FormasPagoComponent; | ||
| 7 | let fixture: ComponentFixture<FormasPagoComponent>; | ||
| 8 | |||
| 9 | beforeEach(async(() => { | ||
| 10 | TestBed.configureTestingModule({ | ||
| 11 | declarations: [ FormasPagoComponent ] | ||
| 12 | }) | ||
| 13 | .compileComponents(); | ||
| 14 | })); | ||
| 15 | |||
| 16 | beforeEach(() => { | ||
| 17 | fixture = TestBed.createComponent(FormasPagoComponent); | ||
| 18 | component = fixture.componentInstance; | ||
| 19 | fixture.detectChanges(); | ||
| 20 | }); | ||
| 21 | |||
| 22 | it('should create', () => { | ||
| 23 | expect(component).toBeTruthy(); | ||
| 24 | }); | ||
| 25 | }); | ||
| 26 |
src/app/modules/formas-pago/formas-pago.component.ts
| File was created | 1 | import { Component, OnInit } from '@angular/core'; | |
| 2 | |||
| 3 | @Component({ | ||
| 4 | selector: 'app-formas-pago', | ||
| 5 | templateUrl: './formas-pago.component.html', | ||
| 6 | styleUrls: ['./formas-pago.component.scss'] | ||
| 7 | }) | ||
| 8 | export class FormasPagoComponent implements OnInit { | ||
| 9 | |||
| 10 | constructor() { } | ||
| 11 | |||
| 12 | ngOnInit() { | ||
| 13 | } | ||
| 14 | |||
| 15 | } | ||
| 16 |
src/app/modules/formas-pago/formas-pago.module.ts
| File was created | 1 | import { NgModule } from '@angular/core'; | |
| 2 | import { CommonModule } from '@angular/common'; | ||
| 3 | |||
| 4 | import { FormasPagoRoutingModule } from './formas-pago-routing.module'; | ||
| 5 | import { FormasPagoComponent } from './formas-pago.component'; | ||
| 6 | |||
| 7 | |||
| 8 | @NgModule({ | ||
| 9 | declarations: [FormasPagoComponent], | ||
| 10 | imports: [ | ||
| 11 | CommonModule, | ||
| 12 | FormasPagoRoutingModule | ||
| 13 | ] | ||
| 14 | }) | ||
| 15 | export class FormasPagoModule { } | ||
| 16 |
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 focus-in-blur" 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 class="row mx-0 h-10 loop-color cursor-pointer"> | 35 | <div |
| 36 | class="row mx-0 h-10 loop-color cursor-pointer" | ||
| 37 | [routerLink]="['formas-pago']"> | ||
| 36 | <div class="col-12 text-center align-self-center px-0"> | 38 | <div class="col-12 text-center align-self-center px-0"> |
| 37 | <p class="h6 text-white">TOCA PARA COMENZAR</p> | 39 | <p class="h6 text-white">TOCA PARA COMENZAR</p> |
| 38 | </div> | 40 | </div> |
| 39 | </div> | 41 | </div> |
| 40 | </div> | 42 | </div> |
| 41 | </div> | 43 | </div> |
| 42 | </div> | 44 | </div> |
| 43 | 45 |
src/styles.scss
| 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 "node_modules/bootstrap/scss/_variables.scss"; | 4 | @import "node_modules/bootstrap/scss/_variables.scss"; |
| 5 | 5 | ||
| 6 | @font-face { | 6 | @font-face { |
| 7 | font-family: "Gotham"; | 7 | font-family: "Gotham"; |
| 8 | font-style: normal; | 8 | font-style: normal; |
| 9 | font-weight: normal; | 9 | font-weight: normal; |
| 10 | src: url("assets/fonts/gotham-medium.woff") format("woff"); | 10 | src: url("assets/fonts/gotham-medium.woff") format("woff"); |
| 11 | } | 11 | } |
| 12 | 12 | ||
| 13 | html, | 13 | html, |
| 14 | body { | 14 | body { |
| 15 | min-height: 100vh; | 15 | min-height: 100vh; |
| 16 | max-height: 100vh; | 16 | max-height: 100vh; |
| 17 | height: 100vh; | 17 | height: 100vh; |
| 18 | background-color: #fcf2e3; | 18 | background-color: #fcf2e3; |
| 19 | font-family: "Gotham"; | 19 | font-family: "Gotham"; |
| 20 | overflow: hidden; | 20 | overflow: hidden; |
| 21 | user-select: none; | ||
| 21 | } | 22 | } |
| 22 | 23 | ||
| 23 | .cursor-pointer { | 24 | .cursor-pointer { |
| 24 | cursor: pointer; | 25 | cursor: pointer; |
| 25 | } | 26 | } |
| 26 | 27 | ||
| 27 | p { | 28 | p { |
| 28 | margin: 0 !important; | 29 | margin: 0 !important; |
| 29 | } | 30 | } |
| 30 | 31 | ||
| 31 | .rounded { | 32 | .rounded { |
| 32 | border-radius: 1.5rem !important; | 33 | border-radius: 1.5rem !important; |
| 33 | } | 34 | } |
| 34 | 35 |