Fix #22, fix #23. Display posts as grid instead of flexbox, add song info

This commit is contained in:
Max Nuding 2023-04-23 20:10:45 +02:00
parent 42d91a097f
commit 9bbcc843c2
Signed by: phlaym
GPG Key ID: A06651BAB6777237
5 changed files with 149 additions and 24 deletions

View File

@ -10,8 +10,8 @@
<style> <style>
img { img {
max-width: 50px; max-width: 100%;
max-height: 50px; max-height: 100%;
width: auto; width: auto;
height: auto; height: auto;
object-fit: contain; object-fit: contain;

View File

@ -24,34 +24,139 @@
<div class="wrapper"> <div class="wrapper">
<div class="avatar"><AvatarComponent account={post.account} /></div> <div class="avatar"><AvatarComponent account={post.account} /></div>
<div class="post"> <div class="account"><AccountComponent account={post.account} /></div>
<div class="meta"> <div class="meta">
<AccountComponent account={post.account} /> <small><a href={post.url} target="_blank" title={absoluteDate}>{dateCreated}</a></small>
<small><a href={post.url} target="_blank" title={absoluteDate}>{dateCreated}</a></small> </div>
</div> <div class="content">{@html post.content}</div>
<div class="content">{@html post.content}</div> <div class="song">
{#if post.songs}
{#each post.songs as song (song.pageUrl)}
<div class="info-wrapper">
<div class="bgimage" style="background-image: url({song.thumbnailUrl});" />
<a href={song.pageUrl ?? song.postedUrl} target="_blank">
<div class="info">
<img
src={song.thumbnailUrl}
class="cover"
alt="Cover for {song.artistName} - {song.title}"
/>
<span class="text">{song.artistName} - {song.title}</span>
</div>
</a>
</div>
{/each}
{/if}
</div> </div>
</div> </div>
<style> <style>
.wrapper { .wrapper {
display: flex; display: grid;
} grid-template-columns: 50px 1fr auto auto;
.post { grid-template-rows: auto 1fr auto;
display: flex; grid-template-areas:
flex-direction: column; 'avatar account account meta'
flex-grow: 2; 'avatar content content song'
word-break: break-word; '. content content song';
} grid-column-gap: 6px;
.meta { column-gap: 6px;
display: flex; grid-row-gap: 6px;
justify-content: space-between; row-gap: 6px;
} }
.avatar { .avatar {
margin-right: 1em; grid-area: avatar;
max-width: 50px;
max-height: 50px;
}
.account {
grid-area: account;
}
.meta {
grid-area: meta;
justify-self: end;
} }
.content { .content {
max-width: calc(600px - 1em - 50px); grid-area: content;
overflow-x: auto; word-break: break-word;
translate: 0 -0.5em;
}
.song {
grid-area: song;
align-self: center;
justify-self: center;
max-width: 200px;
}
.cover {
max-width: 200px;
display: block;
border-radius: 3px;
margin-bottom: 3px;
}
.bgimage {
display: none;
background-color: var(--color-bg);
}
.info {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5em;
z-index: 1;
}
.info * {
z-index: inherit;
}
@media only screen and (max-width: 650px) {
.wrapper {
grid-template-areas:
'avatar account account meta'
'content content content content'
'song song song song';
grid-row-gap: 3px;
row-gap: 3px;
}
.song {
width: 100%;
}
.song,
.cover {
max-width: 100%;
}
.cover {
height: 60px;
}
.cover:not(.background) {
z-index: 1;
width: 60px;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.bgimage {
display: block;
width: 100%;
height: 60px;
z-index: 0;
filter: blur(10px);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.info {
position: relative;
top: -60px;
flex-direction: row;
}
.info-wrapper {
margin-bottom: -50px;
}
.text {
padding: 3px;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: 3px;
background-color: var(--color-bg-translucent);
color: var(--color-text);
}
} }
</style> </style>

View File

@ -32,8 +32,15 @@ type PostTagRow = {
url: string; url: string;
}; };
type SongRow = SongInfo & { type SongRow = {
post_url: string; post_url: string;
postedUrl: string;
overviewUrl?: string;
type: 'album' | 'song';
youtubeUrl?: string;
title?: string;
artistName?: string;
thumbnailUrl?: string;
}; };
type Migration = { type Migration = {
@ -468,7 +475,16 @@ function getSongData(postIdsParams: String, postIds: string[]): Promise<Map<stri
} }
const songMap: Map<string, SongInfo[]> = tagRows.reduce( const songMap: Map<string, SongInfo[]> = tagRows.reduce(
(result: Map<string, SongInfo[]>, item) => { (result: Map<string, SongInfo[]>, item) => {
result.set(item.post_url, [...(result.get(item.post_url) || []), item]); const info = {
pageUrl: item.overviewUrl,
youtubeUrl: item.youtubeUrl,
type: item.type,
title: item.title,
artistName: item.artistName,
thumbnailUrl: item.thumbnailUrl,
postedUrl: item.postedUrl
} as SongInfo;
result.set(item.post_url, [...(result.get(item.post_url) || []), info]);
return result; return result;
}, },
new Map() new Map()

View File

@ -176,6 +176,8 @@ export class TimelineReader {
return; return;
} }
log.debug('Found YT URL', youtubeUrl, found_urls, found_urls.length); log.debug('Found YT URL', youtubeUrl, found_urls, found_urls.length);
} else {
log.debug('Found URLs and/or tags:', found_urls, found_tags);
} }
// TODO: Change URL detection above to use this regex. // TODO: Change URL detection above to use this regex.

View File

@ -21,6 +21,7 @@ body {
--color-link: var(--color-mauve); --color-link: var(--color-mauve);
--color-link-visited: var(--color-lavender); --color-link-visited: var(--color-lavender);
--color-bg: var(--color-grey-light); --color-bg: var(--color-grey-light);
--color-bg-translucent: hsla(42, 7%, 72%, 0.5);
--color-button: var(--color-red-light); --color-button: var(--color-red-light);
--color-button-shadow: var(--color-red-desat-dark); --color-button-shadow: var(--color-red-desat-dark);
--color-button-hover: var(--color-red); --color-button-hover: var(--color-red);
@ -48,6 +49,7 @@ a:visited {
--color-link: var(--color-mauve); --color-link: var(--color-mauve);
--color-link-visited: var(--color-lavender); --color-link-visited: var(--color-lavender);
--color-bg: var(--color-blue); --color-bg: var(--color-blue);
--color-bg-translucent: hsla(259, 82%, 26%, 0.5);
--color-button: var(--color-red-light); --color-button: var(--color-red-light);
--color-button-shadow: var(--color-red-desat); --color-button-shadow: var(--color-red-desat);
--color-button-hover: var(--color-red); --color-button-hover: var(--color-red);