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

fix: Waveform Visualizer Controls layout

Browse Source
This commit is contained in:
daniel-c-harvey
2026-06-20 18:56:53 -04:00
parent 5058c72375
commit d3f89c494a
2 changed files with 8 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
DeepDrftPublic.Client/Controls/WaveformVisualizerControls.razor
+7 -7
View File
@@ -36,13 +36,13 @@
{ {
<MudGrid> <MudGrid>
@* ── Row 1 — MODE (always visible). ── *@ @* ── Row 1 — MODE (always visible). ── *@
<MudItem xs="3" Class="d-flex align-center"> <MudItem xs="2" Class="d-flex align-center">
<MudStack Row AlignItems="AlignItems.Center" Justify="Justify.FlexStart"> <MudStack Row AlignItems="AlignItems.Center" Justify="Justify.FlexStart">
<span class="wvc-section-label">MODE:</span> <span class="wvc-section-label">MODE:</span>
</MudStack> </MudStack>
</MudItem> </MudItem>
<MudItem xs="9"> <MudItem xs="10">
<MudStack Row AlignItems="AlignItems.Center" Justify="Justify.Center" Class="mx-auto" Spacing="4"> <MudStack Row AlignItems="AlignItems.Center" Justify="Justify.Center" Class="mx-auto" Spacing="4">
<MudTooltip Text="Show the sound, or hide the ribbon."> <MudTooltip Text="Show the sound, or hide the ribbon.">
<div class="wvc-toggle @(ControlState.WaveformEnabled ? "wvc-toggle-on" : "wvc-toggle-off")" role="group" aria-label="Waveform ribbon on or off"> <div class="wvc-toggle @(ControlState.WaveformEnabled ? "wvc-toggle-on" : "wvc-toggle-off")" role="group" aria-label="Waveform ribbon on or off">
@@ -102,13 +102,13 @@
@* ── Row 2 — WAVE section (only when waveform on). ── *@ @* ── Row 2 — WAVE section (only when waveform on). ── *@
@if (ControlState.WaveformEnabled) @if (ControlState.WaveformEnabled)
{ {
<MudItem xs="3" Class="d-flex align-center"> <MudItem xs="2" Class="d-flex align-center">
<MudStack Row AlignItems="AlignItems.Center" Justify="Justify.FlexStart"> <MudStack Row AlignItems="AlignItems.Center" Justify="Justify.FlexStart">
<span class="wvc-section-label">WAVE:</span> <span class="wvc-section-label">WAVE:</span>
</MudStack> </MudStack>
</MudItem> </MudItem>
<MudItem xs="9"> <MudItem xs="10">
<MudStack Row AlignItems="AlignItems.Center" Justify="Justify.Center" Class="mx-auto" Spacing="4"> <MudStack Row AlignItems="AlignItems.Center" Justify="Justify.Center" Class="mx-auto" Spacing="4">
<MudTooltip Text="How fast the sound rolls by."> <MudTooltip Text="How fast the sound rolls by.">
<div class="waveform-visualizer-control mix-visualizer-control" role="group" aria-label="Waveform scroll speed"> <div class="waveform-visualizer-control mix-visualizer-control" role="group" aria-label="Waveform scroll speed">
@@ -137,13 +137,13 @@
@if (ControlState.LavaEnabled) @if (ControlState.LavaEnabled)
{ {
<MudItem xs="3" Class="d-flex align-center"> <MudItem xs="2" Class="d-flex align-center">
<MudStack Row AlignItems="AlignItems.Center" Justify="Justify.FlexStart"> <MudStack Row AlignItems="AlignItems.Center" Justify="Justify.FlexStart">
<span class="wvc-section-label">LAVA:</span> <span class="wvc-section-label">LAVA:</span>
</MudStack> </MudStack>
</MudItem> </MudItem>
<MudItem xs="9" Class="d-flex align-center"> <MudItem xs="10" Class="d-flex align-center">
<MudStack Row AlignItems="AlignItems.Center" Justify="Justify.Center" Class="mx-auto" Spacing="4"> <MudStack Row AlignItems="AlignItems.Center" Justify="Justify.Center" Class="mx-auto" Spacing="4">
<MudTooltip Text="How heavy the wax feels — float, or sink."> <MudTooltip Text="How heavy the wax feels — float, or sink.">
<div class="waveform-visualizer-control mix-visualizer-control" role="group" aria-label="Lava gravity"> <div class="waveform-visualizer-control mix-visualizer-control" role="group" aria-label="Lava gravity">
@@ -167,7 +167,7 @@
</div> </div>
</MudTooltip> </MudTooltip>
<MudTooltip Text="How much goo is in the lamp."> <MudTooltip Text="How much wax is in the lamp.">
<div class="waveform-visualizer-control mix-visualizer-control" role="group" aria-label="Fluid amount"> <div class="waveform-visualizer-control mix-visualizer-control" role="group" aria-label="Fluid amount">
<RadialKnob Value="@ControlState.FluidAmount" <RadialKnob Value="@ControlState.FluidAmount"
ValueChanged="@OnFluidAmountChanged" ValueChanged="@OnFluidAmountChanged"
DeepDrftPublic/wwwroot/styles/deepdrft-styles.css
+1 -1
View File
@@ -440,7 +440,7 @@ h2, h3, h4, h5, h6,
flex-direction: column; flex-direction: column;
gap: 0.75rem; gap: 0.75rem;
min-height: 0; min-height: 0;
max-width: 420px; max-width: 480px;
/* Pin the MudBlazor palette vars the portaled RadialKnob + slider consume. */ /* Pin the MudBlazor palette vars the portaled RadialKnob + slider consume. */
--mud-palette-primary: var(--deepdrft-green-accent); /* knob arc/pointer + slider track/thumb (interactive) */ --mud-palette-primary: var(--deepdrft-green-accent); /* knob arc/pointer + slider track/thumb (interactive) */
--mud-palette-surface: var(--deepdrft-navy); /* knob center fill — darkest navy reads against the panel */ --mud-palette-surface: var(--deepdrft-navy); /* knob center fill — darkest navy reads against the panel */