count0/HabitGrid
1
0
Fork 0
mirror of https://github.com/nagaoo0/HabbitGrid.git synced 2026-01-11 23:44:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update the minigrid responsiveness and visibility

Browse Source
This commit is contained in:
_count0
2025-10-13 18:54:06 +02:00
parent 7b513bca28
commit bb64bacd1e
1 changed files with 30 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
src/components/MiniGrid.jsx
View File

@@ -7,8 +7,15 @@ const MiniGrid = ({ habit, onUpdate }) => {
const today = new Date(); const today = new Date();
// Show fewer days on mobile for better aspect ratio // Show fewer days on mobile for better aspect ratio
const isMobile = window.innerWidth < 640; // Tailwind 'sm' breakpoint const isMobile = window.innerWidth < 640; // Tailwind 'sm' breakpoint
const numDays = isMobile ? 14 : 28; const numDays = isMobile ? 11 : 28;
const days = []; const days = [];
const scrollRef = React.useRef(null);
React.useEffect(() => {
if (scrollRef.current) {
scrollRef.current.scrollLeft = scrollRef.current.scrollWidth;
}
}, [numDays, habit.completions]);
for (let i = numDays - 1; i >= 0; i--) { for (let i = numDays - 1; i >= 0; i--) {
const date = new Date(today); const date = new Date(today);
@@ -23,31 +30,34 @@ const MiniGrid = ({ habit, onUpdate }) => {
}; };
return ( return (
<div className="flex gap-1 overflow-x-auto grid-scroll pb-2"> <div ref={scrollRef} className="flex gap-1 overflow-x-auto grid-scroll pb-2">
{days.map((date, index) => { {days.map((date, index) => {
const dateStr = formatDate(date); const dateStr = formatDate(date);
const isCompleted = habit.completions.includes(dateStr); const isCompleted = habit.completions.includes(dateStr);
const intensity = isCompleted ? getColorIntensity(habit.completions, dateStr) : 0; const intensity = isCompleted ? getColorIntensity(habit.completions, dateStr) : 0;
const isTodayCell = isToday(date); const isTodayCell = isToday(date);
const dayLetter = date.toLocaleDateString('en-US', { weekday: 'short' })[0];
return ( return (
<motion.button <div key={index} className="flex flex-col items-center">
key={index} <motion.button
whileHover={{ scale: 0.9 }} whileHover={{ scale: 0.9 }}
whileTap={{ scale: 0.5 }} whileTap={{ scale: 0.5 }}
onClick={(e) => handleCellClick(e, date)} onClick={(e) => handleCellClick(e, date)}
className="habit-cell flex w-8 h-8 rounded-2xl transition-all" className={`habit-cell flex w-8 h-8 transition-all ${isTodayCell ? 'rounded-md' : 'rounded-2xl'}`}
style={{ style={{
backgroundColor: isCompleted backgroundColor: isCompleted
? habit.color ? habit.color
: 'transparent', : 'transparent',
opacity: isCompleted ? 0.3 + (intensity * 0.7) : 1, opacity: isCompleted ? 0.3 + (intensity * 0.7) : 1,
border: isTodayCell border: isTodayCell
? `2px solid ${habit.color}` ? `2px solid ${habit.color}`
: `1px solid ${habit.color}20`, : `1px solid ${habit.color}20`,
}} }}
title={dateStr} title={dateStr}
/> />
<span className="text-[10px] text-muted-foreground mt-1">{dayLetter}</span>
</div>
); );
})} })}
</div> </div>