gazesys/website
gazesys/website
1
0
Fork 1
Code Actions Releases 1 Activity

fix: improve layouting

Browse Source
This commit is contained in:
dusk 2024-08-23 19:15:25 +03:00
parent c951c74fde
commit d4136e8394
Signed by: dusk
SSH Key Fingerprint: SHA256:Abmvag+juovVufZTxyWY8KcVgrznxvBjQpJesv071Aw
4 changed files with 53 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/window.svelte
View File

@ -6,7 +6,7 @@
<div <div
class=" class="
flex flex-col flex flex-col
max-w-screen-md xl:max-w-screen-lg 2xl:max-w-screen-xl min-w-[30ch] lg:min-w-[40ch] w-fit h-fit max-w-screen-md xl:max-w-screen-lg 2xl:max-w-screen-xl min-w-[30ch] lg:min-w-[40ch] w-full md:w-fit h-fit
border-ralsei-white border-ridge border-8 border-t-[12px] border-ralsei-white border-ridge border-8 border-t-[12px]
bg-ralsei-black bg-ralsei-black
" "

2
src/routes/entries/+page.svelte
View File

@ -7,7 +7,7 @@
let posts: PostData[] = data.posts as PostData[]; let posts: PostData[] = data.posts as PostData[];
</script> </script>
<div class="flex flex-wrap gap-y-4 lg:mx-3 lg:my-4"> <div class="flex flex-col lg:flex-row gap-y-4 lg:mx-3 lg:my-4">
{#each posts as post, index} {#each posts as post, index}
{@const x = index % 2 === 0 ? 'lg:ml-16' : 'lg:ml-36'} {@const x = index % 2 === 0 ? 'lg:ml-16' : 'lg:ml-36'}
{@const y = index % 2 === 0 ? 'lg:mt-6' : 'lg:mt-10'} {@const y = index % 2 === 0 ? 'lg:mt-6' : 'lg:mt-10'}

2
src/routes/entries/_layout.svelte
View File

@ -11,7 +11,7 @@
<meta property="og:type" content="article" /> <meta property="og:type" content="article" />
</svelte:head> </svelte:head>
<div class="lg:mb-[8vh]"> <div class="mb-[8vh]">
<Window {title} iconUri='/icons/entry.png'> <Window {title} iconUri='/icons/entry.png'>
<div class="prose prose-ralsei max-w-[80ch]"> <div class="prose prose-ralsei max-w-[80ch]">
<slot/> <slot/>

98
src/routes/guestbook/+page.svelte
View File

@ -6,10 +6,10 @@
const hasNextPage = data.hasNext; const hasNextPage = data.hasNext;
</script> </script>
<div class="flex flex-row flex-wrap"> <div class="flex flex-col md:flex-row gap-2 md:gap-4">
<div class="fixed"> <div>
<Window title="guestbook"> <Window title="guestbook">
<div class="flex flex-col gap-4 w-[60ch]"> <div class="flex flex-col gap-4 2xl:w-[60ch]">
<p>hia, here is the guestbook if you wanna post anything :)</p> <p>hia, here is the guestbook if you wanna post anything :)</p>
<p>just be a good human bean pretty please</p> <p>just be a good human bean pretty please</p>
<form method="post"> <form method="post">
@ -56,52 +56,54 @@
</Window> </Window>
</div> </div>
<div class="grow" /> <div class="grow" />
<Window title="entries"> <div class="mb-[7vh] 2xl:mb-0">
<div class="flex flex-col gap-4 w-[60ch] max-w-[60ch]"> <Window title="entries">
{#if data.getRatelimited} <div class="flex flex-col gap-2 md:gap-4 2xl:w-[60ch]">
<p class="text-error"> {#if data.getRatelimited}
woops, looks like you are being ratelimited, try again in like half a minute :3 <p class="text-error">
</p> woops, looks like you are being ratelimited, try again in like half a minute :3
{:else if data.getError} </p>
<p class="text-error">got error trying to fetch entries, pls tell me about this</p> {:else if data.getError}
<details> <p class="text-error">got error trying to fetch entries, pls tell me about this</p>
<summary>error</summary> <details>
<p>{data.getError}</p> <summary>error</summary>
</details> <p>{data.getError}</p>
{:else} </details>
{#each data.entries as [entry_id, entry] (entry_id)}
{@const date = new Date(entry.timestamp * 1e3).toLocaleString()}
<div class="entry">
<div class="flex flex-row">
<p class="place-self-start grow text-2xl font-monospace">
#{entry_id}
</p>
<p class="justify-end self-center text-sm font-monospace">{date}</p>
</div>
<p class="text-lg ml-0.5">{entry.content}</p>
<p class="place-self-end text-sm font-monospace">--- posted by {entry.author}</p>
</div>
{:else} {:else}
<p>looks like there are no entries :(</p> {#each data.entries as [entry_id, entry] (entry_id)}
{/each} {@const date = new Date(entry.timestamp * 1e3).toLocaleString()}
{/if} <div class="entry">
{#if hasPreviousPage || hasNextPage} <div class="flex flex-row">
<div class="flex flex-row w-full justify-center items-center font-monospace"> <p class="place-self-start grow text-2xl font-monospace">
{#if hasPreviousPage} #{entry_id}
<a href="/guestbook/?page={data.entries.length < 0 ? data.page - 1 : 1}" </p>
>&lt;&lt; previous</a <p class="justify-end self-center text-sm font-monospace">{date}</p>
> </div>
{/if} <p class="text-lg ml-0.5">{entry.content}</p>
{#if hasNextPage && hasPreviousPage} <p class="place-self-end text-sm font-monospace">--- posted by {entry.author}</p>
<div class="w-1/12" /> </div>
{/if} {:else}
{#if hasNextPage} <p>looks like there are no entries :(</p>
<a href="/guestbook/?page={data.page + 1}">next &gt;&gt;</a> {/each}
{/if} {/if}
</div> {#if hasPreviousPage || hasNextPage}
{/if} <div class="flex flex-row w-full justify-center items-center font-monospace">
</div> {#if hasPreviousPage}
</Window> <a href="/guestbook/?page={data.entries.length < 0 ? data.page - 1 : 1}"
>&lt;&lt; previous</a
>
{/if}
{#if hasNextPage && hasPreviousPage}
<div class="w-1/12" />
{/if}
{#if hasNextPage}
<a href="/guestbook/?page={data.page + 1}">next &gt;&gt;</a>
{/if}
</div>
{/if}
</div>
</Window>
</div>
</div> </div>
<style lang="postcss"> <style lang="postcss">