filipriec/komp_ac
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

import page error propagation

Browse Source
This commit is contained in:
Priec
2026-08-17 23:56:21 +02:00
parent 9b2b429dc6
commit b71ed4f42f
16 changed files with 496 additions and 163 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
web/static/app.css
View File

@@ -352,13 +352,44 @@
/* ---------- Import preparation (pages/import_export/import) ---------- */
/* A mapping row is read left to right as a sentence: the column `a` takes its
value from "hl — position 3", which on the first row holds "value-a". The
example is what people actually recognise their data by, so it gets the
room, and it is the last thing on the line because it is the confirmation
rather than the choice. */
.mapping-table select { width: 100%; min-width: 220px; }
.mapping-table .example { max-width: 320px; overflow: hidden; text-overflow: ellipsis; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: #33415c; }
/* CSV columns are a movable palette; table columns stay fixed as the import
destinations. A select in every row is the keyboard/touch equivalent of
dragging a source chip onto it. */
.mapping-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 14px 0; padding: 10px 12px; border-radius: 8px; background: #f5f7fa; }
.mapping-summary strong { color: #24324a; font-variant-numeric: tabular-nums; }
.mapping-workbench { display: grid; grid-template-columns: minmax(230px, .75fr) minmax(480px, 1.6fr); align-items: start; gap: 14px; }
.mapping-workbench h3 { margin: 0; color: #24324a; font-size: 14px; }
.mapping-workbench h3 + .hint { margin: 4px 0 12px; font-size: 12px; }
.source-palette, .destination-map { padding: 14px; border: 1px solid #dfe5ed; border-radius: 9px; background: #fafbfc; }
.source-chips { display: grid; gap: 7px; }
.source-chip { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; width: 100%; padding: 9px 10px; border: 1px solid #cfd9e6; border-radius: 7px; color: #33415c; background: white; text-align: left; cursor: grab; transition: border-color 120ms ease, box-shadow 120ms ease, opacity 120ms ease; }
.source-chip:hover, .source-chip.is-selected { border-color: #78a1df; box-shadow: 0 3px 10px rgb(31 43 58 / 9%); }
.source-chip.is-selected { outline: 3px solid rgb(37 99 235 / 12%); }
.source-chip.is-mapped { border-color: #a8cfb3; background: #f4fbf6; }
.source-chip.is-dragging { opacity: .55; cursor: grabbing; }
.source-chip code { overflow: hidden; text-overflow: ellipsis; }
.source-chip small { max-width: 100px; overflow: hidden; color: #778396; text-overflow: ellipsis; white-space: nowrap; }
.destination-rows { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.destination-rows li { display: grid; grid-template-columns: minmax(100px, .7fr) 22px minmax(210px, 1.3fr) minmax(70px, .65fr) auto; align-items: center; gap: 8px; min-height: 62px; padding: 8px 9px; border: 1px dashed #cdd6e2; border-radius: 7px; background: white; transition: border-color 120ms ease, background 120ms ease, box-shadow 120ms ease; }
.destination-rows li.is-mapped { border-style: solid; border-color: #b9cce8; }
.destination-rows li.drop-ready { border-style: solid; border-color: #2563eb; background: #edf4ff; box-shadow: 0 0 0 3px rgb(37 99 235 / 12%); }
.destination-rows li.just-mapped { background: #eef8f1; }
.destination-name { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; min-width: 0; }
.destination-name code { overflow: hidden; color: #24324a; text-overflow: ellipsis; }
.mapping-arrow { color: #9aa5b4; text-align: center; }
.destination-rows label { display: grid; gap: 3px; color: #778396; font-size: 10px; letter-spacing: .04em; text-transform: uppercase; }
.destination-rows select { min-width: 0; color: #24324a; font-size: 13px; letter-spacing: normal; text-transform: none; }
.mapped-example { min-width: 0; overflow: hidden; color: #667385; font: 11px/1.4 ui-monospace, monospace; text-overflow: ellipsis; white-space: nowrap; }
.clear-mapping { padding: 6px 8px; border: 1px solid #d6dde7; border-radius: 6px; color: #59677a; background: white; font-size: 11px; cursor: pointer; }
.clear-mapping:hover:not(:disabled) { color: #a12b2b; background: #fdf3f3; }
.clear-mapping:disabled { color: #bdc4ce; background: #f7f8fa; cursor: default; }
@media (max-width: 850px) {
.mapping-workbench { grid-template-columns: 1fr; }
.source-chips { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.destination-rows li { grid-template-columns: minmax(90px, .7fr) 18px minmax(180px, 1.3fr) auto; }
.mapped-example { display: none; }
}
/* A secondary action in a form's action row — "back a step". The row's own
rule paints every button as the primary one, so this has to say otherwise
@@ -380,6 +411,10 @@
}
@media (max-width: 520px) {
.destination-rows li { grid-template-columns: minmax(0, 1fr) auto; }
.destination-rows .mapping-arrow { display: none; }
.destination-rows label { grid-column: 1 / -1; }
.destination-rows .clear-mapping { grid-column: 2; grid-row: 1; }
.alias-list-head { display: none; }
.alias-row { grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1.3fr); }
.alias-row > button { grid-column: 3; width: 100%; }