blisstown/campfire
3
0
Fork 0
Code Issues 19 Pull requests Projects Releases Packages Wiki Activity Actions

simplified some UI code

Browse source
This commit is contained in:
ari melody 2024-06-29 17:27:46 +01:00
parent 45d57d5b96
commit 509a817065
Signed by: ari
GPG key ID: CF99829C92678188
7 changed files with 94 additions and 106 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -88,6 +88,8 @@
}); });
let aria_label = post.user.username + '; ' + post.text + '; ' + post.created_at; let aria_label = post.user.username + '; ' + post.text + '; ' + post.created_at;
if (post.reply && post.reply.id === undefined) console.log(post);
</script> </script>
<div class="post-container"> <div class="post-container">

20
src/routes/+layout.svelte Normal file
View file

@ -0,0 +1,20 @@
<script>
import Navigation from '$lib/ui/Navigation.svelte';
import Widgets from '$lib/ui/Widgets.svelte';
</script>
<div id="spacesocial-app">
<header>
<Navigation />
</header>
<main>
<slot></slot>
</main>
<div id="widgets">
<Widgets />
</div>
</div>

92
src/routes/+page.svelte
View file

@ -64,60 +64,46 @@
} }
</script> </script>
<div id="spacesocial-app"> {#if logged_in === undefined}
<div class="loading throb">
<span>just a moment...</span>
</div>
{:else if logged_in === false}
<form on:submit={log_in} id="login-form">
<img class="app-icon light-only" src={LogoLight} width="320px" aria-label="Space Social"/>
<img class="app-icon dark-only" src={LogoDark} width="320px" aria-label="Space Social"/>
<p>Welcome, fediverse user!</p>
<p>Please enter your instance domain to log in.</p>
<div class="input-wrapper">
<input type="text" id="host" aria-label="instance domain" class={logging_in ? "throb" : ""}>
{#if instance_url_error}
<p class="error">{instance_url_error}</p>
{/if}
</div>
<br>
<button type="submit" id="login" class={logging_in ? "disabled" : ""}>Log in</button>
<p><small>
Please note this is
<strong><em>extremely experimental software</em></strong>;
things are likely to break!
<br>
If that's all cool with you, welcome aboard!
</small></p>
<p class="form-footer">made with ❤️ by <a href="https://arimelody.me">ari melody</a>, 2024</p>
</form>
{:else}
<header> <header>
<Navigation /> <h1>Home</h1>
<nav>
<Button centered active>Home</Button>
<Button centered disabled>Local</Button>
<Button centered disabled>Federated</Button>
</nav>
</header> </header>
<main> <Feed />
{#if logged_in === undefined} {/if}
<div class="loading throb">
<span>just a moment...</span>
</div>
{:else if logged_in === false}
<form on:submit={log_in} id="login-form">
<img class="app-icon light-only" src={LogoLight} width="320px" aria-label="Space Social"/>
<img class="app-icon dark-only" src={LogoDark} width="320px" aria-label="Space Social"/>
<p>Welcome, fediverse user!</p>
<p>Please enter your instance domain to log in.</p>
<div class="input-wrapper">
<input type="text" id="host" aria-label="instance domain" class={logging_in ? "throb" : ""}>
{#if instance_url_error}
<p class="error">{instance_url_error}</p>
{/if}
</div>
<br>
<button type="submit" id="login" class={logging_in ? "disabled" : ""}>Log in</button>
<p><small>
Please note this is
<strong><em>extremely experimental software</em></strong>;
things are likely to break!
<br>
If that's all cool with you, welcome aboard!
</small></p>
<p class="form-footer">made with ❤️ by <a href="https://arimelody.me">ari melody</a>, 2024</p>
</form>
{:else}
<header>
<h1>Home</h1>
<nav>
<Button centered active>Home</Button>
<Button centered disabled>Local</Button>
<Button centered disabled>Federated</Button>
</nav>
</header>
<Feed />
{/if}
</main>
<div id="widgets">
<Widgets />
</div>
</div>
<style> <style>
form#login-form { form#login-form {
@ -237,18 +223,18 @@
font-weight: bold; font-weight: bold;
} }
main header { header {
width: 100%; width: 100%;
margin: 16px 0 8px 0; margin: 16px 0 8px 0;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
} }
main header h1 { header h1 {
font-size: 1.5em; font-size: 1.5em;
} }
main header nav { header nav {
margin-left: auto; margin-left: auto;
display: flex; display: flex;
flex-direction: row; flex-direction: row;

5
src/routes/post/+page.js Normal file
View file

@ -0,0 +1,5 @@
import { error } from '@sveltejs/kit';
export function load(event) {
error(404, 'Not Found');
}

50
src/routes/post/[id]/+layout.svelte
View file

@ -1,50 +0,0 @@
<script>
import Navigation from '$lib/ui/Navigation.svelte';
import Widgets from '$lib/ui/Widgets.svelte';
import Button from '$lib/ui/Button.svelte';
</script>
<div id="spacesocial-app">
<header>
<Navigation />
</header>
<main>
<header>
<h1>Home</h1>
<nav>
<Button centered active>Home</Button>
<Button centered disabled>Local</Button>
<Button centered disabled>Federated</Button>
</nav>
</header>
<slot></slot>
</main>
<div id="widgets">
<Widgets />
</div>
</div>
<style>
main header {
width: 100%;
margin: 16px 0 8px 0;
display: flex;
flex-direction: row;
}
main header h1 {
font-size: 1.5em;
}
main header nav {
margin-left: auto;
display: flex;
flex-direction: row;
gap: 8px;
}
</style>

3
src/routes/post/[id]/+page.js
View file

@ -3,9 +3,6 @@ import { Client } from '$lib/client/client.js';
import { parsePost } from '$lib/client/api.js'; import { parsePost } from '$lib/client/api.js';
import { get } from 'svelte/store'; import { get } from 'svelte/store';
export const prerender = true;
export const ssr = false;
export async function load({ params }) { export async function load({ params }) {
let client = get(Client.get()); let client = get(Client.get());
if (client.app && client.app.token) { if (client.app && client.app.token) {

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

@ -1,12 +1,22 @@
<script> <script>
import '$lib/app.css'; import '$lib/app.css';
import Post from '$lib/ui/post/Post.svelte'; import Post from '$lib/ui/post/Post.svelte';
import Button from '$lib/ui/Button.svelte';
export let data; export let data;
$: main_post = data.posts[0]; $: main_post = data.posts[0];
$: replies = data.posts.slice(1); $: replies = data.posts.slice(1);
</script> </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"> <div id="feed" role="feed">
{#if data.posts.length <= 0} {#if data.posts.length <= 0}
<div class="throb"> <div class="throb">
@ -24,6 +34,24 @@
</div> </div>
<style> <style>
header {
width: 100%;
margin: 16px 0 8px 0;
display: flex;
flex-direction: row;
}
header h1 {
font-size: 1.5em;
}
header nav {
margin-left: auto;
display: flex;
flex-direction: row;
gap: 8px;
}
#feed { #feed {
margin-bottom: 20vh; margin-bottom: 20vh;
} }