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

Added fade in

Browse Source
This commit is contained in:
Zakary Timson 2020-06-11 01:20:53 -04:00
parent 961f01a91e
commit 7c5e66e19a
2 changed files with 41 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
src/app/views/home/home.component.html
View File

@ -1,36 +1,42 @@
<stary-sky></stary-sky>
<div class="badge">
<img src="assets/images/logo.png" width="200px" height="auto">
</div>
<div class="controls">
<div *ngIf="!authService.authenticated">
<!--<button mat-flat-button class="w-100 text-white mb-3" style="background-color: #3b5998" (click)="authService.loginWithFacebook()">
<img class="mr-2" src="/assets/images/facebook.png" height="18px" width="auto"> Facebook
</button>-->
<button mat-flat-button class="w-100 mb-1" style="background-color: #efe8e8" (click)="authService.loginWithGoogle()">
<img class="mr-2" src="/assets/images/google.png" height="18px" width="auto"> Google
</button>
<div [@fadeIn] class="h-100 w-100">
<stary-sky></stary-sky>
<div class="badge">
<img src="assets/images/logo.png" width="200px" height="auto">
</div>
<button *ngIf="authService.authenticated" mat-flat-button class="w-100 mb-1" style="background-color: #efe8e8" (click)="authService.logout()">
<mat-icon>logout</mat-icon> Logout
</button>
<hr style="background-color: #FFFFFF90">
<button *ngIf="authService.authenticated" mat-flat-button class="w-100 text-white mb-3" style="background-color: #dd0330" (click)="new()">
<mat-icon>history</mat-icon> Recent
</button>
<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="w-100 mt-3">
<form class="input-group">
<input type="text" class="form-control" [(ngModel)]="code" name="code" placeholder="Code" (keyup)="isValid()">
<div class="input-group-append">
<button class="btn btn-danger" [routerLink]="['/', code]" style="background-color: #dd0330" [disabled]="!valid || code.length < 4">Open</button>
<div class="controls">
<div *ngIf="!authService.authenticated">
<!--<button mat-flat-button class="w-100 text-white mb-3" style="background-color: #3b5998" (click)="authService.loginWithFacebook()">
<img class="mr-2" src="/assets/images/facebook.png" height="18px" width="auto"> Facebook
</button>-->
<button mat-flat-button class="w-100 mb-1" style="background-color: #efe8e8" (click)="authService.loginWithGoogle()">
<img class="mr-2" src="/assets/images/google.png" height="18px" width="auto"> Google
</button>
</div>
<div *ngIf="authService.authenticated">
<button mat-flat-button class="w-100 text-white mb-1" style="background-color: #dd0330" (click)="authService.logout()">
<mat-icon>logout</mat-icon> Logout
</button>
</div>
<hr style="background-color: #FFFFFF90">
<div>
<button *ngIf="authService.authenticated" mat-flat-button class="w-100 mb-3" style="background-color: #efe8e8" (click)="new()">
<mat-icon>history</mat-icon> Recent
</button>
<button mat-flat-button class="w-100 text-white mb-3" style="background-color: #dd0330" (click)="new()">
<mat-icon>add</mat-icon> New Map
</button>
<div class="w-100">
<form class="input-group">
<input type="text" class="form-control" [(ngModel)]="code" name="code" placeholder="Code" (keyup)="isValid()">
<div class="input-group-append">
<button class="btn btn-danger" [routerLink]="['/', code]" style="background-color: #dd0330" [disabled]="!valid || code.length < 4">Open</button>
</div>
<small *ngIf="!valid && code.length > 3" class="mt-2 text-danger">Codes can only be made up of letters and numbers!</small>
</form>
</div>
<small *ngIf="!valid && code.length > 3" class="mt-2 text-danger">Codes can only be made up of letters and numbers!</small>
</form>
</div>
</div>
<span class="credits text-white">
Created By <a href="https://zakscode.com" target="_blank">Zak Timson</a>
</span>
</div>
<span class="credits text-white">
Created By <a href="https://zakscode.com" target="_blank">Zak Timson</a>
</span>

4
src/app/views/home/home.component.ts
View File

@ -2,13 +2,15 @@ import {Component} from "@angular/core";
import {Router} from "@angular/router";
import {SyncService} from "../../services/sync.service";
import {AuthService} from "../../services/auth.service";
import {fadeIn} from "../../animations";
const chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
@Component({
selector: 'home',
templateUrl: 'home.component.html',
styleUrls: ['home.component.scss']
styleUrls: ['home.component.scss'],
animations: [fadeIn]
})
export class HomeComponent {
code: string = '';