ztimson/map-alliance
ztimson/map-alliance
1
0
Fork 0
Code Issues Pull Requests Actions Packages Releases 1 Activity

Added simple home screen

Browse Source
This commit is contained in:
Zakary Timson 2019-07-11 18:04:20 -04:00
parent 9b8474a037
commit 6c260c303c
3 changed files with 66 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
src/app/home/home.component.html
View File

@ -1,2 +1,40 @@
<h1>Home</h1>
<a routerLink="/map">Temp</a>
<div class="d-flex w-100 h-100 flex-column justify-content-center align-items-center" style="background-color: #1976d2">
<div>
<img src="assets/images/logo.png">
</div>
<div class="my-5">
<h3 class="text-white">Collaborative map making... {{typedText | async}}</h3>
</div>
<div>
<div class="row">
<div class="col border-right border-white">
<button mat-flat-button class="w-100 text-white" style="background-color: #dd4b39">
<i class="fab fa-google mr-2"></i> Sign in with Google
</button>
<button mat-flat-button class="w-100 mt-2 text-white" style="background-color: #00acee">
<i class="fab fa-twitter mr-2"></i> Sign in with Twitter
</button>
<button mat-flat-button class="w-100 mt-2 text-white" style="background-color: #3b5998">
<i class="fab fa-facebook mr-2"></i>Sign in with Facebook
</button>
</div>
<div class="col border-left border-white">
<button mat-flat-button class="w-100 text-white" style="background-color: #dd0330" (click)="new()">
<mat-icon>add</mat-icon> New Map
</button>
<div class="d-flex mt-2 align-items-baseline">
<div class="flex-grow-1">
<mat-form-field appearance="fill" class="w-100 text-white mat-padding-0">
<input #mapCode matInput placeholder="Map Code">
</mat-form-field>
</div>
<div class="ml-2">
<button mat-flat-button class="w-100 text-white" style="background-color: #dd0330" [routerLink]="['/', mapCode.value]">
<mat-icon>explore</mat-icon> Open
</button>
</div>
</div>
</div>
</div>
</div>
</div>

20
src/app/home/home.component.ts
View File

@ -1,9 +1,27 @@
import {Component} from "@angular/core";
import {Observable, timer} from "rxjs";
import {map, take} from "rxjs/operators";
import {Router} from "@angular/router";
const chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
@Component({
selector: 'home',
templateUrl: 'home.component.html',
templateUrl: 'home.component.html'
})
export class HomeComponent {
phrase = 'If you\'re into that';
typedText: Observable<string>;
constructor(private router: Router) {
this.typedText = timer(750, 50).pipe(take(this.phrase.length), map((i: number) => this.phrase.substring(0, i + 1)));
}
async new() {
let mapCode: string;
do {
mapCode = Array(16).fill(0).map(() => chars[Math.round(Math.random() * chars.length)]).join('');
} while (false);
this.router.navigate(['/', mapCode]);
}
}

7
src/styles.scss
View File

@ -1,3 +1,4 @@
@import url('https://use.fontawesome.com/releases/v5.8.1/css/all.css');
@import '~bootstrap-scss/bootstrap.scss';
:focus {
@ -22,3 +23,9 @@ a[href^="https://maps.google.com/maps"]{display:none !important}
.gmnoprint div {
background:none !important;
}
.mat-padding-0 {
.mat-form-field-infix {
border: 0 !important;
}
}