Skip to content

Commit d2d3c3b

Browse files
snow-jallensnow-jallen
committed
UI fixes
1 parent 7e51231 commit d2d3c3b

4 files changed

Lines changed: 83 additions & 50 deletions

File tree

‎HomeSpeaker.Server2/Program.cs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
// Configure host shutdown timeout
1515
builder.Host.ConfigureHostOptions(options =>
1616
{
17-
options.ShutdownTimeout = TimeSpan.FromSeconds(30); // 30 second timeout for graceful shutdown
17+
options.ShutdownTimeout = TimeSpan.FromSeconds(5); // 5 second timeout for graceful shutdown
1818
});
1919

2020
builder.AddServiceDefaults();

‎HomeSpeaker.WebAssembly/Components/Health/BloodSugarMonitor.razor‎

Lines changed: 77 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -5,55 +5,72 @@
55
@implements IDisposable
66

77
<div class="blood-sugar-card mb-2">
8-
<div class="card border-0 shadow-sm"> <div class="card-header bg-info text-white py-2">
8+
<div class="card border-0 shadow-sm">
9+
<div class="card-header bg-info text-white py-2">
910
<div class="d-flex justify-content-between align-items-center">
1011
<h6 class="mb-0">
1112
<i class="fas fa-tint me-1"></i>
1213
Blood Sugar Monitor
1314
</h6>
14-
<button class="btn btn-outline-light btn-sm" @onclick="ForceRefreshBloodSugarData" disabled="@isLoading">
15+
<button class="btn btn-outline-light btn-sm" @onclick="ForceRefreshBloodSugarData"
16+
disabled="@isLoading">
1517
<i class="fas fa-redo me-1"></i>
16-
@if (isLoading) { <span>Loading...</span> } else { <span>Force Refresh</span> }
18+
@if (isLoading)
19+
{
20+
<span>Loading...</span>
21+
}
22+
else
23+
{
24+
25+
<span>Force Refresh</span>
26+
}
1727
</button>
1828
</div>
1929
</div>
2030
<div class="card-body py-2">
2131
@if (bloodSugarStatus?.CurrentReading != null)
22-
{
23-
<div class="row g-2">
24-
<div class="col-4"> <div class="text-center">
25-
<div class="mb-2">
32+
{ <div class="row g-2">
33+
<div class="col-4">
34+
<div class="text-center">
35+
<div class="mb-2 icon-container">
2636
<i class="fas fa-tint fa-2x" style="color: @bloodSugarStatus.StatusColor"></i>
2737
</div>
2838
<div class="h6 text-muted mb-2">Current</div>
2939
<div class="blood-sugar-display">
30-
<span class="display-1 fw-bold" style="color: @bloodSugarStatus.StatusColor">@bloodSugarStatus.CurrentReading.Sgv</span>
40+
<span class="display-1 fw-bold"
41+
style="color: @bloodSugarStatus.StatusColor">@bloodSugarStatus.CurrentReading.Sgv</span>
3142
</div>
3243
<div class="small text-muted">@bloodSugarStatus.StatusText</div>
3344
</div>
3445
</div>
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>
46+
<div class="col-4">
47+
<div class="text-center">
48+
<div class="mb-2 icon-container">
49+
<span class="trend-icon fw-bold"
50+
style="color: @GetTrendColor(bloodSugarStatus.CurrentReading.Direction); text-shadow: 2px 2px 4px rgba(0,0,0,0.3); filter: drop-shadow(0 0 8px @GetTrendColor(bloodSugarStatus.CurrentReading.Direction)50);">@bloodSugarStatus.CurrentReading.DirectionIcon</span>
3851
</div>
3952
<div class="h6 text-muted mb-2">Trend</div>
4053
<div class="trend-display">
41-
<span class="h3 fw-semibold" style="color: @GetTrendColor(bloodSugarStatus.CurrentReading.Direction)">@bloodSugarStatus.CurrentReading.DirectionDescription</span>
54+
<span class="h3 fw-semibold"
55+
style="color: @GetTrendColor(bloodSugarStatus.CurrentReading.Direction)">@bloodSugarStatus.CurrentReading.DirectionDescription</span>
4256
</div>
4357
</div>
4458
</div>
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>
59+
<div class="col-4">
60+
<div class="text-center">
61+
<div class="mb-2 icon-container">
62+
<i class="fas fa-clock fa-2x"
63+
style="color: @(bloodSugarStatus.IsStale ? "#dc3545" : "#28a745")"></i>
4864
</div>
4965
<div class="h6 text-muted mb-2">Last Reading</div>
5066
<div class="time-display">
51-
<span class="small" style="color: @(bloodSugarStatus.IsStale ? "#dc3545" : "#6c757d")">@FormatTimeSince(bloodSugarStatus.TimeSinceLastReading)</span>
67+
<span class="small"
68+
style="color: @(bloodSugarStatus.IsStale ? "#dc3545" : "#6c757d")">@FormatTimeSince(bloodSugarStatus.TimeSinceLastReading)</span>
5269
</div>
5370
</div>
5471
</div>
5572
</div>
56-
<div class="text-center mt-1">
73+
<div class="text-center mt-1">
5774
<small class="text-muted">
5875
Updated: @lastUpdated.ToString("HH:mm:ss")
5976
@if (bloodSugarStatus.IsStale)
@@ -64,7 +81,8 @@
6481
{
6582
<span class="ms-1">• Cached: @FormatTimeSince(DateTime.Now - bloodSugarStatus.LastUpdated)</span>
6683
}
67-
</small> </div>
84+
</small>
85+
</div>
6886
}
6987
else if (isLoading)
7088
{
@@ -92,48 +110,67 @@
92110
</div>
93111
</div>
94112

95-
<style> .blood-sugar-card .blood-sugar-display {
113+
<style>
114+
.blood-sugar-card .blood-sugar-display {
96115
margin: 0.25rem 0;
97116
line-height: 0.9;
98-
} .blood-sugar-card .blood-sugar-display .display-1 {
99-
font-size: 3.0rem !important;
100-
text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
101117
}
102-
103-
/* Extra large on smaller screens for better visibility */
118+
119+
.blood-sugar-card .blood-sugar-display .display-1 {
120+
font-size: 3.0rem !important;
121+
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
122+
} /* Extra large on smaller screens for better visibility */
104123
@@media (max-width: 1024px) {
105124
.blood-sugar-card .blood-sugar-display .display-1 {
106125
font-size: 3.6rem !important;
107126
}
108-
}.blood-sugar-card .trend-display {
127+
}
128+
129+
.blood-sugar-card .trend-display {
109130
margin: 0.25rem 0;
110131
line-height: 1.1;
111132
}
112-
133+
113134
.blood-sugar-card .time-display {
114135
margin: 0.25rem 0;
115136
}
116-
137+
117138
.blood-sugar-card .badge {
118139
white-space: nowrap;
119140
font-size: 0.7rem;
120141
}
121-
142+
122143
.blood-sugar-card .fas {
123144
margin-bottom: 4px;
124145
opacity: 0.8;
125146
}
126-
147+
127148
.blood-sugar-card .fas:hover {
128149
opacity: 1;
129150
transform: scale(1.05);
130151
transition: all 0.2s ease-in-out;
131-
} .blood-sugar-card .card-body {
152+
}
153+
154+
.blood-sugar-card .card-body {
132155
padding: 1rem;
133156
}
134-
157+
135158
.blood-sugar-card .small {
136159
font-size: 0.8rem;
160+
} /* Icon alignment containers */
161+
.blood-sugar-card .icon-container {
162+
height: 80px;
163+
display: flex;
164+
align-items: center;
165+
justify-content: center;
166+
}
167+
168+
/* Custom sizing for trend icon to match fa-3x */
169+
.blood-sugar-card .trend-icon {
170+
font-size: 4.5rem;
171+
line-height: 1;
172+
display: inline-block;
173+
vertical-align: middle;
137174
}
138175
</style>
139176

@@ -145,10 +182,10 @@
145182
protected override async Task OnInitializedAsync()
146183
{
147184
Logger.LogInformation("Initializing BloodSugarMonitor component...");
148-
185+
149186
await RefreshBloodSugarData();
150-
// Set up auto-refresh every 1 minute (server has smart cache based on reading age)
151-
refreshTimer = new Timer(async _ =>
187+
// Set up auto-refresh every 1 minute (server has smart cache based on reading age)
188+
refreshTimer = new Timer(async _ =>
152189
{
153190
try
154191
{
@@ -164,7 +201,7 @@
164201
}
165202
}, null, TimeSpan.Zero, TimeSpan.FromMinutes(1));
166203
}
167-
204+
168205
private async Task RefreshBloodSugarData()
169206
{
170207
Logger.LogInformation("Refreshing blood sugar data...");
@@ -173,11 +210,11 @@
173210
{
174211
isLoading = true;
175212
StateHasChanged();
176-
213+
177214
bloodSugarStatus = await BloodSugarService.GetBloodSugarStatusAsync();
178215
lastUpdated = DateTime.Now;
179216
isLoading = false;
180-
217+
181218
Logger.LogInformation("Blood sugar data refreshed successfully");
182219
StateHasChanged();
183220
}
@@ -220,12 +257,12 @@
220257
{
221258
isLoading = true;
222259
StateHasChanged();
223-
260+
224261
bloodSugarStatus = await BloodSugarService.RefreshAsync();
225262
lastUpdated = DateTime.Now;
226263
isLoading = false;
227264
StateHasChanged();
228-
265+
229266
Logger.LogInformation("Blood sugar data force refreshed successfully");
230267
}
231268
catch (Exception ex)
@@ -248,7 +285,7 @@
248285
else
249286
return $"{(int)timeSince.TotalDays}d ago";
250287
}
251-
288+
252289
private string GetTrendColor(string direction) => direction switch
253290
{
254291
"DoubleUp" or "SingleUp" => "#007bff", // Blue for rising

‎HomeSpeaker.WebAssembly/Components/Music/Library/Song.razor‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -28,13 +28,9 @@ else
2828
<PlusButtonWithMenu Song="SongViewModel" />
2929
</div> @if (showDetails)
3030
{
31-
<div class="d-flex justify-content-between mb-2 pt-2 ps-2 g-0">
32-
<div class="">
33-
<button class="btn btn-outline-danger" @onclick=delete><span class="oi oi-delete me-1"></span>Delete</button>
34-
</div>
35-
<div class="">
36-
<button class="btn btn-outline-info" @onclick=toggleEditModalVisibility><span class="oi oi-pencil me-1"></span>Edit</button>
37-
</div>
31+
<div class="d-flex justify-content-center mb-2 pt-2 ps-2 g-0 gap-2">
32+
<button class="btn btn-outline-danger" @onclick=delete><span class="oi oi-delete me-1"></span>Delete</button>
33+
<button class="btn btn-outline-info" @onclick=toggleEditModalVisibility><span class="oi oi-pencil me-1"></span>Edit</button>
3834
</div>
3935
}
4036
</div>

‎HomeSpeaker.WebAssembly/Pages/Index.razor‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,10 @@
44
@using Microsoft.Fast.Components.FluentUI
55

66
<div class="row g-2 mb-2">
7-
<div class="col-xl-6 col-6">
7+
<div class="col-md-6 col-12">
88
<TemperatureMonitor />
99
</div>
10-
<div class="col-xl-6 col-6">
10+
<div class="col-md-6 col-12">
1111
<BloodSugarMonitor />
1212
</div>
1313
</div>

0 commit comments

Comments
 (0)