Z8MB1E
89482798f4
Add a custom admin view over the technologies collection so staff can model prerequisites as a left-to-right tree instead of a flat list. - React Flow v12 canvas with category bands, OR-prerequisite edges, a lite side-panel editor, and a quick-create dialog. - Propagating layout: a technology with prerequisites lands one column right of its parents at their average row; uncategorized roots fill a catalog grid keyed by each tech's rank among all uncategorized technologies, so promoting one into the tree leaves an empty slot instead of re-shuffling the grid. - Stability contract: connecting or removing edges never moves a card (the connected node is pinned to its current spot), and a "Save positions" control commits every on-screen node so the arrangement survives reload; "Auto-arrange" clears manual positions and restores the ordered layout. - Progression-path edge colors and per-source lanes keep overlapping edges readable. Wire the view and its nav entry into payload.config.ts and add dark React Flow / scrollbar styling.
65 lines
1.3 KiB
SCSS
65 lines
1.3 KiB
SCSS
@layer theme {
|
|
@import 'tailwindcss/theme.css';
|
|
}
|
|
|
|
@layer base {
|
|
.twp {
|
|
@import 'tailwindcss/preflight.css';
|
|
}
|
|
|
|
.twp.no-twp {
|
|
*,
|
|
::after,
|
|
::before,
|
|
::backdrop,
|
|
::file-selector-button {
|
|
all: revert-layer;
|
|
}
|
|
}
|
|
}
|
|
|
|
@layer components;
|
|
|
|
@layer utilities {
|
|
@import 'tailwindcss/utilities.css';
|
|
}
|
|
|
|
/* Tech Tree canvas: dark tactical chrome for React Flow controls. */
|
|
.tech-tree-canvas .react-flow__controls {
|
|
button {
|
|
background: rgba(0, 0, 0, 0.72);
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
|
|
color: rgba(255, 255, 255, 0.7);
|
|
border-radius: 0;
|
|
&:hover {
|
|
background: rgba(0, 0, 0, 0.92);
|
|
color: #ffffff;
|
|
}
|
|
svg { fill: currentColor; }
|
|
}
|
|
}
|
|
.tech-tree-canvas .react-flow__attribution {
|
|
background: transparent;
|
|
a { color: rgba(255, 255, 255, 0.35); }
|
|
}
|
|
|
|
/* Tech Tree: dark thin scrollbars for the panel and its dropdowns. */
|
|
.tech-tree-scroll {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
|
|
|
|
&::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
&::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
&::-webkit-scrollbar-thumb {
|
|
background: rgba(255, 255, 255, 0.16);
|
|
border-radius: 0;
|
|
}
|
|
&::-webkit-scrollbar-thumb:hover {
|
|
background: rgba(255, 255, 255, 0.3);
|
|
}
|
|
}
|