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:
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; }
|
||||
|
||||
Reference in new issue
Block a user