wip: tinkering with layout

OCNS · Mar 12, 2024 · faf3185 · faf3185
1 parent ab6b49e
commit faf3185
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 7 deletions.
diff --git a/assets/style.css b/assets/style.css
@@ -1,11 +1,23 @@
+#main {
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+}
 #cy {
+    flex: 60%;
     width: 800px;
     height: 600px;
-    border: 1px solid darkgrey;
+    border: 1px;
     display: block;
+    padding-left: 1em;
+    padding-right: 1em;
     }
 #simulators {
-    width: 50%;
+    flex: 15%;
+    border-width: 0px;
+}
+#details {
+    flex: 22%;
 }
 button {
     margin: 0.5em;
@@ -14,3 +26,6 @@ button {
     color: var(--color-bg);
     height: 1em;
 }
+#simulator_fields {
+    border: 1px;
+}
diff --git a/graph.js b/graph.js
@@ -188,19 +188,28 @@ function unhighlightNode(event) {
 
 function create_checkboxes() {
     const checkbox_container = document.getElementById("simulators");
+    const fieldset_container = document.createElement("fieldset")
+    fieldset_container.className = "simulator_fields"
+    checkbox_container.appendChild(fieldset_container)
+
     for (const name of SIMULATORS) {
+        const checkbox_div = document.createElement("div");
+        checkbox_div.className = "item"
+        fieldset_container.appendChild(checkbox_div);
+
         const checkbox = document.createElement("input");
         checkbox.type = "checkbox";
         checkbox.id = name;
         checkbox.name = name;
         checkbox.value = name;
         checkbox.checked = false;
         checkbox.onchange = selectionChanged;
-        checkbox_container.appendChild(checkbox);
+        checkbox_div.appendChild(checkbox)
+
         const label = document.createElement("label");
         label.htmlFor = name;
         label.appendChild(document.createTextNode(name));
-        checkbox_container.appendChild(label);
+        checkbox_div.appendChild(label);
     }
 }
 

diff --git a/index.html b/index.html
@@ -12,10 +12,10 @@
 <body>
 <h1>Graph view</h1>
 Using <a href="https://js.cytoscape.org">cytoscape</a>.
+<div id="main">
 <div id="simulators"></div>
-<div style="display: flex;">
-<div id="cy" style="flex: 50%"></div>
-<div id="details" style="flex: 50%; padding: 1em"></div>
+<div id="cy"></div>
+<div id="details"></div>
 </div>
 </body>
 </html>