Fix workouts table on smaller screens

Signed-off-by: Jo Vandeginste <[email protected]>
jovandeginste · Feb 23, 2024 · 7fdd25c · 7fdd25c
1 parent 9a366af
commit 7fdd25c
Show file tree

Hide file tree

Showing 4 changed files with 71 additions and 30 deletions.
diff --git a/README.md b/README.md
@@ -183,8 +183,6 @@ authentication form, session cookies and JWT tokens). New accounts are inactive
 ## TODO
 
 - write tests!!!!!
-- make the web application look better on mobile
-  - workouts table is too wide
 - add support for authentication through a reverse proxy
 - provide a light theme
 - add more activity types

diff --git a/assets/output.css b/assets/output.css
@@ -458,7 +458,7 @@ body {
   color: rgb(244 244 245 / var(--tw-text-opacity));
 }
 
-@media (min-width: 640px) {
+@media (min-width: 768px) {
   body {
     padding-left: 5rem;
     padding-right: 5rem;
@@ -518,7 +518,7 @@ h2 {
   color: rgb(228 228 231 / var(--tw-text-opacity));
 }
 
-@media (min-width: 640px) {
+@media (min-width: 768px) {
   h2 {
     font-size: 1.5rem;
     line-height: 2rem;
@@ -533,7 +533,7 @@ h3 {
   color: rgb(228 228 231 / var(--tw-text-opacity));
 }
 
-@media (min-width: 640px) {
+@media (min-width: 768px) {
   h3 {
     font-size: 1.25rem;
     line-height: 1.75rem;
@@ -615,7 +615,7 @@ form {
     span {
       display: none;
     }
-    @media (min-width: 640px) {
+    @media (min-width: 768px) {
       span {
         display: contents;
       }
@@ -728,7 +728,7 @@ form {
   padding-right: 0.25rem;
 }
 
-@media (min-width: 640px) {
+@media (min-width: 768px) {
   .content {
     padding-left: 2.5rem;
     padding-right: 2.5rem;
@@ -751,7 +751,7 @@ form {
   border-color: rgb(115 115 115 / var(--tw-border-opacity));
 }
 
-@media (min-width: 640px) {
+@media (min-width: 768px) {
   .inner-form {
     padding: 1.25rem;
   }
@@ -2124,6 +2124,10 @@ table {
     display: flex;
   }
 
+  .sm\:table-cell {
+    display: table-cell;
+  }
+
   .sm\:h-\[400px\] {
     height: 400px;
   }
@@ -2203,11 +2207,35 @@ table {
 }
 
 @media (min-width: 1024px) {
+  .lg\:inline {
+    display: inline;
+  }
+
+  .lg\:table-cell {
+    display: table-cell;
+  }
+
+  .lg\:hidden {
+    display: none;
+  }
+
   .lg\:basis-1\/4 {
     flex-basis: 25%;
   }
 }
 
+@media (min-width: 1280px) {
+  .xl\:table-cell {
+    display: table-cell;
+  }
+}
+
+@media (min-width: 1536px) {
+  .\32xl\:table-cell {
+    display: table-cell;
+  }
+}
+
 .\[\&\>\*\]\:basis-1\/2>* {
   flex-basis: 50%;
 }

diff --git a/main.css b/main.css
@@ -9,7 +9,7 @@
   }
 
   body {
-    @apply bg-neutral-900 text-zinc-100 sm:px-20;
+    @apply bg-neutral-900 text-zinc-100 md:px-20;
   }
 
   button[type="submit"],
@@ -24,10 +24,10 @@
   }
 
   h2 {
-    @apply text-xl sm:text-2xl mb-5 text-zinc-200 mx-2 px-2;
+    @apply text-xl md:text-2xl mb-5 text-zinc-200 mx-2 px-2;
   }
   h3 {
-    @apply text-base sm:text-xl mb-5 text-zinc-200;
+    @apply text-base md:text-xl mb-5 text-zinc-200;
   }
   a {
     @apply hover:text-amber-300;
@@ -61,7 +61,7 @@
     a {
       @apply mt-5 mr-5;
       span {
-        @apply hidden sm:contents;
+        @apply hidden md:contents;
       }
     }
   }
@@ -88,10 +88,10 @@
     }
   }
   .content {
-    @apply rounded-xl py-5 px-1 sm:px-10 bg-neutral-700;
+    @apply rounded-xl py-5 px-1 md:px-10 bg-neutral-700;
   }
   .inner-form {
-    @apply rounded-xl p-2 sm:p-5 m-2 bg-neutral-800 border border-neutral-800 hover:border-neutral-500;
+    @apply rounded-xl p-2 md:p-5 m-2 bg-neutral-800 border border-neutral-800 hover:border-neutral-500;
   }
 
   .notice {

diff --git a/views/workouts/workouts_list.html b/views/workouts/workouts_list.html
@@ -16,49 +16,64 @@ <h2 class="{{ IconFor `workout` }}">
           <tr>
             <th></th>
             <th>{{ i18n "Name" }}</th>
-            <th>{{ i18n "Date" }}</th>
-            <th>{{ i18n "Location" }}</th>
+            <th class="hidden sm:table-cell">{{ i18n "Date" }}</th>
+            <th class="hidden xl:table-cell">{{ i18n "Location" }}</th>
             <th>{{ i18n "Distance" }}</th>
-            <th>{{ i18n "Duration" }}</th>
-            <th>{{ i18n "Avg speed" }}</th>
-            <th>{{ i18n "Avg tempo" }}</th>
-            <th>{{ i18n "Max speed" }}</th>
-            <th></th>
+            <th class="hidden sm:table-cell">{{ i18n "Duration" }}</th>
+            <th class="hidden 2xl:table-cell">{{ i18n "Avg speed" }}</th>
+            <th class="hidden 2xl:table-cell">{{ i18n "Avg tempo" }}</th>
+            <th class="hidden 2xl:table-cell">{{ i18n "Max speed" }}</th>
+            <th class="hidden lg:table-cell"></th>
           </tr>
         </thead>
         <tbody>
           {{ range .workouts }}
           <tr>
             <td class="text-center">
-              <div class="{{ IconFor .Type }}"></div>
+              <div class="{{ IconFor .Type }}" title="{{ i18n .Type }}"></div>
             </td>
             <td>
-              <a href="{{ RouteFor `workout-show` .ID }}">{{ .Name | html }}</a>
+              <a href="{{ RouteFor `workout-show` .ID }}">{{ .Name }}</a>
             </td>
-            <td sorttable_customkey="{{ .Date }}">
-              <span title="{{ .Date | LocalDate }}">
+            <td class="hidden sm:table-cell" sorttable_customkey="{{ .Date }}">
+              <span class="hidden lg:inline" title="{{ .Date | LocalDate }}">
                 {{ .Date | RelativeDate }}
               </span>
+              <span class="lg:hidden" title="{{ .Date | LocalDate }}">
+                {{ .Date.Format "2006-01-02" }}
+              </span>
+            </td>
+            <td class="hidden xl:table-cell">
+              {{ template "snippet_location" .Data.Address }}
             </td>
-            <td>{{ template "snippet_location" .Data.Address }}</td>
             <td sorttable_customkey="{{ .Data.TotalDistance }}">
               {{ .Data.TotalDistance | HumanDistance }}
             </td>
             <td
+              class="hidden sm:table-cell"
               sorttable_customkey="{{ .Data.TotalDuration | NumericDuration }}"
             >
               {{ .Data.TotalDuration }}
             </td>
-            <td sorttable_customkey="{{ .Data.AverageSpeedNoPause }}">
+            <td
+              class="hidden 2xl:table-cell"
+              sorttable_customkey="{{ .Data.AverageSpeedNoPause }}"
+            >
               {{ .Data.AverageSpeedNoPause | HumanSpeed }}
             </td>
-            <td sorttable_customkey="{{ .Data.AverageSpeedNoPause }}">
+            <td
+              class="hidden 2xl:table-cell"
+              sorttable_customkey="{{ .Data.AverageSpeedNoPause }}"
+            >
               {{ .Data.AverageSpeedNoPause | HumanTempo }}
             </td>
-            <td sorttable_customkey="{{ .Data.MaxSpeed }}">
+            <td
+              class="hidden 2xl:table-cell"
+              sorttable_customkey="{{ .Data.MaxSpeed }}"
+            >
               {{ .Data.MaxSpeed | HumanSpeed }}
             </td>
-            <td>
+            <td class="hidden lg:table-cell">
               <span class="actions"> {{ template "workout_actions" . }} </span>
             </td>
           </tr>