From 3820076435b31dc0786f95227afd0a9bc397b1f3 Mon Sep 17 00:00:00 2001 From: adilallo <39313955+adilallo@users.noreply.github.com> Date: Thu, 11 Sep 2025 14:27:18 -0600 Subject: [PATCH] Related Articles lg breakpoint implemented --- app/blog/[slug]/page.js | 11 ++ app/components/ContentThumbnailTemplate.js | 8 +- app/components/RelatedArticles.js | 115 ++++++++++++++------- app/tailwind.css | 9 ++ 4 files changed, 104 insertions(+), 39 deletions(-) diff --git a/app/blog/[slug]/page.js b/app/blog/[slug]/page.js index c667d1b..af1a95b 100644 --- a/app/blog/[slug]/page.js +++ b/app/blog/[slug]/page.js @@ -3,6 +3,7 @@ import Link from "next/link"; import { getBlogPostBySlug, getAllPosts } from "../../../lib/contentProcessor"; import ContentBanner from "../../components/ContentBanner"; import RelatedArticles from "../../components/RelatedArticles"; +import AskOrganizer from "../../components/AskOrganizer"; import { getAssetPath, ASSETS } from "../../../lib/assetUtils"; /** @@ -127,6 +128,16 @@ export default async function BlogPostPage({ params }) { relatedPosts={relatedArticles} currentPostSlug={post.slug} /> + + {/* Ask Organizer Section */} + ); } diff --git a/app/components/ContentThumbnailTemplate.js b/app/components/ContentThumbnailTemplate.js index a264f5a..09dc3ae 100644 --- a/app/components/ContentThumbnailTemplate.js +++ b/app/components/ContentThumbnailTemplate.js @@ -50,9 +50,9 @@ const ContentThumbnailTemplate = ({ return ( -
+
{/* Background SVG - sized to fit the 260x390 container exactly */}
{/* eslint-disable-next-line @next/next/no-img-element */} @@ -76,9 +76,9 @@ const ContentThumbnailTemplate = ({ return ( -
+
{/* Background SVG - sized to fit the 320x225.5 container exactly */}
{/* eslint-disable-next-line @next/next/no-img-element */} diff --git a/app/components/RelatedArticles.js b/app/components/RelatedArticles.js index adb93f8..cab114f 100644 --- a/app/components/RelatedArticles.js +++ b/app/components/RelatedArticles.js @@ -11,10 +11,22 @@ export default function RelatedArticles({ relatedPosts, currentPostSlug }) { const [currentIndex, setCurrentIndex] = useState(0); const [progress, setProgress] = useState(0); + const [isMobile, setIsMobile] = useState(true); - // Auto-advance every 3 seconds + // Check if we're on mobile (below lg breakpoint) useEffect(() => { - if (filteredPosts.length <= 1) return; + const checkScreenSize = () => { + setIsMobile(window.innerWidth < 1024); // lg breakpoint is 1024px + }; + + checkScreenSize(); + window.addEventListener("resize", checkScreenSize); + return () => window.removeEventListener("resize", checkScreenSize); + }, []); + + // Auto-advance every 3 seconds (only on mobile) + useEffect(() => { + if (filteredPosts.length <= 1 || !isMobile) return; const interval = setInterval(() => { setProgress(0); @@ -22,11 +34,11 @@ export default function RelatedArticles({ relatedPosts, currentPostSlug }) { }, 3000); return () => clearInterval(interval); - }, [filteredPosts.length]); + }, [filteredPosts.length, isMobile]); - // Progress animation + // Progress animation (only on mobile) useEffect(() => { - if (filteredPosts.length <= 1) return; + if (filteredPosts.length <= 1 || !isMobile) return; const progressInterval = setInterval(() => { setProgress((prev) => { @@ -38,33 +50,64 @@ export default function RelatedArticles({ relatedPosts, currentPostSlug }) { }, 30); // 30ms intervals for smooth animation return () => clearInterval(progressInterval); - }, [currentIndex, filteredPosts.length]); + }, [currentIndex, filteredPosts.length, isMobile]); if (filteredPosts.length === 0) { return null; } return ( -
-
-

+
+
+

Related Articles

- {/* Horizontal Articles Row - All Visible with Centering */} + {/* Horizontal Articles Row - Carousel on mobile, Scrollable slider on desktop */}
{ + const slider = e.currentTarget; + const startX = e.pageX - slider.offsetLeft; + const scrollLeft = slider.scrollLeft; + + const handleMouseMove = (e) => { + const x = e.pageX - slider.offsetLeft; + const walk = (x - startX) * 2; + slider.scrollLeft = scrollLeft - walk; + }; + + const handleMouseUp = () => { + document.removeEventListener( + "mousemove", + handleMouseMove + ); + document.removeEventListener("mouseup", handleMouseUp); + }; + + document.addEventListener("mousemove", handleMouseMove); + document.addEventListener("mouseup", handleMouseUp); + } + : undefined + } > {filteredPosts.map((relatedPost, index) => (
- {/* Three separate progress bars below the carousel */} -
- {filteredPosts.map((relatedPost, index) => ( -
+ {/* Progress bars - only show on mobile */} + {isMobile && ( +
+ {filteredPosts.map((relatedPost, index) => (
-
- ))} -
+ key={relatedPost.slug} + className="max-w-[var(--measures-spacing-056)] w-full h-[var(--measures-spacing-004)] bg-gray-200 rounded-full overflow-hidden" + > +
+
+ ))} +
+ )}
); diff --git a/app/tailwind.css b/app/tailwind.css index a8a7b09..f8a2885 100644 --- a/app/tailwind.css +++ b/app/tailwind.css @@ -6,6 +6,15 @@ @source "../.storybook/**/*"; @source "./**/*"; +/* Hide scrollbar utility */ +.scrollbar-hide { + -ms-overflow-style: none; /* Internet Explorer 10+ */ + scrollbar-width: none; /* Firefox */ +} +.scrollbar-hide::-webkit-scrollbar { + display: none; /* Safari and Chrome */ +} + @theme inline { /* Custom breakpoints */ --breakpoint-xsm: 429px;