zaire/campfire
1
0
Fork 0
forked from blisstown/campfire
Code Pull requests Activity

you wouldn't redesign a whole app in one commit

Browse source
This commit is contained in:
ari melody 2024-06-28 06:19:00 +01:00
parent 957a067568
commit 7669c5b4d6
Signed by: ari
GPG key ID: CF99829C92678188
69 changed files with 1232 additions and 506 deletions
Download patch file Download diff file Expand all files Collapse all files

107
src/ui/post/PostHeader.svelte Normal file
View file

@ -0,0 +1,107 @@
<script>
import { parseText as parseEmojis } from '../../emoji.js';
import { shorthand as short_time } from '../../time.js';
export let post;
export let reply = undefined;
let time_string = post.created_at.toLocaleString();
</script>
<div class={"post-header-container" + (reply ? " reply" : "")}>
<a href={post.user.url} target="_blank" class="post-avatar-container">
<img src={post.user.avatar_url} type={post.user.avatar_type} alt="" width="48" height="48" class="post-avatar" loading="lazy" decoding="async">
</a>
<header class="post-header">
<div class="post-user-info">
<a href={post.user.url} target="_blank" class="name">{@html post.user.rich_name}</a>
<span class="username">{post.user.mention}</span>
</div>
<div class="post-info">
<a href={post.url} target="_blank" class="created-at">
<time title={time_string}>{short_time(post.created_at)}</time>
{#if post.visibility !== "public"}
<br>
<span class="post-visibility">{post.visibility}</span>
{/if}
</a>
</div>
</header>
</div>
<style>
.post-header-container {
width: 100%;
display: flex;
flex-direction: row;
}
.post-header-container.reply {
width: calc(100% + 60px);
margin-left: -60px;
}
.post-header-container a,
.post-header-container a:visited {
color: inherit;
text-decoration: none;
}
.post-header-container a:hover {
text-decoration: underline;
}
.post-avatar-container {
margin-right: 12px;
display: flex;
}
.post-avatar {
border-radius: 8px;
}
.post-header {
display: flex;
flex-grow: 1;
flex-direction: row;
}
.post-info {
margin-left: auto;
}
.post-user-info {
margin-top: -2px;
display: flex;
flex-direction: column;
justify-content: center;
}
.post-user-info a {
display: block;
}
.post-user-info .name :global(.emoji) {
position: relative;
top: 4px;
height: 20px;
}
.post-user-info .username {
opacity: .8;
font-size: .9em;
}
.post-info .created-at {
height: 100%;
display: flex;
flex-direction: column;
align-items: end;
justify-content: center;
font-size: .8em;
}
.post-visibility {
font-size: .9em;
opacity: .8;
}
</style>