dhalucario/esix-client
1
0
Fork 0
Code Activity

Fix up post view some more

Browse source
This commit is contained in:
Leon Grünewald 2024-10-24 01:06:27 +02:00
parent 4b3f9e1736
commit bd562988fe
1 changed files with 52 additions and 56 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
src/routes/posts/[post_id]/+page.svelte
View file

@ -1,19 +1,16 @@
<script> <script>
import {faStar, faCaretUp, faCaretDown, faHeart, faCopy} from '@fortawesome/free-solid-svg-icons'; import { faStar, faCaretUp, faCaretDown, faHeart, faCopy } from '@fortawesome/free-solid-svg-icons';
import { Fa } from 'svelte-fa'; import { Fa } from 'svelte-fa';
import { PostMedia } from '$lib/components'; import { PostMedia, Header } from '$lib/components';
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import { TAG_TYPES } from '$lib/Tags'; import { TAG_TYPES } from '$lib/Tags';
import { invoke } from '@tauri-apps/api/core'; import { invoke } from '@tauri-apps/api/core';
import Header from "$lib/components/Header.svelte"; import { goto } from "$app/navigation";
import {goto} from "$app/navigation"; import { loading } from "$lib/stores.js";
import {loading} from "$lib/stores.js";
let { data } = $props(); let { data } = $props();
const tagTypes = Object.entries(TAG_TYPES);
/** @type any|null */
let post = $state(null); let post = $state(null);
const tagTypes = Object.entries(TAG_TYPES);
onMount(async () => { onMount(async () => {
loading.set(true); loading.set(true);
@ -29,12 +26,11 @@
goto("/?" + queryParams.toString()) goto("/?" + queryParams.toString())
}}></Header> }}></Header>
<main clasS="[grid-area:main]"> <main class="[grid-area:main]">
<div class="container mx-auto flex flex-col items-center justify-center">
{#if post} {#if post}
<div class="card mb-4 flex flex-col"> <div class="flex flex-col">
<section class="flex flex-col place-items-center bg-white"> <section class="flex flex-col place-items-center bg-white">
<PostMedia {post} /> <PostMedia class="object-contain" {post} />
</section> </section>
<section class="flex flex-row justify-between bg-black"> <section class="flex flex-row justify-between bg-black">
<div class="flex flex-row px-2 gap-2"> <div class="flex flex-row px-2 gap-2">
@ -63,7 +59,7 @@
</div> </div>
<div class="flex flex-row px-2 gap-2"> <div class="flex flex-row px-2 gap-2">
<button class="py-2 px-3 flex flex-row place-items-center text-white hover:text-black hover:bg-white" <button class="py-2 px-3 flex flex-row place-items-center text-white hover:text-black hover:bg-white"
onclick={() => {}}> onclick={async () => {await navigator.clipboard.writeText(`https://e621.net/posts/${post.id}`)}}>
<Fa size={'1.5x'} icon={faCopy} /> <Fa size={'1.5x'} icon={faCopy} />
</button> </button>
<button class="py-2 px-3 flex flex-row place-items-center text-white hover:text-black hover:bg-white"> <button class="py-2 px-3 flex flex-row place-items-center text-white hover:text-black hover:bg-white">
@ -73,11 +69,11 @@
</section> </section>
<footer class="card-footer py-4 px-2"> <footer class="card-footer py-4 px-2">
<h3 class="font-bold mb-2" class:line-through={post.description === ''} >Description</h3> <h3 class="font-bold mb-2" class:line-through={post.description === ''} >Description</h3>
<p>{post.description}</p> <p class="text-wrap">{post.description}</p>
<!--<pre>{JSON.stringify(post, null, 4)}</pre>-->
</footer> </footer>
</div> </div>
{/if} {/if}
</div>
</main> </main>
<aside class="[grid-area:aside]"> <aside class="[grid-area:aside]">