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

another huge commit but we have notifs now yay

Browse source
This commit is contained in:
ari melody 2024-07-02 19:38:20 +01:00
parent 015a3e65e1
commit 998e8f2517
Signed by: ari
GPG key ID: CF99829C92678188
17 changed files with 442 additions and 52 deletions
Download patch file Download diff file Expand all files Collapse all files

33
src/routes/post/[id]/+page.svelte
View file

@ -2,6 +2,8 @@
import { client } from '$lib/client/client.js';
import * as api from '$lib/client/api.js';
import { get } from 'svelte/store';
import { goto, afterNavigate } from '$app/navigation';
import { base } from '$app/paths'
import Post from '$lib/ui/post/Post.svelte';
import Button from '$lib/ui/Button.svelte';
@ -13,6 +15,12 @@
goto("/");
}
let previous_page = base;
afterNavigate(({from}) => {
previous_page = from?.url.pathname || previous_page
})
$: post = (async resolve => {
const post_data = await get(client).getPost(data.post_id, 0, false);
if (!post_data) {
@ -49,16 +57,19 @@
{#if !error}
<header>
{#await post then post}
<h1>Post by {@html post.user.rich_name}</h1>
<nav>
<Button centered on:click={() => {goto(previous_page)}}>Back</Button>
</nav>
<img src={post.user.avatar_url} type={post.user.avatar_type} alt="" width="40" height="40" class="header-avatar" loading="lazy" decoding="async">
<h1>
Post by {@html post.user.rich_name}
</h1>
{/await}
<nav>
<Button centered>Back</Button>
</nav>
</header>
<div id="feed" role="feed">
{#await post}
<div class="throb">
<div class="loading throb">
<span>loading post...</span>
</div>
{:then post}
@ -78,11 +89,19 @@
<style>
header {
width: 100%;
height: 64px;
margin: 16px 0 8px 0;
display: flex;
flex-direction: row;
}
header .header-avatar {
width: 40px;
height: 40px;
margin: auto 0;
border-radius: 4px;
}
header h1 {
margin: auto auto auto 8px;
font-size: 1.5em;
@ -92,7 +111,7 @@
}
header nav {
margin-left: auto;
margin-right: 8px;
display: flex;
flex-direction: row;
gap: 8px;
@ -102,7 +121,7 @@
margin-bottom: 20vh;
}
.throb {
.loading {
width: 100%;
height: 80vh;
display: flex;