Visual improvement to scrollbars and chronology

src/components/Chronology/ChronologyItemComponent.tsx

@@ -5,7 +5,14 @@ import {
   ChronologyItemsEventTranslation,
 } from "queries/chronology/overview";
 
-export default function ChronologyItemComponent(pageProps: ChronologyItem) {
+export type ChronologyItemComponentProps = {
+  item: ChronologyItem;
+  displayYear: boolean;
+};
+
+export default function ChronologyItemComponent(
+  props: ChronologyItemComponentProps
+) {
   function generateAnchor(
     year: number,
     month: number,
@@ -14,8 +21,8 @@ export default function ChronologyItemComponent(pageProps: ChronologyItem) {
   ): string {
     let result: string = "";
     result += year;
-    if (month) result += "-" + month;
-    if (day) result += "-" + day;
+    if (month) result += "-" + month.toString().padStart(2, "0");
+    if (day) result += "-" + day.toString().padStart(2, "0");
     return result;
   }
 
@@ -28,9 +35,29 @@ export default function ChronologyItemComponent(pageProps: ChronologyItem) {
   }
 
   function generateDate(month: number, day: number): string {
+    let lut = [
+      "Jan",
+      "Feb",
+      "Mar",
+      "Apr",
+      "May",
+      "Jun",
+      "Jul",
+      "Aug",
+      "Sep",
+      "Oct",
+      "Nov",
+      "Dec",
+    ];
+
     let result: string = "";
-    if (month) result += month.toString().padStart(2, "0");
-    if (day) result += "/" + day.toString().padStart(2, "0");
+    if (month) {
+      result += lut[month - 1];
+      if (day) {
+        result += " " + day.toString().padStart(2, "0");
+      }
+    }
+
     return result;
   }
 
@@ -38,33 +65,47 @@ export default function ChronologyItemComponent(pageProps: ChronologyItem) {
     <div
       className={styles.chronologyItem}
       id={generateAnchor(
-        pageProps.attributes.year,
-        pageProps.attributes.month,
-        pageProps.attributes.day
+        props.item.attributes.year,
+        props.item.attributes.month,
+        props.item.attributes.day
       )}
     >
-      <p className={styles.year}>
-        {generateYear(
-          pageProps.attributes.displayed_date,
-          pageProps.attributes.year
-        )}
-      </p>
+      {props.displayYear ? (
+        <p className={styles.year}>
+          {generateYear(
+            props.item.attributes.displayed_date,
+            props.item.attributes.year
+          )}
+        </p>
+      ) : (
+        ""
+      )}
 
       <p className={styles.date}>
-        {generateDate(pageProps.attributes.month, pageProps.attributes.day)}
+        {generateDate(props.item.attributes.month, props.item.attributes.day)}
       </p>
 
       <div className={styles.events}>
-        {pageProps.attributes.events.map((event: ChronologyItemsEvent) => (
+        {props.item.attributes.events.map((event: ChronologyItemsEvent) => (
           <div className={styles.event} key={event.id}>
             {event.translations.map(
               (translation: ChronologyItemsEventTranslation) => (
                 <>
-                  <h3>{translation.title}</h3>
-                  <p className={event.translations.length > 1 ? styles.bulletItem : ""}>
-                    {translation.description}
-                    <em> {translation.note}</em>
-                  </p>
+                  {translation.title ? <h3>{translation.title}</h3> : ""}
+
+                  {translation.description ? (
+                    <p
+                      className={
+                        event.translations.length > 1 ? styles.bulletItem : ""
+                      }
+                    >
+                      {translation.description}
+                      
+                    </p>
+                  ) : (
+                    ""
+                  )}
+                  {translation.note ? <em>{"Notes: " + translation.note}</em> : ""}
                 </>
               )
             )}

src/components/Chronology/ChronologyYearComponent.tsx

@@ -10,12 +10,12 @@ type ChronologyYearComponentProps = {
 
 export default function ChronologyYearComponent(props: ChronologyYearComponentProps) {
   return (
-    <div>
+    <div className={styles.chronologyYear} id={props.items.length > 1 ? props.items[0].attributes.year.toString() : undefined}>
       {props.items.map((item: ChronologyItem, index: number) => (
         <ChronologyItemComponent
-          key={item.id}
-          id={item.id}
-          attributes={item.attributes}
+          key={index}
+          item={item}
+          displayYear={index===0}
         />
       ))}
     </div>

src/pages/chronology/overview.tsx

@@ -32,11 +32,7 @@ export default function ChronologyOverview(props: Props): JSX.Element {
     } else {
       chronologyItemYearGroups[item.attributes.year].push(item);
     }
-  });
-
-  console.log(chronologyItemYearGroups);
-
-  
+  });  
 
   return (
     <>
@@ -77,9 +73,9 @@ export default function ChronologyOverview(props: Props): JSX.Element {
                   ")"
               );
             }
-            if (event.translations.length !== 1) {
+            if (event.translations.length < 1) {
               console.warn(
-                "Wrong number of Translation(s) on ChronologyItem (" +
+                "Missing Translation on ChronologyItem (" +
                   item.id +
                   "), Event (" +
                   event.id +

src/styles/Chronology/ChronologyItemComponent.module.css

@@ -8,40 +8,40 @@
     place-content: start;
     grid-template-rows: auto 1fr;
     grid-template-columns: 4em;
-    margin-bottom: 1.5em;
+    padding: 1em 2em;
 }
 
 .chronologyItem:target {
     background-color: var(--color-main-base);
     border-radius: 1em;
-    padding: 1em 2em 1em 1.5em;
 }
 
 .chronologyItem > .year {
     grid-area: year;
     margin: 0;
     font-weight: bold;
+    font-size: 1.3em;
+    margin-top: -0.25em;
 }
 
 .chronologyItem > .date {
     grid-area: date;
     margin: 0;
+    color: var(--color-main-dark);
+    font-size: 0.9em;
 }
 
 .chronologyItem > .events {
     grid-area: events;
 }
 
-.event {
-    margin-bottom: 1em;
-}
-
 .event > h3 {
     margin: 0;
 }
 
 .event > p {
     margin: 0;
+    white-space: break-spaces;
 }
 
 .event > .bulletItem::before {
@@ -56,6 +56,10 @@
     margin-top: .5em;
 }
 
+.event ~ .event {
+    margin-top: 1em;
+}
+
 .source {
     color: var(--color-main-dark);
     font-size: 80%;

src/styles/Chronology/ChronologyYearComponent.module.css

@@ -0,0 +1,5 @@
+.chronologyYear:target {
+    background-color: var(--color-main-base);
+    border-radius: 1em;
+    padding: 1em 2em 1em 1.5em;
+}

src/styles/Panels/ContentPanel.module.css

@@ -1,9 +1,15 @@
 .panel {
     padding-top: 5rem;
+    scrollbar-width: thin;
+    border: none;
 }
 
 .panelInside {
     max-width: 50rem;
     text-align: justify;
     text-justify: inter-word;
+}
+
+.panel::-webkit-scrollbar {
+    display: unset;
 }

src/styles/globals.css

@@ -76,11 +76,33 @@ button:hover {
   color: var(--color-main-light);
 }
 
+
+/* SCROLLBARS STYLING */
+
+* {
+  scrollbar-color: var(--color-main-dark) transparent;
+}
+
 *::selection {
   background-color: var(--color-main-dark);
-  color: var(--color-main-light)
+  color: var(--color-main-light);
+  border-radius: 1em;
 }
 
 *:target {
   scroll-margin-top: 1em;
+}
+
+*::-webkit-scrollbar {
+  width: 12px;               /* width of the entire scrollbar */
+}
+
+*::-webkit-scrollbar-track {
+  background: transparent;        /* color of the tracking area */
+}
+
+*::-webkit-scrollbar-thumb {
+  background-color: var(--color-main-dark);    /* color of the scroll thumb */
+  border-radius: 100vmax;       /* roundness of the scroll thumb */
+  border: 3px solid var(--color-main-light);  /* creates padding around scroll thumb */
 }