From 5c961f8f3dd25fbece286306645f062e3a56a427 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Andr=C3=A9?= <sebastien.andre@arolla.fr>
Date: Wed, 1 Apr 2020 19:55:11 +0200
Subject: [PATCH] Enfin du style en utilisant Material Angular

---
 .../src/app/login/login.component.html        |  2 +-
 .../new-aircraft/new-aircraft.component.css   | 17 ------
 .../new-aircraft/new-aircraft.component.html  |  9 ++-
 .../new-drop-zone/new-drop-zone.component.css | 25 ---------
 .../new-drop-zone.component.html              | 55 +++++++++---------
 .../src/app/new-gear/new-gear.component.css   | 16 ------
 .../src/app/new-gear/new-gear.component.html  | 56 ++++++++++++-------
 .../new-jump-type/new-jump-type.component.css | 17 ------
 .../new-jump-type.component.html              |  9 ++-
 .../src/app/new-jump/new-jump.component.css   |  8 ---
 .../src/app/new-jump/new-jump.component.html  | 16 +++---
 .../src/assets/css/custom-theme.scss          |  4 ++
 12 files changed, 89 insertions(+), 145 deletions(-)

diff --git a/Front/skydivelogs-app/src/app/login/login.component.html b/Front/skydivelogs-app/src/app/login/login.component.html
index 77e4427..ef3dde6 100644
--- a/Front/skydivelogs-app/src/app/login/login.component.html
+++ b/Front/skydivelogs-app/src/app/login/login.component.html
@@ -1,4 +1,4 @@
-<div class="col-md-6 offset-md-3 mt-5">
+<div class="col-md-4 offset-md-3 mt-5">
   <div class="card">
     <h4 class="card-header">Login to the Skydive log</h4>
     <div class="card-body">
diff --git a/Front/skydivelogs-app/src/app/new-aircraft/new-aircraft.component.css b/Front/skydivelogs-app/src/app/new-aircraft/new-aircraft.component.css
index 505cd2e..8b13789 100644
--- a/Front/skydivelogs-app/src/app/new-aircraft/new-aircraft.component.css
+++ b/Front/skydivelogs-app/src/app/new-aircraft/new-aircraft.component.css
@@ -1,18 +1 @@
-/* label {
-  display: inline-block;
-  width: 150px;
-}
 
-input[type="text"] {
-  width: 200px;
-} */
-
-
-
-mat-form-field.mat-form-field {
-  font-size: 16px;
-}
-
-mat-label {
-  color: #424242;
-}
diff --git a/Front/skydivelogs-app/src/app/new-aircraft/new-aircraft.component.html b/Front/skydivelogs-app/src/app/new-aircraft/new-aircraft.component.html
index f463e06..6986e14 100644
--- a/Front/skydivelogs-app/src/app/new-aircraft/new-aircraft.component.html
+++ b/Front/skydivelogs-app/src/app/new-aircraft/new-aircraft.component.html
@@ -1,7 +1,10 @@
 <form [formGroup]="addForm" (ngSubmit)="onSubmit(addForm.value)">
-  <p class="form-group">
-    <label for="aircraftName">Aircraft name</label>
-    <input id="aircraftName" type="text" formControlName="aircraftName" class="form-control">
+  <p>
+    <mat-form-field>
+      <mat-label>Aircraft name</mat-label>
+      <input matInput type="text" formControlName="aircraftName">
+    </mat-form-field>
   </p>
+
   <button type="submit" mat-raised-button color="accent">Add</button>
 </form>
diff --git a/Front/skydivelogs-app/src/app/new-drop-zone/new-drop-zone.component.css b/Front/skydivelogs-app/src/app/new-drop-zone/new-drop-zone.component.css
index 3287ac6..8b13789 100644
--- a/Front/skydivelogs-app/src/app/new-drop-zone/new-drop-zone.component.css
+++ b/Front/skydivelogs-app/src/app/new-drop-zone/new-drop-zone.component.css
@@ -1,26 +1 @@
-/* label {
-  display: inline-block;
-  width: 150px;
-}
 
-input[type="text"] {
-  width: 200px;
-}
-
-input[type="email"] {
-  width: 200px;
-}
-
-textarea {
-  width: 200px;
-} */
-
-
-
-mat-form-field.mat-form-field {
-  font-size: 16px;
-}
-
-mat-label {
-  color: #424242;
-}
diff --git a/Front/skydivelogs-app/src/app/new-drop-zone/new-drop-zone.component.html b/Front/skydivelogs-app/src/app/new-drop-zone/new-drop-zone.component.html
index c9305c6..e85b2e4 100644
--- a/Front/skydivelogs-app/src/app/new-drop-zone/new-drop-zone.component.html
+++ b/Front/skydivelogs-app/src/app/new-drop-zone/new-drop-zone.component.html
@@ -1,31 +1,34 @@
 <form [formGroup]="addForm" (ngSubmit)="onSubmit(addForm.value)">
