bostame/workdock-platform
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

snapshot: preserve builder before card-style redesign

Browse Source
This commit is contained in:
Md Bayazid Bostame
2026-03-27 23:15:35 +01:00
parent 88cc961038
commit 930f28522b
2 changed files with 69 additions and 172 deletions
Download Patch File Download Diff File Expand all files Collapse all files

164
backend/workflows/static/workflows/css/form_builder.css
View File

@@ -116,34 +116,6 @@ body {
gap: 12px;
}
.builder-sidebar-context {
gap: 12px;
}
.builder-context-stack {
display: grid;
gap: 10px;
}
.builder-context-row {
display: grid;
gap: 3px;
padding-top: 2px;
}
.builder-context-label {
color: #607086;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.builder-context-row strong {
color: #142033;
font-size: 14px;
}
.builder-side-stat {
display: grid;
gap: 2px;
@@ -219,48 +191,6 @@ body {
justify-content: flex-end;
}
.builder-toolbar {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 10px;
margin: 8px 0 14px;
padding: 10px 12px;
border: 1px solid #d7e0ec;
border-radius: 16px;
background: linear-gradient(180deg, #fbfdff, #f7fbff);
box-shadow: 0 10px 22px rgba(15, 23, 42, 0.04);
}
.builder-toolbar-main {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.builder-toolbar-chip {
display: inline-grid;
gap: 1px;
min-height: 40px;
padding: 7px 12px;
border: 1px solid #dbe5f1;
border-radius: 14px;
background: #fff;
}
.builder-toolbar-chip-label {
color: #607086;
font-size: 10px;
font-weight: 800;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.builder-toolbar-chip strong {
font-size: 13px;
color: #142033;
}
.builder-lang-switch {
display: inline-flex;
align-items: center;
@@ -294,7 +224,6 @@ body {
}
.builder-main .btn,
.builder-main .tab,
.builder-main .builder-module-link,
.builder-main .builder-lang-btn {
min-height: 38px;
@@ -310,9 +239,13 @@ body {
}
.tab {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 36px;
padding: 0 14px;
border: 1px solid #c6d1e1;
border-radius: 999px;
padding: 9px 15px;
text-decoration: none;
color: #1c2a41;
background: #f8fbff;
@@ -1036,25 +969,18 @@ body {
.structure-workspace {
display: grid;
grid-template-columns: 260px minmax(0, 1fr);
gap: 16px;
grid-template-columns: minmax(0, 1fr);
gap: 12px;
align-items: start;
min-width: 0;
}
.structure-sidebar {
display: grid;
gap: 12px;
position: sticky;
top: 18px;
}
.structure-canvas {
min-width: 0;
overflow: visible;
padding-bottom: 4px;
padding-bottom: 0;
display: grid;
gap: 14px;
gap: 12px;
}
.structure-section-nav {
@@ -1418,10 +1344,10 @@ body {
.option-card {
display: grid;
gap: 14px;
padding: 16px;
gap: 12px;
padding: 14px;
border: 1px solid #d7e0ec;
border-radius: 18px;
border-radius: 16px;
background: linear-gradient(180deg, #fbfdff 0%, #ffffff 100%);
box-shadow: 0 10px 18px rgba(15, 23, 42, 0.04);
cursor: grab;
@@ -1450,7 +1376,7 @@ body {
.option-card-order {
display: flex;
align-items: flex-start;
gap: 12px;
gap: 10px;
min-width: 0;
}
@@ -1462,7 +1388,7 @@ body {
.option-card-title-block strong {
color: #142033;
font-size: 15px;
font-size: 14px;
line-height: 1.35;
}
@@ -1497,7 +1423,7 @@ body {
.option-card-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
gap: 10px;
}
.option-empty-state {
@@ -1569,7 +1495,7 @@ body {
}
.custom-fields-surface .builder-group-card {
border-radius: 14px;
border-radius: 16px;
}
.custom-fields-surface .builder-group-head {
@@ -1577,13 +1503,16 @@ body {
}
.custom-fields-surface .builder-entity-card {
padding: 11px 12px;
gap: 8px;
border-radius: 12px;
padding: 14px;
gap: 10px;
border-radius: 16px;
border: 1px solid #d7e0ec;
background: linear-gradient(180deg, #fbfdff 0%, #ffffff 100%);
box-shadow: 0 10px 18px rgba(15, 23, 42, 0.04);
}
.custom-fields-surface .builder-entity-card-head strong {
font-size: 13px;
font-size: 14px;
}
.custom-fields-surface .builder-entity-card-head {
@@ -1606,6 +1535,16 @@ body {
padding: 7px 9px;
}
.custom-fields-surface .builder-entity-grid {
gap: 10px;
}
.custom-fields-surface .builder-entity-card:hover {
transform: translateY(-1px);
border-color: #c4d4e7;
box-shadow: 0 14px 24px rgba(15, 23, 42, 0.06);
}
.builder-entity-form {
display: grid;
gap: 12px;
@@ -1720,13 +1659,26 @@ body {
}
.builder-inline-meta {
margin-top: 8px;
margin-top: 6px;
display: flex;
align-items: center;
gap: 8px;
gap: 6px;
flex-wrap: wrap;
}
.builder-meta-chip {
display: inline-flex;
align-items: center;
min-height: 24px;
padding: 0 8px;
border: 1px solid #dbe5f1;
border-radius: 999px;
background: #f8fbff;
color: #526379;
font-size: 11px;
font-weight: 700;
}
.builder-switch,
.builder-switch-inline {
display: inline-flex;
@@ -1774,10 +1726,10 @@ body {
display: grid;
grid-template-columns: 30px auto minmax(0, 1fr) auto;
align-items: center;
gap: 10px;
padding: 12px 14px;
gap: 8px;
padding: 10px 12px;
border: 1px solid #d6e0ec;
border-radius: 14px;
border-radius: 12px;
background: linear-gradient(180deg, #fbfdff, #ffffff);
transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
width: 100%;
@@ -1798,7 +1750,7 @@ body {
.section-rule-actions {
display: inline-flex;
align-items: center;
gap: 5px;
gap: 4px;
padding-right: 0;
}
@@ -1806,8 +1758,8 @@ body {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
width: 28px;
height: 28px;
border-radius: 999px;
background: #eaf1ff;
color: #23457a;
@@ -1817,10 +1769,10 @@ body {
}
.section-move-btn {
width: 32px;
height: 32px;
width: 30px;
height: 30px;
border: 1px solid #cdd9e8;
border-radius: 10px;
border-radius: 9px;
background: linear-gradient(180deg, #ffffff, #f5f9ff);
color: #274264;
font-size: 14px;
@@ -1852,7 +1804,7 @@ body {
.section-rule-copy strong {
color: #0f172a;
font-size: 14px;
font-size: 13px;
font-weight: 700;
overflow-wrap: anywhere;
}

77
backend/workflows/templates/workflows/form_builder.html
View File

@@ -33,26 +33,6 @@
</a>
</nav>
<div class="builder-sidebar-card builder-sidebar-context">
<span class="builder-sidebar-eyebrow">{% trans "Aktive Ansicht" %}</span>
<div class="builder-context-stack">
<div class="builder-context-row">
<span class="builder-context-label">{% trans "Workflow" %}</span>
<strong>{{ active_form_type_label }}</strong>
</div>
<div class="builder-context-row">
<span class="builder-context-label">{% trans "Modul" %}</span>
<strong>{{ active_module_label }}</strong>
</div>
{% if active_focus_label %}
<div class="builder-context-row">
<span class="builder-context-label">{% trans "Fokus" %}</span>
<strong>{{ active_focus_label }}</strong>
</div>
{% endif %}
</div>
</div>
<div class="builder-sidebar-card builder-sidebar-stats">
<div class="builder-side-stat">
<strong>{{ builder_summary.configurable_field_count }}</strong>
@@ -94,25 +74,6 @@
</div>
</section>
<section class="builder-toolbar" aria-label="{% trans 'Arbeitskontext' %}">
<div class="builder-toolbar-main">
<span class="builder-toolbar-chip">
<span class="builder-toolbar-chip-label">{% trans "Workflow" %}</span>
<strong>{{ active_form_type_label }}</strong>
</span>
<span class="builder-toolbar-chip">
<span class="builder-toolbar-chip-label">{% trans "Modul" %}</span>
<strong>{{ active_module_label }}</strong>
</span>
{% if active_focus_label %}
<span class="builder-toolbar-chip">
<span class="builder-toolbar-chip-label">{% trans "Aktiv" %}</span>
<strong>{{ active_focus_label }}</strong>
</span>
{% endif %}
</div>
</section>
{% include 'workflows/includes/messages.html' %}
<div id="status-message" class="status" aria-live="polite"></div>
@@ -124,35 +85,9 @@
<h2>{% trans "Struktur & Reihenfolge" %}</h2>
<p class="builder-panel-sub">{% trans "Ordnen Sie Abschnitte und Felder in der Reihenfolge, in der sie im Formular erscheinen sollen." %}</p>
</div>
<div class="builder-panel-meta">
<span class="builder-panel-count">{{ columns|length }} {% trans "Abschnitte" %}</span>
<span class="builder-panel-count">{{ builder_summary.configurable_field_count }} {% trans "konfigurierbare Felder" %}</span>
</div>
</div>
<div class="structure-workspace">
<aside class="structure-sidebar">
<section class="structure-card">
<span class="structure-card-eyebrow">{% trans "Arbeitsmodus" %}</span>
<h3>{% trans "Direkte Anordnung" %}</h3>
</section>
<section class="structure-card structure-card-muted">
<div class="structure-stat">
<strong>{{ columns|length }}</strong>
<span>{% trans "aktive Abschnitte" %}</span>
</div>
<div class="structure-stat">
<strong>{{ builder_summary.custom_field_count }}</strong>
<span>{% trans "eigene Felder" %}</span>
</div>
<div class="structure-stat">
<strong>{{ builder_summary.hidden_field_count }}</strong>
<span>{% trans "ausgeblendete Felder" %}</span>
</div>
</section>
</aside>
<div class="structure-canvas">
<nav class="structure-section-nav" aria-label="{% trans 'Abschnitte' %}">
{% for column in columns %}
@@ -258,7 +193,12 @@
</div>
<div class="section-rule-copy">
<strong>{{ section.display_title }}</strong>
<span>{% blocktrans trimmed with count=section.field_count %}{{ count }} Feld/Felder in diesem Abschnitt.{% endblocktrans %}</span>
<div class="builder-inline-meta">
<span class="builder-meta-chip">{% blocktrans trimmed with count=section.field_count %}{{ count }} Feld/Felder{% endblocktrans %}</span>
{% if section.locked %}
<span class="builder-meta-chip">{% trans "Fixer Abschnitt" %}</span>
{% endif %}
</div>
</div>
<div class="section-rule-toggle">
<label class="section-rule-checkbox">
@@ -845,6 +785,11 @@
<div>
<strong>{{ item.label }}</strong>
<div class="entity-meta">{{ item.field_key }}</div>
<div class="builder-inline-meta">
<span class="builder-meta-chip">{{ group.title }}</span>
<span class="builder-meta-chip">{{ item.get_field_type_display }}</span>
<span class="builder-meta-chip">{% trans "Sortierung" %}: {{ item.sort_order }}</span>
</div>
</div>
<div class="builder-switch-stack">
<label class="builder-switch">