From e4197d013dcd51f344d2accdabd334b882323cad Mon Sep 17 00:00:00 2001
From: Josh Rutherford <joshua.rutherford1@gmail.com>
Date: Tue, 27 Jul 2021 11:33:17 -0500
Subject: [PATCH] Contribution controls styling, legend, count.

---
 src/contributions/Contributions.tsx  | 83 +++++++++++++++++------
 src/contributions/contributions.scss | 98 ++++++++++++++++++++++++----
 2 files changed, 149 insertions(+), 32 deletions(-)

diff --git a/src/contributions/Contributions.tsx b/src/contributions/Contributions.tsx
index 5f1b7b3..4f99fbe 100644
--- a/src/contributions/Contributions.tsx
+++ b/src/contributions/Contributions.tsx
@@ -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">
@@ -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);
@@ -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>;
 }
@@ -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:
diff --git a/src/contributions/contributions.scss b/src/contributions/contributions.scss
index 8965f64..fa67a58 100644
--- a/src/contributions/contributions.scss
+++ b/src/contributions/contributions.scss
@@ -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 {
@@ -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;
@@ -40,6 +38,7 @@ $box_outline: 2px;
         "yAxis body footer";
       max-width: 100%;
       overflow-x: scroll;
+      order: 0;
     }
   }
 
@@ -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"] {
@@ -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 {
@@ -291,4 +362,9 @@ $box_outline: 2px;
       height: 2rem;
     }
   }
+
+  .wrap {
+    display: flex;
+    flex-direction: column;
+  }
 }