Make design somewhat bearable
This commit is contained in:
Leon Grünewald
parent
e02f26df51
commit
14a1267ffa
9 changed files with 53 additions and 46 deletions
|
|
@ -2,3 +2,7 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
|
@ -3,7 +3,6 @@
|
|||
import {Fa} from 'svelte-fa';
|
||||
import {onMount} from "svelte";
|
||||
|
||||
/** @type {Props} */
|
||||
let { popCount = 1 } = $props();
|
||||
let href = $state();
|
||||
let pathnameParts = $state(null);
|
||||
|
|
@ -29,9 +28,6 @@
|
|||
|
||||
</script>
|
||||
|
||||
<a {href} class="h-full aspect-square">
|
||||
<div class="flex flex-col gap-2 place-content-center">
|
||||
<Fa size={'2x'} icon={faArrowLeft} />
|
||||
<p>Back</p>
|
||||
</div>
|
||||
<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>
|
||||
|
|
@ -17,6 +17,6 @@
|
|||
loading.set(true);
|
||||
onsubmit?.(searchString, true);
|
||||
}}>
|
||||
<input class="input py-1 px-2 w-96" type="text" placeholder="Search" bind:value={searchString} />
|
||||
<button class="btn btn-md variant-filled" type="submit">Submit</button>
|
||||
<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>
|
||||
</form>
|
||||
|
|
@ -1,9 +1,9 @@
|
|||
<script>
|
||||
import {BackAppRailAnchor, GlobalSearch} from "$lib/components";
|
||||
let {onsubmit = null, back = null} = $props();
|
||||
let {onsubmit = null, back = null, class: className} = $props();
|
||||
</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}
|
||||
<BackAppRailAnchor popCount={back} />
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
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>
|
||||
<p class="text-center text-white">{post.id} {post.file.ext} {post.rating}</p>
|
||||
</div>
|
||||
</section>
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import AppSettings from './AppSettings.svelte';
|
||||
import BackAppRailAnchor from './BackAppRailAnchor.svelte';
|
||||
import BackAppRailAnchor from './BackButton.svelte';
|
||||
import GlobalSearch from './GlobalSearch.svelte';
|
||||
import ImageGrid from './ImageGrid.svelte';
|
||||
import PostMedia from './PostMedia.svelte';
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
let { children } = $props();
|
||||
</script>
|
||||
|
||||
<div class="relative h-dvh">
|
||||
<div class="bg-gray-200">
|
||||
{#if $loading}
|
||||
<p class="absolute top-0 left-0">Loading</p>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<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 { PostMedia } from '$lib/components';
|
||||
import { onMount } from 'svelte';
|
||||
|
|
@ -22,52 +22,56 @@
|
|||
});
|
||||
</script>
|
||||
|
||||
<div class="grid [grid-template-areas:'main_main_aside''footer_footer_footer']">
|
||||
<Header back={2} onsubmit={(val = '') => {
|
||||
<div class="grid [grid-template-areas:'header_header_header''main_main_aside']">
|
||||
<Header class="[grid-area:header]" back={2} onsubmit={(val = '') => {
|
||||
const queryParams = new URLSearchParams();
|
||||
queryParams.set('search', val);
|
||||
goto("/?" + queryParams.toString())
|
||||
}}></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">
|
||||
{#if post}
|
||||
<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} />
|
||||
</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} />
|
||||
<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>
|
||||
{post.fav_count}
|
||||
</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={'1x'} icon={faStar} />
|
||||
<Fa size={'1.5x'} icon={faStar} />
|
||||
</span>
|
||||
|
||||
{post.score.total}
|
||||
</button>
|
||||
<button>
|
||||
<Fa size={'1x'} icon={faCaretUp} />
|
||||
<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={faCaretUp} />
|
||||
</button>
|
||||
<button>
|
||||
<Fa size={'1x'} icon={faCaretDown} />
|
||||
<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={faCaretDown} />
|
||||
</button>
|
||||
</div>
|
||||
<div class="btn-group variant-filled rounded-none">
|
||||
<button>
|
||||
<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={() => {}}>
|
||||
<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}
|
||||
</button>
|
||||
</div>
|
||||
</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>
|
||||
<p>{post.description}</p>
|
||||
</footer>
|
||||
|
|
@ -76,16 +80,18 @@
|
|||
</div>
|
||||
</main>
|
||||
|
||||
<aside class="[grid-area-aside]">
|
||||
<aside class="[grid-area:aside]">
|
||||
{#if post}
|
||||
<div class="p-2 h-dvh">
|
||||
<div class="p-2">
|
||||
{#each tagTypes as [name, label]}
|
||||
{#if post.tags[name].length > 0}
|
||||
<div class="mb-2">
|
||||
<p class="font-bold">{label}</p>
|
||||
{#each post.tags[name] as tag}
|
||||
<p>{tag}</p>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,9 @@
|
|||
/** @type {import('tailwindcss').Config} */
|
||||
export default {
|
||||
content: ['./src/**/*.{html,js,svelte,ts}'],
|
||||
safelist: ['accent-yellow-500', 'accent-yellow-50'],
|
||||
theme: {
|
||||
extend: {}
|
||||
},
|
||||
plugins: []
|
||||
plugins: [],
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in a new issue