Damillora/Shioriko
1
0
Fork 0
mirror of https://github.com/Damillora/Shioriko.git synced 2025-02-23 17:33:39 +00:00
Code Issues Projects Releases Wiki Activity

feat: overhaul posts page

Browse Source
This commit is contained in:
Damillora 2025-02-22 13:40:02 +00:00
parent 0a79956cca
commit fba053e7b1
5 changed files with 64 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
web/app/src/lib/components/ui/TagLinkNumbered.svelte
View File

@ -1,4 +1,6 @@
<script lang="ts"> <script lang="ts">
import TagTypeIndicator from "$lib/components/ui/TagTypeIndicator.svelte";
let { tag, num } = $props(); let { tag, num } = $props();
let tagType = tag.split(":")[0] ?? ""; let tagType = tag.split(":")[0] ?? "";
@ -8,12 +10,6 @@
<a href="/posts?tags={tagName}"> <a href="/posts?tags={tagName}">
{tagDisplay} {tagDisplay}
{#if tagType == "character"} <TagTypeIndicator tagType={tagType}></TagTypeIndicator>
<span class="tag is-link is-light">character</span>
{:else if tagType == "series"}
<span class="tag is-warning is-light">series</span>
{:else}
<span class="tag">{tagType}</span>
{/if}
<span class="is-pulled-right">{num}</span> <span class="is-pulled-right">{num}</span>
</a> </a>

12
web/app/src/lib/components/ui/TagTypeIndicator.svelte Normal file
View File

@ -0,0 +1,12 @@
<script>
let { tagType } = $props();
</script>
{#if tagType == "character"}
<span class="tag is-link is-light">{tagType}</span>
{:else if tagType == "series"}
<span class="tag is-warning is-light">{tagType}</span>
{:else}
<span class="tag">{tagType}</span>
{/if}

4
web/app/src/routes/+page.svelte
View File

@ -57,14 +57,18 @@
/> />
</div> </div>
</div> </div>
<div class="field">
<div class="control"> <div class="control">
<button type="submit" class="button is-primary"> <button type="submit" class="button is-primary">
Search Search
</button> </button>
</div> </div>
</div>
</form> </form>
</div> </div>
{#if postCount > 0}
<p class="block">Serving <strong>{postCount}</strong> images</p> <p class="block">Serving <strong>{postCount}</strong> images</p>
{/if}
</div> </div>
</div> </div>
</div> </div>

63
web/app/src/routes/posts/+page.svelte
View File

@ -1,5 +1,5 @@
<script lang="ts"> <script lang="ts">
import { run } from 'svelte/legacy'; import { run } from "svelte/legacy";
import { getPosts, getTag, getTagAutocomplete } from "$lib/api"; import { getPosts, getTag, getTagAutocomplete } from "$lib/api";
import TagLinkNumbered from "$lib/components/ui/TagLinkNumbered.svelte"; import TagLinkNumbered from "$lib/components/ui/TagLinkNumbered.svelte";
@ -8,8 +8,8 @@
import Tags from "svelte-tags-input"; import Tags from "svelte-tags-input";
import { paginate } from "$lib/simple-pagination"; import { paginate } from "$lib/simple-pagination";
import { afterNavigate, beforeNavigate, goto } from "$app/navigation"; import { afterNavigate, beforeNavigate, goto } from "$app/navigation";
import { page as currentPage } from '$app/stores'; import { page as currentPage } from "$app/stores";
import { onMount } from 'svelte'; import { onMount } from "svelte";
let url = $derived($currentPage.url); let url = $derived($currentPage.url);
@ -32,7 +32,7 @@
.filter( .filter(
(x) => (x) =>
!searchTerms.includes(x.tagName) && !searchTerms.includes(x.tagName) &&
!searchTerms.includes(x.tagType + ":" + x.tagName) !searchTerms.includes(x.tagType + ":" + x.tagName),
) )
.sort((a, b) => b.postCount - a.postCount); .sort((a, b) => b.postCount - a.postCount);
totalPages = data.totalPage; totalPages = data.totalPage;
@ -46,7 +46,7 @@
pagination = paginate(page, totalPages); pagination = paginate(page, totalPages);
} }
if (searchTerms.filter(x => !x.startsWith("-")).length == 1) { if (searchTerms.filter((x) => !x.startsWith("-")).length == 1) {
tagInfo = await getTag({ tag: searchTerms[0] }); tagInfo = await getTag({ tag: searchTerms[0] });
} }
}; };
@ -62,7 +62,7 @@
}; };
afterNavigate(() => { afterNavigate(() => {
tagQuery = url.searchParams.get('tags'); tagQuery = url.searchParams.get("tags");
if (tagQuery) { if (tagQuery) {
searchTerms = tagQuery.split(" "); searchTerms = tagQuery.split(" ");
} else { } else {
@ -72,7 +72,7 @@
posts = []; posts = [];
page = 1; page = 1;
getData(); getData();
}) });
const onSearch = (e) => { const onSearch = (e) => {
e.preventDefault(); e.preventDefault();
if (searchTerms.length > 0) { if (searchTerms.length > 0) {
@ -95,14 +95,14 @@
<div class="block"> <div class="block">
<div class="columns is-multiline"> <div class="columns is-multiline">
<div class="column is-full"> <div class="column is-full">
<div class="block"> <div class="block"></div>
</div>
</div> </div>
<div class="column is-one-third"> <div class="column is-one-third">
<div class="panel is-primary"> <div class="panel is-primary">
<div class="panel-heading">Tags</div>
<div class="panel-block column"> <div class="panel-block column">
<form onsubmit={onSearch}> <form onsubmit={onSearch}>
<div class="field has-addons"> <div class="field">
<div class="control is-expanded"> <div class="control is-expanded">
<div class="control" id="tags"> <div class="control" id="tags">
<Tags <Tags
@ -115,6 +115,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="field">
<div class="control"> <div class="control">
<button <button
type="submit" type="submit"
@ -123,8 +124,26 @@
Search Search
</button> </button>
</div> </div>
</div>
</form> </form>
</div> </div>
<div class="panel-block column">
<div class="menu">
<ul class="menu-list">
{#each tags as tag (tag)}
<li>
<TagLinkNumbered
class=""
tag={tag.tagType +
":" +
tag.tagName}
num={tag.postCount}
/>
</li>
{/each}
</ul>
</div>
</div>
</div> </div>
{#if tagInfo} {#if tagInfo}
<div class="panel is-info"> <div class="panel is-info">
@ -147,26 +166,6 @@
</div> </div>
</div> </div>
{/if} {/if}
<div class="panel is-primary">
<div class="panel-heading">Tags</div>
<div class="panel-block column">
<div class="menu">
<ul class="menu-list">
{#each tags as tag (tag)}
<li>
<TagLinkNumbered
class=""
tag={tag.tagType +
":" +
tag.tagName}
num={tag.postCount}
/>
</li>
{/each}
</ul>
</div>
</div>
</div>
</div> </div>
<div class="column is-two-thirds"> <div class="column is-two-thirds">
<div class="columns is-multiline"> <div class="columns is-multiline">
@ -181,13 +180,13 @@
> >
<a <a
href={null} href={null}
onclick={changePage(page - 1)} onclick={() => changePage(page - 1)}
class="pagination-previous" class="pagination-previous"
class:is-disabled={page == 1}>Previous</a class:is-disabled={page == 1}>Previous</a
> >
<a <a
href={null} href={null}
onclick={changePage(page + 1)} onclick={() => changePage(page + 1)}
class="pagination-next" class="pagination-next"
class:is-disabled={page == totalPages} class:is-disabled={page == totalPages}
>Next</a >Next</a

3
web/app/src/routes/tags/+page.svelte
View File

@ -3,6 +3,7 @@
import { getTags } from "$lib/api"; import { getTags } from "$lib/api";
import { afterNavigate } from '$app/navigation'; import { afterNavigate } from '$app/navigation';
import TagTypeIndicator from '$lib/components/ui/TagTypeIndicator.svelte';
let tags = $state([]); let tags = $state([]);
@ -34,7 +35,7 @@
<td> <td>
<a href="/tags/{tag.tagName}">{tag.tagName}</a> <a href="/tags/{tag.tagName}">{tag.tagName}</a>
</td> </td>
<td>{tag.tagType}</td> <td><TagTypeIndicator tagType={tag.tagType} /></td>
<td>{tag.postCount}</td> <td>{tag.postCount}</td>
</tr> </tr>
{/each} {/each}