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

fixed/margin padding

Browse Source
This commit is contained in:
Tejas Panchal
2025-08-10 20:20:29 +05:30
parent ae0b4ba083
commit e00a60a469
12 changed files with 25 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/categorycard/CategoryCard.jsx
View File

@@ -189,7 +189,7 @@ const CategoryCard = React.memo(
))}
</div>
)}
<div className="grid grid-cols-6 gap-x-3 gap-y-8 mt-6 transition-all duration-300 ease-in-out max-[1400px]:grid-cols-4 max-[758px]:grid-cols-3 max-[478px]:grid-cols-3 max-[478px]:gap-x-2">
<div className={`grid ${cardStyle || 'grid-cols-6 max-[1400px]:grid-cols-4 max-[758px]:grid-cols-3 max-[478px]:grid-cols-3'} gap-x-3 gap-y-8 mt-6 transition-all duration-300 ease-in-out max-[478px]:gap-x-2`}>
{itemsToRender.remainingItems.map((item, index) => (
<div
key={index}

2
src/components/continue/ContinueWatching.jsx
View File

@@ -35,7 +35,7 @@ const ContinueWatching = () => {
if (memoizedWatchList.length === 0) return null;
return (
<div className="mt-8 max-[1200px]:px-6 max-md:px-0">
<div className="mt-8">
<div className="flex items-center justify-between max-md:pl-4 mb-6">
<div className="flex items-center gap-x-3 justify-center">
<FaHistory className="text-gray-200 text-xl" />

4
src/components/producer/Producer.jsx
View File

@@ -50,7 +50,7 @@ function Producer() {
const producerName = (id.charAt(0).toUpperCase() + id.slice(1)).split("-").join(" ");
return (
<div className="max-w-[1600px] mx-auto px-[15px] flex flex-col mt-[64px] max-md:mt-[50px]">
<div className="max-w-[1600px] mx-auto flex flex-col mt-[64px] max-md:mt-[50px]">
<div className="w-full flex flex-col gap-y-8 mt-6">
{loading ? (
<Loader type="producer" />
@@ -64,7 +64,7 @@ function Producer() {
</p>
</div>
) : producerInfo && producerInfo.length > 0 ? (
<div className="flex flex-col gap-y-2">
<div className="flex flex-col gap-y-2 max-[478px]:gap-y-0">
<h1 className="font-bold text-2xl text-white max-[478px]:text-[18px]">
{producerName} Anime
</h1>

2
src/components/trending/Trending.jsx
View File

@@ -11,7 +11,7 @@ const Trending = ({ trending, className }) => {
const { language } = useLanguage();
return (
<div className={`bg-[#141414] rounded-lg p-6 ${className}`}>
<div className={`bg-[#141414] rounded-lg p-4 ${className}`}>
<div className="flex items-center gap-2 mb-4">
<FontAwesomeIcon icon={faFire} className="text-white/90" />
<h2 className="text-xl font-semibold text-white">Trending Now</h2>

4
src/pages/Home/Home.jsx
View File

@@ -18,14 +18,14 @@ function Home() {
if (!homeInfo) return <Error error="404" />;
return (
<>
<div className="pt-16 px-4 w-full max-[1200px]:px-0">
<div className="pt-16 w-full">
<Spotlight spotlights={homeInfo.spotlights} />
<div className="mt-6">
<Genre data={homeInfo.genres} />
</div>
<ContinueWatching />
<div className="w-full grid grid-cols-[minmax(0,75%),minmax(0,25%)] gap-x-6 max-[1200px]:flex flex-col max-[1200px]:px-2">
<div className="w-full grid grid-cols-[minmax(0,75%),minmax(0,25%)] gap-x-6 max-[1200px]:flex flex-col">
<div>
<CategoryCard
label="Latest Episode"

4
src/pages/a2z/AtoZ.jsx
View File

@@ -45,8 +45,8 @@ function AtoZ({ path }) {
};
return (
<div className="max-w-[1600px] mx-auto px-[15px] flex flex-col mt-[64px] max-md:mt-[50px]">
<div className="flex flex-col gap-y-5 mt-6">
<div className="max-w-[1600px] mx-auto flex flex-col mt-[64px] max-md:mt-[50px]">
<div className="flex flex-col gap-y-2 max-[478px]:gap-y-0 mt-6">
<h1 className="font-bold text-2xl text-white max-[478px]:text-[18px]">
Sort By Letters
</h1>

8
src/pages/animeInfo/AnimeInfo.jsx
View File

@@ -156,7 +156,7 @@ function AnimeInfo({ random = false }) {
<div className="relative w-full overflow-hidden mt-[74px] max-md:mt-[60px]">
{/* Main Content */}
<div className="relative z-10 container mx-auto px-3 sm:px-4 py-4 sm:py-6 lg:py-12 max-[478px]:px-2">
<div className="relative z-10 container mx-auto py-4 sm:py-6 lg:py-12">
{/* Mobile Layout */}
<div className="block md:hidden">
<div className="flex flex-row gap-4">
@@ -447,7 +447,7 @@ function AnimeInfo({ random = false }) {
{/* Seasons Section */}
{seasons?.length > 0 && (
<div className="container mx-auto px-3 py-8 sm:px-4 sm:py-12 max-[478px]:px-2">
<div className="container mx-auto py-8 sm:py-12">
<h2 className="text-2xl font-bold mb-6 sm:mb-8 px-1">More Seasons</h2>
<div className="grid grid-cols-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-2 sm:gap-4">
{seasons.map((season, index) => (
@@ -501,14 +501,14 @@ function AnimeInfo({ random = false }) {
{/* Voice Actors Section */}
{animeInfo?.charactersVoiceActors.length > 0 && (
<div className="container mx-auto px-4 py-12 max-[478px]:px-2">
<div className="container mx-auto py-12">
<Voiceactor animeInfo={animeInfo} />
</div>
)}
{/* Recommendations Section */}
{animeInfo.recommended_data.length > 0 && (
<div className="container mx-auto px-4 py-12 max-[478px]:px-2">
<div className="container mx-auto py-12">
<CategoryCard
label="Recommended for you"
data={animeInfo.recommended_data}

2
src/pages/contact/Contact.jsx
View File

@@ -6,7 +6,7 @@ import { faPaperPlane } from "@fortawesome/free-solid-svg-icons";
function Contact() {
return (
<div className="max-w-4xl mx-auto px-4 py-8 max-[478px]:px-2">
<div className="max-w-4xl mx-auto pt-16 pb-8">
<h1 className="text-2xl font-bold mb-6">Contact Us</h1>
<div className="space-y-8 text-white/60">
<p>

2
src/pages/dmca/DMCA.jsx
View File

@@ -5,7 +5,7 @@ import { faShield } from "@fortawesome/free-solid-svg-icons";
function DMCA() {
return (
<div className="max-w-5xl mx-auto px-4 pt-24 pb-5">
<div className="max-w-5xl mx-auto pt-16 pb-5">
{/* Content */}
<div className="space-y-12 text-white/60">
<div className="text-center mb-8">

4
src/pages/search/Search.jsx
View File

@@ -39,7 +39,7 @@ function Search() {
const searchGridClass = "grid-cols-8 max-[1600px]:grid-cols-6 max-[1200px]:grid-cols-4 max-[758px]:grid-cols-3 max-[478px]:grid-cols-3 max-[478px]:gap-x-2";
return (
<div className="max-w-[1600px] mx-auto px-[15px] flex flex-col mt-[64px] max-md:mt-[50px]">
<div className="max-w-[1600px] mx-auto flex flex-col mt-[64px] max-md:mt-[50px]">
<div className="w-full flex flex-col gap-y-8 mt-6">
{loading ? (
<CategoryCardLoader className={"max-[478px]:mt-2"} gridClass={searchGridClass} />
@@ -53,7 +53,7 @@ function Search() {
</p>
</div>
) : searchData && searchData.length > 0 ? (
<div className="flex flex-col gap-y-2">
<div className="flex flex-col gap-y-2 max-[478px]:gap-y-0">
<h1 className="font-bold text-2xl text-white max-[478px]:text-[18px]">
Search Results for: {keyword}
</h1>

2
src/pages/terms/Terms.jsx
View File

@@ -3,7 +3,7 @@ import website_name from '@/src/config/website.js';
function Terms() {
return (
<div className="max-w-5xl mx-auto px-4 pt-24 pb-5">
<div className="max-w-5xl mx-auto pt-16 pb-5">
{/* Content */}
<div className="space-y-12 text-white/60">
<div className="text-center mb-8">

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

@@ -223,10 +223,10 @@ export default function Watch() {
}, [animeId, animeInfo]);
return (
<div className="w-full min-h-screen bg-[#0a0a0a]">
<div className="w-full max-w-[1920px] mx-auto pt-16 px-4 pb-6 w-full max-[1200px]:px-0 max-[1200px]:pt-12">
<div className="w-full max-w-[1920px] mx-auto pt-16 pb-6 w-full max-[1200px]:pt-12">
<div className="grid grid-cols-[minmax(0,70%),minmax(0,30%)] gap-6 w-full h-full max-[1200px]:flex max-[1200px]:flex-col">
{/* Left Column - Player, Controls, Servers */}
<div className="flex flex-col w-full gap-6 max-[1200px]:px-2">
<div className="flex flex-col w-full gap-6">
<div ref={playerRef} className="player w-full h-fit bg-black flex flex-col rounded-xl overflow-hidden">
{/* Video Container */}
<div ref={videoContainerRef} className="w-full relative aspect-video bg-black">
@@ -354,7 +354,7 @@ export default function Watch() {
{/* Mobile-only Seasons Section */}
{seasons?.length > 0 && (
<div className="hidden max-[1200px]:block p-6 bg-[#141414] rounded-lg">
<div className="hidden max-[1200px]:block bg-[#141414] rounded-lg p-4">
<h2 className="text-xl font-semibold mb-4 text-white">More Seasons</h2>
<div className="grid grid-cols-2 gap-2">
{seasons.map((season, index) => (
@@ -425,7 +425,7 @@ export default function Watch() {
</div>
{/* Anime Info Section */}
<div className="p-6 bg-[#141414] rounded-lg max-[600px]:p-4">
<div className="bg-[#141414] rounded-lg p-4">
<div className="flex gap-x-6 max-[600px]:flex-row max-[600px]:gap-4">
{animeInfo && animeInfo?.poster ? (
<img
@@ -495,7 +495,7 @@ export default function Watch() {
{/* Desktop-only Seasons Section */}
{seasons?.length > 0 && (
<div className="p-6 bg-[#141414] rounded-lg max-[1200px]:hidden">
<div className="bg-[#141414] rounded-lg p-4 max-[1200px]:hidden">
<h2 className="text-xl font-semibold mb-4 text-white">More Seasons</h2>
<div className="grid grid-cols-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-2 sm:gap-4">
{seasons.map((season, index) => (
@@ -568,7 +568,7 @@ export default function Watch() {
{/* Related Anime Section */}
{animeInfo && animeInfo.related_data ? (
<div className="bg-[#141414] rounded-lg p-6">
<div className="bg-[#141414] rounded-lg p-4">
<h2 className="text-xl font-semibold mb-4 text-white">Related Anime</h2>
<Sidecard
data={animeInfo.related_data}
@@ -584,7 +584,7 @@ export default function Watch() {
{/* Mobile-only Related Section */}
{animeInfo && animeInfo.related_data && (
<div className="hidden max-[1200px]:block bg-[#141414] rounded-lg p-6">
<div className="hidden max-[1200px]:block bg-[#141414] rounded-lg p-4">
<h2 className="text-xl font-semibold mb-4 text-white">Related Anime</h2>
<Sidecard
data={animeInfo.related_data}