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

refactor: move page header to own component

Browse source
This commit is contained in:
mae taylor 2025-07-14 18:16:40 +01:00
parent 6f446fd871
commit 00277741a8
Signed by: mae
GPG key ID: 3C80D76BA7A3B9BD
3 changed files with 12 additions and 51 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/lib/ui/core/PageHeader.svelte
View file

@ -4,7 +4,9 @@
<header> <header>
<h1>{title}</h1> <h1>{title}</h1>
<slot name="icon" /> <div class="header-items">
<slot/>
</div>
</header> </header>
<style> <style>
@ -24,7 +26,7 @@
font-size: 1.5em; font-size: 1.5em;
} }
nav { header .header-items {
margin-left: auto; margin-left: auto;
display: flex; display: flex;
flex-direction: row; flex-direction: row;

32
src/routes/+page.svelte
View file

@ -7,6 +7,7 @@
import LoginForm from '$lib/ui/LoginForm.svelte'; import LoginForm from '$lib/ui/LoginForm.svelte';
import Button from '$lib/ui/Button.svelte'; import Button from '$lib/ui/Button.svelte';
import Post from '$lib/ui/post/Post.svelte'; import Post from '$lib/ui/post/Post.svelte';
import PageHeader from '../lib/ui/core/PageHeader.svelte';
const lang = Lang('en_GB'); const lang = Lang('en_GB');
@ -23,14 +24,11 @@
</script> </script>
{#if $account} {#if $account}
<header> <PageHeader title={lang.string('timeline.home')}>
<h1>{lang.string('timeline.home')}</h1>
<nav>
<Button centered active>{lang.string('timeline.home')}</Button> <Button centered active>{lang.string('timeline.home')}</Button>
<Button centered disabled>{lang.string('timeline.local')}</Button> <Button centered disabled>{lang.string('timeline.local')}</Button>
<Button centered disabled>{lang.string('timeline.federated')}</Button> <Button centered disabled>{lang.string('timeline.federated')}</Button>
</nav> </PageHeader>
</header>
<div id="feed" role="feed"> <div id="feed" role="feed">
{#if $timeline.length <= 0} {#if $timeline.length <= 0}
@ -47,30 +45,6 @@
{/if} {/if}
<style> <style>
header {
width: 100%;
height: 64px;
margin: 16px 0;
padding: 0 8px;
display: flex;
flex-direction: row;
user-select: none;
box-sizing: border-box;
}
header h1 {
font-size: 1.5em;
}
nav {
margin-left: auto;
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
}
#feed { #feed {
margin-bottom: 20vh; margin-bottom: 20vh;
} }

19
src/routes/notifications/+page.svelte
View file

@ -4,6 +4,7 @@
import { goto } from '$app/navigation'; import { goto } from '$app/navigation';
import { page } from '$app/stores'; import { page } from '$app/stores';
import Notification from '$lib/ui/Notification.svelte'; import Notification from '$lib/ui/Notification.svelte';
import PageHeader from '../../lib/ui/core/PageHeader.svelte';
import Lang from '$lib/lang'; import Lang from '$lib/lang';
const lang = Lang('en_GB'); const lang = Lang('en_GB');
@ -33,9 +34,7 @@
}); });
</script> </script>
<header> <PageHeader title={lang.string('navigation.notifications')}/>
<h1>{lang.string('navigation.notifications')}</h1>
</header>
<div class="notifications"> <div class="notifications">
{#if $notifications.length === 0} {#if $notifications.length === 0}
@ -50,20 +49,6 @@
</div> </div>
<style> <style>
header {
width: 100%;
height: 64px;
margin: 16px 0 8px 0;
padding: 0 8px;
display: flex;
flex-direction: row;
box-sizing: border-box;
}
h1 {
font-size: 1.5em;
}
.loading { .loading {
width: 100%; width: 100%;
height: 80vh; height: 80vh;