From 377e5a97f62d80a7c47c55358f6e1cd3ccedef17 Mon Sep 17 00:00:00 2001
From: Jan Tuomi <jans.tuomi@gmail.com>
Date: Tue, 4 Jun 2024 14:01:08 +0300
Subject: Improve table scrolling ux

---
 static/styles.css                 |  36 +++++++-----
 templates/poll_vote_table.html.j2 | 117 ++++++++++++++++++++------------------
 2 files changed, 82 insertions(+), 71 deletions(-)

diff --git a/static/styles.css b/static/styles.css
index a3d3d3d..2765d9e 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -77,8 +77,13 @@ th, td {
   min-width: 100px;
 }
 
-table {
+.vote-table {
   margin-left: -2px;
+  padding-right: calc((100vw - 1000px) / 2);
+}
+
+.vote-table-container {
+  position: relative;
 }
 
 .vote-table th,
@@ -99,22 +104,22 @@ table {
   font-weight: normal;
 }
 
-.vote-table td:first-child {
+.vote-table td:first-of-type {
   text-align: left;
   padding-left: 5px;
-}
 
-.vote-table tr:last-child td:first-child {
-  padding-left: 0;
+  position: sticky;
+  left: 0;
+
+  background-color: white;
 }
 
-.vote-table tr td:nth-child(even),
-.vote-table tr th:nth-child(even) {
-  background-color: #f2f2f2; /* Light grey background */
+.vote-table tr td:nth-of-type(even),
+.vote-table tr th:nth-of-type(even) {
+  background-color: #f2f2f2 !important; /* Light grey background */
 }
 
-.vote-table tr:nth-child(even),
-.vote-table tr:nth-child(even) {
+.vote-table tr:nth-of-type(odd) td {
   background-color: #f8f6ff; /* Light grey background */
 }
 
@@ -124,6 +129,7 @@ table {
 
 .vote-table input[name="voter_name"] {
   max-width: 150px;
+  margin-bottom: 4px;
 }
 
 .danger-zone {
@@ -134,19 +140,19 @@ table {
   text-align: left;
 }
 
-.poll-form td:last-child,
-.manage-table td:last-child {
+.poll-form td:last-of-type,
+.manage-table td:last-of-type {
   display: flex;
   flex-flow: row;
   align-items: center;
 }
 
-.poll-form td:last-child > *,
-.manage-table td:last-child > * {
+.poll-form td:last-of-type > *,
+.manage-table td:last-of-type > * {
   flex: 1;
 }
 
-.manage-table td:last-child input[type="submit"] {
+.manage-table td:last-of-type input[type="submit"] {
   max-width: 70px;
 }
 
diff --git a/templates/poll_vote_table.html.j2 b/templates/poll_vote_table.html.j2
index a93ebfa..1fe6019 100644
--- a/templates/poll_vote_table.html.j2
+++ b/templates/poll_vote_table.html.j2
@@ -1,63 +1,68 @@
+<div class="vote-table-container">
 <table class="vote-table">
-  <tr>
-    <th></th>
-    {% for choice in choices %}
-    <th {% if choice.id in most_voted_choice_ids %}class="most-voted"{% endif %}>
-      {% include "poll_choice_datetime_range.html.j2" %}
-      <span>
-        {% if choice.id in most_voted_choice_ids %}👑{% endif %}
-        <i>{{ choice.votes_with_value(1) | length }} votes</i>
-      </span>
-    </th>
-    {% endfor %}
-  </tr>
-  {% for voter_name in voter_names %}
-  <tr>
-    <td>
-      {% if voter_name in managed_voter_names %}
-      <form action="/poll/{{ poll.id }}/delete_voter" method="post">
-        <input type="hidden" name="voter_code" value="{{ managed_voter_names[voter_name] }}">
+  <thead>
+    <tr>
+      <th></th>
+      {% for choice in choices %}
+      <th {% if choice.id in most_voted_choice_ids %}class="most-voted"{% endif %}>
+        {% include "poll_choice_datetime_range.html.j2" %}
+        <span>
+          {% if choice.id in most_voted_choice_ids %}👑{% endif %}
+          <i>{{ choice.votes_with_value(1) | length }} votes</i>
+        </span>
+      </th>
+      {% endfor %}
+    </tr>
+  </thead>
+  <tbody>
+    {% for voter_name in voter_names %}
+    <tr>
+      <td>
+        {% if voter_name in managed_voter_names %}
+        <form action="/poll/{{ poll.id }}/delete_voter" method="post">
+          <input type="hidden" name="voter_code" value="{{ managed_voter_names[voter_name] }}">
+          {{ voter_name }}
+          <input class="delete-voter-btn" type="submit" value="❌">
+        </form>
+        {% else %}
         {{ voter_name }}
-        <input class="delete-voter-btn" type="submit" value="❌">
-      </form>
+        {% endif %}
+      </td>
+      {% for choice in choices %}
+      {% if selections[(voter_name, choice.id)] == 1 %}
+      <td>
+        <input type="checkbox" checked disabled>
+      </td>
+      {% elif selections[(voter_name, choice.id)] == 0 %}
+      <td>
+        <input type="checkbox" disabled>
+      </td>
       {% else %}
-      {{ voter_name }}
+      <td>
+        ??
+      </td>
       {% endif %}
-    </td>
-    {% for choice in choices %}
-    {% if selections[(voter_name, choice.id)] == 1 %}
-    <td>
-      <input type="checkbox" checked disabled>
-    </td>
-    {% elif selections[(voter_name, choice.id)] == 0 %}
-    <td>
-      <input type="checkbox" disabled>
-    </td>
-    {% else %}
-    <td>
-      ??
-    </td>
-    {% endif %}
+      {% endfor %}
+    </tr>
     {% endfor %}
-  </tr>
-  {% endfor %}
 
-  <!-- Add a row for the current user -->
-  <form action="/poll/{{ poll.id }}/vote" method="post">
-  <tr>
-    <td>
-      <label for="voter_name" hidden>Your name</label>
-      <input type="text" name="voter_name" placeholder="Your name" required
-             {% if prefill_voter_name %}value="{{ prefill_voter_name }}"{% endif %}>
-      <input class="green" type="submit" value="Submit">
-    </td>
-    {% for choice in choices %}
-    <td>
-      <input type="checkbox" name="choice_{{ choice.id }}">
-    </td>
-    {% endfor %}
-  </tr>
-  </form>
-  <!-- End of the row for the current user -->
+    <tr>
+      <!-- Add a row for the current user -->
+      <form action="/poll/{{ poll.id }}/vote" method="post">
+      <td>
+        <label for="voter_name" hidden>Your name</label>
+        <input type="text" name="voter_name" placeholder="Your name" required
+               {% if prefill_voter_name %}value="{{ prefill_voter_name }}"{% endif %}>
+        <input class="green" type="submit" value="Submit">
+      </td>
+      {% for choice in choices %}
+      <td>
+        <input type="checkbox" name="choice_{{ choice.id }}">
+      </td>
+      {% endfor %}
+    </form>
+    </tr>
+    <!-- End of the row for the current user -->
+  </tbody>
 </table>
-
+</div>
-- 
cgit v1.3