dvorakmortonxd/dvorakmortonxd.dev
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

introduced a border around the heatmap and gridded it in a way that its always a rectangle and theres no rogue heatmap cells

Browse source
This commit is contained in:
dvorakmortonxd 2026-05-20 11:34:26 +02:00
commit 94de64150d
2 changed files with 7 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

3
src/app/components/ContributionHeatmap.tsx
View file

@ -140,9 +140,8 @@ export default function ContributionHeatmap() {
{week.map((day, dIdx) => ( {week.map((day, dIdx) => (
<div <div
key={dIdx} key={dIdx}
className="heatmap-cell" className={day.level === -1 ? "heatmap-cell heatmap-cell-empty" : "heatmap-cell"}
data-level={day.level >= 0 ? day.level : undefined} data-level={day.level >= 0 ? day.level : undefined}
style={{ visibility: day.level === -1 ? "hidden" : "visible" }}
title={day.level >= 0 ? `${day.contribs} contributions on ${day.date}` : undefined} title={day.level >= 0 ? `${day.contribs} contributions on ${day.date}` : undefined}
onMouseEnter={() => day.level >= 0 && setHoveredCell({ date: day.date, contribs: day.contribs })} onMouseEnter={() => day.level >= 0 && setHoveredCell({ date: day.date, contribs: day.contribs })}
onMouseLeave={() => setHoveredCell(null)} onMouseLeave={() => setHoveredCell(null)}

6
src/app/page.css
View file

@ -1116,6 +1116,8 @@ body {
width: 100%; width: 100%;
overflow-x: auto; overflow-x: auto;
gap: 2px; gap: 2px;
padding: 4px;
border: 1px solid var(--green);
scrollbar-width: none; scrollbar-width: none;
scrollbar-color: var(--green) transparent; scrollbar-color: var(--green) transparent;
} }
@ -1164,6 +1166,10 @@ body {
box-shadow: 0 0 6px var(--color-white); box-shadow: 0 0 6px var(--color-white);
} }
.heatmap-cell-empty {
pointer-events: none;
}
.heatmap-cell[data-level="1"] { background-color: rgba(130,180,19, 0.4); } .heatmap-cell[data-level="1"] { background-color: rgba(130,180,19, 0.4); }
.heatmap-cell[data-level="2"] { background-color: rgba(130,180,19, 0.6); } .heatmap-cell[data-level="2"] { background-color: rgba(130,180,19, 0.6); }
.heatmap-cell[data-level="3"] { background-color: rgba(130,180,19, 0.8); } .heatmap-cell[data-level="3"] { background-color: rgba(130,180,19, 0.8); }