WIP UI
This commit is contained in:
Leon Grünewald
parent
8c5d490061
commit
b55f6e2543
8 changed files with 53 additions and 32 deletions
|
|
@ -1,5 +1,4 @@
|
|||
<script>
|
||||
import { RangeSlider, Tab, TabGroup, InputChip, SlideToggle } from '@skeletonlabs/skeleton';
|
||||
import useSettings from '$lib/useSettings.svelte.js';
|
||||
const settings = useSettings();
|
||||
|
||||
|
|
|
|||
|
|
@ -28,6 +28,6 @@
|
|||
|
||||
</script>
|
||||
|
||||
<a {href} class="h-full flex flex-row aspect-square place-content-center justify-center items-center">
|
||||
<Fa color="white" size={'2x'} icon={faArrowLeft} />
|
||||
<a {href} class="flex flex-row aspect-square place-content-center justify-center items-center bg-gray-600 h-10">
|
||||
<Fa color="white" size={'1.5x'} icon={faArrowLeft} />
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -17,6 +17,6 @@
|
|||
loading.set(true);
|
||||
onsubmit?.(searchString, true);
|
||||
}}>
|
||||
<input class="h-10 p-2" type="text" placeholder="Search" bind:value={searchString} />
|
||||
<button class="h-10 p-2 text-white bg-gray-600" type="submit">Submit</button>
|
||||
<input class="h-10 p-2" type="text" placeholder="tags" bind:value={searchString} />
|
||||
<button class="h-10 p-2 text-white bg-gray-600" type="submit">Search</button>
|
||||
</form>
|
||||
|
|
@ -1,13 +1,20 @@
|
|||
<script>
|
||||
import {BackAppRailAnchor, GlobalSearch} from "$lib/components";
|
||||
let {onsubmit = null, back = null, class: className} = $props();
|
||||
import {BackButton, GlobalSearch} from "$lib/components";
|
||||
import {faArrowLeft, faCogs} from "@fortawesome/free-solid-svg-icons";
|
||||
import {Fa} from "svelte-fa";
|
||||
let {onsubmit = null, back = null, class: className, showSearch = true} = $props();
|
||||
</script>
|
||||
|
||||
<header class="sticky w-full top-0 flex bg-gray-800 py-2 px-4 gap-1 {className}">
|
||||
<header class="absolute w-full top-0 flex bg-transparent py-2 px-4 gap-1 {className}">
|
||||
{#if back}
|
||||
<BackAppRailAnchor popCount={back} />
|
||||
<BackButton popCount={back} />
|
||||
{/if}
|
||||
<GlobalSearch onsubmit={(val = '', explicitRefresh = false) => {
|
||||
onsubmit?.(val, explicitRefresh);
|
||||
}} />
|
||||
{#if showSearch}
|
||||
<GlobalSearch onsubmit={(val = '', explicitRefresh = false) => {
|
||||
onsubmit?.(val, explicitRefresh);
|
||||
}} />
|
||||
{/if}
|
||||
<a href="/settings" class="flex flex-row aspect-square place-content-center justify-center items-center bg-gray-600 h-10">
|
||||
<Fa color="white" size={'1.5x'} icon={faCogs} />
|
||||
</a>
|
||||
</header>
|
||||
|
|
|
|||
|
|
@ -9,16 +9,23 @@
|
|||
|
||||
/** @type {Props} */
|
||||
let { post = null, class: className} = $props();
|
||||
let elemRef;
|
||||
</script>
|
||||
|
||||
{#if post?.preview?.has}
|
||||
<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} class={className} controls playsinline>
|
||||
<video class={className} controls playsinline onclick={async e => {
|
||||
e.preventDefault();
|
||||
await e.currentTarget.requestFullscreen();
|
||||
}}>
|
||||
<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={className} src={post.file.url} alt={`Post ${post.id}`} onclick={async e => {
|
||||
e.preventDefault();
|
||||
await e.currentTarget.requestFullscreen();
|
||||
}}/>
|
||||
{/if}
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import AppSettings from './AppSettings.svelte';
|
||||
import BackAppRailAnchor from './BackButton.svelte';
|
||||
import BackButton from './BackButton.svelte';
|
||||
import GlobalSearch from './GlobalSearch.svelte';
|
||||
import ImageGrid from './ImageGrid.svelte';
|
||||
import PostMedia from './PostMedia.svelte';
|
||||
|
|
@ -7,7 +7,7 @@ import Header from './Header.svelte';
|
|||
|
||||
export {
|
||||
AppSettings,
|
||||
BackAppRailAnchor,
|
||||
BackButton,
|
||||
GlobalSearch,
|
||||
ImageGrid,
|
||||
PostMedia,
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
</script>
|
||||
|
||||
<div class="grid [grid-template-areas:'header_header_header''main_main_aside']">
|
||||
<Header class="[grid-area:header]" back={2} onsubmit={(val = '') => {
|
||||
<Header class="[grid-area:header]" back={2} showSearch={false} onsubmit={(val = '') => {
|
||||
const queryParams = new URLSearchParams();
|
||||
queryParams.set('search', val);
|
||||
goto("/?" + queryParams.toString())
|
||||
|
|
@ -29,24 +29,22 @@
|
|||
<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>
|
||||
<PostMedia class="max-h-[95vh] w-auto" {post} />
|
||||
<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 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>
|
||||
{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>
|
||||
<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>
|
||||
|
|
@ -59,7 +57,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={async () => {await navigator.clipboard.writeText(`https://e621.net/posts/${post.id}`)}}>
|
||||
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">
|
||||
|
|
|
|||
|
|
@ -1,2 +1,12 @@
|
|||
<script></script>
|
||||
<div></div>
|
||||
<script>
|
||||
import {goto} from "$app/navigation";
|
||||
import {Header} from "$lib/components/index.js";
|
||||
</script>
|
||||
|
||||
<div class="grid [grid-template-areas:'header_header_header''main_main_aside']">
|
||||
<Header class="[grid-area:header]" back={2} showSearch={false} onsubmit={(val = '') => {
|
||||
const queryParams = new URLSearchParams();
|
||||
queryParams.set('search', val);
|
||||
goto("/?" + queryParams.toString())
|
||||
}}></Header>
|
||||
</div>
|
||||
Loading…
Reference in a new issue