Merge pull request #8 from JackHazoem/mobile-responsiveness

Adding mobile responsiveness for hours column
codeuniversity · Sep 6, 2024 · 7d7e0cd · 7d7e0cd
2 parents 1dfb7f5 + bafb7eb
commit 7d7e0cd
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 49 deletions.
diff --git a/package.json b/package.json
@@ -51,7 +51,7 @@
     }
   ],
   "dependencies": {
-    "antd": "5.20.1",
+    "antd": "^5.20.3",
     "date-fns": "^3.6.0",
     "less": "^4.2.0",
     "less-loader": "^12.2.0",

diff --git a/src/components/CalendarBody.tsx b/src/components/CalendarBody.tsx
@@ -1,17 +1,16 @@
 import React, { useEffect, useRef } from 'react';
-import { Table } from 'antd';
+import { Table, Grid } from 'antd';
 
 import {
   GenericEvent,
   CalendarBodyProps,
-
   ColumnNode,
 } from './types';
 import { getDayHoursEvents } from './utils';
 import { createDayColumns, SCROLL_TO_ROW } from './columns';
 
 const ALL_DAY_ROW = 0;
-
+const { useBreakpoint } = Grid;
 
 function Calendar<T extends GenericEvent>({
   weekDatesRange,
@@ -20,39 +19,55 @@ function Calendar<T extends GenericEvent>({
   weekends,
 }: CalendarBodyProps<T>) {
   const rowRef = useRef<null | HTMLDivElement>(null);
+  const screens = useBreakpoint();
+
   useEffect(() => {
     if (rowRef.current) {
-      rowRef.current?.scrollIntoView();
+      rowRef.current.scrollIntoView();
     }
   }, [rowRef]);
-  const dayColumns = createDayColumns(weekDatesRange, weekends, onEventClick)
 
+  const fontSize = screens.xs ? '12px' : '14px'
   const hourColumn = {
-    title: 'Hours',
+    title: <div style={{ fontSize: screens.xs ? '14px' : '16px', textAlign: 'center', padding: '8px 0' }}>Hours</div>,
     dataIndex: 'hour',
     key: 'hour',
-    width: 1,
-    render: (hour: ColumnNode<T>, { }, id: number) => {
+    width: screens.xs ? 50 : 1,
+    render: (hour: ColumnNode<T>, {}, id: number) => {
       return {
         props: {
-          style: { width: '10%' },
+          style: {
+            width: screens.xs ? '30%' : '10%',
+            fontSize: fontSize
+          },
         },
-        children:
-          SCROLL_TO_ROW === id ? (
-
-            // @ts-ignore
-            <div ref={rowRef}>{hour}</div>
-          ) : (
-              // @ts-ignore
-            <div>{hour}</div>
-          ),
+        children: SCROLL_TO_ROW === id ? (
+          <div ref={rowRef}>{hour}</div>
+        ) : (
+          <div>{hour}</div>
+        ),
       };
     },
   };
+
+  const dayColumns = createDayColumns(weekDatesRange, weekends, onEventClick).map((col) => ({
+    ...col,
+    title: (
+      <div
+        style={{
+          whiteSpace: 'nowrap',
+          fontSize: fontSize
+        }}
+      >
+        {col.title}
+      </div>
+    ),
+  }));
+
   const tableColumns = [hourColumn, ...dayColumns];
 
   return (
-    <div>
+    <div style={{ overflowX: 'scroll' }}>
       <Table
         rowKey={record => record.id}
         dataSource={getDayHoursEvents(weekDatesRange, getDayEvents)}
@@ -69,13 +84,19 @@ function Calendar<T extends GenericEvent>({
                 boxShadow: 'rgba(0, 0, 0, 0.05) -1px 4px 4px ',
                 zIndex: 1,
                 top: 0,
+                padding: '8px 0',
               },
             };
           }
-          return {};
+          return {
+            style: {
+              padding: '8px 0', // Add padding for each row
+            },
+          };
         }}
         scroll={{
-          y: 1000,
+          y: screens.xs ? 300 : 1000,
+          x: 'max-content',
         }}
       />
     </div>

diff --git a/src/components/CalendarHeader.tsx b/src/components/CalendarHeader.tsx
@@ -29,14 +29,21 @@ const MonthName: React.FunctionComponent<MonthNameProps> = ({ startWeek }) => {
     return format(startWeek, 'MMM') + '-' + format(endOfWeekDate, 'MMM');
   };
 
+  const belowButtonPadding = "4px 15px"
+
   return (
-    <div style={{ display: 'flex', maxHeight: '25px' }}>
-      <Typography.Title
-        level={5}
-        style={{ marginBottom: 0, marginRight: '10px' }}
+    <div style={{ display: 'flex', alignItems: 'center', maxHeight: '25px' }}>
+      <div
+        style={{
+          fontSize: "16px",
+          fontWeight: 500,
+          marginBottom: 0,
+          marginRight: '10px',
+          padding: belowButtonPadding
+        }}
       >
         {getMonthName()}
-      </Typography.Title>
+      </div>
       <Tag>Week {getWeek(new Date(addWeeks(startWeek, -1)))}</Tag>
     </div>
   );
@@ -48,6 +55,11 @@ export const CalendarHeader: React.FunctionComponent<CalendarHeaderProps> = ({
 }) => {
   return (
     <>
+      <Row style={{ display: 'flex', alignItems: 'center', marginBottom: '20px' }}>
+        <div style={{ alignSelf: 'center' }}>
+          <MonthName startWeek={startWeek} />
+        </div>
+      </Row>
       <Row justify="space-between" style={{ marginBottom: '20px' }}>
         <Col
           style={{
@@ -74,9 +86,7 @@ export const CalendarHeader: React.FunctionComponent<CalendarHeaderProps> = ({
               </Button>
             </div>
           </div>
-          <div style={{ alignSelf: 'center' }}>
-            <MonthName startWeek={startWeek} />
-          </div>
+
         </Col>
         <Col>
           <DatePicker

diff --git a/yarn.lock b/yarn.lock
@@ -3556,10 +3556,10 @@ ansi-to-html@^0.6.11:
   dependencies:
     entities "^2.0.0"
 
-[email protected].1:
-  version "5.20.1"
-  resolved "https://registry.yarnpkg.com/antd/-/antd-5.20.1.tgz#0678737bb8aa4de54f41ad6913e4ea535a8104c2"
-  integrity sha512-YjVCYAfBjrTyNKsg+heAOR0Gm4qJNJoBZQcV1h1BX/ufwoLx0PC5RGs75g6gQFy/1nv8OrJH7DXUGdtwPMB3Vg==
+antd@^5.20.3:
+  version "5.20.3"
+  resolved "https://registry.yarnpkg.com/antd/-/antd-5.20.3.tgz#919a4df00f6e000341f8f50f54b51a75fa5d0774"
+  integrity sha512-v2s5LJlhuccIKLT17ESXQDkiQJdPK4jXg4x2pmSSRlrKXAxfftn8Zhd/7pdF3qR3OkwheQpSRjynrNZKp9Tgkg==
   dependencies:
     "@ant-design/colors" "^7.1.0"
     "@ant-design/cssinjs" "^1.21.0"
@@ -3582,7 +3582,7 @@ [email protected]:
     rc-dialog "~9.5.2"
     rc-drawer "~7.2.0"
     rc-dropdown "~4.2.0"
-    rc-field-form "~2.3.0"
+    rc-field-form "~2.4.0"
     rc-image "~7.9.0"
     rc-input "~1.6.3"
     rc-input-number "~9.2.0"
@@ -3591,7 +3591,7 @@ [email protected]:
     rc-motion "^2.9.2"
     rc-notification "~5.6.0"
     rc-pagination "~4.2.0"
-    rc-picker "~4.6.12"
+    rc-picker "~4.6.13"
     rc-progress "~4.0.0"
     rc-rate "~2.13.0"
     rc-resize-observer "^1.4.0"
@@ -3606,7 +3606,7 @@ [email protected]:
     rc-tooltip "~6.2.0"
     rc-tree "~5.8.8"
     rc-tree-select "~5.22.1"
-    rc-upload "~4.6.0"
+    rc-upload "~4.7.0"
     rc-util "^5.43.0"
     scroll-into-view-if-needed "^3.1.0"
     throttle-debounce "^5.0.2"
@@ -8560,10 +8560,10 @@ rc-dropdown@~4.2.0:
     classnames "^2.2.6"
     rc-util "^5.17.0"
 
-rc-field-form@~2.3.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/rc-field-form/-/rc-field-form-2.3.0.tgz#8669c521e37d5856efc005fc92fc09fccfe4f574"
-  integrity sha512-QyiYrE3uweGGi21MJpxHFmDW+Tb1yt5hitM1k0EbWc5hKDiSf5imOBc6NLLHrYk+sdelrw2Ju/fD4uRQdhSqNg==
+rc-field-form@~2.4.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/rc-field-form/-/rc-field-form-2.4.0.tgz#26997160d12ae43a94c356c1290bfc011c69b3ca"
+  integrity sha512-XZ/lF9iqf9HXApIHQHqzJK5v2w4mkUMsVqAzOyWVzoiwwXEavY6Tpuw7HavgzIoD+huVff4JghSGcgEfX6eycg==
   dependencies:
     "@babel/runtime" "^7.18.0"
     "@rc-component/async-validator" "^5.0.3"
@@ -8664,10 +8664,10 @@ rc-pagination@~4.2.0:
     classnames "^2.3.2"
     rc-util "^5.38.0"
 
-rc-picker@~4.6.12:
-  version "4.6.13"
-  resolved "https://registry.yarnpkg.com/rc-picker/-/rc-picker-4.6.13.tgz#d322c00bd053386e223603f11cd375f85ffb2fae"
-  integrity sha512-yi4JWPGjm420Q8rHjZ6YNy2c5IfV+9EAzx2pewVRPOjJqfg7uifO/Z0uqxdl/h6AhBocuvRvtlyz6ehrAvTq7A==
+rc-picker@~4.6.13:
+  version "4.6.14"
+  resolved "https://registry.yarnpkg.com/rc-picker/-/rc-picker-4.6.14.tgz#86f6836794a593a54b929cfde201f42f02ef85b0"
+  integrity sha512-7DuTfUFdkxmsNpWQ0TWv6FPGna5e6KKC4nxtx3x9xhumLz7jb3fhlDdWQvqEL6tpt9DOb1+N5j+wB+lDOSS9kg==
   dependencies:
     "@babel/runtime" "^7.24.7"
     "@rc-component/trigger" "^2.0.0"
@@ -8821,10 +8821,10 @@ rc-tree@~5.8.1, rc-tree@~5.8.8:
     rc-util "^5.16.1"
     rc-virtual-list "^3.5.1"
 
-rc-upload@~4.6.0:
-  version "4.6.0"
-  resolved "https://registry.yarnpkg.com/rc-upload/-/rc-upload-4.6.0.tgz#6f6d8ea4fe52ab4cd1d0d025da621e96d035c767"
-  integrity sha512-Zr0DT1NHw/ApxrP7UAoxOtGaVYuzarrrCVr0ld7RiEFsKX07uFhE1EpCBxwL11ruFn89GMcshOKWp+s6FLyAlA==
+rc-upload@~4.7.0:
+  version "4.7.0"
+  resolved "https://registry.yarnpkg.com/rc-upload/-/rc-upload-4.7.0.tgz#719c6e66549844f4db8c57f066f2758c0a43b525"
+  integrity sha512-eUwxYNHlsYe5vYhKFAUGrQG95JrnPzY+BmPi1Daq39fWNl/eOc7v4UODuWrVp2LFkQBuV3cMCG/I68iub6oBrg==
   dependencies:
     "@babel/runtime" "^7.18.3"
     classnames "^2.2.5"