toolbar is really fixed now
Max
5 years ago
parent
7f384ec926
commit
6b260594e1
@ -1,105 +1,107 @@
|
||||
<mat-toolbar color="primary">Profile</mat-toolbar>
|
||||
<div id="profile">
|
||||
<div id="profilecontainer" [hidden]="profileNotFound">
|
||||
<div id="profile-card-container">
|
||||
<mat-card class="mat-elevation-z8">
|
||||
<mat-card-header>
|
||||
<div mat-card-avatar class="profile-picture"></div>
|
||||
<mat-card-title>{{user.username}}</mat-card-title>
|
||||
<mat-card-subtitle>{{user.handle}}</mat-card-subtitle>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<table id="profile-table">
|
||||
<tr>
|
||||
<div class="mat-header-cell">name: </div>
|
||||
<td>{{user.username}}</td>
|
||||
</tr>
|
||||
<mat-divider></mat-divider>
|
||||
<tr>
|
||||
<div class="mat-header-cell">handle: </div>
|
||||
<td>{{user.handle}}</td>
|
||||
</tr>
|
||||
<mat-divider></mat-divider>
|
||||
<tr>
|
||||
<div class="mat-header-cell">profileID: </div>
|
||||
<td>{{user.userID}}</td>
|
||||
</tr>
|
||||
<mat-divider></mat-divider>
|
||||
<tr>
|
||||
<div class="mat-header-cell">points: </div>
|
||||
<td>{{user.points}}</td>
|
||||
</tr>
|
||||
<mat-divider></mat-divider>
|
||||
<tr>
|
||||
<div class="mat-header-cell">level: </div>
|
||||
<td>{{user.level}}</td>
|
||||
</tr>
|
||||
<mat-divider></mat-divider>
|
||||
<tr>
|
||||
<div class="mat-header-cell">level name: </div>
|
||||
<td>{{rankname}}</td>
|
||||
</tr>
|
||||
</table>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
<br>
|
||||
<h1>What does the level mean?</h1>
|
||||
<p>There are different levels you can reach through green behaviour.
|
||||
Collect 100 points to level up! The levels are called:
|
||||
</p>
|
||||
<table mat-table [dataSource]="levelSource" class="mat-elevation-z8">
|
||||
<ng-container matColumnDef="level">
|
||||
<th mat-header-cell *matHeaderCellDef> level </th>
|
||||
<td mat-cell *matCellDef="let level"> {{level.level}} </td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="name">
|
||||
<th mat-header-cell *matHeaderCellDef> level name </th>
|
||||
<td mat-cell *matCellDef="let level"> {{level.name}} </td>
|
||||
</ng-container>
|
||||
<tr mat-header-row *matHeaderRowDef="displayedLevelColumns"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedLevelColumns;"></tr>
|
||||
</table>
|
||||
<div id="profile-page">
|
||||
<mat-toolbar color="primary">Profile</mat-toolbar>
|
||||
<div id="profile">
|
||||
<div id="profilecontainer" [hidden]="profileNotFound">
|
||||
<div id="profile-card-container">
|
||||
<mat-card class="mat-elevation-z8">
|
||||
<mat-card-header>
|
||||
<div mat-card-avatar class="profile-picture"></div>
|
||||
<mat-card-title>{{user.username}}</mat-card-title>
|
||||
<mat-card-subtitle>{{user.handle}}</mat-card-subtitle>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<table id="profile-table">
|
||||
<tr>
|
||||
<div class="mat-header-cell">name: </div>
|
||||
<td>{{user.username}}</td>
|
||||
</tr>
|
||||
<mat-divider></mat-divider>
|
||||
<tr>
|
||||
<div class="mat-header-cell">handle: </div>
|
||||
<td>{{user.handle}}</td>
|
||||
</tr>
|
||||
<mat-divider></mat-divider>
|
||||
<tr>
|
||||
<div class="mat-header-cell">profileID: </div>
|
||||
<td>{{user.userID}}</td>
|
||||
</tr>
|
||||
<mat-divider></mat-divider>
|
||||
<tr>
|
||||
<div class="mat-header-cell">points: </div>
|
||||
<td>{{user.points}}</td>
|
||||
</tr>
|
||||
<mat-divider></mat-divider>
|
||||
<tr>
|
||||
<div class="mat-header-cell">level: </div>
|
||||
<td>{{user.level}}</td>
|
||||
</tr>
|
||||
<mat-divider></mat-divider>
|
||||
<tr>
|
||||
<div class="mat-header-cell">level name: </div>
|
||||
<td>{{rankname}}</td>
|
||||
</tr>
|
||||
</table>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
<br>
|
||||
<h1>How to level up?</h1>
|
||||
<p>There is an always growing list of things you can do,
|
||||
to support your environment
|
||||
and earn points to level up at the same time.
|
||||
You can get a different amount of points
|
||||
for differnet actions you can see in the list below:
|
||||
</p>
|
||||
<table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
|
||||
<!--- Note that these columns can be defined in any order.
|
||||
The actual rendered columns are set as a property on the row definition" -->
|
||||
|
||||
<!-- Position Column -->
|
||||
<ng-container matColumnDef="points">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header> points </th>
|
||||
<td mat-cell *matCellDef="let action"> {{action.points}} </td>
|
||||
</ng-container>
|
||||
<h1>What does the level mean?</h1>
|
||||
<p>There are different levels you can reach through green behaviour.
|
||||
Collect 100 points to level up! The levels are called:
|
||||
</p>
|
||||
<table mat-table [dataSource]="levelSource" class="mat-elevation-z8">
|
||||
<ng-container matColumnDef="level">
|
||||
<th mat-header-cell *matHeaderCellDef> level </th>
|
||||
<td mat-cell *matCellDef="let level"> {{level.level}} </td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="name">
|
||||
<th mat-header-cell *matHeaderCellDef> level name </th>
|
||||
<td mat-cell *matCellDef="let level"> {{level.name}} </td>
|
||||
</ng-container>
|
||||
<tr mat-header-row *matHeaderRowDef="displayedLevelColumns"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedLevelColumns;"></tr>
|
||||
</table>
|
||||
<br>
|
||||
<h1>How to level up?</h1>
|
||||
<p>There is an always growing list of things you can do,
|
||||
to support your environment
|
||||
and earn points to level up at the same time.
|
||||
You can get a different amount of points
|
||||
for differnet actions you can see in the list below:
|
||||
</p>
|
||||
<table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
|
||||
<!--- Note that these columns can be defined in any order.
|
||||
The actual rendered columns are set as a property on the row definition" -->
|
||||
|
||||
<!-- Position Column -->
|
||||
<ng-container matColumnDef="points">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header> points </th>
|
||||
<td mat-cell *matCellDef="let action"> {{action.points}} </td>
|
||||
</ng-container>
|
||||
|
||||
<!-- Name Column -->
|
||||
<ng-container matColumnDef="name">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header> action </th>
|
||||
<td mat-cell *matCellDef="let action"> {{action.name}} </td>
|
||||
</ng-container>
|
||||
<!-- Name Column -->
|
||||
<ng-container matColumnDef="name">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header> action </th>
|
||||
<td mat-cell *matCellDef="let action"> {{action.name}} </td>
|
||||
</ng-container>
|
||||
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
||||
</table>
|
||||
<!--<table style="width:100%">
|
||||
<tr>
|
||||
<th>points </th>
|
||||
<th>action</th>
|
||||
</tr>
|
||||
<tr *ngFor= "let action of actionlist.actions">
|
||||
<td>{{action.points}}</td>
|
||||
<td>{{action.name}}</td>
|
||||
</tr>
|
||||
</table>-->
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
||||
</table>
|
||||
<!--<table style="width:100%">
|
||||
<tr>
|
||||
<th>points </th>
|
||||
<th>action</th>
|
||||
</tr>
|
||||
<tr *ngFor= "let action of actionlist.actions">
|
||||
<td>{{action.points}}</td>
|
||||
<td>{{action.name}}</td>
|
||||
</tr>
|
||||
</table>-->
|
||||
</div>
|
||||
<div id="profilecontainer" *ngIf="profileNotFound">
|
||||
<h1>Profile not found :(</h1>
|
||||
</div>
|
||||
<div id="profilecontainer" *ngIf="profileNotFound">
|
||||
<h1>Profile not found :(</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue