Changement de style de la page des

stats résumées
This commit is contained in:
Sébastien André
2020-04-05 13:32:52 +02:00
parent 8dcc2bd0b4
commit 9455b543c1
3 changed files with 99 additions and 161 deletions

View File

@@ -1,22 +1,3 @@
<!-- <div class="col-md-4 offset-md-4 mt-5">
<div class="card">
<h4 class="card-header">Login to the Skydive log</h4>
<div class="card-body">
<mat-tab-group mat-align-tabs="center" animationDuration="0ms">
<mat-tab label="Login with a user">
<app-login-user></app-login-user>
</mat-tab>
<mat-tab label="Create and login a user">
<app-create-user></app-create-user>
</mat-tab>
</mat-tab-group>
</div>
</div>
</div> -->
<mat-card style="max-width: 500px;"> <mat-card style="max-width: 500px;">
<mat-card-header> <mat-card-header>
<mat-card-title>Login to the Skydive log</mat-card-title> <mat-card-title>Login to the Skydive log</mat-card-title>

View File

@@ -13,21 +13,9 @@
<span>: {{ lastJump }}</span> <span>: {{ lastJump }}</span>
</div> </div>
<div style="clear: both; display: flex; flex-direction: row; flex-wrap: wrap; margin-top: 15px;"> <mat-tab-group mat-align-tabs="left" animationDuration="0ms">
<label (click)="showStats(1)" [ngClass]="statsToShow(1) ? 'labelTab selected': 'labelTab'">Jumps in the last <mat-tab label="Jumps in the last month">
month</label> <table mat-table [dataSource]="dsJumpForLastMonthByDz">
<label (click)="showStats(2)" [ngClass]="statsToShow(2) ? 'labelTab selected': 'labelTab'">Jumps in the last
year</label>
<label (click)="showStats(3)" [ngClass]="statsToShow(3) ? 'labelTab selected': 'labelTab'">By DZ</label>
<label (click)="showStats(4)" [ngClass]="statsToShow(4) ? 'labelTab selected': 'labelTab'">By aircraft</label>
<label (click)="showStats(5)" [ngClass]="statsToShow(5) ? 'labelTab selected': 'labelTab'">By gear</label>
<label (click)="showStats(6)" [ngClass]="statsToShow(6) ? 'labelTab selected': 'labelTab'">By jump type</label>
<label (click)="showStats(7)" [ngClass]="statsToShow(7) ? 'labelTab selected': 'labelTab'">By year</label>
</div>
<div *ngIf="statsToShow(1)">
<table mat-table [dataSource]="dsJumpForLastMonthByDz"
*ngIf="dsJumpForLastMonthByDz != null else loadingDsJumpForLastMonthByDz">
<ng-container matColumnDef="label"> <ng-container matColumnDef="label">
<td mat-cell *matCellDef="let element">{{element.label}}</td> <td mat-cell *matCellDef="let element">{{element.label}}</td>
</ng-container> </ng-container>
@@ -36,12 +24,7 @@
</ng-container> </ng-container>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table> </table>
<ng-template #loadingDsJumpForLastMonthByDz> <table mat-table [dataSource]="dsJumpForLastMonthByJumpType">
<mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
</ng-template>
<table mat-table [dataSource]="dsJumpForLastMonthByJumpType"
*ngIf="dsJumpForLastMonthByJumpType != null else loadingDsJumpForLastMonthByJumpType">
<ng-container matColumnDef="label"> <ng-container matColumnDef="label">
<td mat-cell *matCellDef="let element">{{element.label}}</td> <td mat-cell *matCellDef="let element">{{element.label}}</td>
</ng-container> </ng-container>
@@ -50,14 +33,10 @@
</ng-container> </ng-container>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table> </table>
<ng-template #loadingDsJumpForLastMonthByJumpType> </mat-tab>
<mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
</ng-template>
</div>
<div *ngIf="statsToShow(2)"> <mat-tab label="Jumps in the last year">
<table mat-table [dataSource]="dsJumpForLastYearByDz" <table mat-table [dataSource]="dsJumpForLastYearByDz">
*ngIf="dsJumpForLastYearByDz != null else loadingDsJumpForLastYearByDz">
<ng-container matColumnDef="label"> <ng-container matColumnDef="label">
<td mat-cell *matCellDef="let element">{{element.label}}</td> <td mat-cell *matCellDef="let element">{{element.label}}</td>
</ng-container> </ng-container>
@@ -66,12 +45,7 @@
</ng-container> </ng-container>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table> </table>
<ng-template #loadingDsJumpForLastYearByDz> <table mat-table [dataSource]="dsJumpForLastYearByJumpType">
<mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
</ng-template>
<table mat-table [dataSource]="dsJumpForLastYearByJumpType"
*ngIf="dsJumpForLastYearByJumpType != null else loadingDsJumpForLastYearByJumpType">
<ng-container matColumnDef="label"> <ng-container matColumnDef="label">
<td mat-cell *matCellDef="let element">{{element.label}}</td> <td mat-cell *matCellDef="let element">{{element.label}}</td>
</ng-container> </ng-container>
@@ -80,13 +54,10 @@
</ng-container> </ng-container>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table> </table>
<ng-template #loadingDsJumpForLastYearByJumpType> </mat-tab>
<mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
</ng-template>
</div>
<div *ngIf="statsToShow(3)"> <mat-tab label="By DZ">
<table mat-table [dataSource]="dsNbJumpByDz" *ngIf="dsNbJumpByDz != null else loadingDsNbJumpByDz"> <table mat-table [dataSource]="dsNbJumpByDz">
<ng-container matColumnDef="label"> <ng-container matColumnDef="label">
<td mat-cell *matCellDef="let element">{{element.label}}</td> <td mat-cell *matCellDef="let element">{{element.label}}</td>
</ng-container> </ng-container>
@@ -95,13 +66,10 @@
</ng-container> </ng-container>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table> </table>
<ng-template #loadingDsNbJumpByDz> </mat-tab>
<mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
</ng-template>
</div>
<div *ngIf="statsToShow(4)"> <mat-tab label="By aircraft">
<table mat-table [dataSource]="dsNbJumpByAircraft" *ngIf="dsNbJumpByAircraft != null else loadingDsNbJumpByAircraft"> <table mat-table [dataSource]="dsNbJumpByAircraft">
<ng-container matColumnDef="label"> <ng-container matColumnDef="label">
<td mat-cell *matCellDef="let element">{{element.label}}</td> <td mat-cell *matCellDef="let element">{{element.label}}</td>
</ng-container> </ng-container>
@@ -110,13 +78,10 @@
</ng-container> </ng-container>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table> </table>
<ng-template #loadingDsNbJumpByAircraft> </mat-tab>
<mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
</ng-template>
</div>
<div *ngIf="statsToShow(5)"> <mat-tab label="By gear">
<table mat-table [dataSource]="dsNbJumpByGear" *ngIf="dsNbJumpByGear != null else loadingDsNbJumpByGear"> <table mat-table [dataSource]="dsNbJumpByGear">
<ng-container matColumnDef="label"> <ng-container matColumnDef="label">
<td mat-cell *matCellDef="let element">{{element.label}}</td> <td mat-cell *matCellDef="let element">{{element.label}}</td>
</ng-container> </ng-container>
@@ -125,13 +90,10 @@
</ng-container> </ng-container>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table> </table>
<ng-template #loadingDsNbJumpByGear> </mat-tab>
<mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
</ng-template>
</div>
<div *ngIf="statsToShow(6)"> <mat-tab label="By jump type">
<table mat-table [dataSource]="dsNbJumpByType" *ngIf="dsNbJumpByType != null else loadingDsNbJumpByType"> <table mat-table [dataSource]="dsNbJumpByType">
<ng-container matColumnDef="label"> <ng-container matColumnDef="label">
<td mat-cell *matCellDef="let element">{{element.label}}</td> <td mat-cell *matCellDef="let element">{{element.label}}</td>
</ng-container> </ng-container>
@@ -140,13 +102,10 @@
</ng-container> </ng-container>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table> </table>
<ng-template #loadingDsNbJumpByType> </mat-tab>
<mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
</ng-template>
</div>
<div *ngIf="statsToShow(7)"> <mat-tab label="By year">
<table mat-table [dataSource]="dsNbJumpByYear" *ngIf="dsNbJumpByYear != null else loadingDsNbJumpByYear"> <table mat-table [dataSource]="dsNbJumpByYear">
<ng-container matColumnDef="label"> <ng-container matColumnDef="label">
<td mat-cell *matCellDef="let element">{{element.label}}</td> <td mat-cell *matCellDef="let element">{{element.label}}</td>
</ng-container> </ng-container>
@@ -155,7 +114,5 @@
</ng-container> </ng-container>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table> </table>
<ng-template #loadingDsNbJumpByYear> </mat-tab>
<mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner> </mat-tab-group>
</ng-template>
</div>

View File

@@ -1,4 +1,4 @@
@import 'bootstrap-4.3.1.min.css'; /* @import 'bootstrap-4.3.1.min.css'; */
html, html,
body { body {
@@ -6,7 +6,7 @@ body {
} }
body { body {
/* font-family: Roboto, "Helvetica Neue", sans-serif; */ font-family: Roboto, "Helvetica Neue", sans-serif;
margin: 10px; margin: 10px;
color: #424242; color: #424242;
min-height: 665px; min-height: 665px;