simplified some UI code

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

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>

View file

@ -64,13 +64,6 @@
} }
</script> </script>
<div id="spacesocial-app">
<header>
<Navigation />
</header>
<main>
{#if logged_in === undefined} {#if logged_in === undefined}
<div class="loading throb"> <div class="loading throb">
<span>just a moment...</span> <span>just a moment...</span>
@ -111,13 +104,6 @@
<Feed /> <Feed />
{/if} {/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');
}

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>

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) {

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;
} }