DerexXD/UT-Registration-Plus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: revert CalendarGrid and CalendarGridCell back to SCSS from Tailwind

Browse Source
This commit is contained in:
doprz
2024-03-06 13:41:21 -06:00
parent 923c673988
commit 56306ab944
3 changed files with 41 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/views/components/common/CalendarGrid/CalendarGrid.module.scss
View File

@@ -29,15 +29,16 @@
.day { .day {
gap: 5px; gap: 5px;
color: #bf5700;
text-align: center; text-align: center;
font-size: 14.22px; font-size: 14.22px;
font-style: normal; font-style: normal;
font-weight: 500; font-weight: 500;
line-height: normal; line-height: normal;
margin-top: 20px; margin-top: 20px;
border-right: 1px solid #DADCE0; border-right: 1px solid #dadce0;
border-bottom: 1px solid #DADCE0; border-bottom: 1px solid #dadce0;
border-left: 1px solid #DADCE0; border-left: 1px solid #dadce0;
} }
.timeAndGrid { .timeAndGrid {

66
src/views/components/common/CalendarGrid/CalendarGrid.tsx
View File

@@ -1,58 +1,56 @@
import React from 'react'; import React from 'react';
import CalendarCell from '../CalendarGridCell/CalendarGridCell';
import { DAY_MAP } from 'src/shared/types/CourseMeeting'; import { DAY_MAP } from 'src/shared/types/CourseMeeting';
import styles from './CalendarGrid.module.scss';
import CalendarCell from '../CalendarGridCell/CalendarGridCell';
const daysOfWeek = Object.keys(DAY_MAP).filter(key => !['S', 'SU'].includes(key)); const daysOfWeek = Object.keys(DAY_MAP).filter(key => !['S', 'SU'].includes(key));
const hoursOfDay = Array.from({ length: 14 }, (_, index) => index + 8); const hoursOfDay = Array.from({ length: 14 }, (_, index) => index + 8);
const grid = []; const grid = [];
for (let i = 0; i < 13; i++) { for (let i = 0; i < 13; i++) {
const row = []; const row = [];
let hour = hoursOfDay[i]; let hour = hoursOfDay[i];
row.push( row.push(
<div key={hour} className="flex"> <div key={hour} className={styles.timeBlock}>
<div className="flex flex-col items-end"> <div className={styles.timeLabelContainer}>
<p className="text-left">{(hour % 12 === 0 ? 12 : hour % 12) + (hour < 12 ? ' AM' : ' PM')}</p> <p>{(hour % 12 === 0 ? 12 : hour % 12) + (hour < 12 ? ' AM' : ' PM')}</p>
</div> </div>
</div> </div>
); );
row.push(Array.from({ length: 5 }, (_, j) => <CalendarCell key={j} />)); row.push(Array.from({ length: 5 }, (_, j) => <CalendarCell key={j} />));
grid.push(row); grid.push(row);
} }
/** /**
* Grid of CalendarGridCell components forming the user's course schedule calendar view * Grid of CalendarGridCell components forming the user's course schedule calendar view
* @param props * @param props
*/ */
const Calendar: React.FC = (props) => { const Calendar: React.FC = props => (
return ( <div className={styles.calendar}>
<div className="grid grid-cols-7"> <div className={styles.dayLabelContainer} />
<div className="flex justify-center items-center h-13 min-w-40 min-h-13 pb-15 gap-10 flex-1"> {/* Displaying the rest of the calendar */}
</div> <div className={styles.timeAndGrid}>
{/* Displaying the rest of the calendar */} {/* <div className={styles.timeColumn}>
<div className="flex"> <div className={styles.timeBlock}></div>
{/* <div className="flex flex-col justify-between items-start flex-1">
<div className="flex"></div>
{hoursOfDay.map((hour) => ( {hoursOfDay.map((hour) => (
<div key={hour} className="flex"> <div key={hour} className={styles.timeBlock}>
<div className="flex flex-col items-end"> <div className={styles.timeLabelContainer}>
<p>{hour % 12 === 0 ? 12 : hour % 12} {hour < 12 ? 'AM' : 'PM'}</p> <p>{hour % 12 === 0 ? 12 : hour % 12} {hour < 12 ? 'AM' : 'PM'}</p>
</div> </div>
</div> </div>
))} ))}
</div> */} </div> */}
<div className="grid grid-cols-6 grid-rows-13"> <div className={styles.calendarGrid}>
{/* Displaying day labels */} {/* Displaying day labels */}
<div className="flex"></div> <div className={styles.timeBlock} />
{daysOfWeek.map(day => ( {daysOfWeek.map(day => (
<div key={day} className="border border-solid border-gray-300 text-center"> <div key={day} className={styles.day}>
{day} {day}
</div>
))}
{grid.map((row, rowIndex) => row)}
</div> </div>
))}
{grid.map((row, rowIndex) => (row))}
</div> </div>
</div>
</div> </div>
) );
};
export default Calendar; export default Calendar;

11
src/views/components/common/CalendarGridCell/CalendarGridCell.tsx
View File

@@ -1,15 +1,14 @@
import React from 'react'; import React from 'react';
import styles from './CalendarGridCell.module.scss';
/** /**
* Component representing each 1 hour time block of a calendar * Component representing each 1 hour time block of a calendar
* @param props * @param props
*/ */
const CalendarCell: React.FC = (props) => { const CalendarCell: React.FC = props => (
return ( <div className={styles.calendarCell}>
<div className="flex w-56 h-12 min-w-12 min-h-10 flex-col justify-center items-start border border-gray-300"> <div className={styles.hourLine} />
<div className="w-full h-1 border-none rounded-none bg-gray-300 bg-opacity-25"></div>
</div> </div>
); );
};
export default CalendarCell; export default CalendarCell;