corrected filter placement and barchart title
Build and Push Docker Image / build-and-push (pull_request) Successful in 1m6s
Python Code Quality / python-code-quality (pull_request) Successful in 11s
Python Test / python-test (pull_request) Successful in 17s

This commit is contained in:
Brian Bjarke Jensen
2025-11-11 14:51:04 +01:00
parent 3285d496b4
commit 752aee1148
+31 -36
View File
@@ -231,33 +231,31 @@
background: #3a9be8;
}
.filters {
display: flex;
gap: 15px;
.controls {
margin-bottom: 30px;
flex-wrap: wrap;
align-items: center;
}
.filter-group {
display: flex;
flex-direction: column;
gap: 5px;
align-items: center;
gap: 15px;
flex-wrap: wrap;
}
.filter-group label {
color: #666;
font-size: 14px;
.controls label {
font-weight: 600;
color: #333;
}
.filter-group select {
padding: 8px 12px;
.controls select {
padding: 8px 16px;
border: 1px solid #ddd;
border-radius: 4px;
border-radius: 6px;
font-size: 14px;
background: white;
cursor: pointer;
background: white;
}
.controls select:focus {
outline: none;
border-color: #4facfe;
}
.badge {
@@ -280,24 +278,21 @@
<h1>😴 Sleep Tracking</h1>
<p class="subtitle">Monitor your baby's sleep patterns</p>
<div class="filters">
<div class="filter-group">
<label for="childFilter">Child</label>
<select id="childFilter">
<option value="">All Children</option>
</select>
</div>
<div class="filter-group">
<label for="timeRangeFilter">Time Range</label>
<select id="timeRangeFilter">
<option value="1">Last 24 hours</option>
<option value="3">Last 3 days</option>
<option value="7" selected>Last 7 days</option>
<option value="14">Last 14 days</option>
<option value="30">Last 30 days</option>
<option value="90">Last 90 days</option>
</select>
</div>
<div class="controls">
<label for="childFilter">Child:</label>
<select id="childFilter">
<option value="">All Children</option>
</select>
<label for="timeRangeFilter">Time Range:</label>
<select id="timeRangeFilter">
<option value="1">Last 24 hours</option>
<option value="3">Last 3 days</option>
<option value="7" selected>Last 7 days</option>
<option value="14">Last 14 days</option>
<option value="30">Last 30 days</option>
<option value="90">Last 90 days</option>
</select>
</div>
<div id="content" class="loading">
@@ -489,7 +484,7 @@
</div>
<div class="chart-container">
<h2>Total Sleep Time</h2>
<h2>Total Sleep Time (Last ${timeRange} Day${timeRange !== 1 ? "s" : ""})</h2>
<div class="chart-wrapper">
<canvas id="barChart"></canvas>
</div>