created a snippet to use for detailed album view
This commit is contained in:
@@ -19,6 +19,10 @@
|
||||
/>
|
||||
|
||||
<Content>
|
||||
<div class="album-showcase">
|
||||
|
||||
</div>
|
||||
|
||||
<div class="album-button-container">
|
||||
{#each albums.entries() as [key, album]}
|
||||
{@render albumButton({ key, album })}
|
||||
@@ -26,6 +30,18 @@
|
||||
</div>
|
||||
</Content>
|
||||
|
||||
{#snippet albumShowcase({
|
||||
album,
|
||||
}: {
|
||||
album: AlbumEntry;
|
||||
})}
|
||||
<img class="album-showcase-img" alt="Album art for {album.artist} – {album.title}">
|
||||
<h2 class="album-showcase-title">{album.artist} – {album.title}</h2>
|
||||
{#each album.description as paragraph}
|
||||
<p class="album-showcase-paragraph">{paragraph}</p>
|
||||
{/each}
|
||||
{/snippet}
|
||||
|
||||
{#snippet albumButton({
|
||||
key,
|
||||
album,
|
||||
@@ -45,12 +61,30 @@
|
||||
{/snippet}
|
||||
|
||||
<style>
|
||||
/* album showcase */
|
||||
.album-showcase {
|
||||
/* display: none; */
|
||||
}
|
||||
|
||||
.album-showcase-img {
|
||||
|
||||
}
|
||||
|
||||
.album-showcase-title {
|
||||
|
||||
}
|
||||
|
||||
.album-showcase-paragraph {
|
||||
|
||||
}
|
||||
|
||||
.album-button-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
/* album buttons */
|
||||
.album-button {
|
||||
width: calc(100%/12);
|
||||
line-height: 0;
|
||||
|
||||
Reference in New Issue
Block a user