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

snapshot: preserve app state before onboarding pdf layout restore

Browse Source
This commit is contained in:
Md Bayazid Bostame
2026-03-27 23:52:37 +01:00
parent 631886a763
commit 5cb7ef78f8
13 changed files with 318 additions and 306 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
backend/workflows/static/workflows/css/admin_tools.css
View File

@@ -134,9 +134,6 @@ textarea { min-height: 120px; font-family: ui-monospace, SFMono-Regular, Menlo,
.hint { margin-top: 6px; color: #64748b; font-size: 12px; }
.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.switch { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.switch .tab { border: 1px solid #c9d6e7; border-radius: 999px; padding: 8px 14px; text-decoration: none; color: #1f2f49; font-weight: 700; background: #f6f9ff; transition: background-color 180ms cubic-bezier(0.2, 0.8, 0.2, 1), border-color 180ms cubic-bezier(0.2, 0.8, 0.2, 1), color 180ms cubic-bezier(0.2, 0.8, 0.2, 1), transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 180ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.switch .tab.active { background: #000078; color: #fff; border-color: #000078; }
.switch .tab:hover { transform: translateY(-1px); box-shadow: 0 8px 16px rgba(16, 32, 57, 0.06); }
.check-row { margin-top: 8px; display: flex; gap: 12px; flex-wrap: wrap; }
.check-row label { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; }
.check-row input[type="checkbox"] { width: auto; }

228
backend/workflows/static/workflows/css/design_system.css
View File

@@ -150,6 +150,183 @@ body {
gap: 14px;
}
.app-workspace {
display: grid;
grid-template-columns: 280px minmax(0, 1fr);
gap: 18px;
align-items: start;
padding: 24px;
}
.app-sidebar {
position: sticky;
top: 18px;
display: grid;
gap: 14px;
}
.app-sidebar-card {
padding: 16px;
border: 1px solid rgba(216, 226, 239, 0.94);
border-radius: 18px;
background:
radial-gradient(120% 120% at 100% 0%, rgba(31, 79, 214, 0.05), rgba(31, 79, 214, 0)),
var(--ds-surface-soft);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.94), var(--ds-shadow-card);
}
.app-sidebar-card h1,
.app-sidebar-card h2 {
margin: 6px 0 0;
color: var(--ds-ink-strong);
line-height: 1.08;
}
.app-sidebar-card p {
margin: 8px 0 0;
color: var(--ds-muted);
font-size: 13px;
line-height: 1.55;
}
.app-sidebar-eyebrow {
display: inline-flex;
align-items: center;
min-height: 24px;
padding: 0 9px;
border-radius: 999px;
background: rgba(0, 0, 120, 0.07);
color: var(--ds-brand-strong);
font-size: 11px;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.app-side-nav {
display: grid;
gap: 8px;
}
.app-side-link {
display: grid;
gap: 4px;
padding: 14px 16px;
border: 1px solid rgba(216, 226, 239, 0.94);
border-radius: 16px;
background: linear-gradient(180deg, #fbfdff, #ffffff);
color: var(--ds-ink-strong);
text-decoration: none;
transition:
transform var(--ds-motion-fast) var(--ds-ease),
border-color var(--ds-motion-fast) var(--ds-ease),
box-shadow var(--ds-motion-fast) var(--ds-ease),
background var(--ds-motion-fast) var(--ds-ease);
}
.app-side-link:hover {
transform: translateY(-1px);
border-color: #b8cae0;
box-shadow: var(--ds-shadow-hover);
}
.app-side-link.is-active {
border-color: #9eb6d8;
background: linear-gradient(180deg, #eef5ff, #ffffff);
box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
}
.app-side-link-title {
font-size: 14px;
font-weight: 800;
}
.app-side-link-meta {
color: var(--ds-muted);
font-size: 12px;
font-weight: 700;
}
.app-sidebar-stats {
display: grid;
gap: 12px;
}
.app-side-stat {
display: grid;
gap: 2px;
}
.app-side-stat strong {
font-size: 22px;
line-height: 1;
color: #163566;
}
.app-side-stat span {
color: var(--ds-muted);
font-size: 12px;
font-weight: 700;
}
.app-flow-list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 8px;
}
.app-flow-item {
display: flex;
gap: 10px;
align-items: flex-start;
padding: 10px;
border: 1px solid rgba(216, 226, 239, 0.94);
border-radius: 14px;
background: linear-gradient(160deg, #f8faff, #fcfdff);
transition:
border-color var(--ds-motion-fast) var(--ds-ease),
transform var(--ds-motion-fast) var(--ds-ease),
box-shadow var(--ds-motion-fast) var(--ds-ease);
}
.app-flow-item.is-active {
border-color: #9db4ff;
background: linear-gradient(160deg, #eaf0ff, #f4f7ff);
box-shadow: 0 6px 16px rgba(0, 0, 120, 0.08);
}
.app-flow-item:hover {
border-color: #b2c3ff;
}
.app-flow-dot {
width: 24px;
height: 24px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 120, 0.06);
border: 1px solid rgba(0, 0, 120, 0.14);
color: var(--ds-brand);
font-size: 12px;
font-weight: 700;
flex: 0 0 auto;
}
.app-flow-title {
font-weight: 700;
color: #1d2c68;
margin-bottom: 2px;
}
.app-flow-sub {
font-size: 12px;
color: var(--ds-muted);
}
.metric-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
@@ -226,6 +403,46 @@ table th {
align-items: center;
}
.app-module-nav {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.app-module-link,
.tab {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 36px;
padding: 0 14px;
border: 1px solid #c6d1e1;
border-radius: 999px;
text-decoration: none;
color: #1c2a41;
background: #f8fbff;
font-weight: 700;
transition:
transform var(--ds-motion-fast) var(--ds-ease),
border-color var(--ds-motion-fast) var(--ds-ease),
background var(--ds-motion-fast) var(--ds-ease),
box-shadow var(--ds-motion-fast) var(--ds-ease);
}
.app-module-link:hover,
.tab:hover {
transform: translateY(-1px);
border-color: #9db4d2;
box-shadow: 0 8px 16px rgba(16, 32, 57, 0.06);
}
.app-module-link.is-active,
.tab.active {
background: linear-gradient(135deg, #0f3b7a 0%, #1759b8 100%);
color: #fff;
border-color: #1759b8;
}
.inline-action-form {
display: inline;
}
@@ -259,6 +476,17 @@ table th {
color: #8e1e1e;
}
@media (max-width: 980px) {
.app-workspace {
grid-template-columns: 1fr;
padding: 18px;
}
.app-sidebar {
position: static;
}
}
.status-note-error + .status-note-error {
margin-top: 6px;
}

98
backend/workflows/static/workflows/css/offboarding_form.css
View File

@@ -1,108 +1,38 @@
:root {
--off-ink: #182233;
--off-muted: #5e6f85;
--off-brand: #000078;
--off-brand-soft: #eef1ff;
--off-line: #d7dfeb;
--off-card: #ffffff;
}
.offboarding-shell-body {
display: grid;
grid-template-columns: 290px 1fr;
gap: 16px;
padding: 18px;
}
.offboarding-panel,
.offboarding-main,
.offboarding-search-card,
.offboarding-section-card {
background: var(--off-card);
border: 1px solid var(--off-line);
background: #ffffff;
border: 1px solid #d7dfeb;
box-shadow: 0 12px 28px rgba(30, 52, 87, 0.08);
}
.offboarding-panel,
.offboarding-search-card,
.offboarding-section-card {
border-radius: 16px;
}
.offboarding-panel {
padding: 18px;
height: fit-content;
position: sticky;
top: 20px;
}
.offboarding-main {
padding: 22px;
border-radius: 16px;
background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}
.offboarding-panel h1 {
.workflow-sidebar-card h1 {
margin: 0 0 8px;
font-size: 28px;
letter-spacing: -0.02em;
color: var(--off-ink);
}
.offboarding-sub {
margin: 0 0 16px;
color: var(--off-muted);
font-size: 14px;
line-height: 1.55;
}
.offboarding-step-list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 8px;
}
.offboarding-step-item {
display: flex;
gap: 10px;
align-items: flex-start;
border: 1px solid #d8e0f4;
border-radius: 12px;
padding: 10px;
background: linear-gradient(160deg, #f8faff, #fcfdff);
}
.offboarding-dot {
width: 24px;
height: 24px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--off-brand-soft);
border: 1px solid #c4cdf7;
color: var(--off-brand);
font-size: 12px;
font-weight: 700;
}
.offboarding-step-title {
font-weight: 700;
color: #1d2c68;
margin-bottom: 2px;
}
.offboarding-step-sub {
font-size: 12px;
color: var(--off-muted);
}
.offboarding-main form {
margin: 0;
}
.workflow-form-main.offboarding-main {
padding: 22px;
border-radius: 16px;
background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}
.offboarding-search-card {
padding: 14px;
margin-bottom: 16px;
@@ -269,16 +199,6 @@ textarea {
color: #475569;
}
@media (max-width: 980px) {
.offboarding-shell-body {
grid-template-columns: 1fr;
}
.offboarding-panel {
position: static;
}
}
@media (max-width: 820px) {
.grid {
grid-template-columns: 1fr;

122
backend/workflows/static/workflows/css/onboarding_form.css
View File

@@ -1,61 +1,22 @@
:root {
--bg-a: #d3e3ff;
--bg-b: #eef4ff;
--ink: #182233;
--muted: #5e6f85;
--brand: #000078;
--brand-soft: #eef1ff;
--line: #d7dfeb;
--danger: #c53030;
--warn-bg: #fff7ed;
--warn-border: #fdba74;
--card: #ffffff;
}
.shell-body {
display: grid;
grid-template-columns: 290px 1fr;
gap: 16px;
padding: 18px;
}
.top-wrap {
width: min(var(--app-shell-width), 100%);
margin: 0 auto 10px;
}
.panel,
.main {
background: var(--card);
border: 1px solid var(--line);
border-radius: 16px;
box-shadow: 0 12px 28px rgba(30, 52, 87, 0.08);
}
.panel {
padding: 18px;
height: fit-content;
position: sticky;
top: 20px;
}
.main {
padding: 22px;
background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}
h1 {
.workflow-sidebar-card h1 {
margin: 0 0 8px;
font-size: 28px;
letter-spacing: -0.02em;
}
.sub {
.workflow-sidebar-card .sub {
margin: 0 0 16px;
color: var(--muted);
font-size: 14px;
}
.workflow-form-main {
padding: 22px;
border: 1px solid #d7dfeb;
border-radius: 16px;
box-shadow: 0 12px 28px rgba(30, 52, 87, 0.08);
background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}
.brand-logo {
width: 180px;
max-width: 100%;
@@ -68,66 +29,15 @@ h1 {
margin: 0 0 10px;
}
.step-list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 8px;
}
.step-item {
display: flex;
gap: 10px;
align-items: flex-start;
border: 1px solid #d8e0f4;
border-radius: 12px;
padding: 10px;
background: linear-gradient(160deg, #f8faff, #fcfdff);
.app-flow-item {
cursor: pointer;
transition: border-color 0.15s ease, transform 0.08s ease, box-shadow 0.15s ease;
}
.step-item.active {
border-color: #9db4ff;
background: linear-gradient(160deg, #eaf0ff, #f4f7ff);
box-shadow: 0 6px 16px rgba(0, 0, 120, 0.08);
}
.step-item:hover {
border-color: #b2c3ff;
}
.step-item:focus-visible {
.app-flow-item:focus-visible {
outline: 3px solid rgba(0, 0, 120, 0.18);
outline-offset: 2px;
}
.dot {
width: 24px;
height: 24px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--brand-soft);
border: 1px solid #c4cdf7;
color: var(--brand);
font-size: 12px;
font-weight: 700;
}
.step-title {
font-weight: 700;
color: #1d2c68;
margin-bottom: 2px;
}
.step-sub {
font-size: 12px;
color: var(--muted);
}
.page {
display: none !important;
}
@@ -632,12 +542,8 @@ select:focus {
}
@media (max-width: 920px) {
.shell {
grid-template-columns: 1fr;
}
.panel {
position: static;
.workflow-form-main {
padding: 18px;
}
.grid-2 {

4
backend/workflows/static/workflows/js/onboarding_form.js
View File

@@ -1,6 +1,6 @@
(function () {
const pages = Array.from(document.querySelectorAll('.page'));
const navItems = Array.from(document.querySelectorAll('.step-item'));
const navItems = Array.from(document.querySelectorAll('.app-flow-item'));
const btnPrev = document.getElementById('btn-prev');
const btnNext = document.getElementById('btn-next');
const btnSubmit = document.getElementById('btn-submit');
@@ -270,7 +270,7 @@
function updateStep() {
pages.forEach((p, i) => p.classList.toggle('active', i === current));
navItems.forEach((n, i) => n.classList.toggle('active', i === current));
navItems.forEach((n, i) => n.classList.toggle('is-active', i === current));
btnPrev.disabled = current === 0;
const last = current === pages.length - 1;
btnNext.classList.toggle('hidden', last);