dhalucario/esix-client
1
0
Fork 0
Code Activity

Make design somewhat bearable

Browse source
This commit is contained in:
Leon Grünewald 2024-10-24 00:22:49 +02:00
parent e02f26df51
commit 14a1267ffa
9 changed files with 53 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/app.pcss
View file

@ -2,3 +2,7 @@
@tailwind base; @tailwind base;
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;
* {
box-sizing: border-box;
}

8
src/lib/components/BackAppRailAnchor.svelte → src/lib/components/BackButton.svelte
View file

@ -3,7 +3,6 @@
import {Fa} from 'svelte-fa'; import {Fa} from 'svelte-fa';
import {onMount} from "svelte"; import {onMount} from "svelte";
/** @type {Props} */
let { popCount = 1 } = $props(); let { popCount = 1 } = $props();
let href = $state(); let href = $state();
let pathnameParts = $state(null); let pathnameParts = $state(null);
@ -29,9 +28,6 @@
</script> </script>
<a {href} class="h-full aspect-square"> <a {href} class="h-full flex flex-row aspect-square place-content-center justify-center items-center">
<div class="flex flex-col gap-2 place-content-center"> <Fa color="white" size={'2x'} icon={faArrowLeft} />
<Fa size={'2x'} icon={faArrowLeft} />
<p>Back</p>
</div>
</a> </a>

4
src/lib/components/GlobalSearch.svelte
View file

@ -17,6 +17,6 @@
loading.set(true); loading.set(true);
onsubmit?.(searchString, true); onsubmit?.(searchString, true);
}}> }}>
<input class="input py-1 px-2 w-96" type="text" placeholder="Search" bind:value={searchString} /> <input class="h-10 p-2" type="text" placeholder="Search" bind:value={searchString} />
<button class="btn btn-md variant-filled" type="submit">Submit</button> <button class="h-10 p-2 text-white bg-gray-600" type="submit">Submit</button>
</form> </form>

4
src/lib/components/Header.svelte
View file

