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

fixed a bug with mobile devices that makes it so the commit date in the contribution section overlaps thru the tui border

Browse source
This commit is contained in:
dvorakmortonxd 2026-05-19 12:01:20 +02:00
commit 0ca9b14661
2 changed files with 149 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -125,9 +125,9 @@ export default function ContributionHeatmap() {
}
return (
<div style={{ display: "flex", flexDirection: "column", gap: "10px", width: "100%" }}>
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
<div style={{ fontSize: "0.85rem", color: "var(--fg)" }}>
<div className="contribution-heatmap">
<div className="contribution-command-row">
<div className="contribution-command">
<span style={{ color: "var(--green)" }}>martin@git.dvorakmortonxd.dev</span>:<span style={{ color: "var(--gray)" }}>~</span>$ echo &#34;<span style={{ color: "var(--prettypurple)" }}>{totalContribs}</span> contributions in the last year&#34;
</div>
</div>
@ -149,15 +149,15 @@ export default function ContributionHeatmap() {
</div>
))}
</div>
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", fontSize: "0.75rem", color: "var(--gray)", marginTop: "4px" }}>
<div>
<div className="heatmap-status-row">
<div className="heatmap-status-text">
{hoveredCell ? (
<span><strong style={{ color: "var(--prettypurple)" }}>{hoveredCell.contribs}</strong> contributions on {hoveredCell.date}</span>
) : (
<span>Hover over a day to see contributions</span>
)}
</div>
<div style={{ display: "flex", alignItems: "center", gap: "4px" }}>
<div className="heatmap-legend">
<span>Less</span>
<div className="heatmap-legend-cell" data-level="0"></div>
<div className="heatmap-legend-cell" data-level="1"></div>
@ -169,8 +169,8 @@ export default function ContributionHeatmap() {
</div>
{activities.length > 0 && (
<div>
<div style={{ fontSize: "0.85rem", color: "var(--fg)", marginBottom: "4px" }}>
<div className="contribution-log">
<div className="contribution-command contribution-log-command">
<span style={{ color: "var(--green)" }}>martin@git.dvorakmortonxd.dev</span>:<span style={{ color: "var(--gray)" }}>~</span>$ git log -n 3 <span style={{ color: "var(--gray)" }}>#displays my 3 latest contributions</span>
</div>
{activities.map((act, idx) => {
@ -186,15 +186,17 @@ export default function ContributionHeatmap() {
}
} catch {}
const created = new Date(act.created);
return (
<div key={idx} style={{ display: "flex", flexDirection: "column", fontSize: "0.8rem", color: "var(--fg)" }}>
<div style={{ display: "flex", justifyContent: "space-between", color: "var(--white)" }}>
<span>repo: {act.repo?.full_name || "unknown"}</span>
<span style={{ color: "var(--green)", fontSize: "0.67rem" }}>
{new Date(act.created).toLocaleDateString()}-{new Date(act.created).toLocaleTimeString()}
<div key={idx} className="contribution-entry">
<div className="contribution-entry-header">
<span className="contribution-repo">repo: {act.repo?.full_name || "unknown"}</span>
<span className="contribution-date">
{created.toLocaleDateString()}-{created.toLocaleTimeString()}
</span>
</div>
<div style={{ color: "var(--gray)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
<div className="contribution-message">
{msg}
</div>
</div>

133
src/app/page.css
View file

@ -1028,6 +1028,79 @@ body {
/* ============================================
HEATMAP
============================================ */
.contribution-heatmap {
display: flex;
flex-direction: column;
gap: 10px;
width: 100%;
min-width: 0;
overflow: hidden;
}
.contribution-command-row {
display: flex;
justify-content: space-between;
align-items: center;
min-width: 0;
}
.contribution-command {
min-width: 0;
color: var(--fg);
font-size: 0.85rem;
overflow-wrap: anywhere;
}
.contribution-log {
min-width: 0;
}
.contribution-log-command {
margin-bottom: 4px;
}
.contribution-entry {
display: flex;
flex-direction: column;
min-width: 0;
color: var(--fg);
font-size: 0.8rem;
}
.contribution-entry-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 10px;
min-width: 0;
color: var(--white);
}
.contribution-repo {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.contribution-date {
flex-shrink: 0;
max-width: 48%;
color: var(--green);
font-size: 0.67rem;
line-height: 1.25;
text-align: right;
overflow-wrap: anywhere;
}
.contribution-message {
min-width: 0;
color: var(--gray);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.heatmap-container {
display: flex;
width: 100%;
@ -1037,6 +1110,29 @@ body {
scrollbar-color: var(--gray) transparent;
}
.heatmap-status-row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
min-width: 0;
margin-top: 4px;
color: var(--gray);
font-size: 0.75rem;
}
.heatmap-status-text {
min-width: 0;
overflow-wrap: anywhere;
}
.heatmap-legend {
display: flex;
flex-shrink: 0;
align-items: center;
gap: 4px;
}
.heatmap-week {
display: flex;
flex-direction: column;
@ -1076,3 +1172,40 @@ body {
.heatmap-legend-cell[data-level="3"] { background-color: rgba(142, 68, 173, 0.8); }
.heatmap-legend-cell[data-level="4"] { background-color: rgba(142, 68, 173, 1); }
@media (max-width: 520px) {
.contribution-command {
font-size: 0.72rem;
line-height: 1.45;
}
.heatmap-status-row {
flex-direction: column;
align-items: flex-start;
}
.contribution-entry {
font-size: 0.74rem;
}
.contribution-entry-header {
flex-direction: column;
gap: 1px;
}
.contribution-repo {
width: 100%;
white-space: normal;
overflow-wrap: anywhere;
}
.contribution-date {
max-width: 100%;
text-align: left;
font-size: 0.64rem;
}
.contribution-message {
white-space: normal;
overflow-wrap: anywhere;
}
}