The agent page: the four levels two by two, and a Run box whose hint fits one line (#352)

OP OpenVibers committed 5 days ago · 7b04508140 · 2 files, +8 −1

Changes

ddiff --git a/public/css/agents.css b/public/css/agents.css
iindex 7193f38..5886ddb 100644
---- a/public/css/agents.css
++++ b/public/css/agents.css
@@@ -128,3 +128,10 @@ img.ac-face { background: var(--bg-card, #131c2e); }
  .pa-jump a:hover, .pa-jump a:focus-visible { color: var(--text-primary, #e6edf7); background: color-mix(in srgb, var(--accent, #3b82f6) 14%, transparent); }
  .pa-panel[id] { scroll-margin-top: calc(var(--ovnav-real-h, 56px) + 64px); }
  .pa-panel .pa-hint { max-width: 62ch; }
++
++/* The four levels two by two (a phone included): the radio beside the title, the line under both, smaller. */
++.pa-panel .ac-levels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
++.pa-panel .ac-lv { grid-template-columns: auto minmax(0, 1fr); padding: .6rem .7rem; }
++.pa-panel .ac-lv input { grid-row: auto; margin: .15rem 0 0; }
++.pa-panel .ac-lv-line { grid-column: 1 / -1; font-size: 12.5px; line-height: 1.35; }
++@media (max-width: 22rem) { .pa-panel .ac-levels { grid-template-columns: 1fr; } }
ddiff --git a/server/http/agent-pages.js b/server/http/agent-pages.js
iindex 14649f0..debead0 100644
---- a/server/http/agent-pages.js
++++ b/server/http/agent-pages.js
@@@ -464,7 +464,7 @@ ${signed(req) ? html`<form method="post" action="/voices/${row.id}/borrow"><butt
  <header class="pa-head ac-sheet-head">${ui.face(contact, 64)}<div><h1>${a.name}</h1><p class="ac-sheet-uses">${ui.usesLine(contact)}</p>
  <p class="pa-lede">${ui.levelChip(contact.level)} <span class="pill ${a.status === 'paused' ? 'pill-failed' : 'pill-succeeded'}">${a.status === 'paused' ? 'Paused' : 'Active'}</span> ${when(a)}${a.next_run_at && a.status !== 'paused' && a.schedule !== 'off' ? html` · next ${time(a.next_run_at)}` : ''}</p></div></header>
  ${a.last_skip_reason ? html`<p class="notice" role="status">The last scheduled run was skipped: ${a.last_skip_reason}</p>` : ''}
--<form method="post" action="/me/agents/${a.id}/run" class="pa-runbar"><label class="pa-runbar-in"><span class="sr-only">Anything this run should also consider (optional)</span><textarea name="input" maxlength="8000" rows="1" placeholder="Anything this run should also consider (optional)"></textarea></label><button type="submit" class="pa-btn pa-primary">Run now</button></form>
++<form method="post" action="/me/agents/${a.id}/run" class="pa-runbar"><label class="pa-runbar-in"><span class="sr-only">Anything this run should also consider (optional)</span><textarea name="input" maxlength="8000" rows="1" placeholder="Anything to add? (optional)"></textarea></label><button type="submit" class="pa-btn pa-primary">Run now</button></form>
  <ul class="pa-glance" aria-label="At a glance">
  <li><a href="#runs"><b>${runs.length}${runs.length === 20 ? '+' : ''}</b><span>${runs.length === 1 ? 'run' : 'runs'}</span></a></li>
  <li><a href="#always"><b>${allowRules.length}</b><span>always allowed</span></a></li>

diff --git a/public/css/agents.css b/public/css/agents.css

index 7193f38..5886ddb 100644

--- a/public/css/agents.css

+++ b/public/css/agents.css

@@ -128,3 +128,10 @@ img.ac-face { background: var(--bg-card, #131c2e); }

.pa-jump a:hover, .pa-jump a:focus-visible { color: var(--text-primary, #e6edf7); background: color-mix(in srgb, var(--accent, #3b82f6) 14%, transparent); }

.pa-panel[id] { scroll-margin-top: calc(var(--ovnav-real-h, 56px) + 64px); }

.pa-panel .pa-hint { max-width: 62ch; }

+/* The four levels two by two (a phone included): the radio beside the title, the line under both, smaller. */

+.pa-panel .ac-levels { grid-template-columns: repeat(2, minmax(0, 1fr)); }

+.pa-panel .ac-lv { grid-template-columns: auto minmax(0, 1fr); padding: .6rem .7rem; }

+.pa-panel .ac-lv input { grid-row: auto; margin: .15rem 0 0; }

+.pa-panel .ac-lv-line { grid-column: 1 / -1; font-size: 12.5px; line-height: 1.35; }

+@media (max-width: 22rem) { .pa-panel .ac-levels { grid-template-columns: 1fr; } }

diff --git a/server/http/agent-pages.js b/server/http/agent-pages.js

index 14649f0..debead0 100644

--- a/server/http/agent-pages.js

+++ b/server/http/agent-pages.js

@@ -464,7 +464,7 @@ ${signed(req) ? html`<form method="post" action="/voices/${row.id}/borrow"><butt

<header class="pa-head ac-sheet-head">${ui.face(contact, 64)}<div><h1>${a.name}</h1><p class="ac-sheet-uses">${ui.usesLine(contact)}</p>

<p class="pa-lede">${ui.levelChip(contact.level)} <span class="pill ${a.status === 'paused' ? 'pill-failed' : 'pill-succeeded'}">${a.status === 'paused' ? 'Paused' : 'Active'}</span> ${when(a)}${a.next_run_at && a.status !== 'paused' && a.schedule !== 'off' ? html` · next ${time(a.next_run_at)}` : ''}</p></div></header>

${a.last_skip_reason ? html`<p class="notice" role="status">The last scheduled run was skipped: ${a.last_skip_reason}</p>` : ''}

-<form method="post" action="/me/agents/${a.id}/run" class="pa-runbar"><label class="pa-runbar-in"><span class="sr-only">Anything this run should also consider (optional)</span><textarea name="input" maxlength="8000" rows="1" placeholder="Anything this run should also consider (optional)"></textarea></label><button type="submit" class="pa-btn pa-primary">Run now</button></form>

+<form method="post" action="/me/agents/${a.id}/run" class="pa-runbar"><label class="pa-runbar-in"><span class="sr-only">Anything this run should also consider (optional)</span><textarea name="input" maxlength="8000" rows="1" placeholder="Anything to add? (optional)"></textarea></label><button type="submit" class="pa-btn pa-primary">Run now</button></form>

<li><a href="#runs"><b>${runs.length}${runs.length === 20 ? '+' : ''}</b><span>${runs.length === 1 ? 'run' : 'runs'}</span></a></li>

<li><a href="#always"><b>${allowRules.length}</b><span>always allowed</span></a></li>