From 1da0ad8fa76b9d66e30c7e784e2dcaac061d9bb0 Mon Sep 17 00:00:00 2001 From: real-zephex Date: Fri, 26 Apr 2024 23:52:18 +0530 Subject: minor ui fix --- src/app/anime/page.jsx | 1 + src/app/anime/recent/page.jsx | 2 +- src/app/anime/search/search.module.css | 21 +++++++++------------ src/app/anime/top-airing/page.jsx | 2 +- src/app/kdrama/[id]/buttons.jsx | 4 ++-- src/app/kdrama/[id]/page.jsx | 8 +++++--- src/app/kdrama/components/cacher.js | 2 +- src/app/kdrama/components/popular.jsx | 4 +++- src/app/kdrama/components/recent.jsx | 4 +++- src/app/kdrama/components/search.jsx | 4 ++-- src/app/kdrama/styles/info.module.css | 15 ++++++++++++--- src/app/kdrama/styles/popular.module.css | 1 + src/app/kdrama/styles/search.module.css | 26 +++++++++++++++++--------- 13 files changed, 58 insertions(+), 36 deletions(-) (limited to 'src/app') diff --git a/src/app/anime/page.jsx b/src/app/anime/page.jsx index 33a3373..1286c96 100644 --- a/src/app/anime/page.jsx +++ b/src/app/anime/page.jsx @@ -8,6 +8,7 @@ export default async function Anime() {
+
); diff --git a/src/app/anime/recent/page.jsx b/src/app/anime/recent/page.jsx index 38aaeb0..25b0182 100644 --- a/src/app/anime/recent/page.jsx +++ b/src/app/anime/recent/page.jsx @@ -42,7 +42,7 @@ export default async function Releases() { async function fetchRecentEpisodes() { const res = await fetch( "https://consumet-jade.vercel.app/anime/gogoanime/recent-episodes", - { next: { revalidate: 86400 } } + { next: { revalidate: 21600 } } ); const data = res.json(); return data; diff --git a/src/app/anime/search/search.module.css b/src/app/anime/search/search.module.css index 81cd9e5..d1b4c53 100644 --- a/src/app/anime/search/search.module.css +++ b/src/app/anime/search/search.module.css @@ -33,7 +33,7 @@ outline: none; background: none; width: 100%; - font-family: "Atkinson Hyperlegible"; + font-family: "Atkinson Hyperlegible", serif; font-size: 16px; } @@ -57,12 +57,13 @@ overflow-x: auto; } -.animeEntry:hover .anime { - opacity: 0.4; +.animeEntry .anime { + opacity: 0.5; } .animeEntry:hover .anime:hover { opacity: 1; + background-color: #292929; } .animeEntry::-webkit-scrollbar { @@ -85,26 +86,22 @@ justify-content: space-between; align-items: center; padding: 5px; - border-style: dotted; - border-color: #636363; margin: 10px 10px 0px 0px; - border-radius: 10px; - border-width: 4px; - transition: opacity 200ms ease-in; - background-color: #353535a6; + border-radius: 0.5rem; + transition: opacity 200ms ease-in, background-color 200ms linear; + background-color: #242424d0; } .anime p { color: white; width: 20dvw; - font-family: "Atkinson Hyperlegible"; + font-family: "Atkinson Hyperlegible", serif; font-size: 18px; } .animeImage { - border-radius: 10px; - margin-left: 20px; + border-radius: 0.5rem; } @media screen and (max-width: 768px) { diff --git a/src/app/anime/top-airing/page.jsx b/src/app/anime/top-airing/page.jsx index 40a742c..e406860 100644 --- a/src/app/anime/top-airing/page.jsx +++ b/src/app/anime/top-airing/page.jsx @@ -41,7 +41,7 @@ export default async function Trending() { async function test() { const res = await fetch( "https://consumet-jade.vercel.app/anime/gogoanime/top-airing", - { next: { revalidate: 86400 } } + { next: { revalidate: 21600 } } ); const data = res.json(); return data; diff --git a/src/app/kdrama/[id]/buttons.jsx b/src/app/kdrama/[id]/buttons.jsx index 53ae594..789c3ac 100644 --- a/src/app/kdrama/[id]/buttons.jsx +++ b/src/app/kdrama/[id]/buttons.jsx @@ -48,11 +48,11 @@ export default function EpisodesButtons({ data: episodeData, id: dramaId }) { key={index} onClick={(event) => { test(item.id, dramaId, item.title); - event.target.style.backgroundColor = + event.currentTarget.style.backgroundColor = "var(--soft-purple)"; }} > - {item.title} +

{item.title}

))} diff --git a/src/app/kdrama/[id]/page.jsx b/src/app/kdrama/[id]/page.jsx index 9a49c94..f6926c2 100644 --- a/src/app/kdrama/[id]/page.jsx +++ b/src/app/kdrama/[id]/page.jsx @@ -3,6 +3,8 @@ import Image from "next/image"; import EpisodesButtons from "./buttons"; import { PreFetchVideoLinks } from "../components/cacher"; +export const runtime = "edge"; + export default async function DramaInfo({ params }) { const id = decodeURIComponent(params.id); const info = await getDramaInfo(id); @@ -17,8 +19,8 @@ export default async function DramaInfo({ params }) {

{info.title}

Drama Poster @@ -63,7 +65,7 @@ export default async function DramaInfo({ params }) { async function getDramaInfo(id) { const res = await fetch( `https://consumet-jade.vercel.app/movies/dramacool/info?id=${id}`, - { next: { revalidate: 86400 } } + { next: { revalidate: 21600 } } ); const data = await res.json(); return data; diff --git a/src/app/kdrama/components/cacher.js b/src/app/kdrama/components/cacher.js index ff76e0a..860cdca 100644 --- a/src/app/kdrama/components/cacher.js +++ b/src/app/kdrama/components/cacher.js @@ -19,7 +19,7 @@ export async function PreFetchAnimeInfo(data) { try { const fetchPromises = data.results.map(async (element) => { const link = `https://consumet-jade.vercel.app/movies/dramacool/info?id=${element.id}`; - await fetch(link, { next: { revalidate: 86400 } }); + await fetch(link, { next: { revalidate: 21600 } }); }); await Promise.all(fetchPromises); diff --git a/src/app/kdrama/components/popular.jsx b/src/app/kdrama/components/popular.jsx index f652d57..02d3594 100644 --- a/src/app/kdrama/components/popular.jsx +++ b/src/app/kdrama/components/popular.jsx @@ -3,6 +3,8 @@ import Image from "next/image"; import Link from "next/link"; import { PreFetchAnimeInfo } from "./cacher"; +export const runtime = "edge"; + export default async function PopularDramas() { const popular = await getPopular(); PreFetchAnimeInfo(popular); @@ -37,7 +39,7 @@ export default async function PopularDramas() { async function getPopular() { const res = await fetch("https://dramacool-scraper.vercel.app/popular", { - next: { revalidate: 33200 }, + next: { revalidate: 21600 }, }); const data = await res.json(); return data; diff --git a/src/app/kdrama/components/recent.jsx b/src/app/kdrama/components/recent.jsx index eec4354..aa94b7c 100644 --- a/src/app/kdrama/components/recent.jsx +++ b/src/app/kdrama/components/recent.jsx @@ -3,6 +3,8 @@ import Image from "next/image"; import Link from "next/link"; import { PreFetchAnimeInfo } from "./cacher"; +export const runtime = 'edge'; + export default async function RecentDramas() { const popular = await getPopular(); PreFetchAnimeInfo(popular); @@ -36,7 +38,7 @@ export default async function RecentDramas() { async function getPopular() { const res = await fetch("https://dramacool-scraper.vercel.app/recent", { - next: { revalidate: 86400 }, + next: { revalidate: 21600 }, }); const data = await res.json(); return data; diff --git a/src/app/kdrama/components/search.jsx b/src/app/kdrama/components/search.jsx index 4b31f3f..dc641e1 100644 --- a/src/app/kdrama/components/search.jsx +++ b/src/app/kdrama/components/search.jsx @@ -52,8 +52,8 @@ export default function DramaSearch() {

{item.title}

Drama Poster diff --git a/src/app/kdrama/styles/info.module.css b/src/app/kdrama/styles/info.module.css index 1857eb3..eb7d6e4 100644 --- a/src/app/kdrama/styles/info.module.css +++ b/src/app/kdrama/styles/info.module.css @@ -17,7 +17,7 @@ .TitleContainer img { width: auto; - /* height: auto; */ + height: auto; border-radius: 10px; } @@ -72,8 +72,6 @@ padding: 5px; border: none; outline: none; - font-family: "Atkinson Hyperlegible"; - font-size: 16px; border-radius: 5px; background-color: #3d3d3d; transition: background-color 0.2s linear; @@ -82,6 +80,15 @@ width: 100px; } +.EpisodeButtons button p { + text-align: center; + font-family: "Atkinson Hyperlegible", serif; + margin: 0; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} + .EpisodeButtons button:hover { background-color: #1f1f1f; transition: background-color 0.2s linear @@ -107,6 +114,8 @@ .VideoPlayer { margin: 0px auto; + width: auto; + height: auto; } @media screen and (max-width: 768px) { diff --git a/src/app/kdrama/styles/popular.module.css b/src/app/kdrama/styles/popular.module.css index 537e053..919613f 100644 --- a/src/app/kdrama/styles/popular.module.css +++ b/src/app/kdrama/styles/popular.module.css @@ -61,4 +61,5 @@ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; + margin: 0.5rem 0rem 0rem 0rem; } \ No newline at end of file diff --git a/src/app/kdrama/styles/search.module.css b/src/app/kdrama/styles/search.module.css index 54175ce..8b723db 100644 --- a/src/app/kdrama/styles/search.module.css +++ b/src/app/kdrama/styles/search.module.css @@ -4,8 +4,9 @@ .LoadingText { color: white; - font-family: "Atkinson Hyperlegible"; + font-family: "Atkinson Hyperlegible", serif; text-align: center; + font-size: 18px; } .Search { @@ -24,7 +25,7 @@ outline: none; background-color: #121212; font-size: 16px; - font-family: "Atkinson Hyperlegible"; + font-family: "Atkinson Hyperlegible", serif; color: white; width: 100%; } @@ -58,22 +59,29 @@ background-color: #2e2e2eab; border-radius: 10px; cursor: pointer; - transition: transform 0.2s linear; + transition: opacity 200ms linear, background-color 200ms linear; } -.SearchEntry:hover { - transition: transform 0.2s linear; - transform: scale(1.01); +.SearchResults .SearchEntry { + opacity: 0.5; +} + +.SearchResults .SearchEntry:hover { + opacity: 1; + background-color: #333333c9; } .SearchEntry p { color: white; - font-family: "Atkinson Hyperlegible"; - width: 40vh; + font-family: "Atkinson Hyperlegible", serif; + font-size: 18px; + width: 35vh; } .SearchEntry img { - border-radius: 10px; + width: auto; + /* height: auto; */ + border-radius: 0.5rem; } @media screen and (max-width: 768px) { -- cgit v1.2.3