feat: 5 dramatic extra themes (neon/terminal/blueprint/sunset) + board/review/layout polish
- Themes: add neon (cyber gradient), terminal (green CRT), blueprint (graph paper) and sunset (vaporwave) alongside the default Light (Y2K paper) and Dark. Theme toggle now cycles all; profile selector lists them; server validates against a shared whitelist. - Bounty cards now show the project (customer) name. - Remove the celebratory emoji from the empty Review Queue. - Full-width h1 underline rule; My Tasks columns stack vertically for more room per task; card action buttons wrap/right-align so they never overflow. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
@@ -5,6 +5,7 @@ const grid = document.getElementById('board-grid');
|
||||
const errorBox = document.getElementById('error');
|
||||
let meId = '';
|
||||
let tasks = [];
|
||||
const customerNames = new Map();
|
||||
|
||||
const esc = (s) => String(s ?? '').replace(/[&<>"']/g, (c) => ({
|
||||
'&': '&', '<': '<', '>': '>', '"': '"', "'": ''',
|
||||
@@ -25,6 +26,7 @@ async function load() {
|
||||
const qs = new URLSearchParams(f).toString();
|
||||
const res = await api('GET', '/api/v1/board?' + qs);
|
||||
tasks = res.tasks;
|
||||
(res.customers || []).forEach((c) => customerNames.set(c.id, c.name));
|
||||
const sel = document.getElementById('f-customer');
|
||||
if (sel.options.length === 1) {
|
||||
res.customers.forEach((c) => sel.add(new Option(c.name, c.id)));
|
||||
@@ -58,6 +60,7 @@ function renderCard(t) {
|
||||
<span class="badge accent" style="font-size:1rem">◈ ${t.bounty}</span>
|
||||
<span>${ageBadge(t)}</span>
|
||||
</div>
|
||||
${customerNames.has(t.customerId) ? `<p class="muted card-project">${esc(customerNames.get(t.customerId))}</p>` : ''}
|
||||
<h3 class="mt"><a href="/tasks/${t.id}">${esc(t.title)}</a></h3>
|
||||
<p class="muted">${esc((t.description || '').slice(0, 180))}</p>
|
||||
<p class="muted">${(t.acceptanceCriteria || []).length} acceptance criteria</p>
|
||||
|
||||
@@ -16,9 +16,12 @@ const themeBtn = document.getElementById('nav-theme');
|
||||
if (themeBtn) {
|
||||
themeBtn.addEventListener('click', async () => {
|
||||
const el = document.documentElement;
|
||||
const next = el.dataset.theme === 'dark' ? 'light' : 'dark';
|
||||
const themes = (el.dataset.themes || 'light,dark').split(',');
|
||||
const cur = themes.indexOf(el.dataset.theme);
|
||||
const next = themes[(cur + 1) % themes.length];
|
||||
el.dataset.theme = next;
|
||||
try { localStorage.setItem('theme', next); } catch (e) { /* ignore */ }
|
||||
toast('Theme: ' + next);
|
||||
if (document.body.dataset.loggedIn === '1') {
|
||||
try {
|
||||
await api('PATCH', '/api/v1/profile', { settings: { theme: next } });
|
||||
|
||||
@@ -26,7 +26,7 @@ async function load() {
|
||||
return card;
|
||||
}));
|
||||
if (!res.tasks.length) {
|
||||
host.innerHTML = '<p class="muted">Nothing waiting for review. 🎉</p>';
|
||||
host.innerHTML = '<p class="muted">Nothing waiting for review.</p>';
|
||||
}
|
||||
} catch (e) { errorBox.textContent = e.message; }
|
||||
}
|
||||
|
||||
@@ -5,7 +5,9 @@
|
||||
var el = document.documentElement;
|
||||
var saved = null;
|
||||
try { saved = localStorage.getItem('theme'); } catch (e) { /* private mode */ }
|
||||
var THEMES = ['light', 'dark', 'neon', 'terminal', 'blueprint', 'sunset'];
|
||||
var theme = saved || el.dataset.defaultTheme || 'light';
|
||||
if (theme !== 'light' && theme !== 'dark') theme = 'light';
|
||||
if (THEMES.indexOf(theme) === -1) theme = 'light';
|
||||
el.dataset.theme = theme;
|
||||
el.dataset.themes = THEMES.join(',');
|
||||
})();
|
||||
|
||||
Reference in New Issue
Block a user