Compare commits
No commits in common. "8c5d4900618721c75b37ec6921ca8317d3d51a78" and "14a1267ffa447d52fa1dfaa8be7963915fa66e51" have entirely different histories.
8c5d490061
...
14a1267ffa
9 changed files with 102 additions and 90 deletions
|
|
@ -6,7 +6,7 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
%sveltekit.head%
|
||||
</head>
|
||||
<body data-sveltekit-preload-data="hover">
|
||||
<body data-sveltekit-preload-data="hover" data-theme="r621">
|
||||
<div style="display: contents">%sveltekit.body%</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
12
src/app.pcss
12
src/app.pcss
|
|
@ -5,14 +5,4 @@
|
|||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
|
@ -8,17 +8,17 @@
|
|||
*/
|
||||
|
||||
/** @type {Props} */
|
||||
let { post = null, class: className} = $props();
|
||||
let { post = null } = $props();
|
||||
</script>
|
||||
|
||||
{#if post?.preview?.has}
|
||||
<img class:max-h-dvh={settings.limitImageHeight} class={className} src={post.preview.url} alt={`Post ${post.id}`} />
|
||||
<img class:max-h-dvh={settings.limitImageHeight} src={post.preview.url} alt={`Post ${post.id}`} />
|
||||
{:else}
|
||||
{#if ['webm', 'mp4'].includes(post.file.ext)}
|
||||
<video class:max-h-dvh={settings.limitImageHeight} class={className} controls playsinline>
|
||||
<video class:max-h-dvh={settings.limitImageHeight} controls playsinline>
|
||||
<source src={post.file.url} />
|
||||
</video>
|
||||
{:else}
|
||||
<img class:max-h-dvh={settings.limitImageHeight} class={className} src={post.file.url} alt={`Post ${post.id}`} />
|
||||
<img class:max-h-dvh={settings.limitImageHeight} src={post.file.url} alt={`Post ${post.id}`} />
|
||||
{/if}
|
||||
{/if}
|
||||
|
|
|
|||
14
src/lib/settings.js
Normal file
14
src/lib/settings.js
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
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);
|
||||
|
|
@ -1,9 +1,13 @@
|
|||
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(true),
|
||||
limitImageHeight = $state(false),
|
||||
postGridPreviewQuality = $state('preview'),
|
||||
blacklist = $state([
|
||||
'gore',
|
||||
|
|
|
|||
|
|
@ -1,29 +1,18 @@
|
|||
<script>
|
||||
import '../app.pcss';
|
||||
import { loading } from '$lib/stores.js';
|
||||
import { Fa } from 'svelte-fa';
|
||||
import { faSpinner } from '@fortawesome/free-solid-svg-icons';
|
||||
import { loading } from "$lib/stores.js";
|
||||
/**
|
||||
* @typedef {Object} Props
|
||||
* @property {import('svelte').Snippet} [children]
|
||||
*/
|
||||
|
||||
/** @type {Props} */
|
||||
let { children } = $props();
|
||||
</script>
|
||||
|
||||
<div class="bg-gray-200">
|
||||
{@render children?.()}
|
||||
{#if $loading}
|
||||
<div class="absolute bottom-4 right-4 spin">
|
||||
<Fa size={'2x'} icon={faSpinner}></Fa>
|
||||
</div>
|
||||
<p class="absolute top-0 left-0">Loading</p>
|
||||
{/if}
|
||||
{@render children?.()}
|
||||
</div>
|
||||
|
||||
<style lang="postcss">
|
||||
.spin {
|
||||
animation: spin 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg) }
|
||||
50% { transform: rotate(360deg) }
|
||||
100% { transform: rotate(720deg) }
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,17 +1,20 @@
|
|||
<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, Header } from '$lib/components';
|
||||
import { PostMedia } from '$lib/components';
|
||||
import { onMount } from 'svelte';
|
||||
import { TAG_TYPES } from '$lib/Tags';
|
||||
import { invoke } from '@tauri-apps/api/core';
|
||||
import { goto } from "$app/navigation";
|
||||
import { loading } from "$lib/stores.js";
|
||||
import Header from "$lib/components/Header.svelte";
|
||||
import {goto} from "$app/navigation";
|
||||
import {loading} from "$lib/stores.js";
|
||||
|
||||
let { data } = $props();
|
||||
let post = $state(null);
|
||||
const tagTypes = Object.entries(TAG_TYPES);
|
||||
|
||||
/** @type any|null */
|
||||
let post = $state(null);
|
||||
|
||||
onMount(async () => {
|
||||
loading.set(true);
|
||||
post = await invoke('get_post', {postId: +data.postId});
|
||||
|
|
@ -26,54 +29,55 @@
|
|||
goto("/?" + queryParams.toString())
|
||||
}}></Header>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
{post.score.total}
|
||||
</button>
|
||||
<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>
|
||||
|
||||
<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">
|
||||
<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}
|
||||
<span class="text-secondary-500">
|
||||
<Fa size={'1.5x'} icon={faStar} />
|
||||
</span>
|
||||
|
||||
{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>
|
||||
</main>
|
||||
|
||||
<aside class="[grid-area:aside]">
|
||||
|
|
|
|||
|
|
@ -1,2 +0,0 @@
|
|||
<script></script>
|
||||
<div></div>
|
||||
13
src/styles.css
Normal file
13
src/styles.css
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
Loading…
Reference in a new issue