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">
import TagTypeIndicator from "$lib/components/ui/TagTypeIndicator.svelte";
let { tag, num } = $props();
let tagType = tag.split(":")[0] ?? "";
@ -8,12 +10,6 @@
<a href="/posts?tags={tagName}">
{tagDisplay}
{#if tagType == "character"}
<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}
<TagTypeIndicator tagType={tagType}></TagTypeIndicator>
<span class="is-pulled-right">{num}</span>
</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 class="field">
<div class="control">
<button type="submit" class="button is-primary">
Search
</button>
</div>
</div>
</form>
</div>
{#if postCount > 0}
<p class="block">Serving <strong>{postCount}</strong> images</p>
{/if}
</div>
</div>
</div>

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

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

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

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