Skip to content

Commit

Permalink
Contribution controls styling, legend, count.
Browse files Browse the repository at this point in the history
  • Loading branch information
@theruther4d
theruther4d committed Jul 27, 2021
1 parent fea6f82 commit e4197d0
Show file tree
Hide file tree
Showing 2 changed files with 149 additions and 32 deletions.
83 changes: 62 additions & 21 deletions src/contributions/Contributions.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,15 +47,20 @@ export function Contributions() {
.totalContributions
);
}, 0);
const firstPage = data?.pages?.[0];
const lastPage = data?.pages?.[data?.pages?.length - 1] ?? firstPage;
const start =
lastPage && parseDate(lastPage?.viewer.contributionsCollection.startedAt);
const stop =
firstPage && parseDate(firstPage?.viewer.contributionsCollection.endedAt);

return (
<section className="contributions noprint">
<h3 className="breakable">Code Contributions ({totalContributions})</h3>
<h3 className="breakable">Code Contributions</h3>
{isLoading ? (
<p>Loading...</p>
) : (
<>
<Controls chart={chart} viewport={viewport} />
<div className="wrap">
<div className="content" ref={viewport}>
<header>
<span className="label calendar-day-1">
Expand Down Expand Up @@ -177,13 +182,26 @@ export function Contributions() {
</footer>
)}
</div>
</>
<Controls
chart={chart}
viewport={viewport}
contributionCount={totalContributions || 0}
start={start}
end={stop}
/>
</div>
)}
</section>
);
}

function Controls({ chart, viewport }: ControlProps) {
function Controls({
chart,
viewport,
contributionCount,
start,
end,
}: ControlProps) {
const scroll = useRef(0);
const { width, height } = useMeasure(chart);
const viewportDimensions = useMeasure(viewport);
Expand Down Expand Up @@ -245,27 +263,46 @@ function Controls({ chart, viewport }: ControlProps) {

return (
<div className="controls">
<button
aria-label="scroll newer"
disabled={!newerEnabled}
className="scroll-button newer"
onClick={() => scrollTo(0)}
>
<ArrowLeft />
</button>
<button
aria-label="scroll older"
disabled={!olderEnabled}
className="scroll-button older"
onClick={() => scrollTo(scrollSize)}
>
<ArrowRight />
</button>
<figure className="legend">
<figcaption>
<span>Less</span> <span>More</span>
</figcaption>
</figure>
<div className="meta">
<strong>{commaSeparate(contributionCount)}</strong> total contributions{" "}
{start && end && (
<>
<strong>{format(start, "MMM dd, yyyy")}</strong> -{" "}
<strong>{format(end, "MMM dd, yyyy")}</strong>
</>
)}
</div>
<div className="scroll">
<button
aria-label="scroll newer"
disabled={!newerEnabled}
className="scroll-button newer"
onClick={() => scrollTo(0)}
>
<ArrowLeft />
</button>
<button
aria-label="scroll older"
disabled={!olderEnabled}
className="scroll-button older"
onClick={() => scrollTo(scrollSize)}
>
<ArrowRight />
</button>
</div>
</div>
);
}

interface ControlProps {
contributionCount: number;
start?: Date;
end?: Date;
chart: RefObject<HTMLElement>;
viewport: RefObject<HTMLElement>;
}
Expand Down Expand Up @@ -441,6 +478,10 @@ function useMeasure<Node extends Element = HTMLElement>(
return measured;
}

function commaSeparate(input: number) {
return String(input).replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

interface ContributionDay {
contributionCount: number;
contributionLevel:
Expand Down
98 changes: 87 additions & 11 deletions src/contributions/contributions.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,16 +14,13 @@ $box_outline: 2px;
padding-right: 0;
max-width: none;

h3 {
max-width: $max_width;

@media all and (min-width: $horizontal_breakpoint) {
// transform: translateX(8%);
}

@media all and (min-width: $max_width) {
transform: translateX(6.5rem);
}
h3,
.controls {
width: 100%;
max-width: 48rem;
margin-left: auto;
margin-right: auto;
padding-right: 1rem;
}

.content {
Expand All @@ -32,6 +29,7 @@ $box_outline: 2px;
padding-top: 0.75rem;
// Prevent outline from being cut off
padding-bottom: $box_outline;
order: 1;

@media all and (min-width: $horizontal_breakpoint) {
display: grid;
Expand All @@ -40,6 +38,7 @@ $box_outline: 2px;
"yAxis body footer";
max-width: 100%;
overflow-x: scroll;
order: 0;
}
}

Expand Down Expand Up @@ -174,7 +173,7 @@ $box_outline: 2px;
position: relative;

&[data-level="NONE"] {
background: rgba($primary, 0.05);
background: rgba($primary, 0.09);
}

&[data-level="FIRST_QUARTILE"] {
Expand Down Expand Up @@ -269,6 +268,78 @@ $box_outline: 2px;
}

.controls {
margin-top: 1rem;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;

> * {
margin-top: 1rem;
}

.legend {
width: 120px;
height: 1rem;
background-image: linear-gradient(
to right,
rgba($primary, 0.05),
rgba($primary, 1)
);
border-radius: 1rem;
margin-bottom: 1.5rem;
max-width: 100%;
position: relative;
border: 1px solid $primary;
}

.scroll {
display: none;
order: 1;

button:first-of-type {
margin-left: -1rem;
}

@media all and (min-width: $horizontal_breakpoint) {
display: block;
}
}

@media all and (min-width: 740px) {
margin-top: -1rem;
justify-content: space-between;

.legend {
width: 200px;
margin-bottom: 0;
}

.scroll {
order: 2;
}
}

figcaption {
display: flex;
justify-content: space-between;
position: absolute;
bottom: 0;
left: 0;
right: 0;
transform: translateY(1.25rem);
font-size: 0.75rem;
}

.meta {
font-weight: 300;
order: 2;
font-size: 0.875rem;
}

.scroll {
flex-shrink: 0;
}
}

.scroll-button {
Expand All @@ -291,4 +362,9 @@ $box_outline: 2px;
height: 2rem;
}
}

.wrap {
display: flex;
flex-direction: column;
}
}

1 comment on commit e4197d0

@vercel
Copy link

@vercel vercel bot commented on e4197d0 Jul 27, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

Please sign in to comment.