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

better ux with search functionality

Browse Source
This commit is contained in:
Tom Hempel
2026-05-28 10:58:31 +02:00
parent 8915c8d182
commit b049a9ab9f
10 changed files with 997 additions and 252 deletions
Download Patch File Download Diff File Expand all files Collapse all files

228
website/css/style.css
View File

@ -757,42 +757,240 @@ th.sort-desc::after { content: ' \2193'; opacity: 1; }
.badge-coach { background: var(--badge-coach-bg); color: var(--badge-coach-fg); }
.badge-you { background: var(--badge-you-bg); color: var(--badge-you-fg); font-size: .7rem; }
/* Assignment page layout */
/* Assignment page — client table sized to rows (max 50); coach panel matches */
.assign-page {
display: flex;
flex-direction: column;
gap: 16px;
}
.assign-layout {
display: grid;
grid-template-columns: 220px 1fr;
grid-template-columns: minmax(260px, min(32vw, 380px)) minmax(0, 1fr);
gap: 16px;
align-items: start;
}
@media (max-width: 900px) {
.assign-layout { grid-template-columns: 1fr; }
.assign-layout > .assign-coaches,
.assign-layout > .assign-clients-card {
display: flex;
flex-direction: column;
padding: 0;
overflow: hidden;
}
.assign-coaches { padding: 16px; }
.assign-right { display: flex; flex-direction: column; gap: 16px; }
.assign-clients-card { padding: 16px; }
.assign-action-card { padding: 16px; }
.assign-panel-header {
flex-shrink: 0;
padding: 14px 16px;
border-bottom: 1px solid var(--border);
background: var(--surface);
}
.assign-panel-header h3 {
margin: 0 0 10px;
font-size: 1rem;
}
.assign-panel-header .filter-bar {
margin-bottom: 0;
}
.assign-panel-body {
flex: 0 0 auto;
min-height: 0;
overflow: auto;
-webkit-overflow-scrolling: touch;
padding: 6px 8px 10px;
}
.assign-coaches .assign-panel-footer--align {
flex-shrink: 0;
margin-top: auto;
visibility: hidden;
pointer-events: none;
}
.assign-clients-toolbar {
flex-shrink: 0;
padding: 14px 16px;
border-bottom: 1px solid var(--border);
display: flex;
flex-direction: column;
gap: 12px;
}
.assign-clients-toolbar-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
}
.assign-clients-toolbar-top h3 {
margin: 0;
font-size: 1rem;
line-height: 1.4;
}
.assign-clients-actions {
display: flex;
gap: 6px;
flex-shrink: 0;
}
.assign-clients-filters {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
}
.assign-clients-filters .filter-search {
flex: 1 1 200px;
min-width: 160px;
max-width: 100%;
}
.assign-clients-filters select {
flex: 0 1 auto;
min-width: 140px;
max-width: 100%;
}
.assign-table-panel {
flex: 0 0 auto;
display: flex;
flex-direction: column;
}
.assign-table-panel .table-wrapper {
flex: none;
overflow: auto;
box-sizing: border-box;
max-height: none;
}
.assign-panel-footer,
.assign-clients-footer {
flex-shrink: 0;
padding: 10px 16px;
border-top: 1px solid var(--border);
background: var(--surface);
}
.assign-panel-footer .pagination-bar,
.assign-clients-footer .pagination-bar {
margin-top: 0;
}
.assign-clients-footer .pagination-bar + .selection-info {
margin-top: 8px;
}
.assign-action-card {
flex-shrink: 0;
padding: 14px 16px;
}
.assign-action-row {
display: flex;
gap: 10px;
align-items: center;
flex-wrap: wrap;
margin-top: 10px;
}
.assign-action-row select {
flex: 1 1 220px;
min-width: 180px;
padding: 8px 12px;
border: 1px solid var(--border);
border-radius: 6px;
background: var(--surface);
color: inherit;
}
.assign-action-card h4 {
margin: 0;
font-size: .95rem;
}
@media (max-width: 1100px) {
.assign-layout {
grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
}
}
@media (max-width: 900px) {
.assign-layout {
grid-template-columns: 1fr;
}
}
/* Coach list */
.coach-list { list-style: none; }
.coach-list {
list-style: none;
margin: 0;
padding: 0;
}
.coach-list-item {
padding: 10px 12px;
border-radius: 6px;
border-radius: 8px;
cursor: pointer;
transition: background .15s;
transition: background .15s, border-color .15s;
display: flex;
flex-direction: column;
gap: 2px;
border: 1px solid transparent;
margin-bottom: 4px;
}
.coach-list-item:hover { background: var(--surface-hover); }
.coach-list-item:last-child {
margin-bottom: 0;
}
.coach-list-item:hover {
background: var(--surface-hover);
}
.coach-list-item.active {
background: var(--primary-subtle);
border-color: var(--primary);
}
.coach-name { font-weight: 600; font-size: .9rem; }
.coach-supervisor { font-size: .8rem; color: var(--text-secondary); }
.coach-list-item.row-test-data {
background: var(--test-row-bg);
}
.coach-list-item.row-test-data:hover {
background: var(--test-row-hover-bg);
}
.coach-list-item.row-test-data.active {
background: var(--primary-subtle);
}
.coach-list-empty {
padding: 20px 12px;
text-align: center;
color: var(--text-secondary);
font-size: .875rem;
}
.coach-name {
font-weight: 600;
font-size: .9rem;
word-break: break-word;
}
.coach-supervisor {
font-size: .8rem;
color: var(--text-secondary);
word-break: break-word;
}
.coach-client-count {
font-size: .75rem;
color: var(--primary);
@ -802,7 +1000,7 @@ th.sort-desc::after { content: ' \2193'; opacity: 1; }
/* Selection info bar */
.selection-info {
margin-top: 10px;
margin: 0;
padding: 8px 12px;
background: var(--primary-subtle);
border: 1px solid var(--primary-border);