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

improved translation page UX
Some checks failed
PHPUnit / test (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Tom Hempel
2026-06-12 20:33:52 +02:00
parent d807f753b1
commit cceec525c1
4 changed files with 488 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

177
website/css/style.css
View File

@ -1586,9 +1586,30 @@ body.modal-open {
.trans-hint { padding: 24px 0; text-align: center; font-size: .9rem; }
.text-muted { color: var(--text-secondary); }
.required-mark { color: var(--danger); font-weight: 600; }
.trans-sheet {
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--surface);
display: flex;
flex-direction: column;
max-height: calc(100vh - 420px);
overflow: hidden;
}
.trans-sheet-body {
overflow-y: auto;
flex: 1 1 auto;
min-height: 0;
}
.trans-sheet .trans-list-header {
flex-shrink: 0;
border: none;
border-bottom: 1px solid var(--border);
border-radius: 0;
margin: 0;
}
.trans-list-header {
display: grid;
grid-template-columns: minmax(100px, 0.75fr) 1fr 1fr;
grid-template-columns: minmax(140px, 1.1fr) 1fr 1fr;
gap: 12px;
padding: 8px 14px;
font-size: .75rem;
@ -1597,10 +1618,51 @@ body.modal-open {
letter-spacing: .04em;
color: var(--text-secondary);
background: var(--table-header-bg);
border: 1px solid var(--border);
border-bottom: none;
border-radius: var(--radius) var(--radius) 0 0;
}
.trans-list-header-sticky {
position: sticky;
top: 0;
z-index: 2;
box-shadow: 0 1px 0 var(--border);
}
.trans-top-bar {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 12px 20px;
margin-bottom: 12px;
padding: 12px 14px;
background: var(--surface-muted);
border: 1px solid var(--border);
border-radius: var(--radius);
}
.trans-top-stats {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px 20px;
font-size: .88rem;
color: var(--text-secondary);
}
.trans-top-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
}
.trans-save-status {
font-size: .82rem;
color: var(--text-secondary);
}
.trans-save-status[data-state="saving"] { color: var(--primary); }
.trans-save-status[data-state="error"] { color: var(--danger); }
.trans-toolbar-field {
min-width: 180px;
max-width: 280px;
margin: 0;
}
.trans-empty-hint { margin-top: 12px; }
.trans-qn-block {
margin-bottom: 28px;
padding-bottom: 8px;
@ -1628,31 +1690,108 @@ body.modal-open {
padding-bottom: 6px;
border-bottom: 1px solid var(--border);
}
.trans-groups-wrap .trans-list-header { margin-top: 0; }
.trans-list-in-group {
.trans-groups-flat { display: block; }
.trans-group-rows { display: block; }
.trans-scope-block .trans-group-details:first-child { border-top: none; }
.trans-group-details {
border: none;
border-top: 1px solid var(--border);
border-radius: 0;
margin: 0;
background: transparent;
}
.trans-group-details.trans-group-hidden { display: none !important; }
.trans-group-summary {
cursor: pointer;
font-weight: 600;
font-size: .8rem;
padding: 10px 14px;
list-style: none;
user-select: none;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: .04em;
background: var(--surface-muted);
}
.trans-group-summary::-webkit-details-marker { display: none; }
.trans-group-summary::before {
content: '▸ ';
color: var(--text-secondary);
}
.trans-group-details[open] > .trans-group-summary::before {
content: '▾ ';
}
.trans-qn-section {
border: none;
border-top: 1px solid var(--border);
border-radius: 0;
margin: 0;
background: transparent;
}
.trans-qn-section.trans-qn-hidden { display: none !important; }
.trans-qn-section:first-child { border-top: none; }
.trans-qn-summary {
cursor: pointer;
font-weight: 600;
font-size: .92rem;
padding: 12px 14px;
list-style: none;
user-select: none;
color: var(--text);
background: var(--surface-muted);
}
.trans-qn-summary::-webkit-details-marker { display: none; }
.trans-qn-summary::before {
content: '▸ ';
color: var(--text-secondary);
}
.trans-qn-section[open] > .trans-qn-summary::before {
content: '▾ ';
}
.trans-sheet-body-stack .trans-group-summary {
font-size: .78rem;
padding: 8px 14px 8px 22px;
background: transparent;
}
.trans-list {
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
}
#transGroupedRoot {
max-height: calc(100vh - 360px);
overflow-y: auto;
}
.trans-list {
border: 1px solid var(--border);
border-radius: 0 0 var(--radius) var(--radius);
max-height: calc(100vh - 360px);
overflow-y: auto;
}
.trans-list-item {
display: grid;
grid-template-columns: minmax(100px, 0.75fr) 1fr 1fr;
grid-template-columns: minmax(140px, 1.1fr) 1fr 1fr;
gap: 12px;
align-items: center;
padding: 10px 14px;
border-bottom: 1px solid var(--border);
}
.trans-list-item:last-child { border-bottom: none; }
.trans-key-labels {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.trans-key-primary {
font-size: .88rem;
font-weight: 500;
color: var(--text);
line-height: 1.35;
overflow: hidden;
text-overflow: ellipsis;
}
.trans-key-secondary {
font-size: .72rem;
font-family: var(--font-mono, ui-monospace, monospace);
color: var(--text-secondary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.trans-sheet-body > .trans-scope-block .trans-group-details:last-child .trans-list-item:last-child,
.trans-sheet-body > .trans-groups-flat .trans-group-details:last-child .trans-list-item:last-child {
border-bottom: none;
}
.trans-list-item:hover { background: var(--row-hover-bg); }
.trans-list-item-missing {
background: var(--trans-missing-bg);
@ -1710,7 +1849,7 @@ body.modal-open {
}
.trans-list-header { display: none; }
.trans-list-item .trans-list-key::before {
content: 'Key';
content: 'Label';
display: block;
font-size: .7rem;
font-weight: 600;