Style waypoints table

jirkapok · Dec 5, 2023 · 762f1ce · 762f1ce
1 parent a9d5bfc
commit 762f1ce
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 14 deletions.
diff --git a/projects/planner/src/app/diff/waypoints/diff-waypoints.component.html b/projects/planner/src/app/diff/waypoints/diff-waypoints.component.html
@@ -1,35 +1,35 @@
-<div class="card">
+<div class="card overflow-y-scroll">
     <div class="card-header">
         <div class="float-start">
             <fa-icon [icon]="tasks" class="me-3"></fa-icon>
             <span>Dive way points</span>
         </div>
     </div>
-    <div class="card-body card-minheight table-responsive">
-        <table class="table table-sm p-0">
-            <thead class="table-light">
+    <div class="card-body card-minheight table-responsive card-max-height-md">
+        <table id="waypointsDiffTable" class="table table-sm p-0 text-center table-hover">
+            <thead class="table-light sticky-top">
             <tr>
-                <th colspan="1"></th>
-                <th colspan="2" class="fw-bold px-1 text-center">Profile A</th>
-                <th colspan="2" class="fw-bold px-1 text-center">Profile B</th>
+                <th colspan="1" ></th>
+                <th colspan="2" class="fw-bold px-1 active-profile">Profile A</th>
+                <th colspan="2" class="fw-bold px-1">Profile B</th>
             </tr>
             <tr>
-                <th class="fw-bold px-1">Run [min]</th>
-                <th class="fw-bold px-1">Depth [{{units.length}}]</th>
-                <th class="fw-bold px-1">Duration [min]</th>
+                <th class="fw-bold px-1 ">Run [min]</th>
+                <th class="fw-bold px-1 active-profile">Depth [{{units.length}}]</th>
+                <th class="fw-bold px-1 active-profile">Duration [min]</th>
                 <th class="fw-bold px-1">Depth [{{units.length}}]</th>
                 <th class="fw-bold px-1">Duration [min]</th>
             </tr>
             </thead>
             <tbody>
                 <tr *ngFor="let row of waypointRows">
-                    <td class="px-1">
+                    <td class="px-1 vertical-right-border">
                         {{ row.runTime * 1000 | date:'mm:ss' }}
                     </td>
-                    <td *ngIf="row.depthA !== undefined; else emptyRow" class="px-1">
+                    <td  *ngIf="row.depthA !== undefined; else emptyRow" class="px-1">
                         {{ row.depthA  | number: '1.0-0'}}
                     </td>
-                    <td *ngIf="row.durationA !== undefined else emptyRow" class="px-1">
+                    <td *ngIf="row.durationA !== undefined else emptyRowWithDivider" class="px-1 vertical-right-border">
                         {{ row.durationA * 1000 | date: 'mm:ss'}}
                     </td>
                     <td *ngIf="row.depthB !== undefined else emptyRow" class="px-1">
@@ -44,5 +44,7 @@
     </div>
 </div>
 
-<ng-template #emptyRow><td></td></ng-template>
+<ng-template #emptyRow><td class="px-1"></td></ng-template>
+<ng-template #emptyRowWithDivider><td class="px-1 vertical-right-border"></td></ng-template>
+
 
diff --git a/projects/planner/src/app/diff/waypoints/diff-waypoints.component.scss b/projects/planner/src/app/diff/waypoints/diff-waypoints.component.scss
@@ -0,0 +1,25 @@
+@import "node_modules/mdb-angular-ui-kit/assets/scss/free/variables";
+#waypointsDiffTable{
+
+    .vertical-right-border {
+        border-right-width: medium;
+    }
+    .vertical-left-border {
+        border-left-width: medium;
+    }
+
+    .vertical-borders {
+        border-left-width: medium;
+        border-right-width: medium;
+    }
+
+    tr{
+        border-top: hidden;
+        border-bottom: hidden;
+    }
+
+    .active-profile {
+        background: $primary;
+        border-color: $primary;
+    }
+}
diff --git a/projects/planner/src/styles.scss b/projects/planner/src/styles.scss
@@ -13,3 +13,8 @@
 .dropdown-menu {
     position: relative !important;
 }
+
+.card-max-height-md {
+    max-height: 500px;
+    overflow-y: scroll;
+}