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;
+  /* height: 100%; */
-  overflow: hidden; */
-  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,3 +1,4 @@
+<div class="content">
   <p>
     <a routerLink="/summary" routerLinkActive="active" skipLocationChange>
       <img src="../../assets/img/summary.png" alt="Summary of jumps">
@@ -8,3 +9,4 @@
       <img src="../../assets/img/addJump.png" alt="Add new jumps">
     </a>
   </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">
@@ -58,3 +59,4 @@
   <ng-template #loading>
     <mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
   </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">
@@ -46,3 +47,4 @@
   <ng-template #loading>
     <mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
   </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>
@@ -47,3 +48,4 @@
   <ng-template #loading>
     <mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
   </ng-template>
+</div>

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

@@ -1,5 +1,5 @@
-.main-div {
+.content {
-  height: 100vh;
+  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,3 +1,4 @@
+<div class="content">
   <form [formGroup]="addForm" (ngSubmit)="onSubmit(addForm.value)">
     <p>
       <mat-form-field>
@@ -8,3 +9,4 @@
 
     <button type="submit" mat-raised-button color="accent">Add</button>
   </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,3 +1,4 @@
+<div class="content">
   <form [formGroup]="addForm" (ngSubmit)="onSubmit(addForm.value)">
     <p>
       <mat-form-field>
@@ -38,3 +39,4 @@
 
     <button type="submit" mat-raised-button color="accent">Add</button>
   </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,3 +1,4 @@
+<div class="content">
   <form [formGroup]="addForm" (ngSubmit)="onSubmit(addForm.value)">
     <p>
       <mat-form-field>
@@ -44,3 +45,4 @@
 
     <button mat-raised-button color="accent" type="submit">Add</button>
   </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,3 +1,4 @@
+<div class="content">
   <form [formGroup]="addForm" (ngSubmit)="onSubmit(addForm.value)">
     <p>
       <mat-form-field>
@@ -8,3 +9,4 @@
 
     <button type="submit" mat-raised-button color="accent">Add</button>
   </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 @@
+<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}}
@@ -101,3 +104,4 @@
   <ng-template #loading>
     <mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
   </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,3 +1,4 @@
+<div class="content">
   <div>
     <label style="float: left; width: 130px;">Total jumps</label>
     <span>: {{ totalJumps }}</span>
@@ -116,3 +117,4 @@
       </table>
     </mat-tab>
   </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,3 +1,4 @@
+<div class="content">
   <form [formGroup]="userForm" (ngSubmit)="onSubmit(userForm.value)">
     <p>
       <mat-form-field>
@@ -39,3 +40,4 @@
 
     <button type="submit" mat-raised-button color="accent">Update my profile</button>
   </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",
 };