Skip to content

Commit c755ea3

Browse files
snow-jallensnow-jallen
committed
Enhance BloodSugarMonitor and TemperatureMonitor UI for better readability and responsiveness
1 parent 8b4ac66 commit c755ea3

4 files changed

Lines changed: 70 additions & 60 deletions

File tree

‎HomeSpeaker.WebAssembly/Components/BloodSugarMonitor.razor‎

Lines changed: 29 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -21,35 +21,32 @@
2121
@if (bloodSugarStatus?.CurrentReading != null)
2222
{
2323
<div class="row g-2">
24-
<div class="col-4">
25-
<div class="text-center">
26-
<div class="mb-1">
27-
<i class="fas fa-tint fa-lg" style="color: @bloodSugarStatus.StatusColor"></i>
24+
<div class="col-4"> <div class="text-center">
25+
<div class="mb-2">
26+
<i class="fas fa-tint fa-2x" style="color: @bloodSugarStatus.StatusColor"></i>
2827
</div>
29-
<div class="small text-muted">Current</div>
28+
<div class="h6 text-muted mb-2">Current</div>
3029
<div class="blood-sugar-display">
31-
<span class="h6" style="color: @bloodSugarStatus.StatusColor">@bloodSugarStatus.CurrentReading.Sgv</span>
30+
<span class="display-1 fw-bold" style="color: @bloodSugarStatus.StatusColor">@bloodSugarStatus.CurrentReading.Sgv</span>
3231
</div>
3332
<div class="small text-muted">@bloodSugarStatus.StatusText</div>
3433
</div>
3534
</div>
36-
<div class="col-4">
37-
<div class="text-center">
38-
<div class="mb-1">
39-
<span class="fa-lg" style="color: @GetTrendColor(bloodSugarStatus.CurrentReading.Direction)">@bloodSugarStatus.CurrentReading.DirectionIcon</span>
35+
<div class="col-4"> <div class="text-center">
36+
<div class="mb-2">
37+
<span class="fa-2x" style="color: @GetTrendColor(bloodSugarStatus.CurrentReading.Direction)">@bloodSugarStatus.CurrentReading.DirectionIcon</span>
4038
</div>
41-
<div class="small text-muted">Trend</div>
39+
<div class="h6 text-muted mb-2">Trend</div>
4240
<div class="trend-display">
43-
<span class="small" style="color: @GetTrendColor(bloodSugarStatus.CurrentReading.Direction)">@bloodSugarStatus.CurrentReading.DirectionDescription</span>
41+
<span class="h3 fw-semibold" style="color: @GetTrendColor(bloodSugarStatus.CurrentReading.Direction)">@bloodSugarStatus.CurrentReading.DirectionDescription</span>
4442
</div>
4543
</div>
4644
</div>
47-
<div class="col-4">
48-
<div class="text-center">
49-
<div class="mb-1">
50-
<i class="fas fa-clock fa-lg" style="color: @(bloodSugarStatus.IsStale ? "#dc3545" : "#28a745")"></i>
45+
<div class="col-4"> <div class="text-center">
46+
<div class="mb-2">
47+
<i class="fas fa-clock fa-2x" style="color: @(bloodSugarStatus.IsStale ? "#dc3545" : "#28a745")"></i>
5148
</div>
52-
<div class="small text-muted">Last Reading</div>
49+
<div class="h6 text-muted mb-2">Last Reading</div>
5350
<div class="time-display">
5451
<span class="small" style="color: @(bloodSugarStatus.IsStale ? "#dc3545" : "#6c757d")">@FormatTimeSince(bloodSugarStatus.TimeSinceLastReading)</span>
5552
</div>
@@ -95,13 +92,23 @@
9592
</div>
9693
</div>
9794

98-
<style>
99-
.blood-sugar-card .blood-sugar-display {
95+
<style> .blood-sugar-card .blood-sugar-display {
10096
margin: 0.25rem 0;
97+
line-height: 0.9;
98+
}
99+
.blood-sugar-card .blood-sugar-display .display-1 {
100+
font-size: 4rem !important;
101+
text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
101102
}
102103
103-
.blood-sugar-card .trend-display {
104+
/* Extra large on smaller screens for better visibility */
105+
@@media (max-width: 1024px) {
106+
.blood-sugar-card .blood-sugar-display .display-1 {
107+
font-size: 5rem !important;
108+
}
109+
} .blood-sugar-card .trend-display {
104110
margin: 0.25rem 0;
111+
line-height: 1.1;
105112
}
106113
107114
.blood-sugar-card .time-display {
@@ -122,10 +129,8 @@
122129
opacity: 1;
123130
transform: scale(1.05);
124131
transition: all 0.2s ease-in-out;
125-
}
126-
127-
.blood-sugar-card .card-body {
128-
padding: 0.5rem;
132+
} .blood-sugar-card .card-body {
133+
padding: 1rem;
129134
}
130135
131136
.blood-sugar-card .small {

‎HomeSpeaker.WebAssembly/Components/TemperatureMonitor.razor‎

Lines changed: 36 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -46,49 +46,45 @@
4646
@if (temperatureStatus != null)
4747
{
4848
<div class="row g-2">
49-
<div class="col-6">
50-
<div class="text-center">
51-
<div class="mb-1">
52-
<i class="fas fa-cloud-sun fa-lg" style="color: @GetTemperatureColor(temperatureStatus.OutsideTemperature)"></i>
49+
<div class="col-6"> <div class="text-center">
50+
<div class="mb-2">
51+
<i class="fas fa-cloud-sun fa-2x" style="color: @GetTemperatureColor(temperatureStatus.OutsideTemperature)"></i>
5352
</div>
54-
<div class="small text-muted">Outside</div>
53+
<div class="h6 text-muted mb-2">Outside</div>
5554
<div class="temperature-display">
56-
<span class="h6" style="color: @GetTemperatureColor(temperatureStatus.OutsideTemperature)">@FormatTemperature(temperatureStatus.OutsideTemperature)</span>
55+
<span class="display-1 fw-bold" style="color: @GetTemperatureColor(temperatureStatus.OutsideTemperature)">@FormatTemperature(temperatureStatus.OutsideTemperature)</span>
5756
</div>
5857
</div>
5958
</div>
60-
<div class="col-6">
61-
<div class="text-center">
62-
<div class="mb-1">
63-
<i class="fas fa-female fa-lg" style="color: @GetTemperatureColor(temperatureStatus.YoungerGirlsRoomTemperature)"></i>
59+
<div class="col-6"> <div class="text-center">
60+
<div class="mb-2">
61+
<i class="fas fa-female fa-2x" style="color: @GetTemperatureColor(temperatureStatus.YoungerGirlsRoomTemperature)"></i>
6462
</div>
65-
<div class="small text-muted">Girl's Room</div>
63+
<div class="h6 text-muted mb-2">Girl's Room</div>
6664
<div class="temperature-display">
67-
<span class="h6" style="color: @GetTemperatureColor(temperatureStatus.YoungerGirlsRoomTemperature)">@FormatTemperature(temperatureStatus.YoungerGirlsRoomTemperature)</span>
65+
<span class="display-1 fw-bold" style="color: @GetTemperatureColor(temperatureStatus.YoungerGirlsRoomTemperature)">@FormatTemperature(temperatureStatus.YoungerGirlsRoomTemperature)</span>
6866
</div>
6967
</div>
7068
</div>
71-
<div class="col-6">
72-
<div class="text-center">
73-
<div class="mb-1">
74-
<i class="fas fa-male fa-lg" style="color: @GetTemperatureColor(temperatureStatus.BoysRoomTemperature)"></i>
69+
<div class="col-6"> <div class="text-center">
70+
<div class="mb-2">
71+
<i class="fas fa-male fa-2x" style="color: @GetTemperatureColor(temperatureStatus.BoysRoomTemperature)"></i>
7572
</div>
76-
<div class="small text-muted">Boy's Room</div>
73+
<div class="h6 text-muted mb-2">Boy's Room</div>
7774
<div class="temperature-display">
78-
<span class="h6" style="color: @GetTemperatureColor(temperatureStatus.BoysRoomTemperature)">@FormatTemperature(temperatureStatus.BoysRoomTemperature)</span>
75+
<span class="display-1 fw-bold" style="color: @GetTemperatureColor(temperatureStatus.BoysRoomTemperature)">@FormatTemperature(temperatureStatus.BoysRoomTemperature)</span>
7976
</div>
8077
</div>
8178
</div>
82-
<div class="col-6">
83-
<div class="text-center">
84-
<div class="mb-1">
85-
<i class="fas fa-seedling fa-lg" style="color: @GetTemperatureColor(temperatureStatus.GreenhouseTemperature)"></i>
79+
<div class="col-6"> <div class="text-center">
80+
<div class="mb-2">
81+
<i class="fas fa-seedling fa-2x" style="color: @GetTemperatureColor(temperatureStatus.GreenhouseTemperature)"></i>
8682
</div>
87-
<div class="small text-muted">Greenhouse</div>
83+
<div class="h6 text-muted mb-2">Greenhouse</div>
8884
<div class="temperature-display">
89-
<span class="h6" style="color: @GetTemperatureColor(temperatureStatus.GreenhouseTemperature)">@FormatTemperature(temperatureStatus.GreenhouseTemperature)</span>
85+
<span class="display-1 fw-bold" style="color: @GetTemperatureColor(temperatureStatus.GreenhouseTemperature)">@FormatTemperature(temperatureStatus.GreenhouseTemperature)</span>
9086
</div>
91-
</div> </div>
87+
</div></div>
9288
</div>
9389
<div class="text-center mt-1">
9490
<small class="text-muted">
@@ -124,9 +120,19 @@
124120
</div>
125121
</div>
126122

127-
<style>
128-
.temperature-card .temperature-display {
123+
<style> .temperature-card .temperature-display {
129124
margin: 0.25rem 0;
125+
line-height: 0.9;
126+
}.temperature-card .temperature-display .display-1 {
127+
font-size: 4rem !important;
128+
text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
129+
}
130+
131+
/* Extra large on smaller screens for better visibility */
132+
@@media (max-width: 1024px) {
133+
.temperature-card .temperature-display .display-1 {
134+
font-size: 5rem !important;
135+
}
130136
}
131137
132138
.temperature-card .recommendation-display {
@@ -147,10 +153,8 @@
147153
opacity: 1;
148154
transform: scale(1.05);
149155
transition: all 0.2s ease-in-out;
150-
}
151-
152-
.temperature-card .card-body {
153-
padding: 0.5rem;
156+
} .temperature-card .card-body {
157+
padding: 1rem;
154158
}
155159
156160
.temperature-card .small {
@@ -210,7 +214,7 @@
210214
}
211215
} private string FormatTemperature(double? temperature)
212216
{
213-
return temperature.HasValue ? $"{temperature.Value:F1}°F" : "N/A";
217+
return temperature.HasValue ? $"{temperature.Value:F1}°" : "N/A";
214218
}
215219

216220
private string GetTemperatureColor(double? temperature)

‎HomeSpeaker.WebAssembly/Shared/MainLayout.razor.css‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,8 @@ main {
99
}
1010

1111
.sidebar {
12-
/*background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);*/
12+
/* Ensure proper box-sizing for sidebar */
13+
box-sizing: border-box;
1314
}
1415

1516
.top-row {
@@ -36,7 +37,7 @@ main {
3637
text-overflow: ellipsis;
3738
}
3839

39-
@media (max-width: 640.98px) {
40+
@media (max-width: 1023.98px) {
4041
.top-row:not(.auth) {
4142
display: none;
4243
}
@@ -50,7 +51,7 @@ main {
5051
}
5152
}
5253

53-
@media (min-width: 641px) {
54+
@media (min-width: 1024px) {
5455
.page {
5556
flex-direction: row;
5657
} .sidebar {

‎HomeSpeaker.WebAssembly/Shared/NavMenu.razor.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@
5050
color: white;
5151
}
5252

53-
@media (min-width: 641px) {
53+
@media (min-width: 1024px) {
5454
.navbar-toggler {
5555
display: none;
5656
}

0 commit comments

Comments
 (0)