mirror of
https://github.com/Damillora/Shioriko.git
synced 2025-02-23 01:13:39 +00:00
feat: update looks of web app
This commit is contained in:
parent
2ab5e10549
commit
8798596e91
@ -1,6 +1,15 @@
|
||||
/* Write your global styles here, in SCSS syntax. Variables and mixins from the src/variables.scss file are available here without importing */
|
||||
@use "../node_modules/bulma/sass";
|
||||
|
||||
// Path to Bulma's sass folder
|
||||
@use "bulma/sass" with (
|
||||
$family-primary: '"Nunito", sans-serif',
|
||||
$primary: #00afcc,
|
||||
);
|
||||
// Import the Google Font
|
||||
@import url("https://fonts.googleapis.com/css?family=Nunito:400,700");
|
||||
|
||||
|
||||
// Others
|
||||
.tile.is-multiline {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
@ -9,6 +18,30 @@
|
||||
white-space: pre-line;
|
||||
}
|
||||
|
||||
.svelte-tags-input-matchs-parent {
|
||||
// Svelte Tags
|
||||
#tags .svelte-tags-input-layout {
|
||||
@extend .input;
|
||||
padding: 0;
|
||||
padding-top: var(--bulma-control-padding-vertical);
|
||||
padding-right: var(--bulma-control-padding-horizontal);
|
||||
padding-left: var(--bulma-control-padding-horizontal);
|
||||
height: auto !important;
|
||||
}
|
||||
#tags .svelte-tags-input-layout:focus-within {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
#tags .svelte-tags-input {
|
||||
padding: 0;
|
||||
margin-top: 0;
|
||||
margin-bottom: var(--bulma-control-padding-vertical);
|
||||
}
|
||||
#tags .svelte-tags-input-tag {
|
||||
@extend .tag;
|
||||
margin-top: 0;
|
||||
margin-bottom: var(--bulma-control-padding-vertical);
|
||||
margin-right: var(--bulma-control-padding-horizontal);
|
||||
}
|
||||
#tags .svelte-tags-input-matchs-parent{
|
||||
z-index: 2000;
|
||||
}
|
||||
|
||||
@ -57,7 +57,7 @@
|
||||
<div class="navbar-item">
|
||||
<div class="buttons">
|
||||
<a href="/auth/register" class="button is-primary">
|
||||
<strong>Register</strong>
|
||||
Register
|
||||
</a>
|
||||
<a href="/auth/login" class="button is-light">
|
||||
Log in
|
||||
|
||||
@ -47,9 +47,9 @@
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control">
|
||||
<button type="submit" class="button is-primary"> Search </button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control">
|
||||
<button type="submit" class="button is-primary"> Search </button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
<script lang="ts">
|
||||
import { run } from 'svelte/legacy';
|
||||
import { run } from "svelte/legacy";
|
||||
|
||||
import { onMount } from "svelte";
|
||||
import { getPost, postDelete } from "$lib/api";
|
||||
import { goto } from "$app/navigation";
|
||||
import { afterNavigate, goto } from "$app/navigation";
|
||||
import EditPostPanel from "$lib/components/panels/EditPostPanel.svelte";
|
||||
import ViewPostPanel from "$lib/components/panels/ViewPostPanel.svelte";
|
||||
|
||||
|
||||
import { page } from "$app/stores";
|
||||
const { id } = $page.params;
|
||||
|
||||
@ -51,7 +51,7 @@
|
||||
|
||||
let imagePercentage = $state("0%");
|
||||
|
||||
run(() => {
|
||||
afterNavigate(() => {
|
||||
if (post)
|
||||
imagePercentage = ((1000 * 100) / post.width).toFixed(0) + "%";
|
||||
});
|
||||
@ -87,8 +87,7 @@
|
||||
>
|
||||
<button
|
||||
class="button"
|
||||
onclick={toggleDeleteMenu}
|
||||
>Cancel</button
|
||||
onclick={toggleDeleteMenu}>Cancel</button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -7,8 +7,9 @@
|
||||
import queryString from "query-string";
|
||||
import Tags from "svelte-tags-input";
|
||||
import { paginate } from "$lib/simple-pagination";
|
||||
import { beforeNavigate, goto } from "$app/navigation";
|
||||
import { afterNavigate, beforeNavigate, goto } from "$app/navigation";
|
||||
import { page as currentPage } from '$app/stores';
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
let url = $derived($currentPage.url);
|
||||
|
||||
@ -16,7 +17,7 @@
|
||||
|
||||
let page = $state(1);
|
||||
let totalPages = $state(1);
|
||||
let pagination = $state([]);
|
||||
let pagination: string[] = $state([]);
|
||||
let posts = $state([]);
|
||||
let postCount = 0;
|
||||
let tags = $state([]);
|
||||
@ -60,7 +61,7 @@
|
||||
return list;
|
||||
};
|
||||
|
||||
run(() => {
|
||||
afterNavigate(() => {
|
||||
tagQuery = url.searchParams.get('tags');
|
||||
if (tagQuery) {
|
||||
searchTerms = tagQuery.split(" ");
|
||||
@ -71,7 +72,7 @@
|
||||
posts = [];
|
||||
page = 1;
|
||||
getData();
|
||||
});
|
||||
})
|
||||
const onSearch = (e) => {
|
||||
e.preventDefault();
|
||||
if (searchTerms.length > 0) {
|
||||
@ -95,17 +96,23 @@
|
||||
<div class="columns is-multiline">
|
||||
<div class="column is-full">
|
||||
<div class="block">
|
||||
<form onsubmit={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}
|
||||
autoCompleteFilter={false}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-one-third">
|
||||
<div class="panel is-primary">
|
||||
<div class="panel-block column">
|
||||
<form onsubmit={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}
|
||||
autoCompleteFilter={false}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control">
|
||||
@ -116,11 +123,9 @@
|
||||
Search
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-one-third">
|
||||
{#if tagInfo}
|
||||
<div class="panel is-info">
|
||||
<p class="panel-heading">
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
import { run } from 'svelte/legacy';
|
||||
|
||||
import { getTags } from "$lib/api";
|
||||
import { afterNavigate } from '$app/navigation';
|
||||
|
||||
let tags = $state([]);
|
||||
|
||||
@ -9,9 +10,10 @@
|
||||
const data = await getTags();
|
||||
tags = data;
|
||||
};
|
||||
run(() => {
|
||||
|
||||
afterNavigate(() => {
|
||||
getData();
|
||||
});
|
||||
})
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
@ -11,4 +11,14 @@ export default defineConfig({
|
||||
},
|
||||
},
|
||||
},
|
||||
server: {
|
||||
allowedHosts: ["5173.shinosawa.nanao.moe"],
|
||||
proxy: {
|
||||
// string shorthand:
|
||||
// http://localhost:5173/foo
|
||||
// -> http://localhost:4567/foo
|
||||
'/api': 'http://localhost:5050',
|
||||
'/data': 'https://booru.nanao.moe',
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user