Move buttons to sidebar and improve graph aesthetics

cosmojg · Oct 5, 2024 · 94132ba · 94132ba
1 parent 3238f71
commit 94132ba
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 33 deletions.
diff --git a/index.html b/index.html
@@ -9,18 +9,22 @@
      <script src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"></script>
  </head>
  <body>
-     <div id="graph-container"></div>
-     <div id="controls">
-         <input type="text" id="node-name" placeholder="Node name">
-         <button id="add-node">Add Node</button>
-         <select id="edge-from" placeholder="From node"></select>
-         <select id="edge-to" placeholder="To node"></select>
-         <button id="add-edge">Add Edge</button>
-         <select id="rename-old" placeholder="Old name"></select>
-         <input type="text" id="rename-new" placeholder="New name">
-         <button id="rename-node">Rename Node</button>
-         <select id="remove-node" placeholder="Node to remove"></select>
-         <button id="remove-node-btn">Remove Node</button>
+     <div id="app-container">
+         <div id="graph-container"></div>
+         <div id="sidebar">
+             <div id="controls">
+                 <input type="text" id="node-name" placeholder="Node name">
+                 <button id="add-node">Add Node</button>
+                 <select id="edge-from" placeholder="From node"></select>
+                 <select id="edge-to" placeholder="To node"></select>
+                 <button id="add-edge">Add Edge</button>
+                 <select id="rename-old" placeholder="Old name"></select>
+                 <input type="text" id="rename-new" placeholder="New name">
+                 <button id="rename-node">Rename Node</button>
+                 <select id="remove-node" placeholder="Node to remove"></select>
+                 <button id="remove-node-btn">Remove Node</button>
+             </div>
+         </div>
      </div>
      <script src="script.js"></script>
  </body>

diff --git a/script.js b/script.js
@@ -31,6 +31,34 @@ let options = {
            damping: 0.09,
            avoidOverlap: 0
        }
+   },
+   nodes: {
+       shape: 'circle',
+       size: 25,
+       font: {
+           size: 14,
+           color: '#ffffff'
+       },
+       color: {
+           background: '#3498db',
+           border: '#2980b9',
+           highlight: {
+               background: '#2ecc71',
+               border: '#27ae60'
+           }
+       },
+       borderWidth: 2
+   },
+   edges: {
+       width: 2,
+       color: {
+           color: '#7f8c8d',
+           highlight: '#95a5a6',
+           hover: '#bdc3c7'
+       },
+       smooth: {
+           type: 'continuous'
+       }
    }
 };
 let network;

diff --git a/styles.css b/styles.css
@@ -8,39 +8,41 @@
 body {
     font-family: Arial, sans-serif;
     margin: 0;
-    padding: 20px;
+    padding: 0;
     background-color: var(--background-color);
     color: var(--text-color);
 }
 
-header {
-    text-align: center;
-    margin-bottom: 20px;
+#app-container {
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
 }
 
 #graph-container {
+    flex: 1;
     width: 100%;
-    height: 600px;
-    border: 1px solid #ccc;
-    margin-bottom: 20px;
+    border: none;
 }
 
-#controls {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 10px;
-    margin-bottom: 20px;
+#sidebar {
+    width: 100%;
+    padding: 20px;
+    box-sizing: border-box;
+    background-color: #f0f0f0;
 }
 
-label {
+#controls {
     display: flex;
     flex-direction: column;
-    font-weight: bold;
+    gap: 10px;
 }
 
-input, button {
+input, select, button {
     padding: 10px;
     font-size: 16px;
+    width: 100%;
+    box-sizing: border-box;
 }
 
 button {
@@ -55,13 +57,25 @@ button:hover {
     background-color: var(--secondary-color);
 }
 
-footer {
-    text-align: center;
-    margin-top: 20px;
+@media (min-width: 1024px) {
+    #app-container {
+        flex-direction: row;
+    }
+
+    #graph-container {
+        flex: 1;
+        height: 100vh;
+    }
+
+    #sidebar {
+        width: 300px;
+        height: 100vh;
+        overflow-y: auto;
+    }
 }
 
-@media (max-width: 600px) {
-    #controls {
-        flex-direction: column;
+@media (max-width: 1023px) {
+    #graph-container {
+        height: 60vh;
     }
 }