Improve formatting
This commit is contained in:
@ -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>
|
||||
|
Reference in New Issue
Block a user