Started bs-gantt

2026-08-28 19:40:56 +00:00
parent 7471a37220
commit 6e902b91fd
9 changed files with 454 additions and 5 deletions
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<title>graflow</title>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+		<link type="text/css" rel="stylesheet" href="../../eicui/eicui-2.0.css">
+        <link type="text/css" rel="stylesheet" href="../buildoz.css">
+        <script src="../buildoz.js"></script>      
+        <script src="../bzGraflow.js"></script>
+        <style>
+            @font-face { /*FF does not indirectly load if inside a shawdow-dom */
+                font-family: 'glyphs';
+                src:  url('/assets/styles/fonts/glyphs.eot');
+                src:  url('/assets/styles/fonts/glyphs.eot') format('embedded-opentype'),
+                    url('/assets/styles/fonts/glyphs.ttf') format('truetype'),
+                    url('/assets/styles/fonts/glyphs.woff') format('woff'),
+                    url('/assets/styles/fonts/glyphs.svg') format('svg');
+                font-weight: normal;
+                font-style: normal;
+                font-display: block;
+            }
+            body{
+                background:#888; 
+                font-size: 16px;
+            }
+            .gantt-wrap{
+                position: relative;
+                --row: 30px;
+            }
+            ul.tasks{
+                list-style: none;
+                padding: 0;
+                margin: 0;
+                width: 100%;
+            }
+            ul.tasks li{
+                box-sizing: border-box;
+                text-wrap: nowrap;
+                height: var(--row);
+                line-height: calc(var(--row) - 1px);
+                border-bottom: 1px dotted #555;                
+            }
+            bz-graflow.gantt{
+                position: absolute;
+                left: 10em;
+                top: 6px;
+                right: 0;
+                bottom: 0;
+            }
+          </style>
+        <script>
+            window.addEventListener('load',()=>{
+                let grflw1 = document.querySelector('bz-graflow.gantt')
+
+            })
+        </script>
+	</head>
+
+	<body>
+        <div class="gantt-wrap">
+            <ul class="tasks">
+                <li>Task 1</li>
+                <li>Task 7</li>
+                <li>Task 4</li>
+                <li>Task 5</li>
+                <li>Task 6</li>
+                <li>Task 8</li>
+                <li>Task 2</li>
+                <li>Task 9</li>
+                <li>Task 3</li>
+            </ul>
+            <bz-graflow class="gantt" flow="./flows/gantt.json" tension="60" isolated></bz-graflow>
+        </div>
+	</body>
+</html>