Style sur les pages et ajout d'ajout d'icônes

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

@@ -66,4 +66,4 @@
 
   <router-outlet></router-outlet>
 
-  <footer>Web software to log your skydive jumps - v{{ version }} - @Séb</footer>
+  <footer style="text-align: right;">Web software to log your skydive jumps - v{{ version }} - @Séb</footer>

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

@@ -13,9 +13,10 @@ table {
 }
 
 .content {
-  height: 90vh;
+  min-height: 90vh;
   display: flex;
   justify-content: left;
   flex-direction: column;
   align-items: initial;
+  padding-top: 25px;
 }

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

@@ -13,9 +13,10 @@ table {
 }
 
 .content {
-  height: 90vh;
+  min-height: 90vh;
   display: flex;
   justify-content: left;
   flex-direction: column;
   align-items: initial;
+  padding-top: 25px;
 }

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

@@ -10,6 +10,14 @@
             (click)="removeToFavorite(element)">favorite</mat-icon>
           <mat-icon aria-hidden="false" aria-label="Not favorite" *ngIf="element.isFavorite === false"
             (click)="setToFavorite(element)">favorite_border</mat-icon>
+
+          <a href='http://{{element.website}}' target="_blank">
+            <mat-icon aria-hidden="false" aria-label="URL to the DZ website">link</mat-icon>
+          </a>
+          <a href='https://www.openstreetmap.org/?mlat={{element.latitude}}&mlon={{element.longitude}}#map=14/{{element.latitude}}/{{element.longitude}}'
+            target="_blank">
+            <mat-icon aria-hidden="false" aria-label="Location of the DZ">map</mat-icon>
+          </a>
         </td>
       </ng-container>
 
@@ -22,19 +30,9 @@
         <th mat-header-cell *matHeaderCellDef>Name</th>
         <td mat-cell *matCellDef="let element">
           <span class="spanWithBreakWord" [innerHTML]="element.name"></span>
-          <a href='http://{{element.website}}'>ici</a>
         </td>
       </ng-container>
 
-      <ng-container matColumnDef="latitude">
-        <th mat-header-cell *matHeaderCellDef>Latitude</th>
-        <td mat-cell *matCellDef="let element">{{element.latitude}}</td>
-      </ng-container>
-      <ng-container matColumnDef="longitude">
-        <th mat-header-cell *matHeaderCellDef>Longitude</th>
-        <td mat-cell *matCellDef="let element">{{element.longitude}}</td>
-      </ng-container>
-
       <ng-container matColumnDef="address">
         <th mat-header-cell *matHeaderCellDef>Address</th>
         <td mat-cell *matCellDef="let element">

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

@@ -12,18 +12,16 @@ import { NewDropZoneComponent } from "../new-drop-zone/new-drop-zone.component";
 @Component({
   selector: "app-list-of-dzs",
   templateUrl: "./list-of-dzs.component.html",
-  styleUrls: ["./list-of-dzs.component.css"]
+  styleUrls: ["./list-of-dzs.component.css"],
 })
 export class ListOfDzsComponent implements OnInit {
   public displayedColumns: Array<string> = [
     "isfavorite",
     "id",
     "name",
-    "latitude",
-    "longitude",
     "address",
     "email",
-    "type"
+    "type",
   ];
   public dataSourceTable: MatTableDataSource<DropZoneResp>;
   public resultsLength = 0;
@@ -36,7 +34,7 @@ export class ListOfDzsComponent implements OnInit {
   ) {}
 
   ngOnInit() {
-    this.serviceComm.refreshRequest.subscribe(action => {
+    this.serviceComm.refreshRequest.subscribe((action) => {
       if (action === AddAction.Dropzone) {
         this.dialog.closeAll();
         this.getListOfDropZones();
@@ -47,7 +45,7 @@ export class ListOfDzsComponent implements OnInit {
   }
 
   private getListOfDropZones() {
-    this.serviceApi.getListOfDropZones().subscribe(data => {
+    this.serviceApi.getListOfDropZones().subscribe((data) => {
       setTimeout(() => {
         data.sort((a, b) => (b.isFavorite ? 1 : 0) - (a.isFavorite ? 1 : 0));
         this.dataSourceTable = new MatTableDataSource<DropZoneResp>(data);
@@ -76,7 +74,7 @@ export class ListOfDzsComponent implements OnInit {
   openDialogToAdd() {
     this.dialog.open(NewDropZoneComponent, {
       height: "400px",
-      width: "600px"
+      width: "600px",
     });
   }
 }

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

@@ -13,9 +13,10 @@ table {
 }
 
 .content {
-  height: 90vh;
+  min-height: 90vh;
   display: flex;
   justify-content: left;
   flex-direction: column;
   align-items: initial;
+  padding-top: 25px;
 }

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

@@ -10,7 +10,7 @@
 
       <ng-container matColumnDef="name">
         <th mat-header-cell *matHeaderCellDef>Name</th>
-        <td mat-cell *matCellDef="let element">{{element.name}} <a href='http://{{element.website}}'>ici</a></td>
+        <td mat-cell *matCellDef="let element">{{element.name}}</td>
       </ng-container>
 
       <ng-container matColumnDef="manufacturer">

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

@@ -13,9 +13,10 @@ table {
 }
 
 .content {
-  height: 90vh;
+  min-height: 90vh;
   display: flex;
   justify-content: left;
   flex-direction: column;
   align-items: initial;
+  padding-top: 25px;
 }

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

@@ -19,9 +19,10 @@ table {
 }
 
 .content {
-  height: 90vh;
+  min-height: 90vh;
   display: flex;
   justify-content: left;
   flex-direction: column;
   align-items: initial;
+  padding-top: 25px;
 }

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

@@ -15,9 +15,24 @@
 }
 
 .content {
-  height: 90vh;
+  min-height: 90vh;
   display: flex;
   justify-content: left;
   flex-direction: column;
   align-items: initial;
+  padding-top: 25px;
+}
+
+.left130 {
+  clear: both;
+  float: left;
+  width: 130px;
+}
+
+.paragraph {
+  margin-bottom: 10px;
+}
+
+.mat-tab-group {
+  margin-top: 20px;
 }

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

@@ -1,16 +1,16 @@
 <div class="content">
-  <div>
+  <div class="paragraph">
-    <label style="float: left; width: 130px;">Total jumps</label>
+    <label class="left130">Total jumps</label>
     <span>: {{ totalJumps }}</span>
   </div>
 
-  <div>
+  <div class="paragraph">
-    <label style="clear: both; float: left; width: 130px;">Total cutaways</label>
+    <label class="left130">Total cutaways</label>
     <span>: {{ totalCutaways }}</span>
   </div>
 
-  <div>
+  <div class="paragraph">
-    <label style="clear: both; float: left; width: 130px;">Last jump</label>
+    <label class="left130">Last jump</label>
     <span>: {{ lastJump }}</span>
   </div>
 

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

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

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

@@ -16,6 +16,7 @@ body {
 }
 
 /* Doc : https://github.com/google/material-design-icons/tree/master/iconfont */
+/* https://material.io/resources/icons/?style=baseline */
 @font-face {
   font-family: 'Material Icons';
   font-style: normal;