mirror of
https://github.com/danbulant/Mangades
synced 2026-07-07 12:00:36 +00:00
improved styles for home page
This commit is contained in:
Daniel Bulant
parent
ccb718c4d7
commit
72d9cd30d6
5 changed files with 147 additions and 60 deletions
|
|
@ -74,7 +74,7 @@
|
||||||
display: grid;
|
display: grid;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 1rem;
|
gap: 1rem;
|
||||||
grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
|
grid-template-columns: repeat(auto-fit, 11rem);
|
||||||
}
|
}
|
||||||
.items.list {
|
.items.list {
|
||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
|
|
|
||||||
|
|
@ -43,6 +43,9 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
.item.grid {
|
||||||
|
width: 11rem;
|
||||||
|
}
|
||||||
.list .item img {
|
.list .item img {
|
||||||
height: 10rem;
|
height: 10rem;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
117
src/lib/components/navbar.svelte
Normal file
117
src/lib/components/navbar.svelte
Normal file
|
|
@ -0,0 +1,117 @@
|
||||||
|
<script lang="ts">
|
||||||
|
import { getUserDetails, isLogedIn } from "$lib/util/anilist";
|
||||||
|
let userDetails = isLogedIn() && getUserDetails();
|
||||||
|
|
||||||
|
export var name: string;
|
||||||
|
export var open: () => void;
|
||||||
|
export var hostname: string;
|
||||||
|
|
||||||
|
function validate(id: string) {
|
||||||
|
if(id.startsWith("https://mangadex.org/title/")) {
|
||||||
|
id = id.substring("https://mangadex.org/title/".length);
|
||||||
|
id = id.match(/[^\/?#]*/)[0];
|
||||||
|
}
|
||||||
|
return /^[0-9a-f]{8}-[0-9a-f]{4}-[0-5][0-9a-f]{3}-[089ab][0-9a-f]{3}-[0-9a-f]{12}$/i.test(id)
|
||||||
|
}
|
||||||
|
|
||||||
|
$: if(validate(name)) open();
|
||||||
|
|
||||||
|
const anilistID = hostname === "manga.danbulant.eu" ? "8374" : "8375";
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="navbar flex">
|
||||||
|
<h1>Library</h1>
|
||||||
|
|
||||||
|
<div class="search">
|
||||||
|
<input type="text" placeholder="{isLogedIn() ? "Search for manga or enter URL of mangadex.org manga" : "Enter UUID or URL of mangadex.org manga"}" bind:value={name}>
|
||||||
|
<button on:click={open}>➜</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="right">
|
||||||
|
|
||||||
|
{#if isLogedIn()}
|
||||||
|
{#await userDetails then userDetails}
|
||||||
|
<a href="https://anilist.co/user/{userDetails.data.User.name}" target="_blank">
|
||||||
|
<img class="avatar" width=100 height=100 src={userDetails.data.User.avatar.medium} alt="Your ({userDetails.data.User.name}) avatar">
|
||||||
|
</a>
|
||||||
|
{/await}
|
||||||
|
{:else}
|
||||||
|
<a class="button" href='https://anilist.co/api/v2/oauth/authorize?client_id={anilistID}&response_type=token'>Login with AniList</a>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="spacer"></div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.spacer {
|
||||||
|
height: 4rem;
|
||||||
|
}
|
||||||
|
.navbar {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100vw;
|
||||||
|
height: 4rem;
|
||||||
|
background: black;
|
||||||
|
border-bottom: 1px solid gray;
|
||||||
|
gap: 1rem;
|
||||||
|
padding: 0 1rem;
|
||||||
|
}
|
||||||
|
h1 {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0.67em 0;
|
||||||
|
}
|
||||||
|
.avatar {
|
||||||
|
border-radius: 999px;
|
||||||
|
height: 4rem;
|
||||||
|
width: 4rem;
|
||||||
|
}
|
||||||
|
button {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.button {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
.search {
|
||||||
|
display: flex;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
.search input {
|
||||||
|
margin: 0;
|
||||||
|
width: min(30rem, 100vw - 18rem);
|
||||||
|
border: none;
|
||||||
|
background: none;
|
||||||
|
color: white;
|
||||||
|
outline: none;
|
||||||
|
border-bottom: 1px solid gray;
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
.search input:active, .search input:focus {
|
||||||
|
outline: none;
|
||||||
|
border-bottom-color: white;
|
||||||
|
}
|
||||||
|
.search button {
|
||||||
|
margin: 0;
|
||||||
|
border: none;
|
||||||
|
background: none;
|
||||||
|
color: white;
|
||||||
|
border-bottom: 1px solid gray;
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
.search input:active ~ button, .search input:focus ~ button {
|
||||||
|
outline: none;
|
||||||
|
border-bottom-color: white;
|
||||||
|
}
|
||||||
|
.flex {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.right {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: end;
|
||||||
|
width: 8rem;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -8,6 +8,7 @@
|
||||||
import { goto } from "$app/navigation";
|
import { goto } from "$app/navigation";
|
||||||
|
|
||||||
import type { load } from "./+page";
|
import type { load } from "./+page";
|
||||||
|
import Navbar from "$lib/components/navbar.svelte";
|
||||||
export var data: Awaited<ReturnType<typeof load>>;
|
export var data: Awaited<ReturnType<typeof load>>;
|
||||||
|
|
||||||
var name: string = typeof window === "undefined" ? "" : data.url.searchParams.get("search") || "";
|
var name: string = typeof window === "undefined" ? "" : data.url.searchParams.get("search") || "";
|
||||||
|
|
@ -91,7 +92,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
function open() {
|
function open() {
|
||||||
var id = name;
|
var id = name.trim();
|
||||||
if(id.startsWith("https://mangadex.org/title/")) {
|
if(id.startsWith("https://mangadex.org/title/")) {
|
||||||
id = id.substring("https://mangadex.org/title/".length);
|
id = id.substring("https://mangadex.org/title/".length);
|
||||||
id = id.match(/[^\/?#]*/)[0];
|
id = id.match(/[^\/?#]*/)[0];
|
||||||
|
|
@ -102,10 +103,16 @@
|
||||||
goto("./" + id);
|
goto("./" + id);
|
||||||
}
|
}
|
||||||
|
|
||||||
const anilistID = data.url.hostname === "manga.danbulant.eu" ? "8374" : "8375";
|
|
||||||
|
|
||||||
let userDetails = isLogedIn() && getUserDetails();
|
let userDetails = isLogedIn() && getUserDetails();
|
||||||
let userManga = isLogedIn() && getUserManga();
|
let userManga = isLogedIn() && getUserManga();
|
||||||
|
|
||||||
|
$: if(userDetails) {
|
||||||
|
userDetails.then(data => {
|
||||||
|
if(data.data.User.options.nsfwContent) {
|
||||||
|
allowNSFW = true;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<svelte:window on:scroll={scroll} />
|
<svelte:window on:scroll={scroll} />
|
||||||
|
|
@ -115,40 +122,25 @@
|
||||||
<meta name="description" value="Read manga from Mangadex online, or download it as EPUB or CBZ file to read it on your e-reader." />
|
<meta name="description" value="Read manga from Mangadex online, or download it as EPUB or CBZ file to read it on your e-reader." />
|
||||||
</svelte:head>
|
</svelte:head>
|
||||||
|
|
||||||
|
<Navbar bind:name {open} hostname={data.url.hostname} />
|
||||||
|
|
||||||
<main>
|
<main>
|
||||||
|
|
||||||
<h1>miniMANGADEX</h1>
|
|
||||||
|
|
||||||
<div class="flex search">
|
|
||||||
<input type="text" placeholder="{isLogedIn() ? "Search for manga or enter URL of mangadex.org manga" : "Enter UUID or URL of mangadex.org manga"}" bind:value={name}>
|
|
||||||
<button on:click={open}>Go</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex">
|
|
||||||
<a href="/random" class="button">Random</a>
|
|
||||||
{#if isLogedIn()}
|
|
||||||
{#await userDetails then userDetails}
|
|
||||||
<a href="https://anilist.co/user/{userDetails.data.User.name}" target="_blank">
|
|
||||||
<img class="avatar" width=100 height=100 src={userDetails.data.User.avatar.medium} alt="Your ({userDetails.data.User.name}) avatar">
|
|
||||||
</a>
|
|
||||||
{/await}
|
|
||||||
{:else}
|
|
||||||
<a class="button" href='https://anilist.co/api/v2/oauth/authorize?client_id={anilistID}&response_type=token'>Login with AniList</a>
|
|
||||||
{/if}
|
|
||||||
<a href="https://mangadex.org">Mangadex.org</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{#if isLogedIn()}
|
{#if isLogedIn()}
|
||||||
<div class="nsfw">
|
|
||||||
<input id="nsfw" type="checkbox" bind:checked={allowNSFW}>
|
|
||||||
<label for="nsfw">
|
|
||||||
Allow NSFW
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex">
|
<div class="flex" style="margin-top: 1rem;">
|
||||||
<a href="https://discord.gg/XKPbz5xRuK">Made by TechmandanCZ#3372</a>
|
<div>
|
||||||
<ShowTypeChooser />
|
<div class="nsfw">
|
||||||
|
<input id="nsfw" type="checkbox" bind:checked={allowNSFW}>
|
||||||
|
<label for="nsfw">
|
||||||
|
Allow NSFW
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<a href="https://discord.gg/XKPbz5xRuK">Made by TechmandanCZ#3372</a>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<a href="/random" class="button" style="width: 100%; margin-bottom: 0.4rem; display: inline-block;">Random</a>
|
||||||
|
<ShowTypeChooser />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{#if result}
|
{#if result}
|
||||||
|
|
@ -176,30 +168,10 @@
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<style lang="postcss">
|
<style lang="postcss">
|
||||||
h1 {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0.67em 0;
|
|
||||||
}
|
|
||||||
.nsfw > input, .nsfw > label {
|
.nsfw > input, .nsfw > label {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: auto;
|
width: auto;
|
||||||
}
|
}
|
||||||
.avatar {
|
|
||||||
border-radius: 999px;
|
|
||||||
height: 4rem;
|
|
||||||
width: 4rem;
|
|
||||||
}
|
|
||||||
button {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.search button {
|
|
||||||
border-top-left-radius: 0;
|
|
||||||
border-bottom-left-radius: 0;
|
|
||||||
}
|
|
||||||
.search input {
|
|
||||||
border-top-right-radius: 0;
|
|
||||||
border-bottom-right-radius: 0;
|
|
||||||
}
|
|
||||||
.flex {
|
.flex {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
|
@ -210,10 +182,6 @@
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
}
|
}
|
||||||
.flex {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
a:not(.button) {
|
a:not(.button) {
|
||||||
color: rgb(33, 50, 87);
|
color: rgb(33, 50, 87);
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
|
|
|
||||||
|
|
@ -18,7 +18,6 @@ h1 {
|
||||||
|
|
||||||
main
|
main
|
||||||
{
|
{
|
||||||
max-width: 600px;
|
|
||||||
margin: auto;
|
margin: auto;
|
||||||
padding: 0 20px;
|
padding: 0 20px;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue