cs2/simpleadmin-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

Settings rows on phones: switches level with the name, boxes as form fields

Browse source
This commit is contained in:
Astra 2026-10-03 14:25:51 +01:00
parent 3c0655b512
commit daa7ec2dbc
2 changed files with 21 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

8
internal/web/assets/admin.js
View file

@ -556,12 +556,10 @@ async function notifications() {
// The count row is only worth showing when there's a device besides this one.
const total = d.devices.length;
const others = total - (here ? 1 : 0);
const row = (label, help, control, cls = "") => `<div class="setting${cls}">
const row = (label, help, control) => `<div class="setting">
<div><b>${label}</b>${help ? `<p>${help}</p>` : ""}</div>
<div class="control">${control}</div>
</div>`;
// A row whose control is one switch: on phones the switch goes before the text.
const toggle = (label, help, sw) => row(label, help, sw, " toggle");
let device;
if (!d.available) device = row("This device", "Notifications aren't set up on the panel. Its log says why.", '<span class="tag red">Unavailable</span>');
@ -584,13 +582,13 @@ async function notifications() {
<section class="panel">
<div class="panel-head"><div><h2>Quiet hours</h2><p>Nothing is sent between these times, in your timezone (${esc(browserTimezone())}).</p></div></div>
${toggle("Quiet hours", "", `<button class="switch" type="button" role="switch" aria-checked="${p.quiet.enabled}" aria-label="Quiet hours" data-notif="quiet" ${dis}></button>`)}
${row("Quiet hours", "", `<button class="switch" type="button" role="switch" aria-checked="${p.quiet.enabled}" aria-label="Quiet hours" data-notif="quiet" ${dis}></button>`)}
${row("From and until", "", `<div class="quiet-times"><input class="input" type="time" id="quiet-start" value="${esc(p.quiet.start)}" aria-label="Quiet from" data-notif-time ${dis}><span class="muted">to</span><input class="input" type="time" id="quiet-end" value="${esc(p.quiet.end)}" aria-label="Quiet until" data-notif-time ${dis}></div>`)}
</section>
<section class="panel">
<div class="panel-head"><div><h2>What to send</h2><p>For all your devices.</p></div></div>
${d.types.map((t) => toggle(esc(t.label) + (t.ready ? "" : ' <span class="tag">Coming later</span>'), t.help ? esc(t.help) : "",
${d.types.map((t) => row(esc(t.label) + (t.ready ? "" : ' <span class="tag">Coming later</span>'), t.help ? esc(t.help) : "",
`<button class="switch" type="button" role="switch" aria-checked="${t.ready && p.types.includes(t.key)}" aria-label="${esc(t.label)}" ${t.ready ? `data-ntype="${esc(t.key)}" ${dis}` : "disabled"}></button>`)).join("")}
</section>
</div>`;