diff options
| -rw-r--r-- | static/styles.css | 36 | ||||
| -rw-r--r-- | 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> |