Card layout for tables on phones and tablets; fit terminal bar
Sideways-scrolling tables only showed a few of the 11 columns at a time on a phone or iPad. Below 1100px (where the nav already collapses) each row now renders as a card: the device as the title and every other column as a labelled line, one card per row on phones and two or more on tablets. - web/mobile.js copies column names onto cells (data-label) for the cards and re-applies them as the dashboard re-renders; no-op on wide screens - Column filters fold behind a "Show filters" button with an active count - Custom View keeps its sort/filter header as a strip of chips - Terminal: Follow and the "your actions (simulated)" legend move into the terminal window's title bar; tabs read "Server" / "Worker" on phones, so LIVE, the legend and Follow are all visible on small screens
This commit is contained in:
Johan Sandoval committed
1 parent
5a7fd4f2df
commit
2cbb03894b
5 files changed
+227
-24
No files matched your search
+8
-6
@@ -42,9 +42,12 @@ body.usmt-term-open { padding-bottom: calc(var(--usmt-term-h, 340px) + 72px); }
|
||||
.usmt-term-window { height: var(--usmt-term-h); display: flex; flex-direction: column; background: #012456; }
|
||||
.usmt-term.collapsed .usmt-term-window { display: none; }
|
||||
.usmt-term-titlebar {
|
||||
height: 26px; flex: 0 0 26px; display: flex; align-items: center; padding: 0 12px;
|
||||
height: 32px; flex: 0 0 32px; display: flex; align-items: center; gap: 10px; padding: 0 8px 0 12px;
|
||||
background: #0c0c0c; color: #cccccc; font-size: 0.78em; border-bottom: 1px solid #1b1b1b;
|
||||
}
|
||||
.usmt-term-wtitle { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.usmt-term-titlebar .usmt-term-legend { font-size: 1em; }
|
||||
.usmt-term-titlebar .usmt-term-follow { font-size: 1em; padding: 3px 10px; }
|
||||
.usmt-term-screens { flex: 1; min-height: 0; position: relative; }
|
||||
.usmt-term-body {
|
||||
display: none; position: absolute; inset: 0; overflow: auto; padding: 8px 12px 14px 18px;
|
||||
@@ -103,12 +106,11 @@ body.usmt-term-open { padding-bottom: calc(var(--usmt-term-h, 340px) + 72px); }
|
||||
.usmt-demo-actions .usmt-demo-reset { color: #e74c3c; border-color: #e74c3c; margin-right: auto; }
|
||||
|
||||
@media (max-width: 700px) {
|
||||
.usmt-term-legend, .usmt-term-follow { display: none; }
|
||||
.usmt-term-bar { gap: 4px; padding: 0 6px; }
|
||||
.t-long { display: none; } /* "Server" / "Worker", shorter titles */
|
||||
.usmt-term-bar { gap: 4px; padding: 0 8px; }
|
||||
.usmt-term-toggle { padding: 4px 6px; }
|
||||
.usmt-term-tabs { flex: 1 1 auto; overflow: hidden; }
|
||||
.usmt-term-tab { padding: 4px 6px; font-size: 0.72em; }
|
||||
.usmt-term-live { font-size: 0; gap: 0; } /* just the pulsing dot */
|
||||
.usmt-term-tabs { flex: 0 1 auto; min-width: 0; }
|
||||
.usmt-term-tab { padding: 4px 10px; font-size: 0.8em; }
|
||||
.usmt-term { --usmt-term-h: 45vh; }
|
||||
.usmt-term-body { font-size: 11.5px; padding: 6px 8px 10px 14px; }
|
||||
.usmt-term-titlebar { font-size: 0.7em; }
|
||||
|
||||
+14
-5
@@ -89,11 +89,13 @@
|
||||
</button>
|
||||
<div class="usmt-term-tabs"></div>
|
||||
<span class="usmt-term-live" title="Streaming the real PowerShell console output from the server"><i></i>LIVE</span>
|
||||
${this.demo ? '<span class="usmt-term-legend" title="Lines marked with a dot were produced by your own actions. They are simulated in your browser and never reach the real services."><i class="usmt-term-legend-dot"></i>your actions (simulated)</span>' : ''}
|
||||
<button class="usmt-term-btn usmt-term-follow active" type="button" title="Auto-scroll">Follow</button>
|
||||
</div>
|
||||
<div class="usmt-term-window">
|
||||
<div class="usmt-term-titlebar"><span class="usmt-term-wtitle"></span></div>
|
||||
<div class="usmt-term-titlebar">
|
||||
<span class="usmt-term-wtitle"></span>
|
||||
${this.demo ? '<span class="usmt-term-legend" title="Lines marked with a dot were produced by your own actions. They are simulated in your browser and never reach the real services."><i class="usmt-term-legend-dot"></i><span class="t-long">your actions </span>(simulated)</span>' : ''}
|
||||
<button class="usmt-term-btn usmt-term-follow active" type="button" title="Keep scrolled to the newest output">Follow</button>
|
||||
</div>
|
||||
<div class="usmt-term-screens"></div>
|
||||
</div>`;
|
||||
document.body.appendChild(dock);
|
||||
@@ -103,7 +105,11 @@
|
||||
const screens = dock.querySelector('.usmt-term-screens');
|
||||
TERMINALS.forEach(t => {
|
||||
const b = document.createElement('button');
|
||||
b.type = 'button'; b.className = 'usmt-term-tab'; b.dataset.id = t.id; b.textContent = t.title;
|
||||
b.type = 'button'; b.className = 'usmt-term-tab'; b.dataset.id = t.id; b.title = t.title;
|
||||
// "USMT-Server.ps1" on wide screens, just "Server" on phones
|
||||
const m = t.title.match(/^(USMT-)(.+)(\.ps1)$/);
|
||||
if (m) b.innerHTML = `<span class="t-long">${m[1]}</span>${m[2]}<span class="t-long">${m[3]}</span>`;
|
||||
else b.textContent = t.title;
|
||||
b.onclick = () => { this.select(t.id); if (!this.open) this.toggle(true); };
|
||||
tabs.appendChild(b);
|
||||
const body = document.createElement('div');
|
||||
@@ -143,7 +149,10 @@
|
||||
this.el.querySelectorAll('.usmt-term-tab').forEach(b => b.classList.toggle('active', b.dataset.id === id));
|
||||
this.el.querySelectorAll('.usmt-term-body').forEach(b => b.classList.toggle('active', b.dataset.id === id));
|
||||
const t = TERMINALS.find(x => x.id === id);
|
||||
this.el.querySelector('.usmt-term-wtitle').textContent = (this.demo ? 'Administrator: PowerShell (demo container) - ' : 'Administrator: PowerShell - ') + t.title;
|
||||
const wtitle = this.el.querySelector('.usmt-term-wtitle');
|
||||
wtitle.innerHTML = '<span class="t-long"></span><span></span>';
|
||||
wtitle.firstChild.textContent = this.demo ? 'Administrator: PowerShell (demo container) - ' : 'Administrator: PowerShell - ';
|
||||
wtitle.lastChild.textContent = t.title;
|
||||
this.el.querySelector(`.usmt-term-tab[data-id="${id}"]`).classList.remove('unread');
|
||||
try { localStorage.setItem('usmt_term_tab', id); } catch (e) {}
|
||||
this.poll(id);
|
||||
|
||||
@@ -352,6 +352,7 @@
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="/mobile.css">
|
||||
<script src="/mobile.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
+111
-13
@@ -1,9 +1,117 @@
|
||||
/*
|
||||
* Small-screen layout for the dashboard (phones, small tablets, split windows).
|
||||
* Small-screen layout for the dashboard (phones, tablets, narrow windows).
|
||||
* Loaded after the page's own <style> block. Desktop layouts are untouched: every rule
|
||||
* here is inside a max-width media query.
|
||||
*/
|
||||
|
||||
/* ---------------------------------------------------------------------------------------
|
||||
* Card view for data tables (phones and tablets)
|
||||
*
|
||||
* An 11-column table can't be read on a phone or an iPad in portrait, and sideways
|
||||
* scrolling only ever shows a few columns. Below 1100px (where the nav also collapses)
|
||||
* each row becomes a card: the device name as its title and every other column as a
|
||||
* "label: value" line. mobile.js copies the column names onto the cells. Cards flow one
|
||||
* per row on phones and two or more on tablets. The column filter row becomes a filter
|
||||
* panel above the cards.
|
||||
* ------------------------------------------------------------------------------------- */
|
||||
@media (max-width: 1100px) {
|
||||
.table-wrapper { overflow-x: visible !important; }
|
||||
|
||||
table.master-table {
|
||||
display: block; width: 100% !important; min-width: 0 !important; max-width: none !important;
|
||||
table-layout: auto; font-size: 0.9em;
|
||||
}
|
||||
table.master-table colgroup { display: none; }
|
||||
table.master-table thead { display: block; }
|
||||
table.master-table thead tr.card-label-row,
|
||||
table.master-table thead tr.card-aux-row { display: none; }
|
||||
|
||||
/* Filters: a wrapping panel of labeled controls */
|
||||
table.master-table thead tr.filter-row {
|
||||
display: flex; flex-wrap: wrap; gap: 8px 10px; padding: 10px 12px;
|
||||
background: rgba(0,0,0,0.15); border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
table.master-table thead tr.filter-row th {
|
||||
display: block; flex: 1 1 150px; min-width: 0; width: auto !important;
|
||||
padding: 0; border: 0; background: transparent;
|
||||
}
|
||||
table.master-table thead tr.filter-row th:empty,
|
||||
table.master-table thead tr.filter-row th[data-label=""] { display: none; }
|
||||
table.master-table thead tr.filter-row th::before {
|
||||
content: attr(data-label); display: block; margin-bottom: 3px;
|
||||
font-size: 0.78em; font-weight: 600; color: var(--text-muted);
|
||||
}
|
||||
|
||||
/* Custom View keeps its header (sort / filter / remove buttons) as a strip of chips */
|
||||
#table-custom thead tr.card-label-row {
|
||||
display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 12px;
|
||||
background: var(--table-header-bg);
|
||||
}
|
||||
#table-custom thead tr.card-label-row th {
|
||||
display: flex; align-items: center; gap: 4px; width: auto !important; min-width: 0 !important;
|
||||
padding: 4px 8px; border: 1px solid rgba(255,255,255,0.2); border-radius: 999px;
|
||||
position: static; white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Rows -> cards */
|
||||
table.master-table tbody {
|
||||
display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr));
|
||||
gap: 10px; padding: 10px;
|
||||
}
|
||||
table.master-table tbody tr {
|
||||
display: block; position: relative;
|
||||
background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 8px;
|
||||
padding: 10px 12px; box-shadow: 0 2px 5px rgba(0,0,0,0.25);
|
||||
}
|
||||
/* Label in a fixed left gutter, value flows to its right (so a value made of several
|
||||
pieces - a name plus its copy icon, a list with links - stays one value) */
|
||||
table.master-table tbody td {
|
||||
display: block; position: relative; min-height: 1.3em;
|
||||
padding: 6px 0 6px 9.2em; border: 0; border-bottom: 1px solid var(--border-light);
|
||||
width: auto !important; max-width: none !important; height: auto !important;
|
||||
white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere;
|
||||
}
|
||||
table.master-table tbody td::before {
|
||||
content: attr(data-label); position: absolute; left: 0; top: 6px; width: 8.6em;
|
||||
font-size: 0.85em; font-weight: 600; color: var(--text-muted); line-height: 1.35;
|
||||
}
|
||||
table.master-table tbody td:last-child { border-bottom: 0; }
|
||||
|
||||
/* First column (the device) is the card's title */
|
||||
table.master-table tbody td:first-child {
|
||||
display: block; font-size: 1.12em; font-weight: 700; padding: 0 34px 8px 0; min-height: 0;
|
||||
}
|
||||
table.master-table tbody td:first-child::before { content: none; }
|
||||
|
||||
/* The per-row copy button has no column name: pin it to the card's corner */
|
||||
table.master-table tbody td[data-label=""]:not(:first-child) {
|
||||
position: absolute; top: 8px; right: 8px; display: block; padding: 0; border: 0;
|
||||
}
|
||||
table.master-table tbody td[data-label=""]::before { content: none; }
|
||||
|
||||
/* "No devices" style rows span the full card */
|
||||
table.master-table tbody td[colspan] { display: block; text-align: center; border: 0; padding: 6px 0; }
|
||||
|
||||
/* Filters fold away behind a button (added by mobile.js) */
|
||||
.card-filter-toggle {
|
||||
display: inline-flex; align-items: center; gap: 6px; margin: 10px 12px 0;
|
||||
background: transparent; color: var(--text-main); border: 1px solid var(--border-color);
|
||||
border-radius: 6px; padding: 6px 12px; font: inherit; font-size: 0.85em; cursor: pointer;
|
||||
}
|
||||
.card-filter-toggle .count {
|
||||
background: #3498db; color: #fff; border-radius: 999px; padding: 0 7px; font-size: 0.85em;
|
||||
}
|
||||
table.master-table:not(.show-filters) thead tr.filter-row { display: none; }
|
||||
table.master-table.show-filters thead tr.filter-row { margin-top: 10px; }
|
||||
}
|
||||
@media (min-width: 1101px) {
|
||||
.card-filter-toggle { display: none; }
|
||||
}
|
||||
@media (max-width: 420px) {
|
||||
table.master-table tbody td { padding-left: 7.8em; }
|
||||
table.master-table tbody td::before { width: 7.2em; }
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.main { padding: 14px; }
|
||||
.main h1 { font-size: 1.55em; }
|
||||
@@ -11,18 +119,8 @@
|
||||
/* Page headers with an action button (Workbench, All Devices) wrap instead of squeezing */
|
||||
.header-row { flex-wrap: wrap; gap: 10px; }
|
||||
|
||||
/* Data tables keep readable column widths and scroll sideways inside their card */
|
||||
.table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
|
||||
.master-table:not(#table-custom) { min-width: 880px; }
|
||||
#table-software { min-width: 760px; }
|
||||
.stack-box .master-table { min-width: 760px; }
|
||||
|
||||
/* Group headers: title on one line, copy buttons wrap underneath, and stay in view
|
||||
while the table under them scrolls sideways */
|
||||
.group-header {
|
||||
flex-wrap: wrap; gap: 8px; font-size: 1.05em;
|
||||
position: sticky; left: 0;
|
||||
}
|
||||
/* Group headers: title on one line, copy buttons wrap underneath */
|
||||
.group-header { flex-wrap: wrap; gap: 8px; font-size: 1.05em; }
|
||||
.group-header > div { flex-wrap: wrap; }
|
||||
.copy-table-btn { padding: 5px 9px; font-size: 0.78em; }
|
||||
|
||||
|
||||
@@ -0,0 +1,93 @@
|
||||
/*
|
||||
* Card layout support for small screens.
|
||||
*
|
||||
* On phones and tablets (see mobile.css) each table row is shown as a card, with every
|
||||
* cell rendered as "Column name: value". CSS can't look up a cell's column header, so
|
||||
* this copies each header's text onto its cells as data-label. The dashboard re-renders
|
||||
* its tables constantly, so labels are reapplied (once per frame at most) whenever the
|
||||
* DOM changes. On wide screens it does nothing.
|
||||
*/
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
const cardsQuery = window.matchMedia('(max-width: 1100px)');
|
||||
const clean = text => text.replace(/[\u2195\u25B2\u25BC\u00D7\u2715]/g, '').replace(/\s+/g, ' ').trim();
|
||||
|
||||
function labelTable(table) {
|
||||
const thead = table.tHead;
|
||||
if (!thead) return;
|
||||
|
||||
// The header row is the one with the most text (Custom View has a drag-handle row above it)
|
||||
let headerRow = null, best = -1;
|
||||
for (const row of thead.rows) {
|
||||
if (row.classList.contains('filter-row')) continue;
|
||||
const named = Array.from(row.cells).filter(c => clean(c.textContent)).length;
|
||||
if (named > best) { best = named; headerRow = row; }
|
||||
}
|
||||
if (!headerRow) return;
|
||||
|
||||
for (const row of thead.rows) {
|
||||
if (row === headerRow) row.classList.add('card-label-row');
|
||||
else if (!row.classList.contains('filter-row')) row.classList.add('card-aux-row');
|
||||
}
|
||||
|
||||
const labels = Array.from(headerRow.cells).map(c => clean(c.textContent));
|
||||
const apply = row => {
|
||||
Array.from(row.cells).forEach((cell, i) => {
|
||||
const label = cell.colSpan > 1 ? '' : (labels[i] || '');
|
||||
if (cell.dataset.label !== label) cell.dataset.label = label;
|
||||
});
|
||||
};
|
||||
thead.querySelectorAll('tr.filter-row').forEach(apply);
|
||||
for (const body of table.tBodies) for (const row of body.rows) apply(row);
|
||||
|
||||
addFilterToggle(table, thead.querySelector('tr.filter-row'));
|
||||
}
|
||||
|
||||
// Column filters take a lot of room above every card group, so they fold behind a
|
||||
// button that also shows how many filters are active.
|
||||
function addFilterToggle(table, filterRow) {
|
||||
if (!filterRow) return;
|
||||
let btn = table.previousElementSibling;
|
||||
if (!btn || !btn.classList.contains('card-filter-toggle')) {
|
||||
btn = document.createElement('button');
|
||||
btn.type = 'button';
|
||||
btn.className = 'card-filter-toggle';
|
||||
btn.addEventListener('click', () => { table.classList.toggle('show-filters'); updateToggle(table, btn); });
|
||||
table.parentNode.insertBefore(btn, table);
|
||||
filterRow.addEventListener('input', () => updateToggle(table, btn));
|
||||
filterRow.addEventListener('change', () => updateToggle(table, btn));
|
||||
}
|
||||
updateToggle(table, btn);
|
||||
}
|
||||
function updateToggle(table, btn) {
|
||||
const row = table.tHead && table.tHead.querySelector('tr.filter-row');
|
||||
if (!row) return;
|
||||
const active = Array.from(row.querySelectorAll('input[type="text"]')).filter(i => i.value.trim()).length
|
||||
+ row.querySelectorAll('input[type="checkbox"]:checked').length;
|
||||
const open = table.classList.contains('show-filters');
|
||||
const html = `${open ? 'Hide' : 'Show'} filters${active ? ` <span class="count">${active}</span>` : ''}`;
|
||||
if (btn.innerHTML !== html) btn.innerHTML = html;
|
||||
}
|
||||
|
||||
let queued = false;
|
||||
function run() {
|
||||
queued = false;
|
||||
if (!cardsQuery.matches) return;
|
||||
document.querySelectorAll('table.master-table').forEach(labelTable);
|
||||
}
|
||||
function schedule() {
|
||||
if (queued) return;
|
||||
queued = true;
|
||||
requestAnimationFrame(run);
|
||||
}
|
||||
|
||||
function start() {
|
||||
new MutationObserver(schedule).observe(document.body, { childList: true, subtree: true });
|
||||
if (cardsQuery.addEventListener) cardsQuery.addEventListener('change', schedule);
|
||||
else cardsQuery.addListener(schedule);
|
||||
schedule();
|
||||
}
|
||||
if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', start);
|
||||
else start();
|
||||
})();
|
||||
Reference in new issue
Block a user