From d9a9535ea8f38a1d63a7accd77e7175d5b822284 Mon Sep 17 00:00:00 2001 From: real-zephex Date: Fri, 29 Mar 2024 14:38:23 +0530 Subject: fix: manga page now indicates what chapter you are reading --- src/app/anime/[id]/info.css | 65 +++++++++++++++++++--- src/app/anime/[id]/page.jsx | 24 +++++++- .../manga/[title]/[id]/[read]/currentReading.jsx | 27 +++++++++ src/app/manga/[title]/[id]/[read]/page.jsx | 2 + src/app/manga/[title]/[id]/[read]/read.module.css | 7 +++ src/app/manga/[title]/[id]/buttons.jsx | 15 +++-- src/app/manga/[title]/[id]/info.module.css | 2 +- src/app/manga/[title]/[id]/page.jsx | 1 + 8 files changed, 129 insertions(+), 14 deletions(-) create mode 100644 src/app/manga/[title]/[id]/[read]/currentReading.jsx (limited to 'src') diff --git a/src/app/anime/[id]/info.css b/src/app/anime/[id]/info.css index 2b070d0..08194d0 100644 --- a/src/app/anime/[id]/info.css +++ b/src/app/anime/[id]/info.css @@ -19,7 +19,8 @@ .titleContainer p { color: var(--neon-green); width: 60%; - font-family: "Kanit"; + font-family: "Quicksand"; + font-weight: 900; font-size: 24px; } @@ -29,7 +30,7 @@ .animeDescription { color: #ffffff81; - font-family: "Lato"; + font-family: "Atkinson Hyperlegible"; font-size: 16px; max-height: 120px; margin: 20px auto; @@ -44,20 +45,36 @@ overflow-y: auto; } +.buttonContainer button:focus { + opacity: 0.7; + transition: transform 0.2s linear; + background-color: var(--pastel-red); + transform: scale(0.9); +} + +.buttonContainer::-webkit-scrollbar { + width: 5px; +} + +.buttonContainer::-webkit-scrollbar-thumb { + background-color: var(--soft-purple); + border-radius: 5px; +} + .dramaButton { padding: 8px; - font-family: "Atkinson Hyperlegible"; - font-size: 18px; + font-family: "Quicksand"; + font-size: 16px; margin: 5px; - width: 50px; + width: 130px; border-radius: 5px; border: none; - background-color: var(--light-green); + background-color: #f8f6e3dc; cursor: pointer; } .dramaButton:hover { - background-color: var(--soft-purple); + background-color: #97E7E1; } .infoPageContainer { @@ -71,6 +88,29 @@ color: white; } +.animeDetails { + text-align: center; + color: white; + font-family: "Quicksand"; +} + +.genreEntries { + margin: 3px; + padding: 4px; + border-radius: 5px; + color: var(--neon-green); + background-color: #303030; + cursor: pointer; +} + +.animeType span { + color: var(--light-green); +} + +.animeRelease span { + color: var(--soft-purple) +} + @media (prefers-color-scheme: light) { .animeDescription { color: black; @@ -80,4 +120,15 @@ color: black; } +} + +@media screen and (max-width: 768px) { + .dramaButton { + font-size: 14px; + width: 100px; + } + + .animeDetails { + font-size: 14px; + } } \ No newline at end of file diff --git a/src/app/anime/[id]/page.jsx b/src/app/anime/[id]/page.jsx index 3e2b1f0..751acef 100644 --- a/src/app/anime/[id]/page.jsx +++ b/src/app/anime/[id]/page.jsx @@ -16,8 +16,8 @@ export default async function AnimeInfo({ params }) {

{info.title}

Drama @@ -25,11 +25,31 @@ export default async function AnimeInfo({ params }) { )} +
+ Genres: + {info.genres && + info.genres.map((item, index) => ( + + {item} + + ))} +

+ Type: {info.type} +

+

+ Release year:{" "} + + {info.releaseDate}, {info.status} + +

+
+
{info && info.episodes.map((item, index) => ( diff --git a/src/app/manga/[title]/[id]/[read]/currentReading.jsx b/src/app/manga/[title]/[id]/[read]/currentReading.jsx new file mode 100644 index 0000000..c368f75 --- /dev/null +++ b/src/app/manga/[title]/[id]/[read]/currentReading.jsx @@ -0,0 +1,27 @@ +"use client"; +import { useState, useEffect } from "react"; +import styles from "./read.module.css"; + +export default function CurrentReading() { + const [chapter, setChapter] = useState(null); + const [volume, setVolume] = useState(null); + + useEffect(() => { + setChapter(localStorage.getItem("chapter") || ""); + setVolume(localStorage.getItem("volume") || ""); + }); + + return CR(chapter, volume); +} + +function CR(chapter, volume) { + return ( +
+ {chapter && volume && ( +

+ Vol {volume} Chapter {chapter} +

+ )} +
+ ); +} diff --git a/src/app/manga/[title]/[id]/[read]/page.jsx b/src/app/manga/[title]/[id]/[read]/page.jsx index 7369ba0..e584ee2 100644 --- a/src/app/manga/[title]/[id]/[read]/page.jsx +++ b/src/app/manga/[title]/[id]/[read]/page.jsx @@ -1,6 +1,7 @@ import styles from "./read.module.css"; import Image from "next/image"; import DownloadManga from "./download"; +import CurrentReading from "./currentReading"; export default async function Read({ params }) { const chapterId = params.read; @@ -23,6 +24,7 @@ export default async function Read({ params }) { return (
+
{images && diff --git a/src/app/manga/[title]/[id]/[read]/read.module.css b/src/app/manga/[title]/[id]/[read]/read.module.css index d240d80..a95dcfe 100644 --- a/src/app/manga/[title]/[id]/[read]/read.module.css +++ b/src/app/manga/[title]/[id]/[read]/read.module.css @@ -49,6 +49,13 @@ background-color: var(--pastel-red); } +.CurrentReadingContainer { + text-align: center; + color: white; + font-family: "Quicksand"; + font-size: 18px; +} + @media screen and (max-width: 768px) { .ImageContainer img { width: 95%; diff --git a/src/app/manga/[title]/[id]/buttons.jsx b/src/app/manga/[title]/[id]/buttons.jsx index eec62b9..19da1d3 100644 --- a/src/app/manga/[title]/[id]/buttons.jsx +++ b/src/app/manga/[title]/[id]/buttons.jsx @@ -1,7 +1,9 @@ +"use client"; + import styles from "./info.module.css"; import Link from "next/link"; -export default async function Buttons({ content: data }) { +export default function Buttons({ content: data }) { return (
{data.chapters && @@ -12,10 +14,10 @@ export default async function Buttons({ content: data }) { key={index} href={{ pathname: `/manga/info/read/${item.id}`, - query: { - name: item.title, - }, }} + onClick={() => + test(item.chapterNumber, item.volumeNumber) + } >