From b55f6e25439e1dd7c7ee2906936d75d7c76183b3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Leon=20Gr=C3=BCnewald?=
 <10533763+dhalucario@users.noreply.github.com>
Date: Sat, 9 Nov 2024 00:56:04 +0100
Subject: [PATCH] WIP UI

---
 src/lib/components/AppSettings.svelte   |  1 -
 src/lib/components/BackButton.svelte    |  4 ++--
 src/lib/components/GlobalSearch.svelte  |  4 ++--
 src/lib/components/Header.svelte        | 21 +++++++++++++-------
 src/lib/components/PostMedia.svelte     | 11 +++++++++--
 src/lib/components/index.js             |  4 ++--
 src/routes/posts/[post_id]/+page.svelte | 26 ++++++++++++-------------
 src/routes/settings/+page.svelte        | 14 +++++++++++--
 8 files changed, 53 insertions(+), 32 deletions(-)

diff --git a/src/lib/components/AppSettings.svelte b/src/lib/components/AppSettings.svelte
index b81b056..7ce1332 100644
--- a/src/lib/components/AppSettings.svelte
+++ b/src/lib/components/AppSettings.svelte
@@ -1,5 +1,4 @@
 <script>
-    import { RangeSlider, Tab, TabGroup, InputChip, SlideToggle } from '@skeletonlabs/skeleton';
     import useSettings from '$lib/useSettings.svelte.js';
     const settings = useSettings();
 
diff --git a/src/lib/components/BackButton.svelte b/src/lib/components/BackButton.svelte
index 87ef2c2..6c383b8 100644
--- a/src/lib/components/BackButton.svelte
+++ b/src/lib/components/BackButton.svelte
@@ -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>
diff --git a/src/lib/components/GlobalSearch.svelte b/src/lib/components/GlobalSearch.svelte
index cca0f9c..b567125 100644
--- a/src/lib/components/GlobalSearch.svelte
+++ b/src/lib/components/GlobalSearch.svelte
@@ -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>
\ No newline at end of file
diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte
index 9d93230..5c9c4ad 100644
--- a/src/lib/components/Header.svelte
+++ b/src/lib/components/Header.svelte
@@ -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>
diff --git a/src/lib/components/PostMedia.svelte b/src/lib/components/PostMedia.svelte
index 2c47e1f..9aa14a6 100644
--- a/src/lib/components/PostMedia.svelte
+++ b/src/lib/components/PostMedia.svelte
@@ -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}
diff --git a/src/lib/components/index.js b/src/lib/components/index.js
index b2741cd..b891313 100644
--- a/src/lib/components/index.js
+++ b/src/lib/components/index.js
@@ -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,
diff --git a/src/routes/posts/[post_id]/+page.svelte b/src/routes/posts/[post_id]/+page.svelte
index 101d910..5a109d7 100644
--- a/src/routes/posts/[post_id]/+page.svelte
+++ b/src/routes/posts/[post_id]/+page.svelte
@@ -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>
                             &nbsp;
                             <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>
                             &nbsp;
                             {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">
diff --git a/src/routes/settings/+page.svelte b/src/routes/settings/+page.svelte
index 7695318..afa8900 100644
--- a/src/routes/settings/+page.svelte
+++ b/src/routes/settings/+page.svelte
@@ -1,2 +1,12 @@
-<script></script>
-<div></div>
\ No newline at end of file
+<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>
\ No newline at end of file