Refactor navigation links in HTML files

This commit is contained in:
Sietse Jonker
2024-04-03 11:28:37 +02:00
parent 6f5f9d4b47
commit 8c9ccda61a
6 changed files with 158 additions and 215 deletions

View File

@@ -25,10 +25,10 @@ function createCheckBox(id, label) {
return response.json(); return response.json();
}) })
.then(data => { .then(data => {
handleData(data); nodeInputs(data);
}) })
function handleData(JSONdata) { function nodeInputs(JSONdata) {
select = document.getElementById('node-input'); select = document.getElementById('node-input');
console.log(JSONdata); console.log(JSONdata);

View File

@@ -2,6 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles/graph-styles.css"> <link rel="stylesheet" href="styles/graph-styles.css">
@@ -20,16 +21,15 @@
<li class="nav-item"> <li class="nav-item">
<a href="graphs.html" class="nav-link">Graphs</a> <a href="graphs.html" class="nav-link">Graphs</a>
</li> </li>
<li class="nav-item">
<a href="settings.html" class="nav-link">Settings</a>
</li>
<li class="nav-item"> <li class="nav-item">
<a href="questions-dashboard.html" class="nav-link">Questions</a> <a href="questions-dashboard.html" class="nav-link">Questions</a>
</li>
</ul> </ul>
</nav> </nav>
<body> <body>
<script src="graph-classes.js"></script> <script src="graph-classes.js"></script>
<script src="graph-main.js"></script> <script src="graph-main.js"></script>
</body> </body>
</html> </html>

View File

@@ -22,9 +22,6 @@
<li class="nav-item"> <li class="nav-item">
<a href="graphs.html" class="nav-link">Graphs</a> <a href="graphs.html" class="nav-link">Graphs</a>
</li> </li>
<li class="nav-item">
<a href="settings.html" class="nav-link">Settings</a>
</li>
<li class="nav-item"> <li class="nav-item">
<a href="questions-dashboard.html" class="nav-link">Questions</a> <a href="questions-dashboard.html" class="nav-link">Questions</a>
</li> </li>

View File

@@ -20,9 +20,6 @@
<li class="nav-item"> <li class="nav-item">
<a href="graphs.html" class="nav-link">Graphs</a> <a href="graphs.html" class="nav-link">Graphs</a>
</li> </li>
<li class="nav-item">
<a href="settings.html" class="nav-link">Settings</a>
</li>
<li class="nav-item"> <li class="nav-item">
<a href="questions-dashboard.html" class="nav-link">Questions</a> <a href="questions-dashboard.html" class="nav-link">Questions</a>
</ul> </ul>

View File

@@ -1,35 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles/settings-styles.css">
<title>Gauges</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
</head>
<nav class="navbar">
<ul class="navbar-nav">
<li class="nav-item">
<a href="index.html" class="nav-link">Dashboard</a>
</li>
<li class="nav-item">
<a href="graphs.html" class="nav-link">Graphs</a>
</li>
<li class="nav-item">
<a href="settings.html" class="nav-link">Settings</a>
</li>
<li class="nav-item">
<a href="questions-dashboard.html" class="nav-link">Questions</a>
</ul>
</nav>
<body>
<script src="main.js"></script>
<script src="GaugGroup.js"></script>
</body>
</html>

View File

@@ -1,8 +1,6 @@
* { * {
box-sizing: border-box; box-sizing: border-box;
font-family: "Roboto", sans-serif; font-family: "Roboto", sans-serif;
} }
/* /*
@@ -20,15 +18,6 @@
font-size: 17px; font-size: 17px;
} }
#editNode{
display: flex;
justify-content: center;
/* align-items: center; */
/* flex-direction: column; */
/* border-radius: 5%; */
/* border: 20px solid orange; */
}
#editNode { #editNode {
margin-top: 1%; margin-top: 1%;
width: 98vw; width: 98vw;
@@ -59,7 +48,6 @@ body {
flex-direction: column; flex-direction: column;
background-color: #afafaf; background-color: #afafaf;
align-items: center; align-items: center;
} }
.gaugeGroup { .gaugeGroup {
@@ -108,7 +96,6 @@ body {
text-align: center; text-align: center;
position: relative; position: relative;
padding-top: 3vh; /* Increase bottom padding */ padding-top: 3vh; /* Increase bottom padding */
} }
.gaugeContainer { .gaugeContainer {
@@ -122,7 +109,6 @@ body {
overflow: visible; overflow: visible;
height: 5vh; height: 5vh;
margin-bottom: 1vh; margin-bottom: 1vh;
} }
.gaugeImage { .gaugeImage {
@@ -137,7 +123,8 @@ body {
bottom: 0; bottom: 0;
} }
.gaugeValue, .gaugeText { .gaugeValue,
.gaugeText {
width: 100%; width: 100%;
text-align: center; text-align: center;
font-size: 24px; font-size: 24px;
@@ -151,7 +138,6 @@ body {
z-index: 2; z-index: 2;
position: absolute; position: absolute;
top: -1.4vw; /* Adjust this value to move the text further down */ top: -1.4vw; /* Adjust this value to move the text further down */
} }
.arrowimg { .arrowimg {
@@ -185,7 +171,6 @@ body {
transform-origin: bottom; transform-origin: bottom;
z-index: 3; /* Make the needle display above the image */ z-index: 3; /* Make the needle display above the image */
transition: transform 0.1s ease-out; transition: transform 0.1s ease-out;
} }
.contentContainer { .contentContainer {
@@ -243,5 +228,4 @@ body {
.disabled { .disabled {
opacity: 0; opacity: 0;
height: 0; height: 0;
} }