ticket #91 attempt 1

devplacepy/static/css/engagement.css

@@ -172,6 +172,7 @@
     text-align: left;
     cursor: pointer;
     overflow: hidden;
+    touch-action: manipulation;
 }
 
 .poll-option[disabled] {
@@ -182,6 +183,10 @@
     border-color: var(--border-light);
 }
 
+.poll-option:not([disabled]):active {
+    background-color: var(--bg-card-hover);
+}
+
 .poll-option.chosen {
     border-color: var(--accent);
 }

devplacepy/static/js/PollManager.js

@@ -5,7 +5,8 @@ import { OptimisticAction } from "./OptimisticAction.js";
 export class PollManager extends OptimisticAction {
     constructor() {
         super();
-        document.addEventListener("click", (event) => this.onClick(event));
+        this.container = null;
+        document.addEventListener("pointerdown", (event) => this.onClick(event));
         document.addEventListener("submit", (event) => this.onSubmit(event), true);
     }
 
@@ -42,7 +43,8 @@ export class PollManager extends OptimisticAction {
         }
         const pollUid = poll.dataset.pollUid;
         const optionUid = option.dataset.optionUid;
-        await this.submit(`/polls/${pollUid}/vote`, { option_uid: optionUid }, null, (result) => this.render(poll, result));
+        this.container = poll;
+        await this.submit(`/polls/${pollUid}/vote`, { option_uid: optionUid }, this.container, (result) => this.render(poll, result));
     }
 
     render(poll, result) {

devplacepy/static/js/VoteManager.js

@@ -5,21 +5,18 @@ import { OptimisticAction } from "./OptimisticAction.js";
 export class VoteManager extends OptimisticAction {
     constructor() {
         super();
-        document.addEventListener("click", (event) => this.onClick(event));
+        this.initVoteButtons();
     }
 
-    onClick(event) {
+    initVoteButtons() {
-        const button = event.target.closest('form[action^="/votes/"] button[type="submit"]');
+        document.querySelectorAll('form[action^="/votes/"] button[type="submit"]').forEach((button) => {
-        if (!button) {
+            const form = button.closest("form");
-            return;
+            button.addEventListener("click", (event) => {
-        }
+                event.preventDefault();
-        const form = button.closest("form");
+                event.stopPropagation();
-        if (!form) {
+                this.cast(form, button);
-            return;
+            });
-        }
+        });
-        event.preventDefault();
-        event.stopPropagation();
-        this.cast(form, button);
     }
 
     cast(form, button) {

devplacepy/templating.py

@@ -29,7 +29,7 @@ def is_self(user, uid) -> bool:
 def guest_disabled(user) -> Markup:
     if user:
         return Markup("")
-    return Markup(' disabled aria-disabled="true" title="Log in to vote"')
+    return Markup(' disabled aria-disabled="true"')
 
 
 def static_url(path) -> str: