Front End

- MudBlazor Theme Manager tryout - Navigation bar rework - Icons and styles rework - Track Gallery & Card layout redesign for SPA - Track Player bottom bar
2025-09-05 22:27:12 -04:00
parent 7f78545a02
commit 3766d4e010
20 changed files with 522 additions and 112 deletions
@@ -0,0 +1,82 @@
+<MudCard Style="width: 250px; height: 250px; position: relative; overflow: hidden;"
+         Elevation="4">
+    
+    @if (!string.IsNullOrEmpty(TrackModel?.ImagePath))
+    {
+        <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
+                    background-image: url('@TrackModel.ImagePath'); 
+                    background-size: cover; 
+                    background-position: center;
+                    filter: brightness(0.7);">
+        </div>
+    }
+    else
+    {
+        <MudPaper Style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
+                  Class="mud-theme-secondary"
+                  Elevation="0">
+        </MudPaper>
+    }
+    
+    <MudCardContent Style="position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding: 16px;">
+        
+        <div>
+            <MudText Typo="Typo.h6" 
+                     Color="Color.Surface"
+                     Style="margin-bottom: 4px;"
+                     Class="text-truncate">
+                @TrackModel?.TrackName
+            </MudText>
+            
+            <MudText Typo="Typo.subtitle1" 
+                     Color="Color.Surface"
+                     Style="margin-bottom: 8px;"
+                     Class="text-truncate">
+                @TrackModel?.Artist
+            </MudText>
+        </div>
+        
+        <div Style="margin: 8px 0;">
+            @if (!string.IsNullOrEmpty(TrackModel?.Album))
+            {
+                <MudText Typo="Typo.caption" 
+                         Color="Color.Surface"
+                         Class="text-truncate">
+                    @TrackModel.Album
+                </MudText>
+            }
+            
+            @if (!string.IsNullOrEmpty(TrackModel?.Genre))
+            {
+                <MudChip T="string" 
+                         Size="Size.Small" 
+                         Variant="Variant.Filled" 
+                         Color="Color.Primary"
+                         Style="opacity: 0.9; margin-top: 4px;">
+                    @TrackModel.Genre
+                </MudChip>
+            }
+        </div>
+        
+        <div Style="display: flex; justify-content: space-between; align-items: center;">
+            @if (TrackModel?.ReleaseDate.HasValue == true)
+            {
+                <MudText Typo="Typo.caption" 
+                         Color="Color.Surface">
+                    @TrackModel.ReleaseDate.Value.Year
+                </MudText>
+            }
+            else
+            {
+                <div></div>
+            }
+            
+            <MudFab Color="Color.Primary" 
+                    Size="Size.Medium"
+                    StartIcon="@PlayPauseIcon"
+                    OnClick="@PlayClick"/>
+        </div>
+        
+    </MudCardContent>
+    
+</MudCard>