From a19a3fc31e5157501fad911ab33872a17207b55b Mon Sep 17 00:00:00 2001 From: martbost Date: Tue, 15 Sep 2026 04:37:43 -0500 Subject: [PATCH] Campaigns list: stacked cards on phones with the buttons at the bottom, no sideways scroll (Jim, 2026-09-15) Co-Authored-By: Claude Fable 5.1 --- public/assets/my.js | 18 +++++++++--------- public/assets/site.css | 15 +++++++++++++++ public/my.html | 4 ++-- 3 files changed, 26 insertions(+), 11 deletions(-) diff --git a/public/assets/my.js b/public/assets/my.js index 5565666..6442fae 100644 --- a/public/assets/my.js +++ b/public/assets/my.js @@ -803,16 +803,16 @@ if (!r.campaigns.length) { el.innerHTML = '

No campaigns yet. Launch your first below.

'; return; } const tbl = document.createElement('div'); tbl.className = 'tablewrap'; - tbl.innerHTML = '' + tbl.innerHTML = '
NameTypeViews hereNetwork viewsClicks
' + '' - + r.campaigns.map(c => '' - + '' - + '' - + '' - + '' - + '' - + '' - + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '').join('') + '
NameTypeViews hereNetwork viewsClicksSpentBudgetStatus
' + c.name + '' + hourBars(r.hours && r.hours[c.id]) + geoLine(r.geo && r.geo[c.id]) + '' + c.type + (c.type === 'banner' && c.width ? ' ' + c.width + '×' + c.height + '' : '') + (c.dailyCap ? ' cap ' + c.dailyCap + '/day' : '') + (c.geo ? ' tier ' + esc(c.geo.replace(/,/g, '+')) + '' : '') + schedChips(c) + '' + c.imps.toLocaleString() + '' + (['banner', 'text'].includes(c.type) ? (c.impsNas || 0).toLocaleString() : 'n/a') + '' + c.clicks + (r.clickSources && r.clickSources[c.id] ? '
' + Object.entries(r.clickSources[c.id]).sort((a, b) => b[1] - a[1]).map(([k, v]) => esc(k) + ' ' + v).join(' · ') + (c.impsNas ? ' · network: see Network views' : '') + '
' : '') + '		' + c.spent + '' + c.budget + '' + (c.status === 'out' ? 'budget spent' : c.status === 'done' ? 'ended' : c.scheduled ? 'scheduled' : c.status) + '' + (c.status === 'active' ? '' + + r.campaigns.map(c => '
' + c.name + '' + hourBars(r.hours && r.hours[c.id]) + geoLine(r.geo && r.geo[c.id]) + '' + c.type + (c.type === 'banner' && c.width ? ' ' + c.width + '×' + c.height + '' : '') + (c.dailyCap ? ' cap ' + c.dailyCap + '/day' : '') + (c.geo ? ' tier ' + esc(c.geo.replace(/,/g, '+')) + '' : '') + schedChips(c) + '' + c.imps.toLocaleString() + '' + (['banner', 'text'].includes(c.type) ? (c.impsNas || 0).toLocaleString() : 'n/a') + '' + c.clicks + (r.clickSources && r.clickSources[c.id] ? '
' + Object.entries(r.clickSources[c.id]).sort((a, b) => b[1] - a[1]).map(([k, v]) => esc(k) + ' ' + v).join(' · ') + (c.impsNas ? ' · network: see Network views' : '') + '
' : '') + '		' + c.spent + '' + c.budget + '' + (c.status === 'out' ? 'budget spent' : c.status === 'done' ? 'ended' : c.scheduled ? 'scheduled' : c.status) + '' + (c.status === 'active' ? '' : c.status === 'paused' ? '' : '') + ' ' + '
'; diff --git a/public/assets/site.css b/public/assets/site.css index b527afc..62a8d2a 100644 --- a/public/assets/site.css +++ b/public/assets/site.css @@ -713,3 +713,18 @@ img{max-width:100%} .tk-table{width:100%;border-collapse:collapse;font-size:13px} .tk-table th,.tk-table td{text-align:left;padding:6px 8px;border-bottom:1px solid var(--line)} .tk-table th{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)} .tk-table td.n{font-variant-numeric:tabular-nums;text-align:right} .tk-table th.n{text-align:right} .tk-table tr.best td{color:var(--mint)} .tk-team{border:1px solid var(--line);border-radius:10px;padding:8px 12px;margin:6px 0;font-size:13px;display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:space-between} .tk-team .who b{font-weight:600} .tk-team .who span{color:var(--muted);font-size:12px} .tk-team.stalled{border-color:rgba(255,209,92,.45)} .tk-nudge{width:100%;margin:8px 0 0;padding:8px 12px;border:1px dashed var(--line);border-radius:10px;font-size:13px} +/* campaigns list on phones: each row becomes a card, buttons at the bottom, no sideways scroll (Jim, 2026-09-15) */ +@media (max-width:720px){ + .tablewrap:has(.camp-table){overflow:visible} + .camp-table{display:block;width:100%;border-collapse:separate} + .camp-table thead{display:none} + .camp-table tbody{display:block} + .camp-table tr{display:block;border:1px solid var(--line);border-radius:12px;padding:10px 12px 12px;margin:0 0 10px;background:var(--panel)} + .camp-table td{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:5px 0;border:0;text-align:left;max-width:100%;overflow:hidden} + .camp-table td.num{text-align:right;font-variant-numeric:tabular-nums} + .camp-table td::before{content:attr(data-l);color:var(--muted);font-size:11px;letter-spacing:.06em;text-transform:uppercase;flex:0 0 auto} + .camp-table td:first-child{display:block;padding:0 0 6px;font-size:16px} .camp-table td:first-child::before{display:none} + .camp-table td:first-child > *{max-width:100%} + .camp-table td.act{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:8px;margin-top:8px;padding-top:10px;border-top:1px solid var(--line)} .camp-table td.act::before{display:none} + .camp-table td.act .btn{flex:1 1 auto;text-align:center} +} diff --git a/public/my.html b/public/my.html index 7e19ec4..ad81352 100644 --- a/public/my.html +++ b/public/my.html @@ -5,7 +5,7 @@ Member area | InstantAdPay - + @@ -984,7 +984,7 @@ - +