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

108
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,55 +26,54 @@
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="flex flex-col">
<div class="card mb-4 flex flex-col"> <section class="flex flex-col place-items-center bg-white">
<section class="flex flex-col place-items-center bg-white"> <PostMedia class="object-contain" {post} />
<PostMedia {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"> <button class="py-2 px-3 flex flex-row place-items-center gap-1 text-white hover:text-black hover:bg-white">
<button class="py-2 px-3 flex flex-row place-items-center gap-1 text-white hover:text-black hover:bg-white"> <span class:accent-yellow-50={!post.is_favorited} class:accent-yellow-500={post.is_favorited}>
<span class:accent-yellow-50={!post.is_favorited} class:accent-yellow-500={post.is_favorited}> <Fa size={'1.5x'} icon={faHeart} />
<Fa size={'1.5x'} icon={faHeart} /> </span>
</span> &nbsp;
&nbsp; <span>
<span> {post.fav_count}
{post.fav_count} </span>
</span> </button>
</button> <button class="py-2 px-3 flex flex-row place-items-center text-white hover:text-black hover:bg-white">
<span class="text-secondary-500">
<Fa size={'1.5x'} icon={faStar} />
</span>
&nbsp;
{post.score.total}
</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">
<span class="text-secondary-500"> <Fa size={'1.5x'} icon={faCaretUp} />
<Fa size={'1.5x'} icon={faStar} /> </button>
</span> <button class="py-2 px-3 flex flex-row place-items-center text-white hover:text-black hover:bg-white">
&nbsp; <Fa size={'1.5x'} icon={faCaretDown} />
{post.score.total} </button>
</button> </div>
<button class="py-2 px-3 flex flex-row place-items-center text-white hover:text-black hover:bg-white"> <div class="flex flex-row px-2 gap-2">
<Fa size={'1.5x'} icon={faCaretUp} /> <button class="py-2 px-3 flex flex-row place-items-center text-white hover:text-black hover:bg-white"
</button> onclick={async () => {await navigator.clipboard.writeText(`https://e621.net/posts/${post.id}`)}}>
<button class="py-2 px-3 flex flex-row place-items-center text-white hover:text-black hover:bg-white"> <Fa size={'1.5x'} icon={faCopy} />
<Fa size={'1.5x'} icon={faCaretDown} /> </button>
</button> <button class="py-2 px-3 flex flex-row place-items-center text-white hover:text-black hover:bg-white">
</div> ID: {post.id}
<div class="flex flex-row px-2 gap-2"> </button>
<button class="py-2 px-3 flex flex-row place-items-center text-white hover:text-black hover:bg-white" </div>
onclick={() => {}}> </section>
<Fa size={'1.5x'} icon={faCopy} /> <footer class="card-footer py-4 px-2">
</button> <h3 class="font-bold mb-2" class:line-through={post.description === ''} >Description</h3>
<button class="py-2 px-3 flex flex-row place-items-center text-white hover:text-black hover:bg-white"> <p class="text-wrap">{post.description}</p>
ID: {post.id} <!--<pre>{JSON.stringify(post, null, 4)}</pre>-->
</button> </footer>
</div> </div>
</section> {/if}
<footer class="card-footer py-4 px-2">
<h3 class="font-bold mb-2" class:line-through={post.description === ''} >Description</h3>
<p>{post.description}</p>
</footer>
</div>
{/if}
</div>
</main> </main>
<aside class="[grid-area:aside]"> <aside class="[grid-area:aside]">