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

81
src/ui/post/ReplyContext.svelte Normal file
View file

@ -0,0 +1,81 @@
<script>
import PostHeader from './PostHeader.svelte';
import Body from './Body.svelte';
import ReactionButton from './ReactionButton.svelte';
import ActionButton from './ActionButton.svelte';
import Post from './Post.svelte';
import { parseText as parseEmojis, parseOne as parseEmoji } from '../../emoji.js';
import { shorthand as short_time } from '../../time.js';
export let post;
let time_string = post.created_at.toLocaleString();
function gotoPost() {
location = `/post/${post.id}`;
}
</script>
{#if post.reply}
<svelte:self post={post.reply} />
{/if}
<article class="post-reply" on:click={() => gotoPost()}>
<div class="line"></div>
<div class="post-reply-main">
<PostHeader post={post} reply />
<Body post={post} />
<footer class="post-footer">
<div class="post-reactions">
{#each post.reactions as reaction}
<ReactionButton icon={reaction.emoji.html} type="reaction" bind:count={reaction.count} title={reaction.emoji.id} label="" />
{/each}
</div>
<div class="post-actions">
<ActionButton icon="🗨️" type="reply" label="Reply" bind:count={post.reply_count} sound="post" />
<ActionButton icon="🔁" type="boost" label="Boost" bind:count={post.boost_count} sound="boost" />
<ActionButton icon="⭐" type="favourite" label="Favourite" />
<ActionButton icon="😃" type="react" label="React" />
<ActionButton icon="🗣️" type="quote" label="Quote" />
<ActionButton icon="🛠️" type="more" label="More" />
</div>
</footer>
</div>
</article>
<style>
.post-reply {
padding-bottom: 24px;
display: flex;
flex-direction: row;
color: var(--text);
align-items: stretch;
}
.post-avatar-container {
display: flex;
}
.line {
position: relative;
top: 24px;
left: 25px;
border-right: 2px solid var(--bg-700);
}
.post-reply-main {
width: 100%;
padding-left: 60px;
z-index: 1;
}
:global(.post-body) {
margin-top: 0;
}
:global(.post-body p) {
margin: 0;
}
</style>