Changement général pour avoir une bonne

hauteur et largeur sur toutes les pages

Front/skydivelogs-app/src/app/app.component.css

@@ -1,6 +1,5 @@
 .hamburger__icon {
   position: relative;
-  /* z-index: 101; */
   height: 1rem;
   margin-right: 1rem;
   cursor: pointer;
@@ -18,9 +17,7 @@
 .navigation {
   position: absolute;
   width: 200px;
-  /* height: 650px;
-  overflow: hidden; */
-  height: 100%;
+  /* height: 100%; */
   z-index: 101;
   background-color: grey;
   padding: 5px;

Front/skydivelogs-app/src/app/default/default.component.css

@@ -0,0 +1,7 @@
+.content {
+  height: 90vh;
+  display: flex;
+  justify-content: left;
+  flex-direction: column;
+  align-items: initial;
+}

Front/skydivelogs-app/src/app/default/default.component.html

@@ -1,10 +1,12 @@
-<p>
+<div class="content">
+  <p>
     <a routerLink="/summary" routerLinkActive="active" skipLocationChange>
       <img src="../../assets/img/summary.png" alt="Summary of jumps">
     </a>
-</p>
-<p>
+  </p>
+  <p>
     <a routerLink="/newjump" routerLinkActive="active" skipLocationChange>
       <img src="../../assets/img/addJump.png" alt="Add new jumps">
     </a>
-</p>
+  </p>
+</div>

Front/skydivelogs-app/src/app/list-of-aircrafts/list-of-aircrafts.component.css

@@ -11,3 +11,11 @@ table {
   min-width: 200px;
   word-wrap: break-word;
 }
+
+.content {
+  height: 90vh;
+  display: flex;
+  justify-content: left;
+  flex-direction: column;
+  align-items: initial;
+}

Front/skydivelogs-app/src/app/list-of-aircrafts/list-of-aircrafts.component.html

@@ -1,4 +1,4 @@
-<div *ngIf="dataSourceTable != null else loading" class="table-container">
+<div *ngIf="dataSourceTable != null else loading">
   <button mat-raised-button color="accent" (click)="openDialogToAdd()">Add a aircraft</button>
 
   <table mat-table [dataSource]="dataSourceTable">

Front/skydivelogs-app/src/app/list-of-dzs/list-of-dzs.component.css

@@ -11,3 +11,11 @@ table {
   min-width: 200px;
   word-wrap: break-word;
 }
+
+.content {
+  height: 90vh;
+  display: flex;
+  justify-content: left;
+  flex-direction: column;
+  align-items: initial;
+}

Front/skydivelogs-app/src/app/list-of-dzs/list-of-dzs.component.html

@@ -1,4 +1,5 @@
-<div *ngIf="dataSourceTable != null else loading" class="table-container">
+<div class="content">
+  <div *ngIf="dataSourceTable != null else loading">
     <button mat-raised-button color="accent" (click)="openDialogToAdd()">Add a drop zone</button>
 
     <table mat-table [dataSource]="dataSourceTable">
@@ -52,9 +53,10 @@
       <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
       <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
     </table>
-</div>
-<mat-paginator [length]="resultsLength" [pageSize]="20"></mat-paginator>
+  </div>
+  <mat-paginator [length]="resultsLength" [pageSize]="20"></mat-paginator>
 
-<ng-template #loading>
+  <ng-template #loading>
     <mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
-</ng-template>
+  </ng-template>
+</div>

Front/skydivelogs-app/src/app/list-of-gears/list-of-gears.component.css

@@ -11,3 +11,11 @@ table {
   min-width: 200px;
   word-wrap: break-word;
 }
+
+.content {
+  height: 90vh;
+  display: flex;
+  justify-content: left;
+  flex-direction: column;
+  align-items: initial;
+}

Front/skydivelogs-app/src/app/list-of-gears/list-of-gears.component.html

@@ -1,4 +1,5 @@
-<div *ngIf="dataSourceTable != null else loading" class="table-container">
+<div class="content">
+  <div *ngIf="dataSourceTable != null else loading">
     <button mat-raised-button color="accent" (click)="openDialogToAdd()">Add a gear</button>
 
     <table mat-table [dataSource]="dataSourceTable">
@@ -40,9 +41,10 @@
       <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
       <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
     </table>
-</div>
-<mat-paginator [length]="resultsLength" [pageSize]="10"></mat-paginator>
+  </div>
+  <mat-paginator [length]="resultsLength" [pageSize]="10"></mat-paginator>
 
-<ng-template #loading>
+  <ng-template #loading>
     <mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
-</ng-template>
+  </ng-template>
+</div>

Front/skydivelogs-app/src/app/list-of-jump-types/list-of-jump-types.component.css

@@ -11,3 +11,11 @@ table {
   min-width: 200px;
   word-wrap: break-word;
 }
+
+.content {
+  height: 90vh;
+  display: flex;
+  justify-content: left;
+  flex-direction: column;
+  align-items: initial;
+}

Front/skydivelogs-app/src/app/list-of-jump-types/list-of-jump-types.component.html

@@ -1,4 +1,4 @@
-<div *ngIf="dataSourceTable != null else loading" class="table-container">
+<div *ngIf="dataSourceTable != null else loading">
   <button mat-raised-button color="accent" (click)="openDialogToAdd()">Add a jump type</button>
 
   <table mat-table [dataSource]="dataSourceTable">

Front/skydivelogs-app/src/app/list-of-jumps/list-of-jumps.component.css

@@ -17,3 +17,11 @@ table {
   min-width: 50px;
   word-wrap: break-word;
 }
+
+.content {
+  height: 90vh;
+  display: flex;
+  justify-content: left;
+  flex-direction: column;
+  align-items: initial;
+}

Front/skydivelogs-app/src/app/list-of-jumps/list-of-jumps.component.html

@@ -1,4 +1,5 @@
-<div *ngIf="dataSourceTable != null else loading" class="table-container">
+<div class="content">
+  <div *ngIf="dataSourceTable != null else loading">
     <table mat-table [dataSource]="dataSourceTable">
       <ng-container matColumnDef="id">
         <th mat-header-cell *matHeaderCellDef>ID</th>
@@ -41,9 +42,10 @@
       <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
       <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
     </table>
-</div>
-<mat-paginator [length]="resultsLength" [pageSize]="10"></mat-paginator>
+  </div>
+  <mat-paginator [length]="resultsLength" [pageSize]="10"></mat-paginator>
 
-<ng-template #loading>
+  <ng-template #loading>
     <mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
-</ng-template>
+  </ng-template>
+</div>

Front/skydivelogs-app/src/app/login/login.component.css

@@ -1,5 +1,5 @@
-.main-div {
-  height: 100vh;
+.content {
+  height: 90vh;
   display: flex;
   justify-content: center;
   align-items: center;

Front/skydivelogs-app/src/app/login/login.component.html

@@ -1,4 +1,4 @@
-<div class="main-div">
+<div class="content">
   <mat-card style="max-width: 500px;" flex="50">
     <mat-card-header style="padding:10px; background-color: rgba(0,0,0,.03);">
       <mat-card-title>Login to the Skydive log</mat-card-title>

Front/skydivelogs-app/src/app/new-aircraft/new-aircraft.component.css

@@ -1 +1,7 @@
-
+.content {
+  height: 90vh;
+  display: flex;
+  justify-content: left;
+  flex-direction: column;
+  align-items: initial;
+}

Front/skydivelogs-app/src/app/new-aircraft/new-aircraft.component.html

@@ -1,4 +1,5 @@
-<form [formGroup]="addForm" (ngSubmit)="onSubmit(addForm.value)">
+<div class="content">
+  <form [formGroup]="addForm" (ngSubmit)="onSubmit(addForm.value)">
     <p>
       <mat-form-field>
         <mat-label>Aircraft name</mat-label>
@@ -7,4 +8,5 @@
     </p>
 
     <button type="submit" mat-raised-button color="accent">Add</button>
-</form>
+  </form>
+</div>

Front/skydivelogs-app/src/app/new-drop-zone/new-drop-zone.component.css

@@ -1 +1,7 @@
-
+.content {
+  height: 90vh;
+  display: flex;
+  justify-content: left;
+  flex-direction: column;
+  align-items: initial;
+}

Front/skydivelogs-app/src/app/new-drop-zone/new-drop-zone.component.html

@@ -1,4 +1,5 @@
-<form [formGroup]="addForm" (ngSubmit)="onSubmit(addForm.value)">
+<div class="content">
+  <form [formGroup]="addForm" (ngSubmit)="onSubmit(addForm.value)">
     <p>
       <mat-form-field>
         <mat-label>Dropzone name</mat-label>
@@ -37,4 +38,5 @@
     </p>
 
     <button type="submit" mat-raised-button color="accent">Add</button>
-</form>
+  </form>
+</div>

Front/skydivelogs-app/src/app/new-gear/new-gear.component.css

@@ -1 +1,7 @@
-
+.content {
+  height: 90vh;
+  display: flex;
+  justify-content: left;
+  flex-direction: column;
+  align-items: initial;
+}

Front/skydivelogs-app/src/app/new-gear/new-gear.component.html

@@ -1,4 +1,5 @@
-<form [formGroup]="addForm" (ngSubmit)="onSubmit(addForm.value)">
+<div class="content">
+  <form [formGroup]="addForm" (ngSubmit)="onSubmit(addForm.value)">
     <p>
       <mat-form-field>
         <mat-label>Name of gear</mat-label>
@@ -43,4 +44,5 @@
     </p>
 
     <button mat-raised-button color="accent" type="submit">Add</button>
-</form>
+  </form>
+</div>

Front/skydivelogs-app/src/app/new-jump-type/new-jump-type.component.css

@@ -1 +1,7 @@
-
+.content {
+  height: 90vh;
+  display: flex;
+  justify-content: left;
+  flex-direction: column;
+  align-items: initial;
+}

Front/skydivelogs-app/src/app/new-jump-type/new-jump-type.component.html

@@ -1,4 +1,5 @@
-<form [formGroup]="addForm" (ngSubmit)="onSubmit(addForm.value)">
+<div class="content">
+  <form [formGroup]="addForm" (ngSubmit)="onSubmit(addForm.value)">
     <p>
       <mat-form-field>
         <mat-label>Jump type name</mat-label>
@@ -7,4 +8,5 @@
     </p>
 
     <button type="submit" mat-raised-button color="accent">Add</button>
-</form>
+  </form>
+</div>

Front/skydivelogs-app/src/app/new-jump/new-jump.component.css

@@ -12,3 +12,11 @@
 .formNewJumps>* {
   width: 100%;
 }
+
+.content {
+  height: 90vh;
+  display: flex;
+  justify-content: left;
+  flex-direction: column;
+  align-items: initial;
+}

Front/skydivelogs-app/src/app/new-jump/new-jump.component.html

@@ -1,7 +1,9 @@
-<form class="formNewJumps" (ngSubmit)="onFormSubmit()" *ngIf="allDatasLoaded() else loading">
+<div class="content">
+  <form class="formNewJumps" (ngSubmit)="onFormSubmit()" *ngIf="allDatasLoaded() else loading">
     <mat-form-field>
       <mat-label>Choose the jump type</mat-label>
-    <input type="text" matInput [matAutocomplete]="autoJumpType" [(ngModel)]="selectedJumpType" name="selectedJumpType">
+      <input type="text" matInput [matAutocomplete]="autoJumpType" [(ngModel)]="selectedJumpType"
+        name="selectedJumpType">
       <mat-autocomplete #autoJumpType="matAutocomplete" [displayWith]="displayFn">
         <mat-option *ngFor="let jumpType of listOfJumpType" [value]="jumpType">
           {{jumpType.name}}
@@ -15,7 +17,8 @@
 
     <mat-form-field>
       <mat-label>Choose the aircraft</mat-label>
-    <input type="text" matInput [matAutocomplete]="autoAircraft" [(ngModel)]="selectedAircraft" name="selectedAircraft">
+      <input type="text" matInput [matAutocomplete]="autoAircraft" [(ngModel)]="selectedAircraft"
+        name="selectedAircraft">
       <mat-autocomplete #autoAircraft="matAutocomplete" [displayWith]="displayFn">
         <mat-option *ngFor="let aircraft of listOfAircraft" [value]="aircraft">
           {{aircraft.name}}
@@ -96,8 +99,9 @@
 
     <br />
     <button mat-button *ngIf="isValidatedForm()">Submit</button>
-</form>
+  </form>
 
-<ng-template #loading>
+  <ng-template #loading>
     <mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
-</ng-template>
+  </ng-template>
+</div>

Front/skydivelogs-app/src/app/summary/summary.component.css

@@ -13,3 +13,11 @@
 .labelTab.selected {
   background-color: gray !important;
 }
+
+.content {
+  height: 90vh;
+  display: flex;
+  justify-content: left;
+  flex-direction: column;
+  align-items: initial;
+}

Front/skydivelogs-app/src/app/summary/summary.component.html

@@ -1,19 +1,20 @@
-<div>
+<div class="content">
+  <div>
     <label style="float: left; width: 130px;">Total jumps</label>
     <span>: {{ totalJumps }}</span>
-</div>
+  </div>
 
-<div>
+  <div>
     <label style="clear: both; float: left; width: 130px;">Total cutaways</label>
     <span>: {{ totalCutaways }}</span>
-</div>
+  </div>
 
-<div>
+  <div>
     <label style="clear: both; float: left; width: 130px;">Last jump</label>
     <span>: {{ lastJump }}</span>
-</div>
+  </div>
 
-<mat-tab-group mat-align-tabs="left" animationDuration="0ms">
+  <mat-tab-group mat-align-tabs="left" animationDuration="0ms">
     <mat-tab label="Jumps in the last month">
       <table mat-table [dataSource]="dsJumpForLastMonthByDz">
         <ng-container matColumnDef="label">
@@ -115,4 +116,5 @@
         <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
       </table>
     </mat-tab>
-</mat-tab-group>
+  </mat-tab-group>
+</div>

Front/skydivelogs-app/src/app/user-profile/user-profile.component.css

@@ -0,0 +1,7 @@
+.content {
+  height: 90vh;
+  display: flex;
+  justify-content: left;
+  flex-direction: column;
+  align-items: initial;
+}

Front/skydivelogs-app/src/app/user-profile/user-profile.component.html

@@ -1,4 +1,5 @@
-<form [formGroup]="userForm" (ngSubmit)="onSubmit(userForm.value)">
+<div class="content">
+  <form [formGroup]="userForm" (ngSubmit)="onSubmit(userForm.value)">
     <p>
       <mat-form-field>
         <mat-label>Login</mat-label>
@@ -38,4 +39,5 @@
     </p>
 
     <button type="submit" mat-raised-button color="accent">Update my profile</button>
-</form>
+  </form>
+</div>

Front/skydivelogs-app/src/assets/css/styles.css

@@ -2,15 +2,15 @@
 
 html,
 body {
-  height: 100%;
+  /* height: 100%; */
+  height: 100vh;
+  width: 100vw;
+  box-sizing: border-box;
 }
 
 body {
   font-family: Roboto, "Helvetica Neue", sans-serif;
   color: #424242;
-  /* min-height: 665px;
-  margin: 10px;
-  overflow: auto; */
   margin: 0;
   padding: 10px;
 }

Front/skydivelogs-app/src/environments/environment.prod.ts

@@ -2,5 +2,5 @@ export const environment = {
   production: true,
   apiUrl: "https://divelog.sebastienandre.com",
   debugMode: false,
-  version: "0.5.0"
+  version: "0.6.0",
 };

Front/skydivelogs-app/src/environments/environment.ts

@@ -7,5 +7,5 @@ export const environment = {
   production: false,
   apiUrl: "http://localhost:5000",
   debugMode: false,
-  version: "0.5.0"
+  version: "0.6.0",
 };