edu/card-layouts
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add approvable interactive UML stages

Browse Source
This commit is contained in:
user
2026-07-16 14:10:16 +02:00
parent 41804a8ad1
commit 1c06ca35d6
4 changed files with 440 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
react/src/react.css
+118 -11
View File
@@ -167,8 +167,8 @@
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 8px 10px;
gap: 8px;
padding: 6px 8px;
border-bottom: 1px solid #bbb;
background: #fafafa;
}
@@ -186,31 +186,93 @@
}
.uml-actions {
display: flex;
gap: 5px;
gap: 3px;
flex-wrap: wrap;
justify-content: flex-end;
}
.uml-actions button {
border: 1px solid #777;
background: #fff;
padding: 4px 8px;
border: 1px solid #aaa;
border-radius: 2px;
background: #fcfcfc;
color: #444;
padding: 2px 6px;
font:
600 10px/1.25 ui-monospace,
monospace;
cursor: pointer;
}
.uml-actions button:hover {
border-color: #64879a;
background: #f5fafc;
}
.uml-actions button[data-completed="true"] {
border-color: #62a47f;
background: #edf8f1;
color: #14613a;
}
.uml-actions button[aria-pressed="true"] {
border-color: #315f78;
background: #eaf4fa;
font-weight: 700;
border-color: #287495;
background: #edf7fb;
color: #174d64;
box-shadow: inset 0 0 0 1px #b9dce9;
}
.uml-canvas {
display: block;
padding: 8px;
text-align: center;
}
.uml-canvas img {
.uml-canvas img,
.uml-svg-host svg {
display: block;
width: 100%;
width: 100% !important;
height: auto !important;
max-height: 760px;
object-fit: contain;
}
.uml-svg-host {
cursor: pointer;
}
.uml-stage-region {
cursor: pointer;
transition:
fill 140ms ease,
stroke 140ms ease,
stroke-width 140ms ease;
}
.uml-stage-region-completed.uml-stage-region-bg {
fill: #e7f6ed !important;
fill-opacity: 1 !important;
stroke: #258154 !important;
stroke-width: 3px !important;
}
.uml-stage-region-completed.uml-stage-region-outline {
stroke: #258154 !important;
stroke-width: 3px !important;
}
.uml-stage-region-active.uml-stage-region-bg {
fill: #e7f6fc !important;
fill-opacity: 1 !important;
stroke: #187ea7 !important;
stroke-width: 3px !important;
}
.uml-stage-region-active.uml-stage-region-outline {
stroke: #187ea7 !important;
stroke-width: 3px !important;
}
.uml-stage-region-active.uml-stage-region-completed.uml-stage-region-bg {
fill: #e7f6ed !important;
}
.uml-stage-region:focus {
outline: none;
stroke: #005f87 !important;
stroke-width: 4px !important;
}
.uml-inline-warning {
display: block;
padding-top: 5px;
color: #8b2d20;
font-size: 11px;
}
.uml-stage {
display: grid;
grid-template-columns: auto 1fr;
@@ -227,6 +289,50 @@
grid-column: 2;
font-size: 11px;
}
.uml-approval {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin: 0 8px 8px;
padding-top: 6px;
border-top: 1px solid #d2d2d2;
color: #555;
font-size: 11px;
}
.uml-approval button {
flex: 0 0 auto;
border: 1px solid #477a5d;
border-radius: 2px;
background: #edf8f1;
color: #174e30;
padding: 3px 7px;
font: 600 10px/1.25 system-ui, sans-serif;
cursor: pointer;
}
.uml-approval button:disabled {
border-color: #bbb;
background: #f3f3f3;
color: #888;
cursor: not-allowed;
}
.task-conclusion {
margin: 8px 0 0;
padding: 7px 9px;
border: 1px solid #315f78;
background: #f3f9fc;
}
.task-conclusion > strong {
display: block;
margin-bottom: 3px;
color: #315f78;
font:
700 10px/1.2 ui-monospace,
monospace;
}
.task-conclusion p {
margin: 0;
}
.asset-source-link {
display: inline-block;
margin: 5px 0;
@@ -320,6 +426,7 @@
}
.uml-actions,
.uml-stage,
.uml-approval,
.asset-source-link,
.lesson-progress-dock,
.lesson-progress-control {