UI: made artist images circle, ref #639

This commit is contained in:
emeric
2025-06-23 20:40:12 +02:00
parent c1b73f9b76
commit 57692fd8f4
3 changed files with 24 additions and 3 deletions
+2 -2
View File
@@ -14,9 +14,9 @@
</message> </message>
<message id="Lms.Explore.Artists.template.entry"> <message id="Lms.Explore.Artists.template.entry">
<div class="col h-100 Lms-bg-dark-hover rounded"> <div class="col h-100 Lms-bg-dark-hover">
<div class="p-2"> <div class="p-2">
<div class="Lms-responsive-square Lms-cover-container mb-1"> <div class="Lms-responsive-circle Lms-cover-container mb-1">
${image class="shadow-sm"} ${image class="shadow-sm"}
</div> </div>
${name class="d-block text-center text-truncate text-decoration-none link-secondary"} ${name class="d-block text-center text-truncate text-decoration-none link-secondary"}
+21
View File
@@ -110,6 +110,15 @@ body {
cursor: pointer; cursor: pointer;
} }
.Lms-image-artist {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
#lms-mp-progress { #lms-mp-progress {
transition: none; transition: none;
} }
@@ -184,6 +193,18 @@ body {
width: 0; width: 0;
} }
.Lms-responsive-circle {
width: 100%;
border-radius: 50%;
overflow: hidden;
}
.Lms-responsive-circle:after {
content: "";
display: block;
padding-bottom: 100%;
}
.Lms-responsive-square { .Lms-responsive-square {
width: 100%; width: 100%;
} }
+1 -1
View File
@@ -39,7 +39,7 @@ namespace lms::ui::ArtistListHelpers
else else
image = utils::createDefaultArtistArtworkImage(); image = utils::createDefaultArtistArtworkImage();
image->addStyleClass("Lms-cover-release Lms-cover-anchor rounded"); // hack image->addStyleClass("Lms-image-artist Lms-cover-anchor"); // hack
anchor->setImage(std::move(image)); anchor->setImage(std::move(image));
return entry; return entry;