cscott/priority-horizon
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add checkbox/done UI with manly dark styling

Browse Source
This commit is contained in:
Conan Scott
2026-02-26 03:55:19 +00:00
parent 8a168759a1
commit 641f6bd2b1
1 changed files with 114 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

171
public/index.html
View File

@@ -3,41 +3,46 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Priority Horizon</title> <title>CLAWRIZON</title>
<style> <style>
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;600&family=Inter:wght@300;400;500&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=Space+Mono:wght@400;700&display=swap');
* { margin: 0; padding: 0; box-sizing: border-box; } * { margin: 0; padding: 0; box-sizing: border-box; }
body { body {
font-family: 'Inter', sans-serif; font-family: 'Space Grotesk', sans-serif;
background: #f5f0e8; background: #1a1a1a;
min-height: 100vh; min-height: 100vh;
color: #3a3330; color: #e8e0d8;
} }
header { header {
text-align: center; text-align: center;
padding: 2rem 1rem 1rem; padding: 2rem 1rem 0.75rem;
border-bottom: 2px solid #333;
margin-bottom: 1.25rem;
} }
header h1 { header h1 {
font-family: 'Caveat', cursive; font-family: 'Space Mono', monospace;
font-size: 2.4rem; font-size: 2rem;
font-weight: 600; font-weight: 700;
color: #5a4a3a; color: #f0e6d6;
letter-spacing: 0.02em; letter-spacing: 0.3em;
text-transform: uppercase;
} }
header p { header p {
font-size: 0.8rem; font-size: 0.7rem;
color: #9a8a7a; color: #666;
margin-top: 0.25rem; margin-top: 0.4rem;
font-weight: 300; font-weight: 400;
letter-spacing: 0.15em;
text-transform: uppercase;
} }
.board { .board {
display: flex; display: flex;
gap: 1.25rem; gap: 1.25rem;
padding: 1rem 1.5rem 2rem; padding: 0.5rem 1.5rem 2rem;
max-width: 1200px; max-width: 1200px;
margin: 0 auto; margin: 0 auto;
align-items: flex-start; align-items: flex-start;
@@ -53,24 +58,30 @@
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
margin-bottom: 0.75rem; margin-bottom: 0.75rem;
padding: 0 0.25rem; padding: 0.5rem 0.5rem;
border-bottom: 2px solid;
} }
.column-header h2 { .column-header h2 {
font-family: 'Caveat', cursive; font-family: 'Space Mono', monospace;
font-size: 1.5rem; font-size: 0.85rem;
font-weight: 600; font-weight: 700;
letter-spacing: 0.15em;
text-transform: uppercase;
} }
.col-now .column-header h2 { color: #c44; } .col-now .column-header { border-color: #c44; }
.col-soon .column-header h2 { color: #b87a2a; } .col-soon .column-header { border-color: #b87a2a; }
.col-eventually .column-header h2 { color: #5a8a5a; } .col-eventually .column-header { border-color: #5a8a5a; }
.col-now .column-header h2 { color: #e86060; }
.col-soon .column-header h2 { color: #d4a04a; }
.col-eventually .column-header h2 { color: #7ab87a; }
.add-btn { .add-btn {
background: none; background: none;
border: 1.5px dashed #ccc; border: 1.5px solid #444;
border-radius: 50%; border-radius: 3px;
width: 28px; height: 28px; width: 26px; height: 26px;
font-size: 1.2rem; font-size: 1.1rem;
color: #aaa; color: #666;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
align-items: center; align-items: center;
@@ -78,45 +89,85 @@
transition: all 0.2s; transition: all 0.2s;
line-height: 1; line-height: 1;
} }
.add-btn:hover { border-color: #999; color: #666; background: rgba(0,0,0,0.03); } .add-btn:hover { border-color: #888; color: #aaa; background: rgba(255,255,255,0.05); }
.notes-list { .notes-list {
min-height: 60px; min-height: 60px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.6rem; gap: 0.5rem;
} }
.notes-list.drag-over { background: rgba(0,0,0,0.03); border-radius: 12px; } .notes-list.drag-over { background: rgba(255,255,255,0.03); border-radius: 4px; }
.note { .note {
background: #fffdf5; background: #242424;
border-radius: 6px; border-radius: 3px;
padding: 0.75rem 0.9rem; padding: 0.65rem 0.75rem;
box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 1px rgba(0,0,0,0.04); padding-left: 2.2rem;
box-shadow: 0 1px 3px rgba(0,0,0,0.3);
cursor: grab; cursor: grab;
position: relative; position: relative;
transition: box-shadow 0.2s, transform 0.15s; transition: box-shadow 0.2s, transform 0.15s, opacity 0.3s;
user-select: none; user-select: none;
border: 1px solid #333;
} }
.note:hover { box-shadow: 0 3px 8px rgba(0,0,0,0.1); } .note:hover { border-color: #444; box-shadow: 0 2px 8px rgba(0,0,0,0.4); }
.note.dragging { opacity: 0.5; transform: rotate(2deg); } .note.dragging { opacity: 0.4; transform: rotate(1deg); }
.col-now .note { border-left: 3px solid #e8a0a0; } .col-now .note { border-left: 3px solid #c44; }
.col-soon .note { border-left: 3px solid #e8c88a; } .col-soon .note { border-left: 3px solid #b87a2a; }
.col-eventually .note { border-left: 3px solid #a0c8a0; } .col-eventually .note { border-left: 3px solid #5a8a5a; }
/* Checkbox */
.note-check {
position: absolute;
left: 0.6rem;
top: 50%;
transform: translateY(-50%);
width: 16px; height: 16px;
appearance: none;
-webkit-appearance: none;
border: 2px solid #555;
border-radius: 2px;
background: transparent;
cursor: pointer;
transition: all 0.2s;
}
.note-check:checked {
background: #666;
border-color: #666;
}
.note-check:checked::after {
content: '✓';
position: absolute;
top: -2px; left: 1px;
font-size: 12px;
color: #1a1a1a;
font-weight: 700;
}
.note.done {
opacity: 0.4;
}
.note.done .note-text {
text-decoration: line-through;
text-decoration-color: #666;
}
.note-text { .note-text {
font-size: 0.88rem; font-size: 0.85rem;
line-height: 1.45; line-height: 1.45;
min-height: 1.3em; min-height: 1.3em;
outline: none; outline: none;
word-break: break-word; word-break: break-word;
color: #d4ccc4;
} }
.note-text:focus { .note-text:focus {
background: #fefcf0; background: #2a2a2a;
border-radius: 3px; border-radius: 2px;
padding: 2px 4px; padding: 2px 4px;
margin: -2px -4px; margin: -2px -4px;
color: #f0e8e0;
} }
.note-text[contenteditable="true"] { cursor: text; } .note-text[contenteditable="true"] { cursor: text; }
@@ -125,8 +176,8 @@
top: 4px; right: 6px; top: 4px; right: 6px;
background: none; background: none;
border: none; border: none;
color: #ccc; color: #444;
font-size: 0.85rem; font-size: 0.8rem;
cursor: pointer; cursor: pointer;
opacity: 0; opacity: 0;
transition: opacity 0.15s, color 0.15s; transition: opacity 0.15s, color 0.15s;
@@ -139,15 +190,15 @@
@media (max-width: 700px) { @media (max-width: 700px) {
.board { flex-direction: column; padding: 0.75rem; gap: 1.5rem; } .board { flex-direction: column; padding: 0.75rem; gap: 1.5rem; }
.column { width: 100%; } .column { width: 100%; }
header h1 { font-size: 2rem; } header h1 { font-size: 1.5rem; }
.note-delete { opacity: 0.6; } .note-delete { opacity: 0.6; }
} }
</style> </style>
</head> </head>
<body> <body>
<header> <header>
<h1>Priority Horizon</h1> <h1>Clawrizon</h1>
<p>drag to reorder · click to edit</p> <p>drag to reorder · click to edit · check when done</p>
</header> </header>
<div class="board" id="board"></div> <div class="board" id="board"></div>
@@ -171,10 +222,20 @@ async function api(path, opts = {}) {
function createNoteEl(note, colKey) { function createNoteEl(note, colKey) {
const el = document.createElement('div'); const el = document.createElement('div');
el.className = 'note'; el.className = 'note' + (note.done ? ' done' : '');
el.draggable = true; el.draggable = true;
el.dataset.id = note.id; el.dataset.id = note.id;
const check = document.createElement('input');
check.type = 'checkbox';
check.className = 'note-check';
check.checked = !!note.done;
check.addEventListener('change', async () => {
const done = check.checked;
el.classList.toggle('done', done);
await api('/notes/' + note.id, { method: 'PATCH', body: { done } });
});
const text = document.createElement('div'); const text = document.createElement('div');
text.className = 'note-text'; text.className = 'note-text';
text.contentEditable = true; text.contentEditable = true;
@@ -203,6 +264,7 @@ function createNoteEl(note, colKey) {
await api('/notes/' + note.id, { method: 'DELETE' }); await api('/notes/' + note.id, { method: 'DELETE' });
}; };
el.appendChild(check);
el.appendChild(text); el.appendChild(text);
el.appendChild(del); el.appendChild(del);
@@ -254,7 +316,6 @@ async function render() {
e.preventDefault(); e.preventDefault();
e.dataTransfer.dropEffect = 'move'; e.dataTransfer.dropEffect = 'move';
list.classList.add('drag-over'); list.classList.add('drag-over');
// Position indicator
const afterEl = getDragAfterElement(list, e.clientY); const afterEl = getDragAfterElement(list, e.clientY);
const dragging = document.querySelector('.dragging'); const dragging = document.querySelector('.dragging');
if (dragging) { if (dragging) {
@@ -267,7 +328,6 @@ async function render() {
e.preventDefault(); e.preventDefault();
list.classList.remove('drag-over'); list.classList.remove('drag-over');
if (!dragItem) return; if (!dragItem) return;
// Save new order
const items = []; const items = [];
document.querySelectorAll('.notes-list').forEach(nl => { document.querySelectorAll('.notes-list').forEach(nl => {
const colKey = nl.dataset.column; const colKey = nl.dataset.column;
@@ -302,7 +362,7 @@ function getDragAfterElement(container, y) {
let touchDragEl = null, touchClone = null, touchStartY = 0, touchStartX = 0; let touchDragEl = null, touchClone = null, touchStartY = 0, touchStartX = 0;
document.addEventListener('touchstart', e => { document.addEventListener('touchstart', e => {
const note = e.target.closest('.note'); const note = e.target.closest('.note');
if (!note || e.target.closest('.note-text:focus') || e.target.closest('.note-delete')) return; if (!note || e.target.closest('.note-text:focus') || e.target.closest('.note-delete') || e.target.closest('.note-check')) return;
touchStartX = e.touches[0].clientX; touchStartX = e.touches[0].clientX;
touchStartY = e.touches[0].clientY; touchStartY = e.touches[0].clientY;
touchDragEl = note; touchDragEl = note;
@@ -314,7 +374,7 @@ document.addEventListener('touchmove', e => {
const dy = e.touches[0].clientY - touchStartY; const dy = e.touches[0].clientY - touchStartY;
if (!touchClone && (Math.abs(dx) > 10 || Math.abs(dy) > 10)) { if (!touchClone && (Math.abs(dx) > 10 || Math.abs(dy) > 10)) {
touchClone = touchDragEl.cloneNode(true); touchClone = touchDragEl.cloneNode(true);
touchClone.style.cssText = 'position:fixed;pointer-events:none;z-index:1000;opacity:0.8;width:' + touchDragEl.offsetWidth + 'px;transform:rotate(2deg);'; touchClone.style.cssText = 'position:fixed;pointer-events:none;z-index:1000;opacity:0.8;width:' + touchDragEl.offsetWidth + 'px;transform:rotate(1deg);';
document.body.appendChild(touchClone); document.body.appendChild(touchClone);
touchDragEl.style.opacity = '0.3'; touchDragEl.style.opacity = '0.3';
} }
@@ -330,8 +390,6 @@ document.addEventListener('touchend', async e => {
const x = e.changedTouches[0].clientX, y = e.changedTouches[0].clientY; const x = e.changedTouches[0].clientX, y = e.changedTouches[0].clientY;
touchClone.remove(); touchClone = null; touchClone.remove(); touchClone = null;
touchDragEl.style.opacity = '1'; touchDragEl.style.opacity = '1';
// Find target column
const lists = document.querySelectorAll('.notes-list'); const lists = document.querySelectorAll('.notes-list');
let targetList = null; let targetList = null;
lists.forEach(l => { lists.forEach(l => {
@@ -342,7 +400,6 @@ document.addEventListener('touchend', async e => {
const afterEl = getDragAfterElement(targetList, y); const afterEl = getDragAfterElement(targetList, y);
if (afterEl) targetList.insertBefore(touchDragEl, afterEl); if (afterEl) targetList.insertBefore(touchDragEl, afterEl);
else targetList.appendChild(touchDragEl); else targetList.appendChild(touchDragEl);
// Save
const items = []; const items = [];
document.querySelectorAll('.notes-list').forEach(nl => { document.querySelectorAll('.notes-list').forEach(nl => {
nl.querySelectorAll('.note').forEach((n, i) => { nl.querySelectorAll('.note').forEach((n, i) => {