mirror of
https://github.com/danbulant/Mangades
synced 2026-06-20 23:01:28 +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;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
|
||||
grid-template-columns: repeat(auto-fit, 11rem);
|
||||
}
|
||||
.items.list {
|
||||
grid-template-columns: 1fr;
|
||||
|
|
|
|||
|
|
@ -43,6 +43,9 @@
|
|||
</div>
|
||||
|
||||
<style>
|
||||
.item.grid {
|
||||
width: 11rem;
|
||||
}
|
||||
.list .item img {
|
||||
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 type { load } from "./+page";
|
||||
import Navbar from "$lib/components/navbar.svelte";
|
||||
export var data: Awaited<ReturnType<typeof load>>;
|
||||
|
||||
var name: string = typeof window === "undefined" ? "" : data.url.searchParams.get("search") || "";
|
||||
|
|
@ -91,7 +92,7 @@
|
|||
}
|
||||
|
||||
function open() {
|
||||
var id = name;
|
||||
var id = name.trim();
|
||||
if(id.startsWith("https://mangadex.org/title/")) {
|
||||
id = id.substring("https://mangadex.org/title/".length);
|
||||
id = id.match(/[^\/?#]*/)[0];
|
||||
|
|
@ -102,10 +103,16 @@
|
|||
goto("./" + id);
|
||||
}
|
||||
|
||||
const anilistID = data.url.hostname === "manga.danbulant.eu" ? "8374" : "8375";
|
||||
|
||||
let userDetails = isLogedIn() && getUserDetails();
|
||||
let userManga = isLogedIn() && getUserManga();
|
||||
|
||||
$: if(userDetails) {
|
||||
userDetails.then(data => {
|
||||
if(data.data.User.options.nsfwContent) {
|
||||
allowNSFW = true;
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<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." />
|
||||
</svelte:head>
|
||||
|
||||
<Navbar bind:name {open} hostname={data.url.hostname} />
|
||||
|
||||
<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()}
|
||||
<div class="nsfw">
|
||||
<input id="nsfw" type="checkbox" bind:checked={allowNSFW}>
|
||||
<label for="nsfw">
|
||||
Allow NSFW
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="flex">
|
||||
<a href="https://discord.gg/XKPbz5xRuK">Made by TechmandanCZ#3372</a>
|
||||
<ShowTypeChooser />
|
||||
<div class="flex" style="margin-top: 1rem;">
|
||||
<div>
|
||||
<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>
|
||||
|
||||
{#if result}
|
||||
|
|
@ -176,30 +168,10 @@
|
|||
</main>
|
||||
|
||||
<style lang="postcss">
|
||||
h1 {
|
||||
margin: 0;
|
||||
padding: 0.67em 0;
|
||||
}
|
||||
.nsfw > input, .nsfw > label {
|
||||
display: inline-block;
|
||||
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 {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
|
@ -210,10 +182,6 @@
|
|||
width: 100%;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.flex {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
a:not(.button) {
|
||||
color: rgb(33, 50, 87);
|
||||
text-decoration: underline;
|
||||
|
|
|
|||
|
|
@ -18,7 +18,6 @@ h1 {
|
|||
|
||||
main
|
||||
{
|
||||
max-width: 600px;
|
||||
margin: auto;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue