Some tweaks to events for route inclusion to fit more screens.

TBD: Mobile sizing. Probably just hide it for mobile.
SauceLLC · Feb 21, 2024 · ce0c667 · ce0c667
1 parent dbe3ca6
commit ce0c667
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 16 deletions.
diff --git a/pages/events.html b/pages/events.html
@@ -29,7 +29,7 @@
                     <select name="type">
                         <option value="">All</option>
                         <option value="GROUP_RIDE">Group Ride</option>
-                        <option value="GROUP_WORKOUT">Group Workout</option>
+                        <option value="GROUP_WORKOUT">Workout</option>
                         <option value="RACE">Race</option>
                         <option value="FONDO">Fondo</option>
                         <option value="TIME_TRIAL">Time Trial</option>

diff --git a/pages/templates/events/details.html.tpl b/pages/templates/events/details.html.tpl
@@ -3,8 +3,9 @@
         <div class="card">
             <img class="event-image" src="{{event.imageUrl}}"/>
             <div class="meta">
-                <div title="Event World">{{world}} <ms>map</ms></div>
+                <div title="Event World"><ms>map</ms> {{world}}</div>
                 <div title="Route">
+                    <ms>route</ms>
                     <a href="/pages/geo.html?course={{event.courseId}}&route={{event.routeId}}"
                        target="event-route-preview">
                         <% if (event.sameRoute) { %>
@@ -13,12 +14,11 @@
                             <% const uRoutes = new Set(event.eventSubgroups ? event.eventSubgroups.map(x => x.route.name) : [event.route.name]); %>
                             {{Array.from(uRoutes).join(', ')}}
                         <% } %>
-                        <ms>route</ms>
                     </a>
                 </div>
                 <div title="Climbing">
-                    {-humanElevation(event.routeClimbing, {suffix: true, html: true})-}
                     <ms>landscape</ms>
+                    {-humanElevation(event.routeClimbing, {suffix: true, html: true})-}
                 </div>
                 <div title="View event on Zwift Power">
                     <a href="https://zwiftpower.com/events.php?zid={{event.id}}"

diff --git a/pages/templates/events/list.html.tpl b/pages/templates/events/list.html.tpl
@@ -11,12 +11,12 @@
             <th>Entrants</th>
         </tr>
     </thead>
-    <thead class="loader" data-dir="prev"><tr><td colspan="7">Load More</td></tr></thead>
+    <thead class="loader" data-dir="prev"><tr><td colspan="8">Load More</td></tr></thead>
     <tbody class="events">
         <% for (const event of events) { %>
             {-embed(templates.eventsSummary, {event, eventBadge})-}
-            <tr class="details" data-event-id="{{event.id}}"><td colspan="7"></td></tr>
+            <tr class="details" data-event-id="{{event.id}}"><td colspan="8"></td></tr>
         <% } %>
     </tbody>
-    <tfoot class="loader" data-dir="next"><tr><td colspan="7">Load More</td></tr></tfoot>
+    <tfoot class="loader" data-dir="next"><tr><td colspan="8">Load More</td></tr></tfoot>
 </table>
diff --git a/pages/templates/events/summary.html.tpl b/pages/templates/events/summary.html.tpl
@@ -14,20 +14,23 @@
             <ms title="Allows joining late">acute</ms>
         <% } %>
     </td>
+    <% const prettyType = event.eventType.replace(/_/g, ' ').replace(/GROUP WORKOUT/, 'WORKOUT') %>
     <td class="type">
-        {{event.eventType.replace(/_/g, ' ')}}
-        {-event.sport === 'running' ? '<ms large title="Run">directions_run</ms>' : ''-}
-    </td>
-    <td class="name">{{event.name}}</td>
-    <td><% if (event.sameRoute) { %>
-            {{event.route.name}}
+        <% if (event.sport === 'running') { %>
+            {{prettyType.replace(/RIDE/, 'RUN')}}
+            <ms title="Run">directions_run</ms>
         <% } else { %>
-            <% const uRoutes = new Set(event.eventSubgroups ? event.eventSubgroups.map(x => x.route.name) : [event.route.name]); %>
-            {{Array.from(uRoutes).join(', ')}}
+            {{prettyType}}
         <% } %>
     </td>
+    <td class="name" title="{{event.name}}">{{event.name}}</td>
+    <% if (event.sameRoute && event.route.name) { %>
+        <td class="route" title="Event route: {{event.route.name}}"><ms>route</ms> {{event.route.name}}</td>
+    <% } else { %>
+        <td class="route">-</td>
+    <% } %>
     <% if (event.durationInSeconds) { %>
-        <td>{-humanDuration(event.durationInSeconds, {suffix: true, html: true})-}</td>
+        <td>{-humanDuration(event.durationInSeconds, {suffix: true, html: true, short: true})-}</td>
     <% } else { %>
         <td>{-humanDistance(event.distanceInMeters || event.routeDistance, {suffix: true, html: true})-}</td>
     <% } %>