dhalucario/esix-client
1
0
Fork 0
Code Activity

Compare commits

base: dhalucario:14a1267ffa447d52fa1dfaa8be7963915fa66e51
Branches Tags
dhalucario:main
...
compare: dhalucario:8c5d4900618721c75b37ec6921ca8317d3d51a78
Branches Tags
dhalucario:main

8 commits
14a1267ffa ... 8c5d490061

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
9 changed files with 91 additions and 103 deletions
Show stats Expand all files Collapse all files

2
src/app.html
View file

@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
%sveltekit.head% %sveltekit.head%
</head> </head>
<body data-sveltekit-preload-data="hover" data-theme="r621"> <body data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div> <div style="display: contents">%sveltekit.body%</div>
</body> </body>
</html> </html>

12
src/app.pcss
View file

@ -5,4 +5,14 @@
* { * {
box-sizing: border-box; box-sizing: border-box;
} }
body {
margin: 0;
padding: 0;
}
img {
width: 100%;
margin: 0 auto;
}

8
src/lib/components/PostMedia.svelte
View file

@ -8,17 +8,17 @@
*/ */
/** @type {Props} */ /** @type {Props} */
let { post = null } = $props(); let { post = null, class: className} = $props();
</script> </script>
{#if post?.preview?.has} {#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} {:else}
{#if ['webm', 'mp4'].includes(post.file.ext)} {#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} /> <source src={post.file.url} />
</video> </video>
{:else} {: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}
{/if} {/if}

14
src/lib/settings.js
View file

@ -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);

6
src/lib/useSettings.svelte.js
View file

@ -1,13 +1,9 @@
import {onMount} from "svelte"; import {onMount} from "svelte";
function initFromLocalStorage(storageKey, initalValue = null) {
return window.localStorage.getItem(storageKey) ?? initalValue;
}
export default function useSettings() { export default function useSettings() {
let lastSearch = $state(null), let lastSearch = $state(null),
imageGridColumns = $state(6), imageGridColumns = $state(6),
limitImageHeight = $state(false), limitImageHeight = $state(true),
postGridPreviewQuality = $state('preview'), postGridPreviewQuality = $state('preview'),
blacklist = $state([ blacklist = $state([
'gore', 'gore',

29
src/routes/+layout.svelte
View file

@ -1,18 +1,29 @@
<script> <script>
import '../app.pcss'; import '../app.pcss';
import { loading } from "$lib/stores.js"; import { loading } from '$lib/stores.js';
/** import { Fa } from 'svelte-fa';
* @typedef {Object} Props import { faSpinner } from '@fortawesome/free-solid-svg-icons';
* @property {import('svelte').Snippet} [children]
*/
/** @type {Props} */
let { children } = $props(); let { children } = $props();
</script> </script>
<div class="bg-gray-200"> <div class="bg-gray-200">
{#if $loading}
<p class="absolute top-0 left-0">Loading</p>
{/if}
{@render children?.()} {@render children?.()}
{#if $loading}
<div class="absolute bottom-4 right-4 spin">
<Fa size={'2x'} icon={faSpinner}></Fa>
</div>
{/if}
</div> </div>
<style lang="postcss">
.spin {
animation: spin 2s infinite;
}
@keyframes spin {
0% { transform: rotate(0deg) }
50% { transform: rotate(360deg) }
100% { transform: rotate(720deg) }
}
</style>

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]">

2
src/routes/settings/+page.svelte Normal file
View file

@ -0,0 +1,2 @@
<script></script>
<div></div>

13
src/styles.css
View file

@ -1,13 +0,0 @@
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
img {
width: 100%;
margin: 0 auto;
}