From 94132bafcce50dbb7b73bd41ab0f71ed0a583a1f Mon Sep 17 00:00:00 2001 From: Cosmo Date: Fri, 4 Oct 2024 20:07:58 -0400 Subject: [PATCH] Move buttons to sidebar and improve graph aesthetics --- index.html | 28 +++++++++++++++------------ script.js | 28 +++++++++++++++++++++++++++ styles.css | 56 ++++++++++++++++++++++++++++++++++-------------------- 3 files changed, 79 insertions(+), 33 deletions(-) diff --git a/index.html b/index.html index b3ad52d..c2d7113 100644 --- a/index.html +++ b/index.html @@ -9,18 +9,22 @@ -
-
- - - - - - - - - - +
+
+
diff --git a/script.js b/script.js index 7299642..bb481a3 100644 --- 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 index 6252959..989a198 100644 --- 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; } }