blisstown/campfire
blisstown/campfire
2
0
Fork 0
Code Issues 20 Pull requests Projects 1 Releases Activity

random placeholder in composer + some cleanup

Browse source
This commit is contained in:
ari melody 2024-07-07 12:22:29 +01:00
parent 08cd43bd7d
commit 1773c93617
Signed by: ari
GPG key ID: CF99829C92678188
5 changed files with 49 additions and 93 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
src/lib/ui/Composer.svelte
View file

@ -19,6 +19,15 @@
let content = "";
// let media_ids = [];
let show_cw = false;
const placeholders = [
"What's cooking, $1?",
"Speak your mind!",
"Federate something...",
"I sure love posting!",
"Another day, another $1 post!",
];
let placeholder = placeholders[Math.floor(placeholders.length * Math.random())]
.replaceAll("$1", $account.username);
const dispatch = createEventDispatcher();
@ -34,7 +43,7 @@
let new_post = await api.createPost($server.host, $app.token, postdata);
let new_post_parsed = await parsePost(new_post);
timeline.update(current => [new_post_parsed ,...current])
timeline.update(current => [new_post_parsed, ...current]);
dispatch("compose_finished")
}
</script>
@ -63,7 +72,7 @@
{#if show_cw}
<input type="text" id="" placeholder="content warning" bind:value={content_warning}/>
{/if}
<textarea placeholder="what's cooking, mae?" class="textbox" bind:value={content}></textarea>
<textarea placeholder="{placeholder}" class="textbox" bind:value={content}></textarea>
<div class="composer-footer">
<div class="actions">
<Button centered={true} disabled>

62
src/lib/ui/Feed.svelte
View file

@ -1,62 +0,0 @@
<script>
import Button from './Button.svelte';
import Post from './post/Post.svelte';
import { getTimeline } from '$lib/timeline.js';
export let posts = [];
</script>
<header>
<h1>Home</h1>
<nav>
<Button centered active>Home</Button>
<Button centered disabled>Local</Button>
<Button centered disabled>Federated</Button>
</nav>
</header>
<div id="feed" role="feed">
{#if posts.length <= 0}
<div class="loading throb">
<span>getting the feed...</span>
</div>
{/if}
{#each posts as post}
<Post post_data={post} />
{/each}
</div>
<style>
header {
width: 100%;
height: 64px;
margin: 16px 0 8px 0;
display: flex;
flex-direction: row;
}
header h1 {
font-size: 1.5em;
}
nav {
margin-left: auto;
display: flex;
flex-direction: row;
gap: 8px;
}
#feed {
margin-bottom: 20vh;
}
.loading {
width: 100%;
height: 80vh;
display: flex;
justify-content: center;
align-items: center;
font-size: 2em;
font-weight: bold;
}
</style>

3
src/lib/ui/Navigation.svelte
View file

@ -10,11 +10,10 @@
import { page } from '$app/stores';
import { get } from 'svelte/store';
import { createEventDispatcher } from 'svelte';
import { unread_notif_count, last_read_notif_id } from '$lib/notifications.js';
import { unread_notif_count } from '$lib/notifications.js';
import Logo from '$lib/../img/campfire-logo.svg';
import Button from './Button.svelte';
import Feed from './Feed.svelte';
import TimelineIcon from '../../img/icons/timeline.svg';
import NotificationsIcon from '../../img/icons/notifications.svg';

9
src/lib/ui/post/Post.svelte
View file

@ -1,5 +1,4 @@
<script>
import { play_sound } from '../../sound.js';
import { onMount } from 'svelte';
import { goto } from '$app/navigation';
@ -10,14 +9,6 @@
import ActionBar from './ActionBar.svelte';
import ReactionBar from './ReactionBar.svelte';
import ReplyIcon from '../../../img/icons/reply.svg';
import RepostIcon from '../../../img/icons/repost.svg';
import FavouriteIcon from '../../../img/icons/like.svg';
import FavouriteIconFill from '../../../img/icons/like_fill.svg';
import ReactIcon from '../../../img/icons/react.svg';
import QuoteIcon from '../../../img/icons/quote.svg';
import MoreIcon from '../../../img/icons/more.svg';
export let post_data;
export let focused = false;

55
src/routes/+page.svelte
View file

@ -5,13 +5,14 @@
import { timeline, getTimeline } from '$lib/timeline.js';
import LoginForm from '$lib/ui/LoginForm.svelte';
import Feed from '$lib/ui/Feed.svelte';
import Modal from '../lib/ui/Modal.svelte';
import Button from '$lib/ui/Button.svelte';
import Post from '$lib/ui/post/Post.svelte';
logged_in.subscribe(logged_in => {
if (logged_in) getTimeline();
});
document.addEventListener("scroll", event => {
document.addEventListener("scroll", () => {
if (get(logged_in) && get(page).url.pathname !== "/") return;
if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 2048) {
getTimeline();
@ -20,23 +21,33 @@
</script>
{#if $logged_in}
<Feed posts={$timeline} />
<header>
<h1>Home</h1>
<nav>
<Button centered active>Home</Button>
<Button centered disabled>Local</Button>
<Button centered disabled>Federated</Button>
</nav>
</header>
<div id="feed" role="feed">
{#if $timeline.length <= 0}
<div class="loading throb">
<span>getting the feed...</span>
</div>
{/if}
{#each $timeline as post}
<Post post_data={post} />
{/each}
</div>
{:else}
<LoginForm />
{/if}
<style>
a {
color: var(--accent);
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
header {
width: 100%;
height: 64px;
margin: 16px 0 8px 0;
display: flex;
flex-direction: row;
@ -46,16 +57,24 @@
font-size: 1.5em;
}
header nav {
nav {
margin-left: auto;
display: flex;
flex-direction: row;
gap: 8px;
}
:global(.app-logo) {
height: auto;
width: 320px;
margin: 8px;
#feed {
margin-bottom: 20vh;
}
.loading {
width: 100%;
height: 80vh;
display: flex;
justify-content: center;
align-items: center;
font-size: 2em;
font-weight: bold;
}
</style>