mirror of
https://github.com/Damillora/Shioriko.git
synced 2024-11-25 13:37:32 +00:00
feat: some adjustments to frontend
This commit is contained in:
parent
36db313d33
commit
316e52cb72
@ -18,7 +18,7 @@
|
|||||||
|
|
||||||
const getData = async () => {
|
const getData = async () => {
|
||||||
form.source_url = post.source_url;
|
form.source_url = post.source_url;
|
||||||
form.tags = post.tags;
|
form.tags = post.tags.map(x => x.tagType+":"+x.tagName);
|
||||||
};
|
};
|
||||||
|
|
||||||
const onTagChange = (value) => {
|
const onTagChange = (value) => {
|
||||||
@ -47,7 +47,29 @@
|
|||||||
<p class="panel-heading">Edit Post</p>
|
<p class="panel-heading">Edit Post</p>
|
||||||
<div class="panel-block column">
|
<div class="panel-block column">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<label for="source" class="label">Source URL</label>
|
<strong>Uploader:</strong>
|
||||||
|
</div>
|
||||||
|
<div class="row">{post.uploader}</div>
|
||||||
|
</div>
|
||||||
|
<div class="panel-block column">
|
||||||
|
<div class="row">
|
||||||
|
<strong>Original:</strong>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<a href={post.image_path}>Image</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="panel-block column">
|
||||||
|
<div class="row">
|
||||||
|
<strong>Dimensions:</strong>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
{post.width}x{post.height}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="panel-block column">
|
||||||
|
<div class="row">
|
||||||
|
<label for="source" class="label">Source URL:</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="field">
|
<div class="field">
|
||||||
@ -65,7 +87,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="panel-block column">
|
<div class="panel-block column">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<label for="tags" class="label">Tags</label>
|
<label for="tags" class="label">Tags:</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="field">
|
<div class="field">
|
||||||
|
|||||||
@ -7,7 +7,8 @@
|
|||||||
let tagType = tag.split(":")[0] ?? "";
|
let tagType = tag.split(":")[0] ?? "";
|
||||||
let tagName = tag.split(":")[1] ?? "";
|
let tagName = tag.split(":")[1] ?? "";
|
||||||
let tagDisplay = tagName.split("_").join(" ");
|
let tagDisplay = tagName.split("_").join(" ");
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Link to="/posts?tags={tagName}">{tagDisplay} <span class="is-pulled-right">{num}</span></Link>
|
<Link to="/posts?tags={tagName}"
|
||||||
|
>{tagDisplay} <span class="is-pulled-right">{num}</span></Link
|
||||||
|
>
|
||||||
|
|||||||
@ -21,14 +21,6 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="row">{post.uploader}</div>
|
<div class="row">{post.uploader}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="panel-block column">
|
|
||||||
<div class="row">
|
|
||||||
<strong>Source URL:</strong>
|
|
||||||
</div>
|
|
||||||
<div class="row">
|
|
||||||
<a href={post.source_url}>{trimUrl(post.source_url)}</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="panel-block column">
|
<div class="panel-block column">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<strong>Original:</strong>
|
<strong>Original:</strong>
|
||||||
@ -45,6 +37,14 @@
|
|||||||
{post.width}x{post.height}
|
{post.width}x{post.height}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="panel-block column">
|
||||||
|
<div class="row">
|
||||||
|
<strong>Source URL:</strong>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<a href={post.source_url}>{trimUrl(post.source_url)}</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<div class="panel-block column">
|
<div class="panel-block column">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<p><strong>Tags:</strong></p>
|
<p><strong>Tags:</strong></p>
|
||||||
|
|||||||
@ -1,9 +1,54 @@
|
|||||||
<script>
|
<script>
|
||||||
|
import Tags from "svelte-tags-input";
|
||||||
|
import { getTagAutocomplete } from "../api.js";
|
||||||
|
import { navigate } from "svelte-routing";
|
||||||
|
|
||||||
|
let searchTerms = [];
|
||||||
|
|
||||||
|
const onTagChange = (value) => {
|
||||||
|
searchTerms = value.detail.tags;
|
||||||
|
};
|
||||||
|
|
||||||
|
const onAutocomplete = async () => {
|
||||||
|
const list = await getTagAutocomplete();
|
||||||
|
return list;
|
||||||
|
};
|
||||||
|
|
||||||
|
const onSearch = (i) => {
|
||||||
|
if (searchTerms.length > 0) {
|
||||||
|
navigate(`/posts?tags=${searchTerms.join("+")}`);
|
||||||
|
} else {
|
||||||
|
navigate(`/posts`);
|
||||||
|
}
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<section class="hero is-primary is-medium">
|
<section class="hero is-small">
|
||||||
<div class="hero-body">
|
<div class="hero-body">
|
||||||
|
<div class="container has-text-centered">
|
||||||
<p class="title">Shioriko</p>
|
<p class="title">Shioriko</p>
|
||||||
<p class="subtitle">Booru-style gallery written in Go and Svelte</p>
|
<p class="subtitle">Booru-style gallery written in Go and Svelte</p>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="hero-foot">
|
||||||
|
<div class="container has-text-centered">
|
||||||
|
<form on:submit|preventDefault={onSearch}>
|
||||||
|
<div class="field has-addons">
|
||||||
|
<div class="control is-expanded">
|
||||||
|
<div class="control" id="tags">
|
||||||
|
<Tags
|
||||||
|
tags={searchTerms}
|
||||||
|
addKeys={[9, 32]}
|
||||||
|
on:tags={onTagChange}
|
||||||
|
autoComplete={onAutocomplete}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="control">
|
||||||
|
<button type="submit" class="button is-primary"> Search </button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
@ -24,6 +24,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
<section class="section">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<form on:submit|preventDefault={doLogin}>
|
<form on:submit|preventDefault={doLogin}>
|
||||||
<div class="field">
|
<div class="field">
|
||||||
@ -64,3 +65,4 @@
|
|||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
</section>
|
||||||
|
|||||||
@ -2,7 +2,6 @@
|
|||||||
import { onMount } from "svelte";
|
import { onMount } from "svelte";
|
||||||
import { getPostSearchTag, getTagAutocomplete } from "../api.js";
|
import { getPostSearchTag, getTagAutocomplete } from "../api.js";
|
||||||
import { Link, navigate } from "svelte-routing";
|
import { Link, navigate } from "svelte-routing";
|
||||||
import InfiniteScroll from "svelte-infinite-scroll";
|
|
||||||
import TagLinkNumbered from "../TagLinkNumbered.svelte";
|
import TagLinkNumbered from "../TagLinkNumbered.svelte";
|
||||||
import queryString from "query-string";
|
import queryString from "query-string";
|
||||||
import Tags from "svelte-tags-input";
|
import Tags from "svelte-tags-input";
|
||||||
@ -17,6 +16,7 @@
|
|||||||
let totalPages = 1;
|
let totalPages = 1;
|
||||||
let pagination = [];
|
let pagination = [];
|
||||||
let posts = [];
|
let posts = [];
|
||||||
|
let postCount = 0;
|
||||||
let tags = [];
|
let tags = [];
|
||||||
let categorizedTags = {};
|
let categorizedTags = {};
|
||||||
|
|
||||||
@ -26,11 +26,13 @@
|
|||||||
posts = data.posts;
|
posts = data.posts;
|
||||||
tags = data.tags.sort((a, b) => b.postCount - a.postCount);
|
tags = data.tags.sort((a, b) => b.postCount - a.postCount);
|
||||||
totalPages = data.totalPage;
|
totalPages = data.totalPage;
|
||||||
|
postCount = data.postCount;
|
||||||
pagination = paginate(page, totalPages);
|
pagination = paginate(page, totalPages);
|
||||||
} else {
|
} else {
|
||||||
posts = [];
|
posts = [];
|
||||||
tags = [];
|
tags = [];
|
||||||
totalPages = 0;
|
totalPages = 0;
|
||||||
|
postCount = 0;
|
||||||
pagination = paginate(page, totalPages);
|
pagination = paginate(page, totalPages);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
@ -65,13 +67,18 @@
|
|||||||
};
|
};
|
||||||
|
|
||||||
const changePage = (i) => {
|
const changePage = (i) => {
|
||||||
|
if (i >= 1 && i <= totalPages) {
|
||||||
page = i;
|
page = i;
|
||||||
getData();
|
getData();
|
||||||
}
|
}
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<section class="section">
|
<section class="section">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
|
<div class="block">
|
||||||
|
<div class="columns is-multiline">
|
||||||
|
<div class="column is-full">
|
||||||
<div class="block">
|
<div class="block">
|
||||||
<form on:submit|preventDefault={onSearch}>
|
<form on:submit|preventDefault={onSearch}>
|
||||||
<div class="field has-addons">
|
<div class="field has-addons">
|
||||||
@ -86,15 +93,17 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<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>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
<div class="block">
|
</div>
|
||||||
<div class="columns">
|
|
||||||
<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-heading">Tags</div>
|
||||||
@ -105,7 +114,9 @@
|
|||||||
<li>
|
<li>
|
||||||
<TagLinkNumbered
|
<TagLinkNumbered
|
||||||
class=""
|
class=""
|
||||||
tag={tag.tagType+":"+tag.tagName}
|
tag={tag.tagType +
|
||||||
|
":" +
|
||||||
|
tag.tagName}
|
||||||
num={tag.postCount}
|
num={tag.postCount}
|
||||||
/>
|
/>
|
||||||
</li>
|
</li>
|
||||||
@ -117,6 +128,31 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="column is-two-thirds">
|
<div class="column is-two-thirds">
|
||||||
<div class="columns is-multiline">
|
<div class="columns is-multiline">
|
||||||
|
<div class="column is-full">
|
||||||
|
<div class="columns is-multiline">
|
||||||
|
{#each posts as post, i (post.id)}
|
||||||
|
<div class="column is-one-quarter">
|
||||||
|
<div class="block">
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-image">
|
||||||
|
<figure class="image">
|
||||||
|
<Link
|
||||||
|
to="/post/{post.id}"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
alt={post.id}
|
||||||
|
src={post.thumbnail_path}
|
||||||
|
/>
|
||||||
|
</Link>
|
||||||
|
</figure>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="column is-full">
|
<div class="column is-full">
|
||||||
<nav
|
<nav
|
||||||
class="pagination is-centered"
|
class="pagination is-centered"
|
||||||
@ -126,12 +162,15 @@
|
|||||||
<a
|
<a
|
||||||
href={null}
|
href={null}
|
||||||
on:click={changePage(page - 1)}
|
on:click={changePage(page - 1)}
|
||||||
class="pagination-previous">Previous</a
|
class="pagination-previous"
|
||||||
|
class:is-disabled={page == 1}>Previous</a
|
||||||
>
|
>
|
||||||
<a
|
<a
|
||||||
href={null}
|
href={null}
|
||||||
on:click={changePage(page + 1)}
|
on:click={changePage(page + 1)}
|
||||||
class="pagination-next">Next page</a
|
class="pagination-next"
|
||||||
|
class:is-disabled={page == totalPages}
|
||||||
|
>Next</a
|
||||||
>
|
>
|
||||||
<ul class="pagination-list">
|
<ul class="pagination-list">
|
||||||
{#each pagination as pageEntry}
|
{#each pagination as pageEntry}
|
||||||
@ -147,7 +186,7 @@
|
|||||||
<a
|
<a
|
||||||
href={null}
|
href={null}
|
||||||
on:click={() =>
|
on:click={() =>
|
||||||
(changePage(pageEntry))}
|
changePage(pageEntry)}
|
||||||
class="pagination-link"
|
class="pagination-link"
|
||||||
class:is-current={page ==
|
class:is-current={page ==
|
||||||
pageEntry}
|
pageEntry}
|
||||||
@ -160,39 +199,9 @@
|
|||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
<div class="column is-full">
|
|
||||||
<div class="columns is-multiline">
|
|
||||||
{#each posts as post, i (post.id)}
|
|
||||||
<div class="column is-one-third">
|
|
||||||
<div class="block">
|
|
||||||
<div class="card">
|
|
||||||
<div class="card-image">
|
|
||||||
<figure class="image">
|
|
||||||
<Link
|
|
||||||
to="/post/{post.id}"
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
alt={post.id}
|
|
||||||
src={post.thumbnail_path}
|
|
||||||
/>
|
|
||||||
</Link>
|
|
||||||
</figure>
|
|
||||||
</div>
|
|
||||||
<div class="card-content" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{/each}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
{#if page >= totalPages}
|
|
||||||
<div class="notification is-primary">
|
|
||||||
<p class="has-text-centered">End of posts</p>
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
@ -16,6 +16,7 @@
|
|||||||
|
|
||||||
<section class="section">
|
<section class="section">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
|
<h1 class="title">Tag List</h1>
|
||||||
<table class="table is-fullwidth">
|
<table class="table is-fullwidth">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
|
|||||||
@ -53,6 +53,7 @@
|
|||||||
|
|
||||||
<section class="section">
|
<section class="section">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
|
<h1 class="title">Upload Image</h1>
|
||||||
<form on:submit|preventDefault={onSubmit}>
|
<form on:submit|preventDefault={onSubmit}>
|
||||||
<div class="field">
|
<div class="field">
|
||||||
<label for="file" class="label">Image File</label>
|
<label for="file" class="label">Image File</label>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user