sudacode/mokuro-reader
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Setup flowbite

Browse Source
This commit is contained in:
ZXY101
2023-09-04 15:34:35 +02:00
parent 695c63c06b
commit 3f17b601e5
12 changed files with 1418 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app.html
View File

@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en">
<html lang="en" class="dark">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" />

4
src/app.postcss Normal file
View File

@@ -0,0 +1,4 @@
/* Write your global styles here, in PostCSS syntax */
@tailwind base;
@tailwind components;
@tailwind utilities;

22
src/lib/components/Catalog.svelte
View File

@@ -4,16 +4,20 @@
</script>
{#if $catalog && $catalog.length > 0}
<div class="container">
{#each $catalog as { manga }}
<CatalogItem {manga} />
{/each}
</div>
{#if $catalog.length > 0}
<div class="container">
{#each $catalog as { manga }}
<CatalogItem {manga} />
{/each}
</div>
{:else}
<div class="empty-state">
<p>Your catalog is currently empty.</p>
<a href="upload">Add manga</a>
</div>
{/if}
{:else}
<div class="empty-state">
<p>Your catalog is currently empty.</p>
<a href="upload">Add manga</a>
</div>
<p>Loading...</p>
{/if}
<style lang="scss">

2
src/lib/components/FileUpload.svelte
View File

@@ -36,7 +36,7 @@
}
button {
width: 500px;
width: 100%;
height: 100px;
border-radius: 12px;
border: 2px dashed $secondary-color;

93
src/lib/components/NavBar.svelte
View File

@@ -1,72 +1,43 @@
<script lang="ts" context="module">
export let navbarTitle = writable<string | undefined>(undefined);
</script>
<script lang="ts">
import { Navbar, NavBrand, Modal, Button } from 'flowbite-svelte';
import { UserSettingsSolid, UploadSolid } from 'flowbite-svelte-icons';
import FileUpload from './FileUpload.svelte';
import { processFiles } from '$lib/upload';
import { afterNavigate } from '$app/navigation';
import { page } from '$app/stores';
import { currentManga, currentVolume } from '$lib/catalog';
import SettingsIcon from '$lib/assets/svgs/settings-svgrepo-com.svg';
let promise: Promise<void>;
let modal = false;
let isReader = false;
import { writable } from 'svelte/store';
let title: string | undefined = 'Mokuro';
let back: string | undefined = undefined;
async function onUpload(files: FileList) {
promise = processFiles(files).then(() => {
modal = false;
});
}
afterNavigate(() => {
window.document.body.classList.remove('reader');
switch ($page?.route.id) {
case '/[manga]':
title = $currentManga?.[0].mokuroData.title;
back = '/';
break;
case '/[manga]/[volume]':
window.document.body.classList.add('reader');
title = $currentVolume?.volumeName;
back = '/manga';
break;
case '/upload':
title = 'Upload';
back = '/';
break;
default:
title = 'Mokuro';
back = undefined;
break;
}
isReader = $page.route.id === '/[manga]/[volume]';
});
</script>
<nav>
<div>
{#if back}
<a href={back}><h2>Back</h2></a>
<h2>{title}</h2>
{:else}
<a href="/"><h2>{title}</h2></a>
{/if}
<img src={SettingsIcon} alt="settings" />
</div>
</nav>
<div class="relative z-10">
<Navbar hidden={isReader}>
<NavBrand href="/">
<span class="text-xl font-semibold dark:text-white">Mokuro</span>
</NavBrand>
<div class="flex md:order-2 gap-5">
<UserSettingsSolid class="hover:text-cyan-300" />
<UploadSolid class="hover:text-cyan-300" on:click={() => (modal = true)} />
</div>
</Navbar>
</div>
<style lang="scss">
img {
width: 32px;
fill: #000;
}
nav {
position: relative;
width: 100%;
z-index: 1;
}
div {
background-color: $primary-color;
display: flex;
flex: 1;
justify-content: space-between;
padding: 0 10px 0 10px;
align-items: center;
z-index: 1;
}
</style>
<Modal title="Upload" bind:open={modal} outsideclose>
{#await promise}
<h2 class="justify-center flex">Loading...</h2>
{:then}
<FileUpload {onUpload} webkitdirectory>Upload directory</FileUpload>
<FileUpload {onUpload} accept=".mokuro,.zip,.cbz" multiple>Upload files</FileUpload>
{/await}
</Modal>

7
src/lib/components/Snackbar.svelte
View File

@@ -1,17 +1,16 @@
<script lang="ts">
import { snackbarStore } from '$lib/util/snackbar';
import { Toast } from 'flowbite-svelte';
import { CheckCircleSolid, FireOutline } from 'flowbite-svelte-icons';
import { fade, fly } from 'svelte/transition';
</script>
{#if $snackbarStore?.message && $snackbarStore?.visible}
<div in:fly={{ y: 200, duration: 500 }} out:fade={{ duration: 500 }}>
{$snackbarStore?.message}
</div>
<Toast position="bottom-right">{$snackbarStore?.message}</Toast>
{/if}
<style lang="scss">
div {
background-color: rgba($primary-accent-color, 0.9);
position: fixed;
right: 10px;
bottom: 10px;

1
src/routes/+layout.svelte
View File

@@ -1,4 +1,5 @@
<script lang="ts">
import '../app.postcss';
import NavBar from '$lib/components/NavBar.svelte';
import Snackbar from '$lib/components/Snackbar.svelte';
import '../app.scss';