From 726d411321335ce588e443a0d14230d29b3c3791 Mon Sep 17 00:00:00 2001 From: sietse jonker Date: Sat, 30 Mar 2024 21:25:20 +0100 Subject: [PATCH] Add dataTypesContainer to container and update styles --- web/newWebsite/graph-main.js | 3 +- web/newWebsite/graphs.html | 3 +- web/newWebsite/styles/graph-styles.css | 60 +++++++++++++------------- 3 files changed, 33 insertions(+), 33 deletions(-) diff --git a/web/newWebsite/graph-main.js b/web/newWebsite/graph-main.js index eadfb77..024aad6 100644 --- a/web/newWebsite/graph-main.js +++ b/web/newWebsite/graph-main.js @@ -42,6 +42,7 @@ dataTypesContainer.appendChild(eco2Checkbox.checkbox); dataTypesContainer.appendChild(eco2Checkbox.checkboxLabel); dataTypesContainer.appendChild(tvocCheckbox.checkbox); dataTypesContainer.appendChild(tvocCheckbox.checkboxLabel); +container.appendChild(dataTypesContainer); const filterButton = document.createElement('button'); filterButton.textContent = 'Filter Data'; @@ -63,8 +64,6 @@ filterButton.addEventListener('click', () => { console.log(filteredData); }); -container.appendChild(dataTypesContainer); - const dateFilter = document.createElement('div'); dateFilter.setAttribute('class', 'date-filter'); diff --git a/web/newWebsite/graphs.html b/web/newWebsite/graphs.html index 0629172..ad48fd4 100644 --- a/web/newWebsite/graphs.html +++ b/web/newWebsite/graphs.html @@ -28,7 +28,8 @@
- + + diff --git a/web/newWebsite/styles/graph-styles.css b/web/newWebsite/styles/graph-styles.css index eaf79e0..ce423d9 100644 --- a/web/newWebsite/styles/graph-styles.css +++ b/web/newWebsite/styles/graph-styles.css @@ -168,46 +168,46 @@ body { } .container { + box-sizing: border-box; display: flex; - justify-content: space-around; + flex-wrap: wrap; + flex-direction: row; + justify-content: center; align-items: center; - border: 2px solid #ccc; + border: 2px solid #000000; border-radius: 10px; - padding: 10px; - margin: 20px; + padding: 20px; } .data-types { - display: flex; flex-direction: column; + align-self: self-center; + justify-content: space-between; + padding: 20px; + width: 30%; /* Adjust width as needed */ + background-color: #f1f1f1; } - .date-filter, - .node-filter { - margin-left: 10px; + .date-filter{ + align-content: center; + flex-direction: column; + justify-content: space-between; + /* width: 30%; /* Adjust width as needed */ + background-color: #f1f1f1; } - - .input-field { - margin: 5px; - padding: 5px; - border: 1px solid #ccc; - border-radius: 5px; - } - - .checkbox { - margin-right: 5px; - } - - .filter-button { - margin: 10px; - padding: 5px 10px; - background-color: #007bff; - color: #fff; + + .node-filter{ + align-self: center; + justify-content: space-between; + width: 10%; /* Adjust width as needed */ border: none; - border-radius: 5px; - cursor: pointer; + border-radius: 4px; + background-color: #f1f1f1; + } + + .filter-button { + width: 100%; + margin-top: 20px; } - .filter-button:hover { - background-color: #0056b3; - } \ No newline at end of file + /* Additional styling as needed */ \ No newline at end of file