Add meta info bar and some more
This commit is contained in:
Leon Grünewald
parent
048c8f1380
commit
7a64df5c57
6 changed files with 68 additions and 33 deletions
|
|
@ -17,7 +17,7 @@
|
|||
{#if tabPos === 0}
|
||||
<div class="flex flex-col gap-3">
|
||||
<h3 class="h3 text-dark-token font-bold">Image</h3>
|
||||
<SlideToggle name="image-limit-height" checked={$limitImageHeight}>Limit image height</SlideToggle>
|
||||
<SlideToggle name="image-limit-height" bind:checked={$limitImageHeight}><span class="text-dark-token">Limit image height</span></SlideToggle>
|
||||
|
||||
<h3 class="h3 text-dark-token font-bold">Grid</h3>
|
||||
<div class="basis-1/2">
|
||||
|
|
|
|||
|
|
@ -11,13 +11,16 @@
|
|||
$loading = true;
|
||||
$showSearch = false
|
||||
}}>
|
||||
<section class="flex">
|
||||
<header class="card-header p-0"></header>
|
||||
<section class="flex flex-col">
|
||||
<img src={post[$postGridPreviewQuality].url}
|
||||
loading="lazy"
|
||||
alt={`Post ${post.id}`} />
|
||||
<div class="bg-black px-2 py-1">
|
||||
<p class="text-center text-dark-token">{post.id} {post.file.ext} {post.rating}</p>
|
||||
</div>
|
||||
</section>
|
||||
<footer >
|
||||
<p class="text-center">{post.id} {post.file.ext} {post.rating}</p>
|
||||
</footer>
|
||||
</a>
|
||||
{/each}
|
||||
|
|
|
|||
|
|
@ -1,19 +1,17 @@
|
|||
<script>
|
||||
import { limitImageHeight } from '$lib/settings.js';
|
||||
import { limitImageHeight } from '$lib/settings';
|
||||
|
||||
export let post = null;
|
||||
</script>
|
||||
|
||||
<div>
|
||||
{#if post?.preview?.has}
|
||||
<img class:h-dvh={$limitImageHeight} src={post.preview.url} alt={`Post ${post.id}`} />
|
||||
<img class:max-h-dvh={$limitImageHeight} src={post.preview.url} alt={`Post ${post.id}`} />
|
||||
{:else}
|
||||
{#if ['webm', 'mp4'].includes(post.file.ext)}
|
||||
<video class:h-dvh={$limitImageHeight} controls playsinline>
|
||||
<video class:max-h-dvh={$limitImageHeight} controls playsinline>
|
||||
<source src={post.file.url} />
|
||||
</video>
|
||||
{:else}
|
||||
<img class:h-dvh={$limitImageHeight} src={post.file.url} alt={`Post ${post.id}}`} />
|
||||
<img class:max-h-dvh={$limitImageHeight} src={post.file.url} alt={`Post ${post.id}`} />
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<script>
|
||||
import '../app.pcss';
|
||||
import {Drawer, initializeStores, Modal, ProgressRadial} from '@skeletonlabs/skeleton';
|
||||
import {Drawer, initializeStores, Modal, ProgressRadial, Toast} from '@skeletonlabs/skeleton';
|
||||
import {loading} from '$lib/stores';
|
||||
import {AppSettings} from '$lib/components';
|
||||
|
||||
|
|
@ -9,6 +9,7 @@
|
|||
|
||||
<div class="relative h-dvh">
|
||||
<Modal />
|
||||
<Toast />
|
||||
<Drawer bgDrawer="bg-surface-500/90" width="w-6/12" height="h-dvh" position="left">
|
||||
<div class="h-full p-4">
|
||||
<AppSettings />
|
||||
|
|
|
|||
|
|
@ -10,11 +10,12 @@
|
|||
AppRail,
|
||||
AppRailAnchor,
|
||||
AppShell,
|
||||
getDrawerStore
|
||||
getDrawerStore, getToastStore
|
||||
} from '@skeletonlabs/skeleton';
|
||||
import PostList from '$lib/PostList';
|
||||
|
||||
const drawerStore = getDrawerStore();
|
||||
const toastStore = getToastStore();
|
||||
|
||||
function onSearch() {
|
||||
$loading = true;
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
clipboard,
|
||||
getToastStore
|
||||
} from '@skeletonlabs/skeleton';
|
||||
import { faGear, faCopy } from '@fortawesome/free-solid-svg-icons';
|
||||
import {faGear, faCopy, faStar, faCaretUp, faCaretDown, faHeart} from '@fortawesome/free-solid-svg-icons';
|
||||
import { Fa } from 'svelte-fa';
|
||||
import { BackAppRailAnchor, GlobalSearch, PostMedia, SearchAppRailAnchor } from '$lib/components';
|
||||
import { onMount } from 'svelte';
|
||||
|
|
@ -67,7 +67,7 @@
|
|||
<svelte:fragment slot="trail">
|
||||
{#if post}
|
||||
<AppRailAnchor>
|
||||
<button class="w-full flex flex-col gap-2 place-content-center place-items-center" use:clipboard={`https://e621.net/posts/${post.id}`} on:click={() => toastStore.trigger({message: 'Copied link'})}>
|
||||
<button class="w-full flex flex-col gap-2 place-content-center place-items-center" on:click={() => toastStore.trigger({message: 'Copied link'})} use:clipboard={`https://e621.net/posts/${post.id}`}>
|
||||
<Fa size={'2x'} icon={faCopy} />
|
||||
Copy link
|
||||
</button>
|
||||
|
|
@ -85,21 +85,53 @@
|
|||
</svelte:fragment>
|
||||
|
||||
<svelte:fragment slot="default">
|
||||
<div class="container mx-auto flex flex-col items-center justify-center">
|
||||
{#if post}
|
||||
<div class="container mx-auto p-2">
|
||||
<div class="flex flex-row place-content-center" >
|
||||
<PostMedia post={post} />
|
||||
</div>
|
||||
<div class="card">
|
||||
<header class="px-3 pt-2">
|
||||
<p class="font-bold" class:font-red={post.description === ''}>Description</p>
|
||||
</header>
|
||||
<section class="p-3">
|
||||
<p>{post.description}</p>
|
||||
<div class="card mb-4 flex flex-col">
|
||||
<section class="flex flex-col place-items-center">
|
||||
<PostMedia {post} />
|
||||
</section>
|
||||
<section class="flex flex-row justify-between bg-black">
|
||||
<div class="btn-group variant-filled rounded-none">
|
||||
<button>
|
||||
<span class:text-primary-500={!post.is_favorited} class:text-secondary-500={post.is_favorited}>
|
||||
<Fa size={'1x'} icon={faHeart} />
|
||||
</span>
|
||||
|
||||
<span>
|
||||
{post.fav_count}
|
||||
</span>
|
||||
</button>
|
||||
<button>
|
||||
<span class="text-secondary-500">
|
||||
<Fa size={'1x'} icon={faStar} />
|
||||
</span>
|
||||
|
||||
{post.score.total}
|
||||
</button>
|
||||
<button>
|
||||
<Fa size={'1x'} icon={faCaretUp} />
|
||||
</button>
|
||||
<button>
|
||||
<Fa size={'1x'} icon={faCaretDown} />
|
||||
</button>
|
||||
</div>
|
||||
<div class="btn-group variant-filled rounded-none">
|
||||
<button>
|
||||
ID: {post.id}
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
<footer class="card-footer pt-4">
|
||||
<h3 class="font-bold mb-2" class:line-through={post.description === ''} >Description</h3>
|
||||
<p>{post.description}</p>
|
||||
<!-- <pre class="break-all">
|
||||
{JSON.stringify(post, null, 2)}
|
||||
</pre> -->
|
||||
</footer>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</svelte:fragment>
|
||||
</AppShell>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue