feat(#1097): overhaul schedule table style and layout
- Wrap table in .schedules-table-wrap (overflow-x: auto) so it never exceeds the page width on narrow viewports - Add .schedules-table-next-col (width: 8em) and .schedules-table-every-col (width: 7em) with white-space: nowrap to stop those columns from stealing space from the body column - Align visual style with the perm page tables: unified border on all cells (was: border-top row separator only), bg-elev thead, font-size 0.82em (was 0.9em), min-width: 100% on the table itself
This commit is contained in:
parent
a389ead6de
commit
5da7f6cd3a
2 changed files with 21 additions and 18 deletions
|
|
@ -1256,23 +1256,29 @@ footer .banner-thin {
|
|||
}
|
||||
.schedule-interval-preview-oneshot { color: var(--muted); font-style: italic; }
|
||||
|
||||
.schedules-table-wrap { overflow-x: auto; margin-top: 0.5em; }
|
||||
.schedules-table {
|
||||
width: 100%;
|
||||
min-width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 0.9em;
|
||||
font-size: 0.82em;
|
||||
}
|
||||
.schedules-table th,
|
||||
.schedules-table td {
|
||||
padding: 0.35em 0.6em;
|
||||
border: 1px solid var(--border);
|
||||
vertical-align: middle;
|
||||
}
|
||||
.schedules-table thead th {
|
||||
vertical-align: bottom;
|
||||
padding: 0.3em 0.5em;
|
||||
text-align: left;
|
||||
background: var(--bg-elev);
|
||||
color: var(--muted);
|
||||
font-weight: normal;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
font-size: 0.8em;
|
||||
border-bottom: 1px solid var(--border);
|
||||
white-space: nowrap;
|
||||
}
|
||||
.schedules-table-id { width: 3em; }
|
||||
.schedules-table-id { width: 3em; text-align: center; }
|
||||
.schedules-table-next-col { width: 8em; white-space: nowrap; }
|
||||
.schedules-table-every-col { width: 7em; white-space: nowrap; }
|
||||
.schedules-table-body-th { min-width: 12em; }
|
||||
.schedules-table-actions-th { width: 7em; }
|
||||
.schedules-table-agent-th {
|
||||
|
|
@ -1300,11 +1306,6 @@ footer .banner-thin {
|
|||
display: inline-block;
|
||||
padding: 0 4px 1px;
|
||||
}
|
||||
.schedules-table tbody td {
|
||||
padding: 0.3em 0.5em;
|
||||
border-top: 1px solid var(--border);
|
||||
vertical-align: middle;
|
||||
}
|
||||
.schedules-table-row-cancelled td { opacity: 0.55; }
|
||||
.schedules-table-body-cell {
|
||||
max-width: 30em;
|
||||
|
|
|
|||
|
|
@ -2694,7 +2694,9 @@ window.marked = marked;
|
|||
// docs/web-ui.md::SCH3DUL3S tab for the layout rationale.
|
||||
tbody.append(renderInlineCreateRow(agents));
|
||||
table.append(tbody);
|
||||
root.append(table);
|
||||
const wrap = el('div', { class: 'schedules-table-wrap' });
|
||||
wrap.append(table);
|
||||
root.append(wrap);
|
||||
});
|
||||
}
|
||||
// Inline create row. Each column carries an input matching its
|
||||
|
|
@ -2904,8 +2906,8 @@ window.marked = marked;
|
|||
headerRow.append(
|
||||
el('th', { class: 'schedules-table-id' }, '#'),
|
||||
el('th', {}, 'src'),
|
||||
el('th', {}, 'next'),
|
||||
el('th', {}, 'every'),
|
||||
el('th', { class: 'schedules-table-next-col' }, 'next'),
|
||||
el('th', { class: 'schedules-table-every-col' }, 'every'),
|
||||
el('th', {}, 'owner'),
|
||||
el('th', { class: 'schedules-table-body-th' }, 'body'),
|
||||
);
|
||||
|
|
@ -2932,7 +2934,7 @@ window.marked = marked;
|
|||
|
||||
// "next" cell — relative due-in for active schedules, "cancelled"
|
||||
// for cancelled ones. Both carry the absolute ISO in the title.
|
||||
const nextCell = el('td', { class: 'meta' });
|
||||
const nextCell = el('td', { class: 'meta schedules-table-next-col' });
|
||||
if (cancelled) {
|
||||
nextCell.title = 'cancelled ' + new Date(s.cancelled_at_unix * 1000).toISOString();
|
||||
nextCell.textContent = 'cancelled';
|
||||
|
|
@ -2945,7 +2947,7 @@ window.marked = marked;
|
|||
}
|
||||
tr.append(nextCell);
|
||||
|
||||
tr.append(el('td', { class: 'meta' },
|
||||
tr.append(el('td', { class: 'meta schedules-table-every-col' },
|
||||
s.interval_seconds ? '↻ ' + fmtDuration(s.interval_seconds) : 'one-shot'));
|
||||
|
||||
tr.append(el('td', { class: 'meta' }, s.owner));
|
||||
|
|
|
|||
Loading…
Reference in a new issue