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
@ -6,3 +6,13 @@
 * {
    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 { 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";

    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,12 +26,11 @@
        goto("/?" + queryParams.toString())
    }}></Header>

-    <main clasS="[grid-area:main]">
-        <div class="container mx-auto flex flex-col items-center justify-center">
+    <main class="[grid-area:main]">
        {#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">
-                        <PostMedia {post} />
+                    <PostMedia class="object-contain" {post} />
                </section>
                <section class="flex flex-row justify-between bg-black">
                    <div class="flex flex-row px-2 gap-2">
@ -63,7 +59,7 @@
                    </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={() => {}}>
+                        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">
@ -73,11 +69,11 @@
                </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>
+                    <p class="text-wrap">{post.description}</p>
+                    <!--<pre>{JSON.stringify(post, null, 4)}</pre>-->
                </footer>
            </div>
        {/if}
-        </div>
    </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