GovOPlaN/govoplan-forms
2
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Add conditional localized form definitions

Browse Source
This commit is contained in:
zemion
2026-08-01 20:57:26 +02:00
parent 343a208894
commit e2033640a1
11 changed files with 1346 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webui/src/styles/forms.css
+124 -7
View File
@@ -61,7 +61,7 @@
.forms-row {
display: grid;
grid-template-columns: minmax(260px, 1fr) minmax(90px, auto) minmax(120px, auto) auto 36px;
grid-template-columns: minmax(260px, 1fr) minmax(90px, auto) minmax(120px, auto) auto auto;
align-items: center;
gap: 14px;
min-height: 64px;
@@ -97,8 +97,25 @@
font-size: 0.8rem;
}
.forms-row-action-spacer {
width: 36px;
.forms-row-actions {
display: flex;
align-items: center;
gap: 4px;
}
.forms-hidden-input {
display: none;
}
.forms-package-import {
display: flex;
flex-direction: column;
gap: 12px;
}
.forms-package-import p {
margin: 0;
color: var(--text-soft);
}
.forms-empty {
@@ -198,16 +215,109 @@
.form-field-help,
.form-field-options,
.form-field-constraints {
.form-field-constraints,
.form-field-condition {
grid-column: 2 / -1;
}
.form-field-constraints {
.form-field-constraints,
.form-field-condition {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px;
}
.form-composition-section {
display: flex;
flex-direction: column;
gap: 10px;
padding-top: 4px;
border-top: 1px solid var(--border);
}
.form-field-editor-heading h3 {
display: inline-flex;
align-items: center;
gap: 7px;
}
.form-section-note {
margin: 0;
color: var(--text-soft);
font-size: 0.84rem;
}
.form-page-editor,
.form-localization-editor {
display: flex;
flex-direction: column;
gap: 10px;
padding: 12px 0;
border-bottom: 1px solid var(--border);
}
.form-page-editor-heading,
.form-section-editor,
.form-localization-editor {
display: grid;
grid-template-columns: minmax(130px, 0.7fr) minmax(180px, 1fr) auto;
align-items: end;
gap: 9px;
}
.form-section-editor {
grid-template-columns: minmax(120px, 0.7fr) minmax(160px, 1fr) minmax(220px, 1.5fr) auto;
padding-left: 18px;
}
.form-section-editor select[multiple] {
min-height: 84px;
}
.form-localization-editor {
grid-template-columns: minmax(100px, 0.5fr) minmax(200px, 1fr) auto auto;
}
.form-localization-fallback {
display: flex;
align-items: center;
gap: 6px;
min-height: 38px;
}
.form-localization-fields {
display: grid;
grid-column: 1 / -1;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 9px;
}
.form-preview-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
}
.form-preview-grid > div {
min-width: 0;
}
.form-preview-grid ul {
margin: 7px 0 0;
padding-left: 18px;
}
.form-preview-page {
display: flex;
flex-direction: column;
gap: 3px;
margin-top: 8px;
}
.form-preview-page small {
color: var(--text-soft);
}
@media (max-width: 900px) {
.forms-toolbar {
align-items: stretch;
@@ -243,7 +353,8 @@
.form-field-required,
.form-field-help,
.form-field-options,
.form-field-constraints {
.form-field-constraints,
.form-field-condition {
grid-column: 2;
}
@@ -255,7 +366,13 @@
@media (max-width: 620px) {
.form-definition-grid,
.form-field-constraints {
.form-field-constraints,
.form-field-condition,
.form-page-editor-heading,
.form-section-editor,
.form-localization-editor,
.form-localization-fields,
.form-preview-grid {
grid-template-columns: 1fr;
}