-  <mat-form-field>
-    <mat-label>Dropzone name</mat-label>
-    <input matInput formControlName="dzName">
-  </mat-form-field>
-  <br>
-  <mat-form-field>
-    <mat-label>GPS</mat-label>
-    <input matInput formControlName="gps">
-  </mat-form-field>
-  <br>
-  <mat-form-field>
-    <mat-label>Address</mat-label>
-    <textarea matInput formControlName="address" placeholder="Address of the DZ"></textarea>
-  </mat-form-field>
-  <br>
-  <mat-form-field>
-    <mat-label>Mail of contact</mat-label>
-    <input matInput formControlName="contactMail">
-  </mat-form-field>
-  <br>
-  <mat-form-field>
+  <p>
+    <mat-form-field>
+      <mat-label>Dropzone name</mat-label>
+      <input matInput type="text" formControlName="dzName" />
+    </mat-form-field>
+  </p>
+  <p>
+    <mat-form-field>
+      <mat-label>GPS</mat-label>
+      <input matInput type="text" formControlName="gps" />
+    </mat-form-field>
+  </p>
+  <p>
+    <mat-form-field>
+      <mat-label>Address of the DZ</mat-label>
+      <textarea matInput formControlName="address"></textarea>
+    </mat-form-field>
+  </p>
+  <p>
+    <mat-form-field>
+      <mat-label>Mail of contact</mat-label>
+      <input matInput type="text" formControlName="contactMail" />
+    </mat-form-field>
+  </p>
+  <p>
     <mat-checkbox formControlName="isDz">Is a dropzone</mat-checkbox>
-  </mat-form-field>
-  <br>
-  <mat-form-field>
+  </p>
+  <p>
     <mat-checkbox formControlName="isTunnel">Is a tunnel</mat-checkbox>
-  </mat-form-field>
-  <br>
+  </p>
+
   <button type="submit" mat-raised-button color="accent">Add</button>
 </form>
diff --git a/Front/skydivelogs-app/src/app/new-gear/new-gear.component.css b/Front/skydivelogs-app/src/app/new-gear/new-gear.component.css
index 50cb0ba..8b13789 100644
--- a/Front/skydivelogs-app/src/app/new-gear/new-gear.component.css
+++ b/Front/skydivelogs-app/src/app/new-gear/new-gear.component.css
@@ -1,17 +1 @@
-/* label {
-  display: inline-block;
-  width: 150px;
-}
 
-input[type="text"] {
-  width: 200px;
-} */
-
-
-mat-form-field.mat-form-field {
-  font-size: 16px;
-}
-
-mat-label {
-  color: #424242;
-}
diff --git a/Front/skydivelogs-app/src/app/new-gear/new-gear.component.html b/Front/skydivelogs-app/src/app/new-gear/new-gear.component.html
index 60c6713..4fe333e 100644
--- a/Front/skydivelogs-app/src/app/new-gear/new-gear.component.html
+++ b/Front/skydivelogs-app/src/app/new-gear/new-gear.component.html
@@ -1,31 +1,45 @@
 <form [formGroup]="addForm" (ngSubmit)="onSubmit(addForm.value)">
-  <p class="form-group">
-    <label for="name">Name of gear</label>
-    <input id="name" type="text" formControlName="name" class="form-control">
+  <p>
+    <mat-form-field>
+      <mat-label>Name of gear</mat-label>
+      <input matInput type="text" formControlName="name">
+    </mat-form-field>
   </p>
-  <p class="form-group">
-    <label for="manufacturer">Manufacturer</label>
-    <input id="manufacturer" type="text" formControlName="manufacturer" class="form-control">
+  <p>
+    <mat-form-field>
+      <mat-label>Manufacturer</mat-label>
+      <input matInput type="text" formControlName="manufacturer">
+    </mat-form-field>
   </p>
