Commit bc14f172bd811513e2ff886b6d81438f843d3132
1 parent
2091357cd6
Exists in
master
and in
2 other branches
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 |