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