rays/ipx
1
0
Fork 0
Code Issues 6 Pull Requests Actions Packages Projects Releases Wiki Activity

Draw every Directory category tile on the panel, untinted (#131)

Browse Source 
Each tile took a faint tint from a hash of its category's name, as an initials tile does, so
neighbours differed. Five of them, Comedy, Government, Kids & Family, Leisure and Music, drew
--good, and green means yours everywhere else on the page, the subscribed tick and a downloaded
file among them: those tiles read as holding something you subscribe to, when the tint meant
nothing. The fanned covers already give each tile its colour.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Ray Slakinski
2026-10-05 16:33:57 +00:00
parent b86062b97a
commit 9e39f2d756
2 changed files with 6 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
web/app.css
View File

@@ -658,14 +658,15 @@ body.scan-this .fhead [data-a=scan] .i,body.scan-any .fhead [data-a=scanall] .i,
.rank .art{width:52px;height:52px;font-size:16px}
.rank .txt b{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere;font-weight:500;font-size:14px;line-height:1.3}
.rank .txt small{display:block;margin-top:2px;color:var(--faint);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* A category: its name on the tint its initials would get, its three most subscribed shows'
covers fanned in the corner, so the shows are what colour it. The fan opens a little under the
pointer, the only thing on the page that moves. */
/* A category: its name, and its three most subscribed shows' covers fanned in the corner, so the
shows are what colour it. Not tinted: a tint by the name's hash meant nothing, and the five that
drew --good read as yours, which green means everywhere else (#131). The fan opens a little
under the pointer, the only thing on the page that moves. */
.cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.cat{
position:relative;overflow:hidden;height:116px;padding:13px 15px;border-radius:12px;text-align:left;
display:flex;flex-direction:column;align-items:flex-start;
background:color-mix(in srgb,var(--tint) 15%,var(--panel));border:1px solid color-mix(in srgb,var(--tint) 28%,var(--line));
background:var(--panel);border:1px solid var(--line);
}
.cat:hover{border-color:var(--accent)}
/* The whole width: the fan sits below two lines of name, and a narrower name broke Government

2
web/src/dialogs.ts
View File

@@ -217,7 +217,7 @@ function catTile(c,name,count,rows){
// Covers before initials, which are all Other had; the likeliest first, and first is in front:
// the fan is drawn back to front.
const art=[...rows].sort((a,b)=>Number(!a.image)-Number(!b.image)||bySubs(a,b)).slice(0,3).reverse();
return `<button type="button" class="cat" data-go="${esc(c)}" style="--tint:${tint(c)}"><b>${esc(name)}</b><small>${count}</small>`+
return `<button type="button" class="cat" data-go="${esc(c)}"><b>${esc(name)}</b><small>${count}</small>`+
`<span class="fan" aria-hidden="true">${art.map(p=>artHTML(p.image,NAME(p))).join('')}</span></button>`;
}