Mirrors/koel
2
0
Fork 0
mirror of https://github.com/koel/koel synced 2024-11-10 14:44:13 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat(design): better styling for artist/album cards

Browse source
This commit is contained in:
Phan An 2022-07-13 17:45:42 +02:00
parent 38a41083a7
commit d45096b931
No known key found for this signature in database
GPG key ID: A81E4477F0BB6FDC
2 changed files with 4 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
resources/assets/js/components/album/AlbumCard.vue
View file

@ -52,8 +52,6 @@
</span> </span>
</p> </p>
</footer> </footer>
<span class="backdrop" :style="{ backgroundImage: `url(${album.cover})` }"/>
</article> </article>
</template> </template>

11
resources/assets/sass/partials/_mixins.scss
View file

@ -32,6 +32,9 @@
border: 1px solid var(--color-bg-secondary); border: 1px solid var(--color-bg-secondary);
padding: 16px; padding: 16px;
border-radius: 8px; border-radius: 8px;
display: flex;
flex-direction: column;
gap: 1.5rem;
.thumbnail-wrapper { .thumbnail-wrapper {
overflow: hidden; overflow: hidden;
@ -51,7 +54,7 @@
} }
&.compact { &.compact {
display: flex; gap: 1rem;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
max-width: 100%; max-width: 100%;
@ -62,15 +65,9 @@
width: 80px; width: 80px;
border-radius: 5px; border-radius: 5px;
} }
footer {
flex: 1;
padding: 0 16px;
}
} }
footer { footer {
padding-top: 16px;
flex: 1; flex: 1;
overflow: hidden; overflow: hidden;
display: flex; display: flex;