fix: track list layout and HomeView content rendering
- Add explicit flex-direction: row and width: 100% to TrackRow - Add missing .track-list and .tracks container styles in AlbumDetailView - Add gap: 16px to table header to match TrackRow alignment - Add box-sizing: border-box for consistent sizing
This commit is contained in:
1 parent
12a53a63d1
commit
ffadf70c8b
3 files changed
+70
-50
No files matched your search
@@ -97,14 +97,17 @@
|
||||
|
||||
<style>
|
||||
.track-row {
|
||||
width: 100%;
|
||||
height: 56px;
|
||||
padding: 0 16px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: background-color 150ms ease;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.track-row.hovered {
|
||||
|
||||
@@ -319,14 +319,18 @@
|
||||
}
|
||||
|
||||
.table-header {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
padding: 0 16px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
color: #666666;
|
||||
font-weight: 400;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.col-number {
|
||||
@@ -335,6 +339,7 @@
|
||||
|
||||
.col-title {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.col-duration {
|
||||
@@ -346,4 +351,16 @@
|
||||
width: 80px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.track-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.tracks {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
@@ -53,58 +53,58 @@
|
||||
|
||||
<!-- Recently Played -->
|
||||
{#if recentAlbums.length > 0}
|
||||
<HorizontalScrollRow title="Escuchado recientemente">
|
||||
{#snippet children()}
|
||||
{#each recentAlbums as album}
|
||||
<AlbumCard
|
||||
artwork={album.artwork}
|
||||
title={album.title}
|
||||
artist={album.artist}
|
||||
quality={album.quality}
|
||||
onclick={() => onAlbumClick?.(album.id ?? '')}
|
||||
/>
|
||||
{/each}
|
||||
<div class="spacer"></div>
|
||||
{/snippet}
|
||||
</HorizontalScrollRow>
|
||||
{/if}
|
||||
<HorizontalScrollRow title="Escuchado recientemente">
|
||||
{#snippet children()}
|
||||
{#each recentAlbums as album}
|
||||
<AlbumCard
|
||||
artwork={album.artwork}
|
||||
title={album.title}
|
||||
artist={album.artist}
|
||||
quality={album.quality}
|
||||
onclick={() => onAlbumClick?.(album.id ?? '')}
|
||||
/>
|
||||
{/each}
|
||||
<div class="spacer"></div>
|
||||
{/snippet}
|
||||
</HorizontalScrollRow>
|
||||
{/if}
|
||||
|
||||
<!-- Recommended For You -->
|
||||
{#if recommendedAlbums.length > 0}
|
||||
<HorizontalScrollRow title="Recomendado para ti">
|
||||
{#snippet children()}
|
||||
{#each recommendedAlbums as album}
|
||||
<AlbumCard
|
||||
artwork={album.artwork}
|
||||
title={album.title}
|
||||
artist={album.artist}
|
||||
quality={album.quality}
|
||||
size="large"
|
||||
onclick={() => onAlbumClick?.(album.id ?? '')}
|
||||
/>
|
||||
{/each}
|
||||
<div class="spacer"></div>
|
||||
{/snippet}
|
||||
</HorizontalScrollRow>
|
||||
{/if}
|
||||
<!-- Recommended For You -->
|
||||
{#if recommendedAlbums.length > 0}
|
||||
<HorizontalScrollRow title="Recomendado para ti">
|
||||
{#snippet children()}
|
||||
{#each recommendedAlbums as album}
|
||||
<AlbumCard
|
||||
artwork={album.artwork}
|
||||
title={album.title}
|
||||
artist={album.artist}
|
||||
quality={album.quality}
|
||||
size="large"
|
||||
onclick={() => onAlbumClick?.(album.id ?? '')}
|
||||
/>
|
||||
{/each}
|
||||
<div class="spacer"></div>
|
||||
{/snippet}
|
||||
</HorizontalScrollRow>
|
||||
{/if}
|
||||
|
||||
<!-- New Releases -->
|
||||
{#if newReleases.length > 0}
|
||||
<HorizontalScrollRow title="Nuevos lanzamientos">
|
||||
{#snippet children()}
|
||||
{#each newReleases as album}
|
||||
<AlbumCard
|
||||
artwork={album.artwork}
|
||||
title={album.title}
|
||||
artist={album.artist}
|
||||
quality={album.quality}
|
||||
onclick={() => onAlbumClick?.(album.id ?? '')}
|
||||
/>
|
||||
{/each}
|
||||
<div class="spacer"></div>
|
||||
{/snippet}
|
||||
</HorizontalScrollRow>
|
||||
{/if}
|
||||
<!-- New Releases -->
|
||||
{#if newReleases.length > 0}
|
||||
<HorizontalScrollRow title="Nuevos lanzamientos">
|
||||
{#snippet children()}
|
||||
{#each newReleases as album}
|
||||
<AlbumCard
|
||||
artwork={album.artwork}
|
||||
title={album.title}
|
||||
artist={album.artist}
|
||||
quality={album.quality}
|
||||
onclick={() => onAlbumClick?.(album.id ?? '')}
|
||||
/>
|
||||
{/each}
|
||||
<div class="spacer"></div>
|
||||
{/snippet}
|
||||
</HorizontalScrollRow>
|
||||
{/if}
|
||||
{:else}
|
||||
<!-- Welcome/Empty State -->
|
||||
<div class="welcome-state">
|
||||
|
||||
Reference in new issue
Block a user