Add dataTypesContainer to container and update styles
This commit is contained in:
@@ -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');
|
||||
|
||||
|
@@ -28,7 +28,8 @@
|
||||
|
||||
<body>
|
||||
<div id="graph1"></div>
|
||||
|
||||
|
||||
</div>
|
||||
<script src="graph-classes.js"></script>
|
||||
<script src="graph-main.js"></script>
|
||||
</body>
|
||||
|
@@ -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;
|
||||
}
|
||||
/* Additional styling as needed */
|
Reference in New Issue
Block a user