Add note about final distance, and improve styling

Signed-off-by: Jo Vandeginste <[email protected]>
jovandeginste · Feb 21, 2024 · c92e5e6 · c92e5e6
1 parent abc2f0a
commit c92e5e6
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 15 deletions.
diff --git a/assets/output.css b/assets/output.css
@@ -784,19 +784,22 @@ table {
   text-align: left;
   font-size: 0.875rem;
   line-height: 1.25rem;
-}
-
-table:where([dir="rtl"], [dir="rtl"] *) {
-  text-align: right;
-}
-
-table {
   border-width: 1px;
   --tw-border-opacity: 1;
   border-color: rgb(115 115 115 / var(--tw-border-opacity));
-  thead {
+  tfoot,
+    thead {
+    font-weight: 700;
+  }
+  tfoot,
+    thead {
     text-transform: uppercase;
   }
+  tfoot,
+    thead {
+    --tw-bg-opacity: 1;
+    background-color: rgb(24 24 27 / var(--tw-bg-opacity));
+  }
   tr {
     border-width: 1px;
   }
@@ -917,9 +920,6 @@ table {
       a {
         display: inline-flex;
       }
-      a {
-        align-items: center;
-      }
       a {
         border-radius: 0.5rem;
       }

diff --git a/main.css b/main.css
@@ -106,10 +106,12 @@
   }
 
   table {
-    @apply text-sm w-full text-left rtl:text-right table-auto;
+    @apply text-sm w-full text-left table-auto;
     @apply border border-neutral-500;
+    tfoot,
     thead {
-      @apply uppercase;
+      @apply uppercase font-bold;
+      @apply bg-zinc-900;
     }
     tr {
       @apply border border-neutral-500;
@@ -160,7 +162,7 @@
 
       button.close-modal {
         a {
-          @apply text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center;
+          @apply text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex;
         }
       }
 

diff --git a/views/partials/workout_breakdown.html b/views/partials/workout_breakdown.html
@@ -10,7 +10,7 @@
     </tr>
   </thead>
   <tbody>
-    {{ range . }}
+    {{ $distance := 0 }} {{ range . }} {{ $distance = .Distance }}
     <tr
       onmouseover="set_marker('{{ .Point.Title }}', {{.Point.Lat}}, {{.Point.Lng}})"
       onmouseout="clear_marker()"
@@ -28,5 +28,11 @@
     </tr>
     {{ end }}
   </tbody>
+  <tfoot>
+    <tr>
+      <td colspan="2"></td>
+      <td colspan="3">Last distance: {{ $distance | HumanDistance }}</td>
+    </tr>
+  </tfoot>
 </table>
 {{ end }}