daniel-c-harvey
3766d4e010
- MudBlazor Theme Manager tryout - Navigation bar rework - Icons and styles rework - Track Gallery & Card layout redesign for SPA - Track Player bottom bar
82 lines
2.8 KiB
Plaintext
82 lines
2.8 KiB
Plaintext
<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> |