daniel/deepdrft
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 13 Wiki Activity

refactor(archive): single flex row for search/medium/genre controls with narrow-screen reflow

Browse Source
This commit is contained in:
daniel-c-harvey
2026-06-15 10:45:18 -04:00
parent 4df2b8fb57
commit 47082591ee
2 changed files with 87 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
DeepDrftPublic.Client/Pages/ArchiveView.razor
+47 -45
View File
@@ -10,52 +10,54 @@
The release grid still prerenders so the archive is meaningful before hydration. *@
@if (RendererInfo.IsInteractive)
{
<div class="archive-search-row">
<MudTextField T="string"
Value="@SearchText"
ValueChanged="@OnSearchInput"
Immediate="true"
DebounceInterval="400"
Placeholder="Search releases or artists"
Adornment="Adornment.Start"
AdornmentIcon="@Icons.Material.Filled.Search"
Variant="Variant.Outlined"
Margin="Margin.Dense"
Clearable="true"
Class="archive-search-field"/>
</div>
<div class="archive-filter-row">
<MudToggleGroup T="ReleaseMedium?"
Value="@_selectedMedium"
ValueChanged="@OnMediumSelected"
SelectionMode="SelectionMode.SingleSelection"
Color="Color.Primary"
Size="Size.Small"
Class="archive-medium-toggle">
<MudToggleItem T="ReleaseMedium?" Value="@(null)">All</MudToggleItem>
@foreach (var medium in _media)
{
<MudToggleItem T="ReleaseMedium?" Value="@medium">@MediumLabel(medium)</MudToggleItem>
}
</MudToggleGroup>
</div>
@if (_genres.Count > 0)
{
<div class="archive-filter-row">
<MudChipSet T="string"
SelectedValue="@_selectedGenre"
SelectedValueChanged="@OnGenreSelected"
SelectionMode="SelectionMode.ToggleSelection"
Class="archive-genre-chips">
@foreach (var genre in _genres)
{
<MudChip T="string" Value="@genre.Genre">@genre.Genre</MudChip>
}
</MudChipSet>
<div class="archive-controls-row">
<div class="archive-controls-search">
<MudTextField T="string"
Value="@SearchText"
ValueChanged="@OnSearchInput"
Immediate="true"
DebounceInterval="400"
Placeholder="Search releases or artists"
Adornment="Adornment.Start"
AdornmentIcon="@Icons.Material.Filled.Search"
Variant="Variant.Outlined"
Margin="Margin.Dense"
Clearable="true"
Class="archive-search-field"/>
</div>
}
<div class="archive-controls-medium">
<MudToggleGroup T="ReleaseMedium?"
Value="@_selectedMedium"
ValueChanged="@OnMediumSelected"
SelectionMode="SelectionMode.SingleSelection"
Color="Color.Primary"
Size="Size.Small"
Class="archive-medium-toggle">
<MudToggleItem T="ReleaseMedium?" Value="@(null)">All</MudToggleItem>
@foreach (var medium in _media)
{
<MudToggleItem T="ReleaseMedium?" Value="@medium">@MediumLabel(medium)</MudToggleItem>
}
</MudToggleGroup>
</div>
@if (_genres.Count > 0)
{
<div class="archive-controls-genre">
<MudChipSet T="string"
SelectedValue="@_selectedGenre"
SelectedValueChanged="@OnGenreSelected"
SelectionMode="SelectionMode.ToggleSelection"
Class="archive-genre-chips">
@foreach (var genre in _genres)
{
<MudChip T="string" Value="@genre.Genre">@genre.Genre</MudChip>
}
</MudChipSet>
</div>
}
</div>
}
@if (_loading)