Adjust change for more responsive

huy232 · Feb 7, 2025 · 1d78b0d · 1d78b0d
1 parent f0a522b
commit 1d78b0d
Show file tree

Hide file tree

Showing 8 changed files with 63 additions and 22 deletions.
diff --git a/src/Components/Content/AiringScheduleENGComp/index.js b/src/Components/Content/AiringScheduleENGComp/index.js
@@ -45,15 +45,15 @@ function AiringScheduleENGComp({ airingSchedule }) {
 		})
 
 	return (
-		<div className="w-full px-4 md:px-12 lg:px-20 xl:px-28 2xl:px-36 max-w-[1300px] 2xl:max-w-[85%] mx-auto pb-4">
+		<div className="w-full px-2 md:px-12 lg:px-20 xl:px-28 2xl:px-36 max-w-[320px] md:max-w-[720px] lg:max-w-[1280px] 2xl:max-w-[85%] mx-auto pb-4">
 			<div className="flex items-center flex-col">
 				<h1 className="mb-2 uppercase font-black text-[#B99B6B] max-md:text-center font-bebas-neue text-3xl">
 					Estimated Schedule
 				</h1>
-				<span className="bg-white/30 rounded p-1 mb-3">
+				<span className="bg-white/30 rounded p-1 mb-3 text-xs md:text-sm lg:text-base">
 					{formatDateTime(currentTime)}
 				</span>
-				<div className="flex w-full relative overflow-auto justify-center">
+				<div className="inline whitespace-nowrap relative overflow-x-auto w-full md:w-fit lg:mx-auto">
 					{Object.keys(airingSchedule).map((day, index) => (
 						<button
 							className={buttonClassName(day)}
@@ -70,7 +70,7 @@ function AiringScheduleENGComp({ airingSchedule }) {
 				</div>
 
 				{selectedDay && airingSchedule[selectedDay].length > 0 ? (
-					<div className="px-2 md:px-3 lg:px-5 w-full gap-1 scroll-smooth max-h-[60rem] lg:max-h-[22.4rem] flex flex-col overflow-y-scroll scrollbar-hide duration-200 transform ease-in-out">
+					<div className="px-2 md:px-3 lg:px-5 w-full gap-1 scroll-smooth max-h-[60svh] lg:max-h-[22.4rem] flex flex-col overflow-y-scroll scrollbar-hide duration-200 transform ease-in-out">
 						{airingSchedule[selectedDay].map((item, index) => {
 							const title =
 								item.title.english ||

diff --git a/src/Components/Content/CurrentSeason/currentseason.css b/src/Components/Content/CurrentSeason/currentseason.css
@@ -1,3 +1,15 @@
 .current-season-swiper .swiper-wrapper .swiper-slide {
 	width: 240px;
 }
+
+@media screen and (max-width: 640px) {
+	.current-season-swiper .swiper-wrapper .swiper-slide {
+		width: 180px;
+	}
+}
+
+@media screen and (max-width: 320px) {
+	.current-season-swiper .swiper-wrapper .swiper-slide {
+		width: 120px;
+	}
+}
diff --git a/src/Components/Content/RandomAnimeENGComp/index.js b/src/Components/Content/RandomAnimeENGComp/index.js
@@ -108,11 +108,11 @@ function RandomAnimeENGComp({ randomAnime }) {
 					</span>
 				))}
 			</h1>
-			<div className="h-[44vh] sm:h-[77vh] lg:h-[85vh] z-0 relative aspect-[3/1] w-full">
+			<div className="h-[50svh] sm:h-[77svh] lg:h-[85svh] z-0 relative aspect-[3/1] w-full">
 				{renderMedia()}
 
 				<div className="layer-hero"></div>
-				<div className="w-[80%] lg:w-[45%] tracking-wide z-10 absolute flex flex-col gap-3 md:gap-6 bottom-[25%] left-[5%] lg:left-[8%]">
+				<div className="w-100svw lg:w-[45%] tracking-wide z-10 absolute flex flex-col gap-3 md:gap-6 bottom-[25%] mx-2 lg:mx-0 lg:left-[8%]">
 					<div className="flex flex-col gap-2 md:gap-3 ">
 						<Link
 							to={`/eng/info/${randomAnime.id}`}
@@ -148,12 +148,15 @@ function RandomAnimeENGComp({ randomAnime }) {
 								</Link>
 							))}
 						</span>
-						<span
-							className="line-clamp-3 text-xs"
-							dangerouslySetInnerHTML={{
-								__html: description,
-							}}
-						></span>
+						<div className="w-full">
+							<span
+								className="line-clamp-3 text-xs backdrop-blur-sm [text-shadow:_0_2px_4px_rgb(0_0_0_/_0.6)] rounded-lg w-fit p-1"
+								dangerouslySetInnerHTML={{
+									__html: description,
+								}}
+							></span>
+						</div>
+
 						<Link
 							to={`/eng/info/${randomAnime.id}`}
 							className="hidden sm:flex items-center gap-1 w-fit bg-[#FF004D] py-2 px-6 rounded-lg text-white hover:opacity-80 duration-300 ease-in-out"

diff --git a/src/Components/Content/RecentEpisodeENG/recentepisode.css b/src/Components/Content/RecentEpisodeENG/recentepisode.css
@@ -1,3 +1,15 @@
 .recent-anime-swiper .swiper-wrapper .swiper-slide {
 	width: 240px;
 }
+
+@media screen and (max-width: 640px) {
+	.recent-anime-swiper .swiper-wrapper .swiper-slide {
+		width: 180px;
+	}
+}
+
+@media screen and (max-width: 320px) {
+	.recent-anime-swiper .swiper-wrapper .swiper-slide {
+		width: 120px;
+	}
+}
diff --git a/src/Components/Content/TopAiringENGComp/index.js b/src/Components/Content/TopAiringENGComp/index.js
@@ -112,10 +112,10 @@ function TopAiringENGComp({ topAiring }) {
 					item.title.native
 				return (
 					<SwiperSlide key={i} className="rounded overflow-hidden">
-						<div className="h-[44vh] sm:h-[77vh] lg:h-[85vh] z-0 relative aspect-[3/1] w-full">
+						<div className="h-[50svh] sm:h-[77svh] lg:h-[85svh] z-0 relative aspect-[3/1] w-full">
 							{renderMedia(i)}
 							<div className="layer-hero"></div>
-							<div className="w-[80%] lg:w-[45%] tracking-wide z-10 absolute flex flex-col gap-3 md:gap-6 bottom-[25%] left-[5%] lg:left-[8%]">
+							<div className="w-100svw lg:w-[45%] tracking-wide z-10 absolute flex flex-col gap-3 md:gap-6 bottom-[25%] mx-2 lg:mx-0 lg:left-[8%]">
 								<div className="flex flex-col gap-2 md:gap-3 ">
 									<Link
 										to={`/eng/info/${item.id}`}
@@ -151,12 +151,14 @@ function TopAiringENGComp({ topAiring }) {
 											</Link>
 										))}
 									</span>
-									<span
-										className="line-clamp-3 text-xs"
-										dangerouslySetInnerHTML={{
-											__html: description,
-										}}
-									></span>
+									<div className="w-full">
+										<span
+											className="line-clamp-3 text-xs backdrop-blur-sm [text-shadow:_0_2px_4px_rgb(0_0_0_/_0.6)] rounded-lg w-fit p-1"
+											dangerouslySetInnerHTML={{
+												__html: description,
+											}}
+										></span>
+									</div>
 									<Link
 										to={`/eng/info/${item.id}`}
 										className="hidden sm:flex group items-center gap-1 w-fit bg-[#FF004D] py-2 px-6 rounded-lg text-white hover:opacity-80 duration-300 ease-in-out mt-1"

diff --git a/src/Components/Content/TopAiringVI/index.js b/src/Components/Content/TopAiringVI/index.js
@@ -8,7 +8,7 @@ function TopAiringVI({ loading, data }) {
 			{!loading ? (
 				<div className="w-full">
 					<SkeletonTheme baseColor="#0D0D0D" highlightColor="#444">
-						<Skeleton className="h-[500px] mb-8" />
+						<Skeleton className="h-[320px] md:h-[440px] lg:h-[500px] mb-8" />
 					</SkeletonTheme>
 				</div>
 			) : (

diff --git a/src/Components/Content/TopAiringVIComp/index.js b/src/Components/Content/TopAiringVIComp/index.js
@@ -24,7 +24,7 @@ function TopAiringVIComp({ data }) {
 			centeredSlides={true}
 			spaceBetween={10}
 			loop={true}
-			className="top-airing-swiper h-[500px] w-full px-4 md:px-12 lg:px-20 xl:px-28 2xl:px-36 mb-8"
+			className="top-airing-swiper h-[320px] md:h-[440px] lg:h-[500px] w-full px-4 md:px-12 lg:px-20 xl:px-28 2xl:px-36 mb-8"
 			slidesPerView={1}
 			preloadImages={false}
 			lazy={true}

diff --git a/src/Components/Content/TrendingAnimeENG/popularanime.css b/src/Components/Content/TrendingAnimeENG/popularanime.css
@@ -1,3 +1,15 @@
 .popular-anime-swiper .swiper-wrapper .swiper-slide {
 	width: 240px;
 }
+
+@media screen and (max-width: 640px) {
+	.popular-anime-swiper .swiper-wrapper .swiper-slide {
+		width: 180px;
+	}
+}
+
+@media screen and (max-width: 320px) {
+	.popular-anime-swiper .swiper-wrapper .swiper-slide {
+		width: 120px;
+	}
+}