fix: contribution styling for mobile

withgraphite · Jan 23, 2025 · c7efb7d · c7efb7d
1 parent 0e22a9e
commit c7efb7d
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 7 deletions.
diff --git a/lib/components/ContributionGraph.tsx b/lib/components/ContributionGraph.tsx
@@ -1,5 +1,6 @@
 import {Flame, Star} from 'lucide-react'
 import {Week} from '../types/github'
+import cn from '../utils/cn'
 import {findLongestStreak, findMostActiveTimes} from '../utils/records'
 
 // Format a date as Mmm dd, yyyy
@@ -110,20 +111,20 @@ export default function ContributionGraph({
 	progress: number
 }) {
 	return (
-		<div className='flex w-full flex-wrap justify-center'>
+		<div className='flex w-full justify-center'>
 			{weeks.map((week, i) => (
 				<div
 					key={i}
 					style={{
 						opacity: progress >= i / weeks.length ? 1 : 0,
 						transition: 'opacity 0.5s ease-in-out'
 					}}
-					className='mr-0.5 flex flex-col'>
+					className={cn('mr-0.5 flex flex-1 flex-col', i === 0 && 'justify-end')}>
 					{/* Each day is now a row in the week's column */}
 					{week.contributionDays.map((day, j) => (
 						<div
 							key={j}
-							className={`mb-[2px] h-4 w-4 rounded-[4px] ${day.color}`}
+							className={`min-h-1 min-w-1 mb-0.5 flex aspect-[1/1] w-full rounded-[25%] ${day.color}`}
 						/>
 					))}
 				</div>

diff --git a/lib/components/DownloadControls.tsx b/lib/components/DownloadControls.tsx
@@ -175,15 +175,15 @@ export default function DownloadControls({
 					Image (Mobile)
 				</DownloadButton>
 
-				<div className='fixed z-[-100] h-[720px] w-[1280px] scale-[10%] opacity-0'>
+				<div className='fixed left-1/2 top-1/2 h-[720px] w-[1280px] -translate-x-1/2 -translate-y-1/2 scale-[10%] opacity-0'>
 					<div
 						id={STATS_ID}
 						style={{backgroundImage: `url('/assets/sky.jpg')`}}
 						className='flex h-full w-full items-center justify-center bg-black'>
 						<Summary stats={stats} />
 					</div>
 				</div>
-				<div className='fixed z-[-100] h-[1440px] w-[810px] scale-[10%] opacity-0'>
+				<div className='fixed left-1/2 top-1/2 h-[1440px] w-[810px] -translate-x-1/2 -translate-y-1/2 scale-[10%] opacity-0'>
 					<div
 						id={STATS_MOBILE_ID}
 						style={{backgroundImage: `url('/assets/sky.jpg')`}}

diff --git a/lib/components/summary.tsx b/lib/components/summary.tsx
@@ -67,7 +67,7 @@ function Summary({
 						</div>
 					)}
 				</div>
-				<div className='flex justify-center rounded border border-gray-800 bg-black/60 p-2'>
+				<div className='flex w-full justify-center rounded border border-gray-800 bg-black/60 p-2'>
 					<ContributionGraph
 						weeks={weeks}
 						progress={1}

diff --git a/lib/constants/dates.ts b/lib/constants/dates.ts
@@ -1,2 +1,2 @@
 export const JAN2024 = '2024-01-01T00:00:00.000+00:00'
-export const DEC2024 = '2025-01-01T00:00:00.000+00:00'
+export const DEC2024 = '2024-12-31T11:59:59.000+00:00'