Hide/show la popin d'infos des sauts

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

@@ -28,11 +28,11 @@ table {
 }
 
 .stylePopin {
-  position: absolute;
-  right: 10px;
-  top: 0;
+  position: relative;
+  right: -25px;
+  top: -25px;
   border: 1px solid black;
-  z-index: 1000;
+  /* z-index: 1000; */
 }
 .showPopin {
   display: '';

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

@@ -5,11 +5,13 @@
         <th mat-header-cell *matHeaderCellDef></th>
         <td mat-cell *matCellDef="let element" style="text-align: left; cursor: pointer;">
           <mat-icon aria-hidden="false" aria-label="All informations of the jump" 
-                    (click)="showPopin($event, element)" style="display: block;">info</mat-icon>
-          <span [ngClass]="calculateClasses(element)">
+                    (click)="showPopin($event, element)">info</mat-icon>
+          <div [ngClass]="calculateClasses(element)">
+            <span>
             Gear : {{element.gear.mainCanopy}} ({{element.gear.mainCanopy}})
             <br>Cutaway : {{element.withCutaway}}
             <br>Notes : {{element.notes}}</span>
+          </div>
         </td>
       </ng-container>
 

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

@@ -25,6 +25,7 @@ export class ListOfJumpsComponent implements OnInit {
   public dataSourceTable;
   public resultsLength = 0;
   private previousElementId = -1;
+  private closePopin = false;
   @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
 
   constructor(
@@ -56,15 +57,16 @@ export class ListOfJumpsComponent implements OnInit {
       this.previousElementId = elementId;
     }
 
-    if (elementId != this.previousElementId ) {
+    this.closePopin = (elementId === this.previousElementId);
+    if (elementId != this.previousElementId) {
       this.previousElementId = elementId;
     }
   }
 
   calculateClasses(item) {
     return {
-      'showPopin': item.id === this.previousElementId,
-      'hidePopin': item.id != this.previousElementId,
+      'showPopin': !this.closePopin || item.id === this.previousElementId,
+      'hidePopin': this.closePopin || item.id != this.previousElementId,
       'stylePopin': true
   };
   }