89 lines
1.8 KiB
Svelte
89 lines
1.8 KiB
Svelte
<script lang="ts">
|
|
import ago from '$lib/ago';
|
|
import { now } from '$lib/global-now';
|
|
import { linkAccount } from '$lib/mastoapi/account';
|
|
|
|
import { linkStatus, type MastodonStatus } from '$lib/mastoapi/status';
|
|
import StatusControls from './StatusControls.svelte';
|
|
|
|
export let status: MastodonStatus;
|
|
</script>
|
|
|
|
<article class="status">
|
|
<div class="status-content">
|
|
<aside>
|
|
<a href={linkAccount(status.account)}>
|
|
<img class="avatar" alt={status.account.acct} src={status.account.avatar_static} />
|
|
</a>
|
|
</aside>
|
|
|
|
<div class="status-main">
|
|
<div class="top-line">
|
|
<a href={linkAccount(status.account)} class="author-link">
|
|
<strong class="author-display-name">{status.account.display_name}</strong>
|
|
<span class="author-handle">@{status.account.fqn}</span>
|
|
</a>
|
|
|
|
<a class="link-muted" href={linkStatus(status)}>
|
|
<time>{ago(new Date(status.created_at), $now)}</time>
|
|
</a>
|
|
</div>
|
|
|
|
<p class="status-body">
|
|
{@html status.content}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<StatusControls {status} />
|
|
</article>
|
|
|
|
<style>
|
|
.status {
|
|
background-color: var(--col-bg-1);
|
|
padding: 0.25em;
|
|
}
|
|
|
|
.status-content {
|
|
display: flex;
|
|
flex-direction: row;
|
|
padding: 0.25em;
|
|
}
|
|
|
|
.status aside {
|
|
width: 4rem;
|
|
margin-inline-end: 1em;
|
|
}
|
|
|
|
.status .avatar {
|
|
border-radius: 6px;
|
|
height: 3em;
|
|
max-width: 3em;
|
|
}
|
|
|
|
.status .author-link {
|
|
color: var(--col-fg-0);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.status .author-handle {
|
|
margin-inline-start: 0.5em;
|
|
color: var(--col-fg-1);
|
|
}
|
|
|
|
.status .status-main {
|
|
width: 100%;
|
|
}
|
|
|
|
.status .status-main .top-line {
|
|
display: inline-flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
}
|
|
|
|
.status .status-body {
|
|
margin-bottom: 0;
|
|
}
|
|
</style>
|