-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
41e1faf
commit 5bf9932
Showing
5 changed files
with
373 additions
and
214 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,40 +1,145 @@ | ||
<header class="header header--mobile"> | ||
<mat-toolbar color="primary" class="nav-bar"> | ||
<a routerLink="/" class="logo logo--ripple"> | ||
<span class="logo__title">National Team Generator</span> | ||
</a> | ||
<span class="nav-bar__nav-spacer"></span> | ||
<button mat-icon-button class="nav-bar__menu-button nav-bar__menu-button--ripple" aria-label="Example icon-button with menu icon" (click)="navToggle = !navToggle" > | ||
<mat-icon class="nav-bar__menu-button__icon">menu</mat-icon> | ||
</button> | ||
</mat-toolbar> | ||
<mat-nav-list class="nav-list" role="list" *ngIf="navToggle"> | ||
<a routerLink="/leaderboard" class="nav-list__link nav-list__link--ripple">Leaderboards</a> | ||
<a class="nav-list__link nav-list__link--ripple" (click)="loginOverlay()" *ngIf="!isLoggedIn" cdkOverlayOrigin #trigger="cdkOverlayOrigin">Login</a> | ||
<a class="nav-list__link nav-list__link--ripple" (click)="logout()" *ngIf="isLoggedIn">Logout</a> | ||
</mat-nav-list> | ||
</header> | ||
<header class="header header--desktop"> | ||
<mat-toolbar color="primary" class="nav-bar"> | ||
<a routerLink="/" class="logo logo--ripple"> | ||
<span class="logo__title">National Team Generator</span> | ||
</a> | ||
<span class="nav-bar__nav-spacer"></span> | ||
<a routerLink="/leaderboard" class="nav-bar__link nav-bar__link--ripple">Leaderboards</a> | ||
<a (click)="loginOverlay()" *ngIf="!isLoggedIn" class="nav-bar__link nav-bar__link--ripple">Login</a> | ||
<a (click)="logout()" *ngIf="isLoggedIn" class="nav-bar__link nav-bar__link--ripple">Logout</a> | ||
</mat-toolbar> | ||
</header> | ||
<ng-container *ngIf="loginOverlayOpen" class="ng-container"> | ||
<div class="login-overlay ng-container__login-overlay"> | ||
<div class="login-overlay__exit"> | ||
<button mat-button (click)="loginOverlay()" class="login-overlay__exit__button"> | ||
<mat-icon class="login-overlay__exit__button__icon">close</mat-icon> | ||
</button> | ||
</div> | ||
<input class="login-overlay__input login-overlay__input--override" type="text" #email placeholder="email"> | ||
<input class="login-overlay__input login-overlay__input--override" type="password" #password placeholder="password"> | ||
<button mat-raised-button type="submit" (click)="login(email.value, password.value)" class="login-overlay__button login-overlay__button--ripple">Login</button> | ||
<header class="header header--mobile"> | ||
<mat-toolbar color="primary" class="nav-bar"> | ||
<a routerLink="/" class="logo logo--ripple"> | ||
<span class="logo__title">National Team Generator</span> | ||
</a> | ||
<span class="nav-bar__nav-spacer"></span> | ||
<button | ||
mat-icon-button | ||
class="nav-bar__menu-button nav-bar__menu-button--ripple" | ||
aria-label="Example icon-button with menu icon" | ||
(click)="navToggle = !navToggle" | ||
> | ||
<mat-icon class="nav-bar__menu-button__icon">menu</mat-icon> | ||
</button> | ||
</mat-toolbar> | ||
<mat-nav-list class="nav-list" role="list" *ngIf="navToggle"> | ||
<a routerLink="/leaderboard" class="nav-list__link nav-list__link--ripple" | ||
>Leaderboards</a | ||
> | ||
<a | ||
class="nav-list__link nav-list__link--ripple" | ||
(click)="loginOverlay()" | ||
*ngIf="!isLoggedIn" | ||
cdkOverlayOrigin | ||
#trigger="cdkOverlayOrigin" | ||
>Login</a | ||
> | ||
<a | ||
class="nav-list__link nav-list__link--ripple" | ||
(click)="registerOverlay()" | ||
*ngIf="!isLoggedIn" | ||
cdkOverlayOrigin | ||
#trigger="cdkOverlayOrigin" | ||
>Register</a | ||
> | ||
<a | ||
class="nav-list__link nav-list__link--ripple" | ||
(click)="logout()" | ||
*ngIf="isLoggedIn" | ||
>Logout</a | ||
> | ||
</mat-nav-list> | ||
</header> | ||
<header class="header header--desktop"> | ||
<mat-toolbar color="primary" class="nav-bar"> | ||
<a routerLink="/" class="logo logo--ripple"> | ||
<span class="logo__title">National Team Generator</span> | ||
</a> | ||
<span class="nav-bar__nav-spacer"></span> | ||
<a routerLink="/leaderboard" class="nav-bar__link nav-bar__link--ripple" | ||
>Leaderboards</a | ||
> | ||
<a | ||
(click)="loginOverlay()" | ||
*ngIf="!isLoggedIn" | ||
class="nav-bar__link nav-bar__link--ripple" | ||
>Login</a | ||
> | ||
<a | ||
(click)="registerOverlay()" | ||
*ngIf="!isLoggedIn" | ||
class="nav-bar__link nav-bar__link--ripple" | ||
>Register</a | ||
> | ||
<a | ||
(click)="logout()" | ||
*ngIf="isLoggedIn" | ||
class="nav-bar__link nav-bar__link--ripple" | ||
>Logout</a | ||
> | ||
</mat-toolbar> | ||
</header> | ||
<ng-container *ngIf="loginOverlayOpen" class="ng-container"> | ||
<div class="login-overlay ng-container__login-overlay"> | ||
<div class="login-overlay__exit"> | ||
<button | ||
mat-button | ||
(click)="loginOverlay()" | ||
class="login-overlay__exit__button" | ||
> | ||
<mat-icon class="login-overlay__exit__button__icon">close</mat-icon> | ||
</button> | ||
</div> | ||
</ng-container> | ||
<input | ||
class="login-overlay__input login-overlay__input--override" | ||
type="text" | ||
placeholder="Email" | ||
/> | ||
<input | ||
class="login-overlay__input login-overlay__input--override" | ||
type="password" | ||
#password | ||
placeholder="Password" | ||
/> | ||
<button | ||
mat-raised-button | ||
type="submit" | ||
(click)="login(email.value, password.value)" | ||
class="login-overlay__button login-overlay__button--ripple" | ||
> | ||
Login | ||
</button> | ||
</div> | ||
</ng-container> | ||
<ng-container *ngIf="registerOverlayOpen" class="ng-container"> | ||
<div class="register-overlay ng-container__register-overlay"> | ||
<div class="register-overlay__exit"> | ||
<button | ||
mat-button | ||
(click)="registerOverlay()" | ||
class="register-overlay__exit__button" | ||
> | ||
<mat-icon class="register-overlay__exit__button__icon">close</mat-icon> | ||
</button> | ||
</div> | ||
<input | ||
class="register-overlay__input register-overlay__input--override" | ||
type="text" | ||
#name | ||
placeholder="Name" | ||
/> | ||
<input | ||
class="register-overlay__input register-overlay__input--override" | ||
type="text" | ||
placeholder="Email" | ||
/> | ||
<input | ||
class="register-overlay__input register-overlay__input--override" | ||
type="password" | ||
#password | ||
placeholder="Password" | ||
/> | ||
<button | ||
mat-raised-button | ||
type="submit" | ||
(click)="signup(name.value, email.value, password.value)" | ||
class="register-overlay__button register-overlay__button--ripple" | ||
> | ||
Create Your Account | ||
</button> | ||
</div> | ||
</ng-container> | ||
<router-outlet></router-outlet> |
Oops, something went wrong.