marty/polhunter
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Board: line the mission buttons up, and give the referral card its own row

Browse Source 
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 <noreply@anthropic.com>
This commit is contained in:
martbost
2026-09-23 06:15:52 -05:00
parent c316dab8e6
commit 97dbd66a5c
3 changed files with 22 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/app.js
+3 -3
View File
@@ -38,12 +38,12 @@
+ '<span class="tag' + (m.done ? ' done' : '') + '">' + (m.done ? 'Done today' : esc(m.site)) + '</span>'
+ '<h3>' + esc(m.name) + '</h3><p>' + esc(m.brief) + '</p>'
+ '<p style="margin-top:10px"><span class="range">' + r.minPol + ' to ' + r.maxPol + ' POL</span> <span style="color:var(--dim);font-size:12px">· ' + m.dwell + 's on the site</span></p>'
+ (m.done ? '' : (board.pool && board.pool.spent && !isOpen) ? '<div style="margin-top:14px"><span class="tag gold">Closed until midnight Central</span></div>' : (board.daily && !board.daily.left && !isOpen) ? '<div style="margin-top:14px"><span class="tag">Back tomorrow</span></div>' : isOpen
+ (m.done ? '' : (board.pool && board.pool.spent && !isOpen) ? '<div class="cardact"><span class="tag gold">Closed until midnight Central</span></div>' : (board.daily && !board.daily.left && !isOpen) ? '<div class="cardact"><span class="tag">Back tomorrow</span></div>' : isOpen
? '<div class="timer" id="timer">Your code appears on the site after <b>' + m.dwell + 's</b>. Keep that tab open.</div>'
+ '<div class="codebox"><input id="code" maxlength="6" placeholder="6 CHARACTERS" autocomplete="off" spellcheck="false" inputmode="text" autocapitalize="characters"><button class="btn pol" id="submit">Claim</button></div><div class="site" style="font-size:12px;margin-top:6px">Six characters. On the site, tap the code to copy it, then paste it here.</div>'
+ '<div class="msg" id="msg"></div>'
+ '<p style="margin-top:8px"><a href="' + esc(open.url) + '" target="_blank" rel="noopener">Open the site again ↗</a></p>'
: '<div style="margin-top:14px"><button class="btn" data-start="' + esc(m.id) + '">Start mission</button></div>')
: '<div class="cardact"><button class="btn" data-start="' + esc(m.id) + '">Start mission</button></div>')
+ '</div>';
}
// 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 ? '<div class="notice" style="grid-column:1/-1"><b>Today\u2019s POL pool is spent.</b> No more claims today. Claims reopen at midnight Central' + (pool.resetsAt ? ', in ' + until(pool.resetsAt) : '') + '.</div>' : '')
+ referralCard()
+ (board.missions.length ? board.missions.map(card).join('') : '<div class="card"><p>No missions are open right now. Check back soon.</p></div>');
if ($('refSlot')) $('refSlot').innerHTML = board.me.wallet ? referralCard() : '';
const rc = $('refCopy');
if (rc) rc.addEventListener('click', async () => {
const v = $('refLink').value;