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

Archive button: it had no text colour, and no room beside its neighbours

Browse Source 
I gave it the class "ghost", which on PolHunter is a button and here is the
giant faded wordmark in the footer. That class sets color:transparent, so the
label was not dark, it was invisible. It now uses a new "quiet" variant, grey
on a muted outline, which reads clearly and sits below the mint actions rather
than competing with them.

The campaign actions also had no spacing on desktop. The mobile layout already
gapped them; the wide one leaned on a plain space between tags, so they sat
flush against each other.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
martbost
2026-09-23 08:57:56 -05:00
parent f0a6a93f8b
commit 02d60d6ee1
4 changed files with 13 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/assets/my.js
+1 -1
View File
@@ -942,7 +942,7 @@
+ '<td data-l="Status">' + (c.status === 'out' ? (c.type === 'visits' ? '<span class="badge">pack delivered</span>' : '<span class="badge amber">budget spent</span>') : c.status === 'done' ? '<span class="muted">' + (c.type === 'featured' ? 'run ended' : 'ended') + '</span>' : c.scheduled ? '<span class="badge">scheduled</span>' : c.status) + '</td>'
+ '<td class="act">' + (c.status === 'active' ? '<button class="btn small sec" data-camp="' + c.id + '" data-act="pause">Pause</button>'
: c.status === 'paused' ? '<button class="btn small sec" data-camp="' + c.id + '" data-act="resume">Resume</button>' : '')
+ (['paused', 'out', 'done'].includes(c.status) ? ' <button class="btn small ghost" data-arch="' + c.id + '" data-archname="' + esc(c.name || ('#' + c.id)) + '" data-archleft="' + Math.max(0, (c.budget || 0) - (c.spent || 0)) + '" title="move it out of this list, keep its numbers">Archive</button>' : '')
+ (['paused', 'out', 'done'].includes(c.status) ? ' <button class="btn small quiet" data-arch="' + c.id + '" data-archname="' + esc(c.name || ('#' + c.id)) + '" data-archleft="' + Math.max(0, (c.budget || 0) - (c.spent || 0)) + '" title="move it out of this list, keep its numbers">Archive</button>' : '')
+ (c.type === 'featured' ? ' <button class="btn small sec" data-extend="' + c.id + '" title="book more days at the daily rate">Extend run</button>'
: c.type === 'visits' ? ' <button class="btn small sec" data-morevisits="' + c.id + '">Buy more visits</button>'
: ' <button class="btn small sec" data-topup="' + c.id + '">Buy more views</button>')
public/assets/site.css
+9
View File
@@ -53,6 +53,15 @@ nav .links a.active{color:var(--mint);background:rgba(67,232,195,.1)}
.btn.sec{background:transparent;color:var(--mint);border:1px solid rgba(67,232,195,.6);box-shadow:none}
.btn.sec:hover{background:rgba(67,232,195,.08);box-shadow:0 4px 26px rgba(67,232,195,.2)}
.btn.small{padding:8px 17px;font-size:13px}
/* a third, quieter button for actions that are not the main move (Archive). NOT ".ghost": that is
the giant footer wordmark and it sets color:transparent, which made the Archive button invisible
(Marty, 2026-09-23). */
.btn.quiet{background:transparent;color:var(--muted);border:1px solid var(--line-strong);box-shadow:none}
.btn.quiet:hover{background:rgba(139,166,156,.1);color:var(--ink);border-color:var(--muted);box-shadow:none}
/* the member's campaign actions sat flush against each other on desktop; the mobile rule already
had a gap, this gives the wide layout the same room */
.camp-table td.act .btn{margin-right:8px}
.camp-table td.act .btn:last-child{margin-right:0}
.btn:disabled{opacity:.45;cursor:default;transform:none;box-shadow:none}
/* ── hero: centered, light-trail set-piece ─────────── */
.hero{position:relative;text-align:center;padding:120px 0 84px;overflow:visible}