Added fade in

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

View File

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

View File

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