Ajout de style sur les tableaux

+ ajout de transition sur la navigation

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

@@ -1,5 +1,8 @@
 body {
   margin: 10px;
+  color: #424242;
+  height: 600px;
+  overflow: auto;
 }
 
 .hamburger__icon {
@@ -12,38 +15,37 @@ body {
 }
 
 .hamburger__icon__fill {
-  fill: #594e78
+  fill: #424242
 }
 
-.side-menu-disactive {
+.navigation.side-menu-active {
-  display: none !important;
+  left: 0px;
-}
-
-.side-menu-active {
-  display: '' !important;
 }
 
 .navigation {
-  border: 1px red solid;
   position: absolute;
   width: 200px;
   overflow: hidden;
   z-index: 50;
   background-color: grey;
+  height: 600px;
   padding: 5px;
-
+  left: -220px;
+  transition: 0.5s linear left;
+  -webkit-transition: 0.5s linear left;
 }
 
 .navigation ul {
   list-style: none;
+  padding: 0;
 }
 
 .navigation ul li {
-  margin: 5px;
+  margin: 10px;
 }
 
 .navigation ul li a {
   text-decoration: none;
   cursor: pointer;
-  color: black;
+  color: #424242;
 }

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

@@ -11,7 +11,7 @@
 
     <h2 style="display: inline;">{{ title }}</h2>
 
-    <nav class="navigation" [ngClass]="{'side-menu-active': showMenu, 'side-menu-disactive': !showMenu}">
+    <nav class="navigation" [ngClass]="{'side-menu-active': showMenu}">
       <ul>
         <li><a routerLink="/summary" routerLinkActive="active" (click)="toggleMenu()" skipLocationChange>Summary</a>
         </li>

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

@@ -9,6 +9,7 @@ import { ServiceComm } from '../services/service-comm.service';
 export class AppComponent implements OnInit {
   title = 'app';
   showMenu = false;
+  // showMenu = true;
 
   constructor(private serviceComm: ServiceComm) { }
 

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

@@ -7,3 +7,13 @@ table {
   height: 600px;
   overflow: auto;
 }
+
+.mat-row td {
+  padding: 15px;
+}
+
+.spanWithBreakWord {
+  display: inline-block;
+  min-width: 200px;
+  word-wrap: break-word;
+}

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

@@ -13,7 +13,7 @@
       <td mat-cell *matCellDef="let element">{{element.name}}</td>
     </ng-container>
 
-    <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
+    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
     <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
   </table>
 </div>

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

@@ -50,7 +50,7 @@
       <td mat-cell *matCellDef="let element">{{element.type}}</td>
     </ng-container>
 
-    <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
+    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
     <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
   </table>
 </div>

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

@@ -7,3 +7,13 @@ table {
   height: 600px;
   overflow: auto;
 }
+
+.mat-row td {
+  padding: 15px;
+}
+
+.spanWithBreakWord {
+  display: inline-block;
+  min-width: 200px;
+  word-wrap: break-word;
+}

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

@@ -38,7 +38,7 @@
       <td mat-cell *matCellDef="let element">{{element.reserveCanopy}}</td>
     </ng-container>
 
-    <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
+    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
     <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
   </table>
 </div>

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

@@ -7,3 +7,13 @@ table {
   height: 600px;
   overflow: auto;
 }
+
+.mat-row td {
+  padding: 15px;
+}
+
+.spanWithBreakWord {
+  display: inline-block;
+  min-width: 200px;
+  word-wrap: break-word;
+}

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

@@ -13,7 +13,7 @@
       <td mat-cell *matCellDef="let element">{{element.name}}</td>
     </ng-container>
 
-    <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
+    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
     <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
   </table>
 </div>

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

@@ -7,3 +7,13 @@ table {
   height: 600px;
   overflow: auto;
 }
+
+.mat-row td {
+  padding: 15px;
+}
+
+.spanWithBreakWord {
+  display: inline-block;
+  min-width: 200px;
+  word-wrap: break-word;
+}

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

@@ -27,7 +27,7 @@
       <td mat-cell *matCellDef="let element">{{element.gear.name}}</td>
     </ng-container>
 
-    <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
+    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
     <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
   </table>
 </div>

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

@@ -1,15 +1,24 @@
-.example-container {
+.formNewJumps {
   display: flex;
   flex-direction: column;
 
   min-width: 150px;
   max-width: 500px;
   width: 100%;
+
   background-color: black;
-  color: white;
+  /* color: white; */
   padding: 15px
 }
 
-.example-container>* {
+.formNewJumps>* {
   width: 100%;
 }
+
+mat-form-field.mat-form-field {
+  font-size: 16px;
+}
+
+mat-label {
+  color: #424242;
+}

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

@@ -1,4 +1,4 @@
-<form class="example-container" (ngSubmit)="onFormSubmit()">
+<form class="formNewJumps" (ngSubmit)="onFormSubmit()">
   <mat-form-field>
     <mat-label>Choose the jump type</mat-label>
     <input type="text" matInput [matAutocomplete]="autoJumpType" [(ngModel)]="selectedJumpType" name="selectedJumpType">