From 97dbd66a5cd6c9eb541f3089d31f4e8621b2a7ee Mon Sep 17 00:00:00 2001 From: martbost Date: Wed, 23 Sep 2026 06:15:52 -0500 Subject: [PATCH] Board: line the mission buttons up, and give the referral card its own row Every mission brief is a different length, so the Start mission buttons sat at a different height in each card. The action now sits at the foot of the card, so a row of them lines up whatever the brief above it says. The referral card was in the same grid and is taller than any mission, so it stretched the two cards beside it and left them with a hole under the button. It moves above the grid into its own slot, where it splits into two columns on a wide screen so the text does not run the full width. Co-Authored-By: Claude Opus 5 --- public/app.html | 5 +++-- public/app.js | 6 +++--- public/style.css | 16 ++++++++++++++++ 3 files changed, 22 insertions(+), 5 deletions(-) diff --git a/public/app.html b/public/app.html index 5e1b674..8c50e69 100644 --- a/public/app.html +++ b/public/app.html @@ -5,7 +5,7 @@ Your board · PolHunter - +
@@ -18,6 +18,7 @@

Your missions

Each find pays a random drip. Your codes are yours alone.
+

Loading your board…

@@ -46,6 +47,6 @@
Rewards are for completed missions, not income. The daily pool is limited; when it is spent, claims close until midnight Central. Cryptocurrency involves risk of loss.
- + diff --git a/public/app.js b/public/app.js index 0a2b0f6..b19bd0a 100644 --- a/public/app.js +++ b/public/app.js @@ -38,12 +38,12 @@ + '' + (m.done ? 'Done today' : esc(m.site)) + '' + '

' + esc(m.name) + '

' + esc(m.brief) + '

' + '

' + r.minPol + ' to ' + r.maxPol + ' POL · ' + m.dwell + 's on the site

' - + (m.done ? '' : (board.pool && board.pool.spent && !isOpen) ? '
Closed until midnight Central
' : (board.daily && !board.daily.left && !isOpen) ? '
Back tomorrow
' : isOpen + + (m.done ? '' : (board.pool && board.pool.spent && !isOpen) ? '
Closed until midnight Central
' : (board.daily && !board.daily.left && !isOpen) ? '
Back tomorrow
' : isOpen ? '
Your code appears on the site after ' + m.dwell + 's. Keep that tab open.
' + '
Six characters. On the site, tap the code to copy it, then paste it here.
' + '
' + '

Open the site again ↗

' - : '
') + : '
') + ''; } // The best-paid thing on the board, and the reason it sits first: sharing used to live on a page @@ -103,8 +103,8 @@ const pool = board.pool || {}; if (!board.me.wallet) $('missions').innerHTML = onboarding(); else $('missions').innerHTML = (pool.spent ? '
Today\u2019s POL pool is spent. No more claims today. Claims reopen at midnight Central' + (pool.resetsAt ? ', in ' + until(pool.resetsAt) : '') + '.
' : '') - + referralCard() + (board.missions.length ? board.missions.map(card).join('') : '

No missions are open right now. Check back soon.

'); + if ($('refSlot')) $('refSlot').innerHTML = board.me.wallet ? referralCard() : ''; const rc = $('refCopy'); if (rc) rc.addEventListener('click', async () => { const v = $('refLink').value; diff --git a/public/style.css b/public/style.css index b264bd2..a28c96f 100644 --- a/public/style.css +++ b/public/style.css @@ -118,3 +118,19 @@ textarea{width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(-- .ref-list{margin-top:12px;border-top:1px solid var(--edge);padding-top:8px} .ref-row{display:flex;justify-content:space-between;gap:10px;font-size:13px;padding:4px 0} .ref-row .ref-state{color:var(--dim);font-size:12px;text-align:right} + +/* mission cards: the action sits at the foot of every card, so a row of them lines up whatever + the brief is long or short (Marty, 2026-09-23) */ +#missions .card{display:flex;flex-direction:column} +#missions .cardact{margin-top:auto;padding-top:14px} +#missions .card .timer{margin-top:auto} +/* the referral card is taller than any mission, so it sits above the grid rather than stretching + a whole row of them; on a wide screen it splits so the text does not run the full width */ +#refSlot{margin-bottom:16px} +#refSlot .ref-card{margin:0} +@media (min-width:900px){ + #refSlot .ref-card{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);column-gap:30px;align-items:start} + #refSlot .ref-card .tag,#refSlot .ref-card h3{grid-column:1} + #refSlot .ref-card p,#refSlot .ref-card .codebox{grid-column:1} + #refSlot .ref-card .ref-list,#refSlot .ref-card>p:last-child{grid-column:2;grid-row:2/span 5;align-self:stretch;margin-top:0;border-top:0;border-left:1px solid var(--edge);padding-left:22px} +}