Add class to PostMedia

Default limitImageHeight true
Delete localStore settings
2024-10-24 01:07:05 +02:00 · 2024-10-24 01:06:58 +02:00 · 2024-10-24 01:06:50 +02:00 · 2024-10-24 01:06:27 +02:00 · 2024-10-24 01:06:18 +02:00 · 2024-10-24 01:06:09 +02:00
9 changed files with 91 additions and 103 deletions
--- a/src/app.html
+++ b/src/app.html
@ -6,7 +6,7 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		%sveltekit.head%
 	</head>
-	<body data-sveltekit-preload-data="hover" data-theme="r621">
+	<body data-sveltekit-preload-data="hover">
 		<div style="display: contents">%sveltekit.body%</div>
 	</body>
 </html>
--- a/src/app.pcss
+++ b/src/app.pcss
@ -5,4 +5,14 @@

 * {
    box-sizing: border-box;
-}
+}
+
+body {
+    margin: 0;
+    padding: 0;
+}
+
+img {
+    width: 100%;
+    margin: 0 auto;
+}
--- a/src/lib/components/PostMedia.svelte
+++ b/src/lib/components/PostMedia.svelte
@ -8,17 +8,17 @@
     */

    /** @type {Props} */
-    let { post = null } = $props();
+    let { post = null, class: className} = $props();
 </script>

 {#if post?.preview?.has}
-    <img class:max-h-dvh={settings.limitImageHeight} src={post.preview.url} alt={`Post ${post.id}`} />
+    <img class:max-h-dvh={settings.limitImageHeight} class={className} src={post.preview.url} alt={`Post ${post.id}`} />
 {:else}
    {#if ['webm', 'mp4'].includes(post.file.ext)}
-        <video class:max-h-dvh={settings.limitImageHeight} controls playsinline>
+        <video class:max-h-dvh={settings.limitImageHeight} class={className} controls playsinline>
            <source src={post.file.url} />
        </video>
    {:else}
-        <img class:max-h-dvh={settings.limitImageHeight} src={post.file.url} alt={`Post ${post.id}`} />
+        <img class:max-h-dvh={settings.limitImageHeight} class={className} src={post.file.url} alt={`Post ${post.id}`} />
    {/if}
 {/if}
--- a/src/lib/settings.js
+++ b/src/lib/settings.js
@ -1,14 +0,0 @@
-import { localStorageStore } from '@skeletonlabs/skeleton';
-
-export const lastSearch = localStorageStore('lastSearch', '');
-export const imageGridColumns = localStorageStore('gridColumns', 6);
-export const postGridPreviewQuality = localStorageStore('gridPreviewQuality', 'preview');
-export const blacklist = localStorageStore('blacklist', [
-    'gore',
-    'scat',
-    'watersports',
-    'young',
-    'loli',
-    'shota',
-]);
-export const limitImageHeight = localStorageStore('limitImageHeight', false);
--- a/src/lib/useSettings.svelte.js
+++ b/src/lib/useSettings.svelte.js
@ -1,13 +1,9 @@
 import {onMount} from "svelte";

-function initFromLocalStorage(storageKey, initalValue = null) {
-    return window.localStorage.getItem(storageKey) ?? initalValue;
-}
-
 export default function useSettings() {
    let lastSearch = $state(null),
        imageGridColumns = $state(6),
-        limitImageHeight = $state(false),
+        limitImageHeight = $state(true),
        postGridPreviewQuality = $state('preview'),
        blacklist = $state([
            'gore',
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@ -1,18 +1,29 @@
 <script>
    import '../app.pcss';
-    import { loading } from "$lib/stores.js";
-    /**
-     * @typedef {Object} Props
-     * @property {import('svelte').Snippet} [children]
-     */
+    import { loading } from '$lib/stores.js';
+    import { Fa } from 'svelte-fa';
+    import { faSpinner } from '@fortawesome/free-solid-svg-icons';

-    /** @type {Props} */
    let { children } = $props();
 </script>

 <div class="bg-gray-200">
-    {#if $loading}
-        <p class="absolute top-0 left-0">Loading</p>
-    {/if}
    {@render children?.()}
+    {#if $loading}
+        <div class="absolute bottom-4 right-4 spin">
+            <Fa size={'2x'} icon={faSpinner}></Fa>
+        </div>
+    {/if}
 </div>
+
+<style lang="postcss">
+    .spin {
+        animation: spin 2s infinite;
+    }
+
+    @keyframes spin {
+        0% { transform: rotate(0deg) }
+        50% { transform: rotate(360deg) }
+        100% { transform: rotate(720deg) }
+    }
+</style>
--- a/src/routes/posts/[post_id]/+page.svelte
+++ b/src/routes/posts/[post_id]/+page.svelte
@ -1,19 +1,16 @@
 <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 { PostMedia } from '$lib/components';
+    import { PostMedia, Header } from '$lib/components';
    import { onMount } from 'svelte';
    import { TAG_TYPES } from '$lib/Tags';
    import { invoke } from '@tauri-apps/api/core';
-    import Header from "$lib/components/Header.svelte";
-    import {goto} from "$app/navigation";
-    import {loading} from "$lib/stores.js";
+    import { goto } from "$app/navigation";
+    import { loading } from "$lib/stores.js";

    let { data } = $props();
-    const tagTypes = Object.entries(TAG_TYPES);
-
-    /** @type any|null */
    let post = $state(null);
+    const tagTypes = Object.entries(TAG_TYPES);

    onMount(async () => {
        loading.set(true);
@ -29,55 +26,54 @@
        goto("/?" + queryParams.toString())
    }}></Header>

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

    <aside class="[grid-area:aside]">
--- a/src/routes/settings/+page.svelte
+++ b/src/routes/settings/+page.svelte
@ -0,0 +1,2 @@
+<script></script>
+<div></div>
--- a/src/styles.css
+++ b/src/styles.css
@ -1,13 +0,0 @@
-* {
-  box-sizing: border-box;
-}
-
-body {
-  margin: 0;
-  padding: 0;
-}
-
-img {
-  width: 100%;
-  margin: 0 auto;
-}
Author	SHA1	Message	Date
Leon Grünewald	8c5d490061	Add class to PostMedia	2024-10-24 01:07:05 +02:00
Leon Grünewald	6abd8874f2	Default limitImageHeight true	2024-10-24 01:06:58 +02:00
Leon Grünewald	e1c66136b0	Delete localStore settings	2024-10-24 01:06:50 +02:00
Leon Grünewald	bd562988fe	Fix up post view some more	2024-10-24 01:06:27 +02:00
Leon Grünewald	4b3f9e1736	Add files for settings	2024-10-24 01:06:18 +02:00
Leon Grünewald	6453abf47a	Fix loading indicator	2024-10-24 01:06:09 +02:00
Leon Grünewald	25e57790e5	Remove data-theme	2024-10-24 01:05:56 +02:00
Leon Grünewald	b5ae9a400e	Remove double styles	2024-10-24 01:05:48 +02:00