tomh104/nat-as-server
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

UX enhancements on data views

Browse Source
This commit is contained in:
Tom Hempel
2026-05-26 17:07:18 +02:00
parent 9d783b60a9
commit ea3a423186
8 changed files with 558 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
website/css/style.css
View File

@ -258,13 +258,16 @@ body {
border-top: 1px solid var(--border);
}
/* Tables */
/* Tables — scroll inside wrapper so sticky headers stay visible */
.table-wrapper {
overflow-x: auto;
overflow: auto;
max-height: min(72vh, calc(100vh - 220px));
-webkit-overflow-scrolling: touch;
}
table.data-table {
width: 100%;
border-collapse: collapse;
border-collapse: separate;
border-spacing: 0;
font-size: .875rem;
}
table.data-table th,
@ -282,11 +285,42 @@ table.data-table th {
background: #f8fafc;
position: sticky;
top: 0;
z-index: 1;
z-index: 2;
box-shadow: 0 1px 0 var(--border);
}
table.data-table tr:hover td {
background: #f8fafc;
}
table.data-table tbody tr.row-test-data td {
background: #fffde7;
}
table.data-table tbody tr.row-test-data:hover td {
background: #fff9c4;
}
#qdb-table tbody tr.row-test-data td {
background: #fffde7;
}
#qdb-table tbody tr.row-test-data:hover td {
background: #fff9c4;
}
table.data-table .sticky-col {
position: sticky;
left: 0;
z-index: 1;
background: var(--surface);
box-shadow: 2px 0 4px rgba(0, 0, 0, 0.06);
}
table.data-table thead th.sticky-col {
z-index: 5;
top: 0;
background: #f8fafc;
}
table.data-table tbody tr.row-test-data td.sticky-col {
background: #fffde7;
}
table.data-table tbody tr.row-test-data:hover td.sticky-col {
background: #fff9c4;
}
th.sortable { cursor: pointer; user-select: none; }
th.sortable::after { content: ' \2195'; opacity: .4; }
th.sort-asc::after { content: ' \2191'; opacity: 1; }
@ -484,6 +518,42 @@ th.sort-desc::after { content: ' \2193'; opacity: 1; }
font-size: .85rem;
background: var(--surface);
}
.filter-bar input[type="search"],
.filter-bar input[type="text"].filter-search {
min-width: 180px;
}
.pagination-bar {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
margin-top: 12px;
font-size: .85rem;
color: var(--text-secondary);
}
.pagination-bar .btn {
min-width: 2.5rem;
}
.data-toolbar-hint {
font-size: .8rem;
color: var(--text-secondary);
}
#qdb-table th.col-key {
font-size: .75rem;
font-weight: 500;
text-transform: none;
letter-spacing: 0;
max-width: 140px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#qdb-table thead tr:nth-child(1) th[data-id] {
font-size: .7rem;
max-width: 120px;
overflow: hidden;
text-overflow: ellipsis;
}
/* Empty state */
.empty-state {