@ -1,9 +1,9 @@
<script> <script>
import {BackAppRailAnchor, GlobalSearch} from "$lib/components"; import {BackAppRailAnchor, GlobalSearch} from "$lib/components";
let {onsubmit = null, back = null} = $props(); let {onsubmit = null, back = null, class: className} = $props();
</script> </script>
<header class="top-0 fixed flex"> <header class="sticky w-full top-0 flex bg-gray-800 py-2 px-4 gap-1 {className}">
{#if back} {#if back}
<BackAppRailAnchor popCount={back} /> <BackAppRailAnchor popCount={back} />
{/if} {/if}

2
src/lib/components/ImageGrid.svelte
View file

@ -17,7 +17,7 @@
loading="lazy" loading="lazy"
alt={`Post ${post.id}`} /> alt={`Post ${post.id}`} />
<div class="bg-black px-2 py-1"> <div class="bg-black px-2 py-1">
<p class="text-center text-dark-token">{post.id} {post.file.ext} {post.rating}</p> <p class="text-center text-white">{post.id} {post.file.ext} {post.rating}</p>
</div> </div>
</section> </section>
</a> </a>

2
src/lib/components/index.js
View file

@ -1,5 +1,5 @@
import AppSettings from './AppSettings.svelte'; import AppSettings from './AppSettings.svelte';
import BackAppRailAnchor from './BackAppRailAnchor.svelte'; import BackAppRailAnchor from './BackButton.svelte';
import GlobalSearch from './GlobalSearch.svelte'; import GlobalSearch from './GlobalSearch.svelte';
import ImageGrid from './ImageGrid.svelte'; import ImageGrid from './ImageGrid.svelte';
import PostMedia from './PostMedia.svelte'; import PostMedia from './PostMedia.svelte';

2
src/routes/+layout.svelte
View file

@ -10,7 +10,7 @@
let { children } = $props(); let { children } = $props();
</script> </script>
<div class="relative h-dvh"> <div class="bg-gray-200">
{#if $loading} {#if $loading}
<p class="absolute top-0 left-0">Loading</p> <p class="absolute top-0 left-0">Loading</p>
{/if} {/if}

68
src/routes/posts/[post_id]/+page.svelte
View file

@ -1,5 +1,5 @@
<script> <script>
import { faStar, faCaretUp, faCaretDown, faHeart } 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 } from '$lib/components';
import { onMount } from 'svelte'; import { onMount } from 'svelte';
@ -22,52 +22,56 @@
}); });
</script> </script>
<div class="grid [grid-template-areas:'main_main_aside''footer_footer_footer']"> <div class="grid [grid-template-areas:'header_header_header''main_main_aside']">
<Header back={2} onsubmit={(val = '') => { <Header class="[grid-area:header]" back={2} onsubmit={(val = '') => {
const queryParams = new URLSearchParams(); const queryParams = new URLSearchParams();
queryParams.set('search', val); queryParams.set('search', val);
goto("/?" + queryParams.toString()) goto("/?" + queryParams.toString())
}}></Header> }}></Header>
<main clasS="h-screen [grid-area-main]"> <main clasS="[grid-area:main]">
<div class="container mx-auto flex flex-col items-center justify-center"> <div class="container mx-auto flex flex-col items-center justify-center">
{#if post} {#if post}
<div class="card mb-4 flex flex-col"> <div class="card mb-4 flex flex-col">
<section class="flex flex-col place-items-center"> <section class="flex flex-col place-items-center bg-white">
<PostMedia {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="btn-group variant-filled rounded-none"> <div class="flex flex-row px-2 gap-2">
<button> <button class="py-2 px-3 flex flex-row place-items-center gap-1 text-white hover:text-black hover:bg-white">
<span class:text-primary-500={!post.is_favorited} class:text-secondary-500={post.is_favorited}> <span class:accent-yellow-50={!post.is_favorited} class:accent-yellow-500={post.is_favorited}>
<Fa size={'1x'} 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> <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"> <span class="text-secondary-500">
<Fa size={'1x'} icon={faStar} /> <Fa size={'1.5x'} icon={faStar} />
</span> </span>
&nbsp; &nbsp;
{post.score.total} {post.score.total}
</button> </button>
<button> <button class="py-2 px-3 flex flex-row place-items-center text-white hover:text-black hover:bg-white">
<Fa size={'1x'} icon={faCaretUp} /> <Fa size={'1.5x'} icon={faCaretUp} />
</button> </button>
<button> <button class="py-2 px-3 flex flex-row place-items-center text-white hover:text-black hover:bg-white">
<Fa size={'1x'} icon={faCaretDown} /> <Fa size={'1.5x'} icon={faCaretDown} />
</button> </button>
</div> </div>
<div class="btn-group variant-filled rounded-none"> <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"
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} ID: {post.id}
</button> </button>
</div> </div>
</section> </section>
<footer class="card-footer pt-4"> <footer class="card-footer py-4 px-2">
<h3 class="font-bold mb-2" class:line-through={post.description === ''} >Description</h3> <h3 class="font-bold mb-2" class:line-through={post.description === ''} >Description</h3>
<p>{post.description}</p> <p>{post.description}</p>
</footer> </footer>
@ -76,16 +80,18 @@
</div> </div>
</main> </main>
<aside class="[grid-area-aside]"> <aside class="[grid-area:aside]">
{#if post} {#if post}
<div class="p-2 h-dvh"> <div class="p-2">
{#each tagTypes as [name, label]} {#each tagTypes as [name, label]}
<div class="mb-2"> {#if post.tags[name].length > 0}
<p class="font-bold">{label}</p> <div class="mb-2">
{#each post.tags[name] as tag} <p class="font-bold">{label}</p>
<p>{tag}</p> {#each post.tags[name] as tag}
{/each} <p>{tag}</p>
</div> {/each}
</div>
{/if}
{/each} {/each}
</div> </div>
{/if} {/if}

3
tailwind.config.cjs
View file

@ -1,8 +1,9 @@
/** @type {import('tailwindcss').Config} */ /** @type {import('tailwindcss').Config} */
export default { export default {
content: ['./src/**/*.{html,js,svelte,ts}'], content: ['./src/**/*.{html,js,svelte,ts}'],
safelist: ['accent-yellow-500', 'accent-yellow-50'],
theme: { theme: {
extend: {} extend: {}
}, },
plugins: [] plugins: [],
}; };