s426135/session-companion
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

added pointer class, updated mockup character list

Browse Source
This commit is contained in:
Natalia Gawron 2020-12-28 13:38:45 +01:00
parent 7e083c3024
commit d61c3f620f
6 changed files with 69 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
SessionCompanion/SessionCompanion/ClientApp/src/app/components/registration/registration.component.html
View File

@ -1,6 +1,6 @@
<div [formGroup]="signUpFormGroup" class="container">
<div formGroupName="newAccount" class="container">
<mat-icon matSuffix class="arrow-back" (click)="GoToLoginPage()">arrow_back</mat-icon>
<mat-icon matSuffix class="arrow-back arrow-select" (click)="GoToLoginPage()">arrow_back</mat-icon>
<div class="primary-text header">Create an Account</div>
<mat-form-field class="form-container">

4
SessionCompanion/SessionCompanion/ClientApp/src/app/components/select-character/select-character.component.css
View File

@ -47,10 +47,6 @@ input {
font-size: 20px;
}
.align-to-right {
text-align: right;
}
@media (max-width: 400px) {
.container {
margin-left: 0%;

24
SessionCompanion/SessionCompanion/ClientApp/src/app/components/select-character/select-character.component.html
View File

@ -1,21 +1,15 @@
<div class="container">
<mat-icon matSuffix class="arrow-back" (click)="onArrowBackClick()">arrow_back</mat-icon>
<mat-icon matSuffix class="arrow-back arrow-select" (click)="onArrowBackClick()">arrow_back</mat-icon>
<div class="primary-text header">Select character</div>
<mat-list >
<mat-list>
<mat-divider></mat-divider>
<mat-list-item> Oweja
<mat-icon matSuffix class="arrow-forward align-to-right" (click)="onCharacterClick()">arrow_forward</mat-icon>
<mat-list-item *ngFor="let character of characters">
<mat-icon mat-list-icon>account_circle</mat-icon>
<div mat-line>{{character.name}}</div>
<mat-icon matSuffix class="arrow-forward arrow-select" (click)="onCharacterClick()">arrow_forward</mat-icon>
<div mat-line> {{character.className}} level: {{character.level}}</div>
<mat-divider></mat-divider>
</mat-list-item>
<mat-divider></mat-divider>
<mat-list-item> James
<mat-icon matSuffix class="arrow-forward align-to-right" (click)="onCharacterClick()">arrow_forward</mat-icon>
</mat-list-item>
<mat-divider></mat-divider>
<mat-list-item> Legolas
<mat-icon matSuffix class="arrow-forward align-to-right" (click)="onCharacterClick()">arrow_forward</mat-icon>
</mat-list-item>
<mat-divider></mat-divider>
</mat-list>
</mat-list>
</div>

55
SessionCompanion/SessionCompanion/ClientApp/src/app/components/select-character/select-character.component.ts
View File

@ -1,12 +1,66 @@
import { Component } from '@angular/core';
import { Router } from '@angular/router';
export interface Section {
name: string;
className: string;
level: number;
}
@Component({
selector: 'app-select-character',
templateUrl: './select-character.component.html',
styleUrls: ['./select-character.component.css']
})
export class SelectCharacterComponent {
characters: Section[] = [
{
name: 'Oweja',
className: 'warrior',
level: 1,
},
{
name: 'James',
className: 'warrior',
level: 2,
},
{
name: 'Legolas',
className: 'warrior',
level: 3,
},
{
name: 'Oweja',
className: 'warrior',
level: 1,
},
{
name: 'James',
className: 'warrior',
level: 2,
},
{
name: 'Legolas',
className: 'warrior',
level: 3,
},
{
name: 'Oweja',
className: 'warrior',
level: 1,
},
{
name: 'James',
className: 'warrior',
level: 2,
},
{
name: 'Legolas',
className: 'warrior',
level: 3,
}
];
isExpanded = false;
collapse() {
@ -27,4 +81,3 @@ export class SelectCharacterComponent {
this.router.navigate(['login'])
}
}

2
SessionCompanion/SessionCompanion/ClientApp/src/app/components/sign-in/sign-in.component.html
View File

@ -1,6 +1,6 @@
<div [formGroup]="signInFormGroup" class="container">
<div formGroupName="signIn" class="container">
<mat-icon matSuffix class="arrow-back" (click)="onArrowBackClick()">arrow_back</mat-icon>
<mat-icon matSuffix class="arrow-back arrow-select" (click)="onArrowBackClick()">arrow_back</mat-icon>
<div id="SignInText" class="primary-text header">Sign In</div>
<mat-form-field class="form-container">

4
SessionCompanion/SessionCompanion/ClientApp/src/styles.css
View File

@ -73,6 +73,10 @@ mat-divider {
border-top-color: #e9cca7 !important;
}
.arrow-select {
cursor: pointer;
}
html,
body {
height: 100%;