-
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.
Merge pull request #5 from maxkarnold/dev
Dev
- Loading branch information
Showing
13 changed files
with
660 additions
and
248 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
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
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,34 +1,40 @@ | ||
| <header class="mobile"> | ||
| <mat-toolbar color="primary"> | ||
| <a routerLink="/"><span>National Team Generator</span></a> | ||
| <span class="nav-spacer"></span> | ||
| <button mat-icon-button class="example-icon" aria-label="Example icon-button with menu icon" (click)="navToggle = !navToggle" > | ||
| <mat-icon>menu</mat-icon> | ||
| <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="primaryColorBG list" role="list" *ngIf="navToggle"> | ||
| <a mat-list-item routerLink="/leaderboard" class="nav-item full">Leaderboards</a> | ||
| <a mat-list-item href="#" class="nav-item full" (click)="loginOverlay()" *ngIf="!isLoggedIn" cdkOverlayOrigin #trigger="cdkOverlayOrigin">Login</a> | ||
| <a mat-list-item href="#" class="nav-item full" (click)="logout()" *ngIf="isLoggedIn">Logout</a> | ||
| <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="desktop"> | ||
| <mat-toolbar color="primary"> | ||
| <a routerLink="/"><span>National Team Generator</span></a> | ||
| <span class="nav-spacer"></span> | ||
| <a mat-list-item routerLink="/leaderboard" class="nav-item">Leaderboards</a> | ||
| <button (click)="loginOverlay()" *ngIf="!isLoggedIn"><span>Login</span></button> | ||
| <a href="#" (click)="logout()" *ngIf="isLoggedIn"><span>Logout</span></a> | ||
| <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"> | ||
| <div class="login-overlay"> | ||
| <div class="exit-container"> | ||
| <button mat-button (click)="loginOverlay()" ><mat-icon>close</mat-icon></button> | ||
| <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 type="text" #email placeholder="email"> | ||
| <input type="password" #password placeholder="password"> | ||
| <button mat-raised-button type="submit" (click)="login(email.value, password.value)" class="login-button">Login</button> | ||
| <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> | ||
| </div> | ||
| </ng-container> | ||
| <router-outlet></router-outlet> |
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,93 +1,148 @@ | ||
| button { | ||
| cursor: pointer; | ||
| .header { | ||
| color: white; | ||
| background-color: #3F51B5; | ||
| &--desktop{ | ||
| display: block; | ||
| @media screen and (max-width: 800px) { display: none; } | ||
| } | ||
| &--mobile { | ||
| display: none; | ||
| @media screen and (max-width: 800px) { display: block; } | ||
| } | ||
| } | ||
| .logo { | ||
| color: white; | ||
| display: flex; | ||
| align-items: center; | ||
| min-height: 100%; | ||
| padding: 0 1rem; | ||
| &--ripple { | ||
| background-position: center; | ||
| transition: background 0.8s; | ||
| &:hover { | ||
| background: rgb(70, 90, 183) radial-gradient(circle, transparent 1%, rgb(70, 90, 183) 1%) center/15000%; | ||
| } | ||
| &:active { | ||
| background-color: rgb(75, 100, 200); | ||
| background-size: 100%; | ||
| transition: background 0s; | ||
| } | ||
| } | ||
| } | ||
| .nav-bar { | ||
| &__menu-button { | ||
| &--ripple { | ||
| background-position: center; | ||
| transition: background 0.8s; | ||
| &:hover { | ||
| background: rgb(80, 110, 210) radial-gradient(circle, transparent 1%, rgb(80, 110, 210) 1%) center/15000%; | ||
| } | ||
| &:focus { | ||
| background-color: rgb(80, 110, 210); | ||
| background-size: 100%; | ||
| transition: background 0s; | ||
| } | ||
| } | ||
| } | ||
| &__nav-spacer { | ||
| flex: 1 1 auto; | ||
| } | ||
| &__link { | ||
| display: flex; | ||
| align-items: center; | ||
| min-height: 100%; | ||
| color: white; | ||
| padding: 0 1rem; | ||
| cursor: pointer; | ||
| &--ripple { | ||
| background-position: center; | ||
| transition: background 0.8s; | ||
| &:hover { | ||
| background: rgb(70, 90, 183) radial-gradient(circle, transparent 1%, rgb(70, 90, 183) 1%) center/15000%; | ||
| } | ||
| &:active { | ||
| background-color: rgb(75, 100, 200); | ||
| background-size: 100%; | ||
| transition: background 0s; | ||
| } | ||
| } | ||
| } | ||
| } | ||
| .nav-list { | ||
| display: flex; | ||
| flex-flow: column; | ||
| padding: 0; | ||
| &__link { | ||
| display: flex; | ||
| justify-content: center; | ||
| color: white; | ||
| border-top: 1px solid rgb(242, 242, 242, 0.25); | ||
| padding: 1rem 0; | ||
| transition: background-color 400ms; | ||
| background-color: rgb(63, 81, 181); | ||
| cursor: pointer; | ||
| &--ripple { | ||
| background-position: center; | ||
| transition: background 0.8s; | ||
| &:hover { | ||
| background: rgb(70, 90, 183) radial-gradient(circle, transparent 1%, rgb(70, 90, 183) 1%) center/15000%; | ||
| } | ||
| &:active { | ||
| background-color: rgb(75, 100, 200); | ||
| background-size: 100%; | ||
| transition: background 0s; | ||
| } | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .desktop { | ||
| display: none; | ||
| .ng-container { | ||
| &__login-overlay { | ||
| z-index: 2; | ||
| border-top: 1px solid whitesmoke; | ||
| margin: 0 auto; | ||
| position: absolute; | ||
| right: 0; | ||
| } | ||
| } | ||
|
|
||
| .login-overlay { | ||
| background-color: #3F51B5; | ||
| border: 1px solid whitesmoke; | ||
| box-shadow: 0px 3px 1px -2px rgb(0 0 0 / 20%), 0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(0 0 0 / 12%); | ||
| padding: 1.5rem; | ||
| float: right; | ||
| margin: 0 auto; | ||
| color: white; | ||
| display: flex; | ||
| flex-flow: column; | ||
| justify-content: center; | ||
| width: 100%; | ||
| @media screen and (min-width: 800px) { | ||
| width: 25rem; | ||
| } | ||
| input { | ||
| color: white; | ||
| } | ||
|
|
||
| .exit-container { | ||
| width: 26rem; | ||
| @media screen and (max-width: 800px) { width: 100%; } | ||
| &__exit { | ||
| display: flex; | ||
| justify-content: flex-end; | ||
| button { | ||
| &__button { | ||
| display: flex; | ||
| justify-content: center; | ||
| min-width: 2.5rem; | ||
| width: auto; | ||
| padding: 0; | ||
| } | ||
| } | ||
| .login-button { | ||
| &__button { | ||
| background-color: white; | ||
| margin: 1rem; | ||
| &--ripple { | ||
| background-position: center; | ||
| transition: background 0.8s; | ||
| &:hover { | ||
| background: rgb(235,235,235) radial-gradient(circle, transparent 1%, rgb(235,235,235) 1%) center/15000%; | ||
| } | ||
| &:active { | ||
| background-color: rgb(235,235,235); | ||
| background-size: 100%; | ||
| transition: background 0s; | ||
| } | ||
| } | ||
| } | ||
| } | ||
|
|
||
| @media screen and (min-width: 800px) { | ||
| .mobile { | ||
| display: none; | ||
| } | ||
| header.desktop { | ||
| display: block; | ||
| } | ||
| } | ||
|
|
||
| header.desktop a{ | ||
| padding: 0 1rem; | ||
| } | ||
|
|
||
| header a { | ||
| color: white; | ||
| } | ||
|
|
||
| header button { | ||
| background: none; | ||
| border: none; | ||
| color: white; | ||
| font: 500 20px/32px Roboto, "Helvetica Neue", sans-serif; | ||
| } | ||
| header { | ||
| .nav-spacer { | ||
| flex: 1 1 auto; | ||
| &__input { | ||
| color: white; | ||
| } | ||
|
|
||
| } | ||
|
|
||
| h2, h3 { | ||
| text-align: center; | ||
| } | ||
| h2 { | ||
| margin: 2.5rem auto; | ||
| } | ||
| h3 { | ||
| margin: 1.5rem auto; | ||
| } | ||
|
|
||
| // ** ANGULAR MATERIAL STYLING | ||
|
|
||
| .mat-list-base { | ||
| background-color: #3F51B5; | ||
| } | ||
| .mat-list-base.list .mat-list-item { | ||
| display: flex; | ||
| border-top: 1px solid rgba(242, 242, 242, 0.25); | ||
| color: white; | ||
| } |
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
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
Oops, something went wrong.