silentmode/theseus
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Theseus Settings: the menu runs full height again

Browse source 
The Apps list styled its rows with .app, the class the Settings page itself
uses for its layout. The later rule won on the page too: align-items:center
pulled the left menu into a short box in the middle of the window, with a
border, padding and rounded corners it never had. The rows are .webapp now.
This commit is contained in:
Local Dev 2026-10-05 20:14:16 +02:00
parent dbef930d45
commit e598fdf1e6
1 changed files with 8 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
settings.html
View file

@ -117,12 +117,12 @@
.ariadne-sources input[type=checkbox]{accent-color:var(--acid);width:18px;height:18px;cursor:pointer} .ariadne-sources input[type=checkbox]{accent-color:var(--acid);width:18px;height:18px;cursor:pointer}
.pmuted{color:var(--mut)} .pmuted{color:var(--mut)}
/* Settings › Apps */ /* Settings › Apps */
.app{display:flex;align-items:center;gap:12px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 14px;margin-bottom:8px} .webapp{display:flex;align-items:center;gap:12px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 14px;margin-bottom:8px}
.app img,.app .ph{width:32px;height:32px;border-radius:7px;flex:none;display:grid;place-items:center;font-size:20px} .webapp img,.webapp .ph{width:32px;height:32px;border-radius:7px;flex:none;display:grid;place-items:center;font-size:20px}
.app .nm{flex:1;min-width:0} .app .nm b{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .webapp .nm{flex:1;min-width:0} .webapp .nm b{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app .nm span{color:var(--mut);font-size:12.5px} .webapp .nm span{color:var(--mut);font-size:12.5px}
.app .btn.rm{background:transparent;color:#f6768a;border-color:rgba(246,118,138,.4)} .webapp .btn.rm{background:transparent;color:#f6768a;border-color:rgba(246,118,138,.4)}
.app .btn.rm:hover{background:rgba(246,118,138,.12)} .webapp .btn.rm:hover{background:rgba(246,118,138,.12)}
.ceng{display:flex;align-items:center;gap:8px;background:#10151f;border:1px solid var(--line);border-radius:8px;padding:6px 10px;margin-bottom:6px;font-size:13px} .ceng{display:flex;align-items:center;gap:8px;background:#10151f;border:1px solid var(--line);border-radius:8px;padding:6px 10px;margin-bottom:6px;font-size:13px}
.ceng .cs{font-size:14px;flex:none} .ceng .cs{font-size:14px;flex:none}
/* engine checklist */ /* engine checklist */
@ -2624,7 +2624,7 @@
emptyEl.hidden = apps.length > 0; emptyEl.hidden = apps.length > 0;
listEl.innerHTML = apps.map((a) => { listEl.innerHTML = apps.map((a) => {
let when = ""; try { if (a.installedAt) when = new Date(a.installedAt).toLocaleDateString(); } catch {} let when = ""; try { if (a.installedAt) when = new Date(a.installedAt).toLocaleDateString(); } catch {}
return `<div class="app" data-key="${escA(a.key)}">` + return `<div class="webapp" data-key="${escA(a.key)}">` +
(a.icon ? `<img src="${escA(a.icon)}" alt="">` : `<span class="ph">🧩</span>`) + (a.icon ? `<img src="${escA(a.icon)}" alt="">` : `<span class="ph">🧩</span>`) +
`<div class="nm"><b>${escA(a.name)}</b><span>${escA(a.host)}${when ? " · installed " + escA(when) : ""}${a.open ? " · open now" : ""}</span></div>` + `<div class="nm"><b>${escA(a.name)}</b><span>${escA(a.host)}${when ? " · installed " + escA(when) : ""}${a.open ? " · open now" : ""}</span></div>` +
`<button class="btn" data-act="open">Open</button>` + `<button class="btn" data-act="open">Open</button>` +
@ -2634,7 +2634,7 @@
} }
listEl.addEventListener("click", async (e) => { listEl.addEventListener("click", async (e) => {
const b = e.target.closest("button[data-act]"); if (!b) return; const b = e.target.closest("button[data-act]"); if (!b) return;
const key = b.closest(".app").dataset.key; const key = b.closest(".webapp").dataset.key;
if (b.dataset.act === "open") { await A.webappOpen(key); renderApps(); } if (b.dataset.act === "open") { await A.webappOpen(key); renderApps(); }
else if (b.dataset.act === "sidebar") { else if (b.dataset.act === "sidebar") {
const app = ((await A.webapps()) || []).find((x) => x.key === key); const app = ((await A.webapps()) || []).find((x) => x.key === key);