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

Align downline rows into a grid (name | contact | date | action)

Browse Source 
Each row was an independent flex line, so variable-width emails threw the date
column out of alignment across rows. Now a CSS grid with a shared template keeps
the date and Message columns lined up; long names/emails truncate; responsive
stack on narrow screens.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
martbost
2026-09-07 07:28:20 -05:00
parent 1363bd7b0b
commit 7fbf9add37
3 changed files with 13 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/assets/my.js
+1 -1
View File
@@ -806,7 +806,7 @@
'<div class="lin-lvl"><div class="cap">Level ' + L.level + ' · ' + L.members.length + (L.level === 1 ? ' direct' : '') + '</div>' '<div class="lin-lvl"><div class="cap">Level ' + L.level + ' · ' + L.members.length + (L.level === 1 ? ' direct' : '') + '</div>'
+ L.members.map(m => '<div class="lin-row"><span class="nm">' + esc(m.name) + '</span>' + L.members.map(m => '<div class="lin-row"><span class="nm">' + esc(m.name) + '</span>'
+ (m.email ? '<span class="em">' + esc(m.email) + '</span>' : '<span class="id">#' + m.memberId + '</span>') + (m.email ? '<span class="em">' + esc(m.email) + '</span>' : '<span class="id">#' + m.memberId + '</span>')
+ '<span class="id" style="margin-left:auto">' + new Date(m.joined).toLocaleDateString() + '</span>' + '<span class="dt">' + new Date(m.joined).toLocaleDateString() + '</span>'
+ (m.email ? '<button class="btn sec small chat-msg-btn" type="button" data-cemail="' + esc(m.email) + '" data-cname="' + esc(m.name) + '">Message</button>' : '') + (m.email ? '<button class="btn sec small chat-msg-btn" type="button" data-cemail="' + esc(m.email) + '" data-cname="' + esc(m.name) + '">Message</button>' : '')
+ '</div>').join('') + '</div>').join('')
+ '</div>').join(''); + '</div>').join('');
public/assets/site.css
+8 -3
View File
@@ -397,10 +397,15 @@ textarea{resize:vertical;font:inherit}
/* ── downline lineage list ── */ /* ── downline lineage list ── */
.lin-lvl{margin:10px 0} .lin-lvl{margin:10px 0}
.lin-lvl>.cap{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:6px} .lin-lvl>.cap{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:6px}
.lin-row{display:flex;gap:10px;align-items:baseline;padding:6px 0;border-bottom:1px solid var(--line);flex-wrap:wrap} .lin-row{display:grid;grid-template-columns:minmax(110px,1.2fr) minmax(0,2fr) auto auto;gap:6px 14px;
.lin-row .nm{font-weight:700;min-width:120px} align-items:center;padding:9px 0;border-bottom:1px solid var(--line)}
.lin-row .em{font-size:12px;color:var(--mint);overflow-wrap:anywhere} .lin-row .nm{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lin-row .em{font-size:12px;color:var(--mint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lin-row .id{font-family:var(--mono);font-size:11px;color:var(--muted)} .lin-row .id{font-family:var(--mono);font-size:11px;color:var(--muted)}
.lin-row .dt{font-size:12px;color:var(--muted);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.lin-row .chat-msg-btn{justify-self:end}
@media (max-width:560px){.lin-row{grid-template-columns:1fr auto;gap:2px 10px}
.lin-row .em{grid-column:1/2}.lin-row .dt{grid-column:1/2;text-align:left}.lin-row .chat-msg-btn{grid-row:1/3;grid-column:2}}
/* ── solo composer: toolbar + contenteditable editor ── */ /* ── solo composer: toolbar + contenteditable editor ── */
.ed-bar{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px} .ed-bar{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.ed-bar button{background:var(--panel);color:var(--ink);border:1px solid var(--line-strong);border-radius:8px; .ed-bar button{background:var(--panel);color:var(--ink);border:1px solid var(--line-strong);border-radius:8px;
public/my.html
+4 -4
View File
@@ -4,7 +4,7 @@
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"> <meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>Member area | InstantAdPay</title> <title>Member area | InstantAdPay</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&display=swap"> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&display=swap">
<link rel="stylesheet" href="/assets/site.css?v=20260907i"> <link rel="stylesheet" href="/assets/site.css?v=20260907j">
</head> </head>
<body class="bo-body"> <body class="bo-body">
@@ -641,9 +641,9 @@
</div> </div>
</div> </div>
</div> </div>
<script src="/assets/common.js?v=20260907i"></script> <script src="/assets/common.js?v=20260907j"></script>
<script src="/assets/wallet.js?v=20260907f"></script> <script src="/assets/wallet.js?v=20260907f"></script>
<script src="/assets/my.js?v=20260907i"></script> <script src="/assets/my.js?v=20260907j"></script>
<script src="/assets/chat.js?v=20260907i"></script> <script src="/assets/chat.js?v=20260907j"></script>
</body> </body>
</html> </html>