Improve formatting

This commit is contained in:
2023-04-11 16:02:54 +02:00
parent 268128c2f4
commit 6c9546b74a
22 changed files with 280 additions and 279 deletions

View File

@ -3,14 +3,14 @@
import AvatarComponent from '$lib/components/AvatarComponent.svelte';
import AccountComponent from '$lib/components/AccountComponent.svelte';
import { secondsSince, relativeTime } from '$lib/relativeTime';
import { onMount } from "svelte";
import { onMount } from 'svelte';
export let post: Post;
let displayRelativeTime = false;
const absoluteDate = new Date(post.created_at).toLocaleString();
let dateCreated = absoluteDate;
const timePassed = secondsSince(new Date(post.created_at));
$: if(displayRelativeTime) {
$: if (displayRelativeTime) {
dateCreated = relativeTime($timePassed) ?? absoluteDate;
}
@ -19,16 +19,15 @@
// When JS is disabled the server-side rendered absolute date will be shown,
// otherwise the relative date would be outdated very quickly
displayRelativeTime = true;
})
});
</script>
<div class="wrapper">
<div class="avatar"><AvatarComponent account={post.account} /></div>
<div class="post">
<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 class="content">{@html post.content}</div>
</div>
@ -54,4 +53,4 @@
max-width: calc(600px - 1em - 50px);
overflow-x: auto;
}
</style>
</style>