From 415a0c456e0e960945cc2de49ec64b76cbce8d68 Mon Sep 17 00:00:00 2001 From: sietse jonker Date: Sat, 30 Mar 2024 21:46:32 +0100 Subject: [PATCH] Remove extra closing div tag in graphs.html --- web/newWebsite/graphs.html | 3 +- web/newWebsite/styles/graph-styles.css | 320 +++++++++++++------------ 2 files changed, 163 insertions(+), 160 deletions(-) diff --git a/web/newWebsite/graphs.html b/web/newWebsite/graphs.html index ad48fd4..0629172 100644 --- a/web/newWebsite/graphs.html +++ b/web/newWebsite/graphs.html @@ -28,8 +28,7 @@
- - + diff --git a/web/newWebsite/styles/graph-styles.css b/web/newWebsite/styles/graph-styles.css index ce423d9..f60bf63 100644 --- a/web/newWebsite/styles/graph-styles.css +++ b/web/newWebsite/styles/graph-styles.css @@ -1,213 +1,217 @@ * { - box-sizing: border-box; - font-family: "Roboto", sans-serif; + box-sizing: border-box; + font-family: "Roboto", sans-serif; } body { - padding-top: 5vw; - display: flex; - justify-content: center; - align-items: center; - height: 100vh; - margin: 0; - background-color: #f0f0f0; - flex-direction: column; - background-color: #afafaf; - + padding-top: 5vw; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + margin: 0; + background-color: #f0f0f0; + flex-direction: column; + background-color: #afafaf; } .gaugeGroup { - width: 98vw; - height: 20vh; - display: flex; - flex-direction: column; /* Keep as column */ - justify-content: flex-start; - background-color: #333; - color: #fff; - padding: 10px; - border-radius: 50px; - border: 2px solid #333; - clear: both; - margin-bottom: 10px; - position: relative; - float: top; + width: 98vw; + height: 20vh; + display: flex; + flex-direction: column; /* Keep as column */ + justify-content: flex-start; + background-color: #333; + color: #fff; + padding: 10px; + border-radius: 50px; + border: 2px solid #333; + clear: both; + margin-bottom: 10px; + position: relative; + float: top; } .groupTitle { - width: 100%; - text-align: center; - font-size: 24px; + width: 100%; + text-align: center; + font-size: 24px; } .Node { - display: flex; - justify-content: space-around; - align-items: center; - width: 100%; - height: 100%; + display: flex; + justify-content: space-around; + align-items: center; + width: 100%; + height: 100%; } .Sensorvalues { - display: flex; - flex-direction: column; - align-items: center; - justify-content: space-around; - flex-wrap: wrap; - width: 15%; - height: 110%; - background-color: #ddd; - color: #333; - padding: 10px; - margin: 10px; - border-radius: 10px; - text-align: center; - position: relative; - padding-bottom: 6vh; /* Increase bottom padding */ - + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-around; + flex-wrap: wrap; + width: 15%; + height: 110%; + background-color: #ddd; + color: #333; + padding: 10px; + margin: 10px; + border-radius: 10px; + text-align: center; + position: relative; + padding-bottom: 6vh; /* Increase bottom padding */ } .gaugeContainer { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - width: 100%; - height: 80%; /* Increase the height from 70% to 80% */ - position: relative; - overflow: visible; - + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + width: 100%; + height: 80%; /* Increase the height from 70% to 80% */ + position: relative; + overflow: visible; } .gaugeImage { - width: 100%; - height: auto; - max-height: 200%; - object-fit: contain; - position: absolute; /* Make the image position absolute */ - top: 0; - left: 0; - z-index: 1; /* Make the image display below the needle */ - bottom: 0; - margin-bottom: 10px; + width: 100%; + height: auto; + max-height: 200%; + object-fit: contain; + position: absolute; /* Make the image position absolute */ + top: 0; + left: 0; + z-index: 1; /* Make the image display below the needle */ + bottom: 0; + margin-bottom: 10px; } -.gaugeValue, .gaugeText { - width: 100%; - text-align: center; - font-size: 24px; - z-index: 2; +.gaugeValue, +.gaugeText { + width: 100%; + text-align: center; + font-size: 24px; + z-index: 2; } .gaugeText { - width: 100%; - text-align: center; - font-size: 1.4vw; - z-index: 2; - position: absolute; - bottom: -3.2vw; /* Adjust this value to move the text further down */ - + width: 100%; + text-align: center; + font-size: 1.4vw; + z-index: 2; + position: absolute; + bottom: -3.2vw; /* Adjust this value to move the text further down */ } - .valueContainer { - display: flex; - justify-content: center; - margin-top: 10px; + display: flex; + justify-content: center; + margin-top: 10px; } #valueText { - font-size: 20px; + font-size: 20px; } .needle { - position: absolute; - bottom: -40%; /* Lower the needle to the bottom */ - left: 50%; - width: 2px; - height: 110%; - background-color: black; - transform-origin: bottom; - z-index: 3; /* Make the needle display above the image */ + position: absolute; + bottom: -40%; /* Lower the needle to the bottom */ + left: 50%; + width: 2px; + height: 110%; + background-color: black; + transform-origin: bottom; + z-index: 3; /* Make the needle display above the image */ } .contentContainer { - display: flex; - flex-direction: row; /* Layout children side by side */ - width: 100%; - height: 100%; + display: flex; + flex-direction: row; /* Layout children side by side */ + width: 100%; + height: 100%; } .navbar { - background-color: #333; - height: 60px; - display: flex; - align-items: center; - padding: 0 20px; - position: fixed; /* Fix the navbar at the top of the page */ - top: 0; /* Position it at the very top */ - width: 100%; /* Make it span the full width of the page */ - z-index: 1000; /* Make sure it's above all other elements */ + background-color: #333; + height: 60px; + display: flex; + align-items: center; + padding: 0 20px; + position: fixed; /* Fix the navbar at the top of the page */ + top: 0; /* Position it at the very top */ + width: 100%; /* Make it span the full width of the page */ + z-index: 1000; /* Make sure it's above all other elements */ } .navbar-nav { - list-style: none; - display: flex; - align-items: center; - justify-content: center; /* Center the links horizontally */ - height: 100%; - width: 100%; /* Make it span the full width of the navbar */ + list-style: none; + display: flex; + align-items: center; + justify-content: center; /* Center the links horizontally */ + height: 100%; + width: 100%; /* Make it span the full width of the navbar */ } .nav-item { - margin-right: 20px; + margin-right: 20px; } .nav-link { - color: #fff; - text-decoration: none; - font-size: 18px; + color: #fff; + text-decoration: none; + font-size: 18px; } .container { - box-sizing: border-box; - display: flex; - flex-wrap: wrap; - flex-direction: row; - justify-content: center; - align-items: center; - border: 2px solid #000000; - border-radius: 10px; - padding: 20px; - } - - .data-types { - flex-direction: column; - align-self: self-center; - justify-content: space-between; - padding: 20px; - width: 30%; /* Adjust width as needed */ - background-color: #f1f1f1; - } - - .date-filter{ - align-content: center; - flex-direction: column; - justify-content: space-between; - /* width: 30%; /* Adjust width as needed */ - background-color: #f1f1f1; - } + display: flex; + flex-direction: row; + align-items: center; + border: 2px solid #ccc; + border-radius: 10px; + padding: 20px; + width: 100%; + box-sizing: border-box; +} - .node-filter{ - align-self: center; - justify-content: space-between; - width: 10%; /* Adjust width as needed */ - border: none; - border-radius: 4px; - background-color: #f1f1f1; - } +.data-types { + display: flex; + flex-direction: column; /* Display data types in a column */ + align-items: flex-start; /* Align to the start of the container */ + text-align: right; /* Align text to the right */ + width: 20%; /* Set a fixed width for the data types */ +} - .filter-button { - width: 100%; - margin-top: 20px; - } - - /* Additional styling as needed */ \ No newline at end of file +.filter { + display: flex; + flex-direction: column; /* Display filters in a column */ + align-items: center center; /* Align to the center of the container */ + text-align: center center; + margin-left: 20px; /* Add some space between the data types and filters */ +} + +.date-filter { + flex-direction: column; + align-items: center center; + justify-content: center; + align-self: center; + width: 30%; +} + +.node-filter { + align-items: center; + text-align: center; + justify-content: center; + align-self: flex-end; + width: 20%; +} + +.filter-button { + text-align: center; + align-items: center; + justify-content: center; + width: 10%; + margin-top: auto; +} + +/* Additional styling as needed */ \ No newline at end of file