From 72d9cd30d6c9398264cca234b40d04a1edc8c8b3 Mon Sep 17 00:00:00 2001
From: Daniel Bulant <danbulant@gmail.com>
Date: Fri, 9 Dec 2022 20:52:39 +0100
Subject: [PATCH] improved styles for home page

---
 src/lib/components/anilistItems.svelte |   2 +-
 src/lib/components/item.svelte         |   3 +
 src/lib/components/navbar.svelte       | 117 +++++++++++++++++++++++++
 src/routes/+page.svelte                |  84 ++++++------------
 static/global.css                      |   1 -
 5 files changed, 147 insertions(+), 60 deletions(-)
 create mode 100644 src/lib/components/navbar.svelte

diff --git a/src/lib/components/anilistItems.svelte b/src/lib/components/anilistItems.svelte
index efd24c8..9d454f9 100644
--- a/src/lib/components/anilistItems.svelte
+++ b/src/lib/components/anilistItems.svelte
@@ -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;
diff --git a/src/lib/components/item.svelte b/src/lib/components/item.svelte
index 7afe502..7e9d188 100644
--- a/src/lib/components/item.svelte
+++ b/src/lib/components/item.svelte
@@ -43,6 +43,9 @@
 </div>
 
 <style>
+    .item.grid {
+        width: 11rem;
+    }
     .list .item img {
         height: 10rem;
     }
diff --git a/src/lib/components/navbar.svelte b/src/lib/components/navbar.svelte
new file mode 100644
index 0000000..95f7309
--- /dev/null
+++ b/src/lib/components/navbar.svelte
@@ -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>
\ No newline at end of file
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 6be5192..ab0f008 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -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;
diff --git a/static/global.css b/static/global.css
index 87a0293..d8af1fc 100644
--- a/static/global.css
+++ b/static/global.css
@@ -18,7 +18,6 @@ h1 {
 
 main
 {
-	max-width: 600px;
 	margin: auto;
 	padding: 0 20px;
 }