shishantbiswas/JustAnime
1
0
Fork 0
mirror of https://github.com/JustAnimeCore/JustAnime.git synced 2026-04-17 13:51:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

resolved episode list for responsive devices

Browse Source
This commit is contained in:
Tejas Panchal
2026-02-23 00:56:18 +05:30
parent 6f82052ca6
commit f5c57c4a18
2 changed files with 82 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/components/episodelist/Episodelist.jsx
View File

@@ -165,8 +165,7 @@ function Episodelist({
handleRangeSelect(item);
setActiveRange(item);
}}
className={`hover:bg-[#3a3a3a] cursor-pointer transition-colors ${
item === activeRange ? "bg-[#404040]" : ""
className={`hover:bg-[#3a3a3a] cursor-pointer transition-colors ${item === activeRange ? "bg-[#404040]" : ""
}`}
>
<p className="font-medium text-[12px] p-2.5 flex justify-between items-center text-gray-300 hover:text-white max-[600px]:text-[11px] max-[600px]:p-2">
@@ -204,12 +203,8 @@ function Episodelist({
<div ref={listContainerRef} className="w-full flex-1 overflow-y-auto bg-[#1a1a1a] max-h-[calc(100vh-200px)] max-[1200px]:max-h-[400px]">
<div
className={`${
totalEpisodes > 30
? "p-4 grid gap-2 max-[600px]:p-2 max-[600px]:gap-1.5" +
(totalEpisodes > 100
? " grid-cols-5"
: " grid-cols-5 max-[1200px]:grid-cols-12 max-[860px]:grid-cols-10 max-[575px]:grid-cols-8 max-[478px]:grid-cols-6 max-[350px]:grid-cols-5")
className={`${totalEpisodes > 30
? "p-4 grid grid-cols-5 gap-2 max-[600px]:p-2 max-[600px]:gap-1.5"
: ""
}`}
>
@@ -227,16 +222,14 @@ function Episodelist({
<div
key={item?.id}
ref={isActive ? activeEpisodeRef : null}
className={`flex items-center justify-center rounded-lg h-[35px] text-[13px] font-medium cursor-pointer transition-all max-[600px]:h-[30px] max-[600px]:text-[12px] ${
item?.filler
className={`flex items-center justify-center rounded-lg h-[35px] text-[13px] font-medium cursor-pointer transition-all max-[600px]:h-[30px] max-[600px]:text-[12px] ${item?.filler
? isActive
? "bg-white text-black"
: "bg-[#2a2a2a] text-gray-400"
: ""
} hover:bg-[#404040]
hover:text-white
${
isActive
${isActive
? "bg-white text-black ring-1 ring-white"
: "bg-[#2a2a2a] text-gray-400"
} ${isSearched ? "ring-2 ring-white" : ""}`}
@@ -265,12 +258,10 @@ function Episodelist({
<div
key={item?.id}
ref={isActive ? activeEpisodeRef : null}
className={`w-full px-4 py-2.5 flex items-center justify-start gap-x-4 cursor-pointer transition-all max-[600px]:px-3 max-[600px]:py-2 max-[600px]:gap-x-3 ${
(index + 1) % 2 && !isActive
className={`w-full px-4 py-2.5 flex items-center justify-start gap-x-4 cursor-pointer transition-all max-[600px]:px-3 max-[600px]:py-2 max-[600px]:gap-x-3 ${(index + 1) % 2 && !isActive
? "bg-[#202020]"
: "bg-[#1a1a1a]"
} hover:bg-[#2a2a2a] ${
isActive ? "bg-[#2a2a2a]" : ""
} hover:bg-[#2a2a2a] ${isActive ? "bg-[#2a2a2a]" : ""
} ${isSearched ? "ring-1 ring-white" : ""}`}
onClick={() => {
if (episodeNumber) {
@@ -284,8 +275,7 @@ function Episodelist({
{index + 1}
</p>
<div className="w-full flex items-center justify-between gap-x-[5px]">
<h1 className={`line-clamp-1 text-[14px] transition-colors max-[600px]:text-[13px] ${
isActive ? "text-white font-medium" : "text-gray-400 font-normal"
<h1 className={`line-clamp-1 text-[14px] transition-colors max-[600px]:text-[13px] ${isActive ? "text-white font-medium" : "text-gray-400 font-normal"
}`}>
{language === "EN" ? item?.title : item?.japanese_title}
</h1>

16
src/pages/watch/Watch.jsx
View File

@@ -288,6 +288,22 @@ export default function Watch() {
</div>
</div>
{/* Episode List (Mobile only) */}
<div className="hidden max-[1200px]:block bg-[#141414] rounded-xl overflow-hidden shadow-lg border border-white/5">
{!episodes ? (
<div className="flex-1 flex items-center justify-center min-h-[300px]">
<BouncingLoader />
</div>
) : (
<Episodelist
episodes={episodes}
currentEpisode={episodeId}
onEpisodeClick={setEpisodeId}
totalEpisodes={totalEpisodes}
/>
)}
</div>
{/* Info Section */}
<div className="bg-[#141414] rounded-xl p-4 lg:p-6 shadow-lg border border-white/5">
<div className="flex gap-4 sm:gap-6 flex-col sm:flex-row">