Minor UI refinements

static/index.html

@@ -23,11 +23,11 @@
       <div class="card">
         <label class="field">
           <span>What's the plan?</span>
-          <input type="text" id="title" maxlength="120" placeholder="Boardgames & Beer" autocomplete="off">
+          <input type="text" id="title" maxlength="120" autocomplete="off">
         </label>
         <label class="field">
-          <span>Details <span class="hint">(optional)</span></span>
+          <span>Details (optional)</span>
-          <textarea id="description" maxlength="600" placeholder="Were will we play?"></textarea>
+          <textarea id="description" maxlength="600"></textarea>
         </label>
       </div>
 

static/poll.html

@@ -35,7 +35,7 @@
       <div class="card" id="vote-card">
         <label class="field">
           <span>Your name</span>
-          <input type="text" id="voter-name" maxlength="60" placeholder="So the group knows who answered" autocomplete="name">
+          <input type="text" id="voter-name" maxlength="60" autocomplete="name">
         </label>
         <div class="actions">
           <button class="btn btn-primary" id="vote-btn">Send my answer</button>

static/poll.js

@@ -146,6 +146,27 @@ function renderResults() {
     row.append(when, who, count);
     el.appendChild(row);
   });
+
+  const noneWork = poll.votes.filter((v) => v.optionIds.length === 0).map((v) => v.name);
+  if (noneWork.length > 0) {
+    const row = document.createElement("div");
+    row.className = "result-row none-row";
+
+    const when = document.createElement("span");
+    when.className = "when";
+    when.textContent = "None at all";
+
+    const who = document.createElement("span");
+    who.className = "who";
+    who.textContent = noneWork.join(", ");
+
+    const count = document.createElement("span");
+    count.className = "count";
+    count.textContent = noneWork.length;
+
+    row.append(when, who, count);
+    el.appendChild(row);
+  }
 }
 
 $("vote-btn").addEventListener("click", async () => {

static/style.css

@@ -120,6 +120,21 @@ h1 {
 
 #poll-desc { white-space: pre-line; }
 
+#vote-hint {
+  font-size: var(--font-sm);
+  font-style: italic;
+}
+#vote-hint::before {
+  content: "> ";
+  color: var(--secondary);
+  font-style: normal;
+}
+/* Dashed rule between description and hint — only when a description is shown. */
+#poll-desc:not([hidden]) + #vote-hint {
+  border-top: var(--border-dashed);
+  padding-top: var(--space-4);
+}
+
 .hint { font-weight: normal; color: var(--text-muted); font-size: var(--font-sm); }
 
 .note { font-size: var(--font-sm); color: var(--text-muted); }
@@ -350,7 +365,7 @@ textarea { resize: vertical; min-height: 4rem; }
   bottom: 3px;
   left: 50%;
   transform: translateX(-50%);
-  font-size: 0.6rem;
+  font-size: 0.8rem;
   line-height: 1;
   color: var(--link);
 }
@@ -435,6 +450,9 @@ textarea { resize: vertical; min-height: 4rem; }
   font-variant-numeric: tabular-nums;
 }
 
+.result-row.none-row { border-top: var(--border); margin-top: var(--space-2); }
+.result-row.none-row .when, .result-row.none-row .count { color: var(--danger); }
+
 .result-row.best .when, .result-row.best .count { color: var(--link); }
 .result-row.best:hover .when, .result-row.best:hover .count { color: var(--link); }