-  <p class="form-group">
-    <label for="minSize">Min size of canopy</label>
-    <input id="minSize" type="text" formControlName="minSize" class="form-control">
+  <p>
+    <mat-form-field>
+      <mat-label>Min size of canopy</mat-label>
+      <input matInput type="text" formControlName="minSize">
+    </mat-form-field>
   </p>
-  <p class="form-group">
-    <label for="maxSize">Max size of canopy</label>
-    <input id="maxSize" type="text" formControlName="maxSize" class="form-control">
+  <p>
+    <mat-form-field>
+      <mat-label>Max size of canopy</mat-label>
+      <input matInput type="text" formControlName="maxSize">
+    </mat-form-field>
   </p>
-  <p class="form-group">
-    <label for="aad">AAD system</label>
-    <input id="aad" type="text" formControlName="aad" class="form-control">
+  <p>
+    <mat-form-field>
+      <mat-label>AAD system</mat-label>
+      <input matInput type="text" formControlName="aad">
+    </mat-form-field>
   </p>
-  <p class="form-group">
-    <label for="mainCanopy">Main Canopy</label>
-    <input id="mainCanopy" type="text" formControlName="mainCanopy" class="form-control">
+  <p>
+    <mat-form-field>
+      <mat-label>Main Canopy</mat-label>
+      <input matInput type="text" formControlName="mainCanopy">
+    </mat-form-field>
   </p>
-  <p class="form-group">
-    <label for="reserveCanopy">Reserve canopy</label>
-    <input id="reserveCanopy" type="text" formControlName="reserveCanopy" class="form-control">
+  <p>
+    <mat-form-field>
+      <mat-label>Reserve canopy</mat-label>
+      <input matInput type="text" formControlName="reserveCanopy">
+    </mat-form-field>
   </p>
 
   <button mat-raised-button color="accent" type="submit">Add</button>
diff --git a/Front/skydivelogs-app/src/app/new-jump-type/new-jump-type.component.css b/Front/skydivelogs-app/src/app/new-jump-type/new-jump-type.component.css
index d252bf3..8b13789 100644
--- a/Front/skydivelogs-app/src/app/new-jump-type/new-jump-type.component.css
+++ b/Front/skydivelogs-app/src/app/new-jump-type/new-jump-type.component.css
@@ -1,18 +1 @@
-/* label {
-  display: inline-block;
-  width: 150px;
-}
 
-input[type="text"] {
-  width: 200px;
-}
-
- */
-
-mat-form-field.mat-form-field {
-  font-size: 16px;
-}
-
-mat-label {
-  color: #424242;
-}
diff --git a/Front/skydivelogs-app/src/app/new-jump-type/new-jump-type.component.html b/Front/skydivelogs-app/src/app/new-jump-type/new-jump-type.component.html
index e79179d..c0c2fd2 100644
--- a/Front/skydivelogs-app/src/app/new-jump-type/new-jump-type.component.html
+++ b/Front/skydivelogs-app/src/app/new-jump-type/new-jump-type.component.html
@@ -1,7 +1,10 @@
 <form [formGroup]="addForm" (ngSubmit)="onSubmit(addForm.value)">
-  <p class="form-group">
-    <label for="jumptypeName">Jump type name</label>
-    <input id="jumptypeName" type="text" formControlName="jumptypeName" class="form-control">
+  <p>
+    <mat-form-field>
+      <mat-label>Jump type name</mat-label>
+      <input matInput type="text" formControlName="jumptypeName">
+    </mat-form-field>
   </p>
+
   <button type="submit" mat-raised-button color="accent">Add</button>
 </form>
diff --git a/Front/skydivelogs-app/src/app/new-jump/new-jump.component.css b/Front/skydivelogs-app/src/app/new-jump/new-jump.component.css
index a123ef0..541bf9a 100644
--- a/Front/skydivelogs-app/src/app/new-jump/new-jump.component.css
+++ b/Front/skydivelogs-app/src/app/new-jump/new-jump.component.css
@@ -12,11 +12,3 @@
 .formNewJumps>* {
   width: 100%;
 }
-
-mat-form-field.mat-form-field {
-  font-size: 16px;
-}
-
-mat-label {
-  color: #424242;
-}
diff --git a/Front/skydivelogs-app/src/app/new-jump/new-jump.component.html b/Front/skydivelogs-app/src/app/new-jump/new-jump.component.html
index 58c6f8a..c34a3b6 100644
--- a/Front/skydivelogs-app/src/app/new-jump/new-jump.component.html
+++ b/Front/skydivelogs-app/src/app/new-jump/new-jump.component.html
@@ -7,7 +7,7 @@
         {{jumpType.name}}
       </mat-option>
     </mat-autocomplete>
-    <button mat-raised-button color="accent" *ngIf="selectedJumpType" matSuffix mat-icon-button aria-label="Clear"
+    <button mat-button *ngIf="selectedJumpType" matSuffix mat-icon-button aria-label="Clear"
       (click)="selectedJumpType=undefined">
       <mat-icon>close</mat-icon>
     </button>
@@ -21,7 +21,7 @@
         {{aircraft.name}}
       </mat-option>
     </mat-autocomplete>
-    <button mat-raised-button color="accent" *ngIf="selectedAircraft" matSuffix mat-icon-button aria-label="Clear"
+    <button mat-button *ngIf="selectedAircraft" matSuffix mat-icon-button aria-label="Clear"
       (click)="selectedAircraft=undefined">
       <mat-icon>close</mat-icon>
     </button>
@@ -38,7 +38,7 @@
           style="width: 16px;">
       </mat-option>
     </mat-autocomplete>
-    <button mat-raised-button color="accent" *ngIf="selectedDz" matSuffix mat-icon-button aria-label="Clear" (click)="selectedDz=undefined">
+    <button mat-button *ngIf="selectedDz" matSuffix mat-icon-button aria-label="Clear" (click)="selectedDz=undefined">
       <mat-icon>close</mat-icon>
     </button>
   </mat-form-field>
@@ -51,7 +51,7 @@
         {{gear.name}}
       </mat-option>
     </mat-autocomplete>
-    <button mat-raised-button color="accent" *ngIf="selectedGear" matSuffix mat-icon-button aria-label="Clear"
+    <button mat-button *ngIf="selectedGear" matSuffix mat-icon-button aria-label="Clear"
       (click)="selectedGear=undefined">
       <mat-icon>close</mat-icon>
     </button>
@@ -73,14 +73,14 @@
 
   <mat-form-field>
     <input matInput placeholder="Exit altitude" [(ngModel)]="exitAltitude" name="exitAltitude" type="number">
-    <button mat-raised-button color="accent" *ngIf="exitAltitude" matSuffix mat-icon-button aria-label="Clear"
+    <button mat-button *ngIf="exitAltitude" matSuffix mat-icon-button aria-label="Clear"
       (click)="exitAltitude=undefined">
       <mat-icon>close</mat-icon>
     </button>
   </mat-form-field>
   <mat-form-field>
     <input matInput placeholder="Deploy altitude" [(ngModel)]="deployAltitude" name="deployAltitude" type="number">
-    <button mat-raised-button color="accent" *ngIf="deployAltitude" matSuffix mat-icon-button aria-label="Clear"
+    <button mat-button *ngIf="deployAltitude" matSuffix mat-icon-button aria-label="Clear"
       (click)="deployAltitude=undefined">
       <mat-icon>close</mat-icon>
     </button>
@@ -88,14 +88,14 @@
 
   <mat-form-field>
     <input matInput placeholder="Count of jumps" [(ngModel)]="countOfJumps" name="countOfJumps" type="number">
-    <button mat-raised-button color="accent" *ngIf="countOfJumps" matSuffix mat-icon-button aria-label="Clear"
+    <button mat-button *ngIf="countOfJumps" matSuffix mat-icon-button aria-label="Clear"
       (click)="countOfJumps=undefined">
       <mat-icon>close</mat-icon>
     </button>
   </mat-form-field>
 
   <br />
-  <button mat-raised-button color="accent" *ngIf="isValidatedForm()">Submit</button>
+  <button mat-button *ngIf="isValidatedForm()">Submit</button>
 </form>
 
 <ng-template #loading>
diff --git a/Front/skydivelogs-app/src/assets/css/custom-theme.scss b/Front/skydivelogs-app/src/assets/css/custom-theme.scss
index bb76c39..86be0a2 100644
--- a/Front/skydivelogs-app/src/assets/css/custom-theme.scss
+++ b/Front/skydivelogs-app/src/assets/css/custom-theme.scss
@@ -223,3 +223,7 @@ $altTheme: mat-dark-theme($theme-primary, $theme-accent, $theme-warn);
   padding: .5em .85em;
   min-height: 2.5em;
 }
+
+.mat-form-field {
+  width: 100%;
+}