troogs/astrain
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Enhance exercise selection UI in Routines page

Browse Source
This commit is contained in:
troogs
2026-02-07 18:11:19 +01:00
parent fae57c6c75
commit 55f10fba9f
2 changed files with 40 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/ASTRAIN.Client/Pages/Routines.razor
View File

@@ -36,10 +36,11 @@
<div class="list">
@foreach (var exercise in ExerciseList)
{
<label class="checkbox-row">
<input type="checkbox" checked="@SelectedExerciseIds.Contains(exercise.Id)" @onchange="() => ToggleExercise(exercise.Id)" />
<span>@exercise.Name</span>
</label>
var isSelected = SelectedExerciseIds.Contains(exercise.Id);
<div class="list-item selectable @(isSelected ? "selected" : string.Empty)" @onclick="() => ToggleExercise(exercise.Id)">
<div class="item-title">@exercise.Name</div>
<span class="check-icon @(isSelected ? "visible" : string.Empty)" aria-hidden="true">✓</span>
</div>
}
</div>
<button class="primary" @onclick="CreateRoutineAsync" disabled="@string.IsNullOrWhiteSpace(NewRoutineName)">Save Routine</button>
@@ -91,10 +92,11 @@
<div class="list">
@foreach (var exercise in ExerciseList)
{
<label class="checkbox-row">
<input type="checkbox" checked="@EditingExerciseIds.Contains(exercise.Id)" @onchange="() => ToggleEditExercise(exercise.Id)" />
<span>@exercise.Name</span>
</label>
var isSelected = EditingExerciseIds.Contains(exercise.Id);
<div class="list-item selectable @(isSelected ? "selected" : string.Empty)" @onclick="() => ToggleEditExercise(exercise.Id)">
<div class="item-title">@exercise.Name</div>
<span class="check-icon @(isSelected ? "visible" : string.Empty)" aria-hidden="true">✓</span>
</div>
}
</div>
<div class="actions">

30
src/ASTRAIN.Client/wwwroot/css/app.css
View File

@@ -139,6 +139,36 @@ p {
border-color: #1f6b38;
}
.list-item.selectable {
cursor: pointer;
}
.list-item.selected {
background: #10331a;
border-color: #1f6b38;
}
.check-icon {
width: 26px;
height: 26px;
border-radius: 999px;
border: 1px solid #2a2a2a;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 700;
color: #ffffff;
opacity: 0;
transform: scale(0.85);
transition: opacity 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
.check-icon.visible {
opacity: 1;
transform: scale(1);
border-color: #1f6b38;
}
.item-title {
font-weight: 600;
}