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

feature: AudioPlayerBar Layout Enhancements

Browse Source
This commit is contained in:
daniel-c-harvey
2026-06-06 19:47:17 -04:00
parent a4b098b8ea
commit 475f93c8a3
2 changed files with 28 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
DeepDrftPublic.Client/Controls/AudioPlayerBar/AudioPlayerBar.razor.css
+14 -2
View File
@@ -80,7 +80,7 @@
display: grid; display: grid;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
padding-right: 2.5rem; /* clear the abs-positioned PlayerWindowControls */ /*padding-right: 2.5rem; !* clear the abs-positioned PlayerWindowControls *!*/
} }
::deep .transport-zone { grid-area: transport; } ::deep .transport-zone { grid-area: transport; }
@@ -112,7 +112,19 @@
/* Narrow (< 600px): transport + volume share the top row; waveform then metadata stack full-width /* Narrow (< 600px): transport + volume share the top row; waveform then metadata stack full-width
below — the most compressed shape. */ below — the most compressed shape. */
@media (max-width: 599.98px) { @media (min-width: 420px) and (max-width: 599.98px) {
.player-layout {
grid-template-columns: auto 1fr auto;
grid-template-areas:
"transport . volume"
"waveform waveform waveform"
"meta meta meta";
}
}
/* Very Narrow (< 400px): transport + volume share the top row; waveform then metadata stack full-width
below — the most compressed shape. */
@media (max-width: 419.98px) {
.player-layout { .player-layout {
grid-template-columns: auto 1fr auto; grid-template-columns: auto 1fr auto;
grid-template-areas: grid-template-areas:
DeepDrftPublic.Client/Controls/AudioPlayerBar/TrackMetaLabel.razor.css
+14 -10
View File
@@ -67,22 +67,14 @@
::deep .track-meta-sep { ::deep .track-meta-sep {
display: none; display: none;
} }
}
@media (max-width: 899.98px) {
::deep .track-meta-year { ::deep .track-meta-year {
padding-left: 8px; padding-left: 8px;
padding-right: 8px;
} }
} }
/* Narrow band (<600): fully vertical — title / artist / genre / year all stacked, left-aligned. */
@media (max-width: 599.98px) {
.track-meta-row {
flex-direction: column;
align-items: flex-start;
gap: 4px;
}
/* Narrow band (<600): fully vertical — title / artist / genre / year all stacked, left-aligned. */
@media (min-width: 420px) and (max-width: 599.98px) {
.track-meta-identity { .track-meta-identity {
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
@@ -98,4 +90,16 @@
::deep .track-meta-sep { ::deep .track-meta-sep {
display: none; display: none;
} }
::deep .track-meta-year {
padding-left: 8px;
}
}
@media (max-width: 419.98px) {
.track-meta-row {
flex-direction: column;
align-items: flex-start;
gap: 4px;
}
} }