feat: redid calendar to be smooth and better on mobile

Rahuletto · Jun 26, 2024 · 0209202 · 0209202
1 parent cb3910c
commit 0209202
Show file tree

Hide file tree

Showing 2 changed files with 147 additions and 110 deletions.
diff --git a/generator/CalendarGenerator.tsx b/generator/CalendarGenerator.tsx
@@ -3,7 +3,7 @@ import "react-loading-skeleton/dist/skeleton.css";
 import styles from "@/styles/Calendar.module.css";
 import { Calendar, Day } from "@/types/Calendar";
 import CalendarCard from "../components/cards/CalendarCard";
-import { ReactNode } from "react";
+import { ReactNode, useEffect, useRef } from "react";
 
 const CalendarGenerator = ({
   data,
@@ -14,21 +14,36 @@ const CalendarGenerator = ({
   page: number;
   children: ReactNode;
 }) => {
+  const header = useRef<HTMLDivElement>(null);
+  const body = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const headerDiv = header.current;
+    const bodyDiv = body.current;
+
+    bodyDiv?.addEventListener("scroll", () => {
+      headerDiv?.scrollTo(bodyDiv.scrollLeft, 0);
+    });
+
+
+  }, [])
   return (
-    <div className={styles.calendar}>
+    <div className={`${styles.calendar} overflow-hidden p-1`}>
       {data && data.days ? (
         <>
           {children}
-          <div className={styles.calendarGrid}>
-            <span className={styles.calendarElem}>Date</span>
-            <span className={styles.calendarElem}>Day</span>
-            <span className={styles.calendarElem}>Event</span>
-            <span className={styles.calendarElem}>Day Order</span>
 
-            {data.days.map((element: Day, index: number) => (
-              <CalendarCard key={index} month={page} element={element} />
-            ))}
-          </div>
+            <div ref={header} className={`${styles.calendarHead} overflow-none w-auto`}>
+              <span className={styles.calendarElem}>Date</span>
+              <span className={styles.calendarElem}>Day</span>
+              <span className={styles.calendarElem}>Event</span>
+              <span className={styles.calendarElem}>Day Order</span>
+            </div>
+            <div ref={body} className={`${styles.calendarGrid} w-auto overflow-auto`}>
+              {data.days.map((element: Day, index: number) => (
+                <CalendarCard key={index} month={page} element={element} />
+              ))}
+            </div>
         </>
       ) : (
         <>

diff --git a/styles/Calendar.module.css b/styles/Calendar.module.css
@@ -6,102 +6,124 @@
 */
 
 .calendarGrid {
-    display: -ms-grid;
-    display: grid;
-    -ms-grid-columns: 0.2fr 0px 0.3fr 0px 1fr 0px 0.2fr;
-    grid-template-columns: 0.2fr 0.3fr 1fr 0.2fr;
-    grid-column-gap: 0px;
-    padding: 2px;
-    background-color: var(--background);
-    border-radius: 26px;
-    -webkit-border-radius: 26px;
-    -moz-border-radius: 26px;
-    -ms-border-radius: 26px;
-    -o-border-radius: 26px;
-    -webkit-border-radius: 26px;
-    overflow: auto;
-  }
-
-  .calendarElem {
-      display: -webkit-box;
-      display: -ms-flexbox;
-      display: flex;
-      padding: 10px;
-      min-height: 30px;
-      -webkit-box-align: center;
-          -ms-flex-align: center;
-              align-items: center;
-      -webkit-box-pack: center;
-          -ms-flex-pack: center;
-              justify-content: center;
-      text-align: center;
-  }
-
-
-  .today {
-      opacity: 1 !important;
-      background: var(--green) !important;
-      color: var(--background-darker) !important;
-
-      font-weight: 700;
-  }
-
-  .holiday {
-      opacity: 0.4;
-      color: var(--background-darker);
-      font-weight: 700;
-      background-color: var(--red) !important;
-  }
-
-  .calendar {
-      display: -webkit-box;
-      display: -ms-flexbox;
-      display: flex;
-      gap: 18px;
-      -webkit-box-orient: vertical;
-      -webkit-box-direction: normal;
-          -ms-flex-direction: column;
-              flex-direction: column;
-      min-height: 80vh;
-      width: -webkit-fill-available;
-      min-width: 60vw;
-      padding: 8px;
-      padding-top: 18px;
-      margin-bottom: 42px;
-      border-radius: 32px;
-      -webkit-border-radius: 32px;
-      -moz-border-radius: 32px;
-      -ms-border-radius: 32px;
-      -o-border-radius: 32px;
-  }
-
-  .calendarElem:nth-child(8n+5),
-  .calendarElem:nth-child(8n+6),
-  .calendarElem:nth-child(8n+7),
-  .calendarElem:nth-child(8n+8) {
-      background-color: var(--side-active);
-  }
-
-  .calendarElem {
-      border-right: 2px solid var(--background);
-      border-bottom: 2px solid var(--background)
-  }
-
-  .calendarElem:nth-child(5)
-    {
-      border-top-left-radius: 20px;
-  }
-  .calendarElem:nth-child(8)  {
-      border-top-right-radius: 20px;
-  }
-
-  .calendarElem:last-child
-    {
-      border-bottom-right-radius: 20px;
-  }
-  .calendarElem:nth-last-child(4):not(:first-child)  {
-      border-bottom-left-radius: 20px;
-  }
-  .calendar:last-child .calendarElem:nth-last-child(-n+4) {
-      border-bottom: 0px none !important;
-    }
+  display: -ms-grid;
+  display: grid;
+  -ms-grid-columns: 0.2fr 0px 0.3fr 0px 1fr 0px 0.2fr;
+  grid-template-columns: 0.2fr 0.3fr 1fr 0.2fr;
+  grid-column-gap: 0px;
+  padding: 2px;
+  background-color: var(--background);
+  border-radius: 26px;
+  -webkit-border-radius: 26px;
+  -moz-border-radius: 26px;
+  -ms-border-radius: 26px;
+  -o-border-radius: 26px;
+  -webkit-border-radius: 26px;
+  overflow: auto;
+}
+
+.calendarHead {
+    height: 100px;
+  margin-top: 32px;
+  display: grid;
+  -ms-grid-columns: 0.2fr 0px 0.3fr 0px 1fr 0px 0.2fr;
+  grid-template-columns: 0.2fr 0.3fr 1fr 0.2fr;
+  grid-column-gap: 0px;
+  padding: 2px;
+  background-color: var(--background);
+  border-radius: 26px;
+  -webkit-border-radius: 26px;
+  -moz-border-radius: 26px;
+  -ms-border-radius: 26px;
+  -o-border-radius: 26px;
+  overflow: auto;
+}
+
+.calendarHead .calendarElem {
+    border-bottom: none !important;
+}
+
+.calendarGrid::-webkit-scrollbar, .calendarHead::-webkit-scrollbar {
+    width: 0px;
+    height: 0px;
+}
+.calendarElem {
+    min-width: 150px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  padding: 10px;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  text-align: center;
+}
+
+.today {
+  opacity: 1 !important;
+  background: var(--green) !important;
+  color: var(--background-darker) !important;
+
+  font-weight: 700;
+}
+
+.holiday {
+  opacity: 0.4;
+  color: var(--background-darker);
+  font-weight: 700;
+  background-color: var(--red) !important;
+}
+
+.calendar {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 4px;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  min-height: 80vh;
+  width: -webkit-fill-available;
+  min-width: 60vw;
+  padding: 8px;
+  padding-top: 18px;
+  margin-bottom: 42px;
+  border-radius: 32px;
+  -webkit-border-radius: 32px;
+  -moz-border-radius: 32px;
+  -ms-border-radius: 32px;
+  -o-border-radius: 32px;
+}
+
+.calendarElem:nth-child(8n + 5),
+.calendarElem:nth-child(8n + 6),
+.calendarElem:nth-child(8n + 7),
+.calendarElem:nth-child(8n + 8) {
+  background-color: var(--side-active);
+}
+
+.calendarElem {
+  border-right: 2px solid var(--background);
+  border-bottom: 2px solid var(--background);
+}
+
+.calendarElem:nth-child(1) {
+  border-top-left-radius: 20px;
+}
+.calendarElem:nth-child(4) {
+  border-top-right-radius: 20px;
+}
+
+.calendarElem:last-child {
+  border-bottom-right-radius: 20px;
+}
+.calendarElem:nth-last-child(4):not(:first-child) {
+  border-bottom-left-radius: 20px;
+}
+.calendar:last-child .calendarElem:nth-last-child(-n + 4) {
+  border-bottom: 0px none !important;
+}