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)
DeepDrftPublic.Client/Pages/ArchiveView.razor.css
+40 -7
View File
@@ -2,10 +2,19 @@
padding-top: 16px;
}
.archive-search-row {
/* Single flex row: search left | toggle center | chips right.
On narrow screens the medium toggle reflows to its own centered row below. */
.archive-controls-row {
display: flex;
justify-content: flex-start;
padding: 0 0 12px 0;
flex-wrap: wrap;
align-items: center;
gap: 24px;
padding: 0 0 20px 0;
}
.archive-controls-search {
flex: 1 1 auto;
min-width: 180px;
}
/* archive-search-field rides on MudTextField, whose root is a child Razor component element.
@@ -15,11 +24,35 @@
width: 100%;
}
.archive-filter-row {
.archive-controls-medium {
flex: 0 0 auto;
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
padding: 0 0 12px 0;
justify-content: center;
}
.archive-controls-genre {
flex: 0 0 auto;
display: flex;
justify-content: flex-end;
}
/* Narrow screens: push the medium toggle to a full-width centered second row.
Search and genre chips stay together on the first row. */
@media (max-width: 600px) {
.archive-controls-medium {
order: 1;
flex: 1 0 100%;
justify-content: center;
}
.archive-controls-search {
order: 0;
}
.archive-controls-genre {
order: 0;
flex: 0 1 auto;
}
}
.archive-card-center {