Compare commits

...

4 Commits

Author SHA1 Message Date
luxick 841046ba36 Minor UI refinements 2026-06-10 21:55:20 +02:00
luxick fc9cc2a150 minor UI fixes 2026-06-10 18:39:37 +02:00
luxick 7dc58121f0 Add attribution 2026-06-10 18:34:40 +02:00
luxick 38a612ae71 Update texts 2026-06-10 18:25:44 +02:00
5 changed files with 94 additions and 9 deletions
+19
View File
@@ -175,5 +175,24 @@
"closed": false, "closed": false,
"createdAt": "2026-06-10T16:01:51.4082662Z", "createdAt": "2026-06-10T16:01:51.4082662Z",
"adminToken": "wBmkZL25zTkrzYgCQBjtGxWY" "adminToken": "wBmkZL25zTkrzYgCQBjtGxWY"
},
{
"id": "y4rE5zp9hW",
"title": "Ad",
"description": "awdwadw\n\nawdawdwa\nwadwda\n\n\nwadw",
"options": [
{
"id": "mkaa95Gr",
"date": "2026-06-18"
},
{
"id": "pQbnHN7b",
"date": "2026-06-20"
}
],
"votes": [],
"closed": false,
"createdAt": "2026-06-10T16:39:18.0584144Z",
"adminToken": "hKD8vupZhQN6vY2BUbXYRwfj"
} }
] ]
+9 -5
View File
@@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>mediator new poll</title> <title>mediator - new poll</title>
<link rel="icon" type="image/svg+xml" href="/static/logo.svg"> <link rel="icon" type="image/svg+xml" href="/static/logo.svg">
<link rel="preload" href="/static/fonts/IosevkaEtoile.woff2" as="font" type="font/woff2" crossorigin> <link rel="preload" href="/static/fonts/IosevkaEtoile.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/static/fonts/IosevkaSlab.woff2" as="font" type="font/woff2" crossorigin> <link rel="preload" href="/static/fonts/IosevkaSlab.woff2" as="font" type="font/woff2" crossorigin>
@@ -13,7 +13,7 @@
<div class="wrap"> <div class="wrap">
<header class="site"> <header class="site">
<a class="logo" href="/"><svg class="dot" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.92" aria-hidden="true"><rect x="2.5" y="2.5" width="19" height="19"/><path d="M9.1 2.5 V15.1 M2.5 15.1 H21.5 M9.1 9 H21.5 M15 15.1 V21.5"/></svg>mediator</a> <a class="logo" href="/"><svg class="dot" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.92" aria-hidden="true"><rect x="2.5" y="2.5" width="19" height="19"/><path d="M9.1 2.5 V15.1 M2.5 15.1 H21.5 M9.1 9 H21.5 M15 15.1 V21.5"/></svg>mediator</a>
<span class="tagline">one calendar for the whole crew</span> <span class="tagline">how hard can it be to get 4 people around a table?</span>
</header> </header>
<div id="create-view"> <div id="create-view">
@@ -23,11 +23,11 @@
<div class="card"> <div class="card">
<label class="field"> <label class="field">
<span>What's the plan?</span> <span>What's the plan?</span>
<input type="text" id="title" maxlength="120" placeholder="Pizza & board games at Lena's" autocomplete="off"> <input type="text" id="title" maxlength="120" autocomplete="off">
</label> </label>
<label class="field"> <label class="field">
<span>Details <span class="hint">(optional)</span></span> <span>Details (optional)</span>
<textarea id="description" maxlength="600" placeholder="Bring a game. We'll order around 7."></textarea> <textarea id="description" maxlength="600"></textarea>
</label> </label>
</div> </div>
@@ -75,6 +75,10 @@
<a class="btn btn-ghost" href="/">Make another</a> <a class="btn btn-ghost" href="/">Make another</a>
</div> </div>
</div> </div>
<footer class="site">
made by <span class="author">luxick</span> &middot; <a href="https://git.luxick.de/luxick/mediator">source code</a>
</footer>
</div> </div>
<script src="/static/calendar.js"></script> <script src="/static/calendar.js"></script>
+7 -3
View File
@@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>mediator poll</title> <title>mediator - poll</title>
<link rel="icon" type="image/svg+xml" href="/static/logo.svg"> <link rel="icon" type="image/svg+xml" href="/static/logo.svg">
<link rel="preload" href="/static/fonts/IosevkaEtoile.woff2" as="font" type="font/woff2" crossorigin> <link rel="preload" href="/static/fonts/IosevkaEtoile.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/static/fonts/IosevkaSlab.woff2" as="font" type="font/woff2" crossorigin> <link rel="preload" href="/static/fonts/IosevkaSlab.woff2" as="font" type="font/woff2" crossorigin>
@@ -13,7 +13,7 @@
<div class="wrap"> <div class="wrap">
<header class="site"> <header class="site">
<a class="logo" href="/"><svg class="dot" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.92" aria-hidden="true"><rect x="2.5" y="2.5" width="19" height="19"/><path d="M9.1 2.5 V15.1 M2.5 15.1 H21.5 M9.1 9 H21.5 M15 15.1 V21.5"/></svg>mediator</a> <a class="logo" href="/"><svg class="dot" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.92" aria-hidden="true"><rect x="2.5" y="2.5" width="19" height="19"/><path d="M9.1 2.5 V15.1 M2.5 15.1 H21.5 M9.1 9 H21.5 M15 15.1 V21.5"/></svg>mediator</a>
<span class="tagline">one calendar for the whole crew</span> <span class="tagline">how hard can it be to get 4 people around a table?</span>
</header> </header>
<div id="not-found" hidden> <div id="not-found" hidden>
@@ -35,7 +35,7 @@
<div class="card" id="vote-card"> <div class="card" id="vote-card">
<label class="field"> <label class="field">
<span>Your name</span> <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> </label>
<div class="actions"> <div class="actions">
<button class="btn btn-primary" id="vote-btn">Send my answer</button> <button class="btn btn-primary" id="vote-btn">Send my answer</button>
@@ -60,6 +60,10 @@
<p class="error" id="admin-error" role="alert"></p> <p class="error" id="admin-error" role="alert"></p>
</div> </div>
</div> </div>
<footer class="site">
made by <span class="author">luxick</span> &middot; <a href="https://git.luxick.de/luxick/mediator">source code</a>
</footer>
</div> </div>
<script src="/static/calendar.js"></script> <script src="/static/calendar.js"></script>
+21
View File
@@ -146,6 +146,27 @@ function renderResults() {
row.append(when, who, count); row.append(when, who, count);
el.appendChild(row); 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 () => { $("vote-btn").addEventListener("click", async () => {
+38 -1
View File
@@ -94,6 +94,18 @@ header.site {
font-size: var(--font-sm); font-size: var(--font-sm);
} }
/* === Footer === */
footer.site {
margin-top: var(--space-5);
padding: var(--space-3) 0;
border-top: var(--border-dashed);
color: var(--text-muted);
font-size: var(--font-sm);
text-align: center;
}
footer.site .author { color: var(--secondary); }
/* === Typography === */ /* === Typography === */
h1 { h1 {
font-size: 1.75rem; font-size: 1.75rem;
@@ -106,6 +118,23 @@ h1 {
.sub { color: var(--text-muted); margin: 0 0 var(--space-5); max-width: 60ch; } .sub { color: var(--text-muted); margin: 0 0 var(--space-5); max-width: 60ch; }
#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); } .hint { font-weight: normal; color: var(--text-muted); font-size: var(--font-sm); }
.note { font-size: var(--font-sm); color: var(--text-muted); } .note { font-size: var(--font-sm); color: var(--text-muted); }
@@ -336,7 +365,7 @@ textarea { resize: vertical; min-height: 4rem; }
bottom: 3px; bottom: 3px;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
font-size: 0.6rem; font-size: 0.8rem;
line-height: 1; line-height: 1;
color: var(--link); color: var(--link);
} }
@@ -421,6 +450,9 @@ textarea { resize: vertical; min-height: 4rem; }
font-variant-numeric: tabular-nums; 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 .when, .result-row.best .count { color: var(--link); }
.result-row.best:hover .when, .result-row.best:hover .count { color: var(--link); } .result-row.best:hover .when, .result-row.best:hover .count { color: var(--link); }
@@ -453,6 +485,11 @@ textarea { resize: vertical; min-height: 4rem; }
::-webkit-scrollbar-thumb:hover { background: var(--primary-hover); } ::-webkit-scrollbar-thumb:hover { background: var(--primary-hover); }
/* === Responsive === */ /* === Responsive === */
@media (max-width: 540px) {
header.site { flex-wrap: wrap; }
.tagline { flex-basis: 100%; }
}
@media (max-width: 480px) { @media (max-width: 480px) {
.result-row { flex-wrap: wrap; } .result-row { flex-wrap: wrap; }
.result-row .when { width: auto; } .result-row .when { width: auto; }