diff --git a/assets/style.css b/assets/style.css index 1a33551..7b18c96 100644 --- 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 index c68fe39..b6d93c3 100644 --- a/graph.js +++ b/graph.js @@ -188,7 +188,15 @@ 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; @@ -196,11 +204,12 @@ function create_checkboxes() { 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 index 10c62a4..797022e 100644 --- a/index.html +++ b/index.html @@ -12,10 +12,10 @@