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

Reverted CalendarGrid and CalendarGridCell back to SCSS from Tailwind

Browse Source
This commit is contained in:
Vinson Zheng
2024-02-17 11:54:50 -06:00
parent 0f14b8ce1b
commit ba22ba427c
4 changed files with 148 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
src/views/components/common/CalendarGrid/CalendarGrid.module.scss Normal file
View File

@@ -0,0 +1,91 @@
.dayLabelContainer {
display: flex;
flex-direction: row;
height: 13px;
min-width: 40px;
min-height: 13px;
padding-bottom: 15px;
justify-content: center;
align-items: center;
gap: 10px;
flex: 1 0 0;
}
.calendarGrid {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(13, 1fr);
}
.calendarRow {
display: flex;
}
.calendar {
// display: grid;
// grid-template-columns: auto repeat(5, 1fr);
gap: 10px;
}
.day {
gap: 5px;
color: #bf5700;
text-align: center;
font-size: 14.22px;
font-style: normal;
font-weight: 500;
line-height: normal;
margin-top: 20px;
border-right: 1px solid #dadce0;
border-bottom: 1px solid #dadce0;
border-left: 1px solid #dadce0;
}
.timeAndGrid {
display: flex;
}
.timeColumn {
display: flex;
min-height: 573px;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
flex: 1 0 0;
border-radius: var(--border-radius-none, 0px);
}
.timeBlock {
display: flex;
width: auto;
height: auto;
flex-direction: column;
align-items: flex-end;
.timeLabelContainer {
display: flex;
max-height: 20px;
flex-direction: column;
align-items: flex-end;
gap: 17px;
flex: 1 0 0;
border-radius: var(--border-radius-none, 0px);
}
p {
color: #1a2024;
text-align: left;
height: 6.6px;
align-self: stretch;
margin-top: -10px;
margin-right: 10px;
margin-bottom: 0;
/* Type scale/small */
font-family: 'Roboto Flex';
font-size: 14.22px;
font-style: normal;
font-weight: 500;
line-height: normal;
}
}

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

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

18
src/views/components/common/CalendarGridCell/CalendarGridCell.module.scss Normal file
View File

@@ -0,0 +1,18 @@
.calendarCell {
display: flex;
width: 213.8px;
height: 44.769px;
min-width: 45px;
min-height: 40px;
flex-direction: column;
justify-content: center;
align-items: flex-start;
border: 1px solid #dadce0;
}
.hourLine {
width: 213.8px;
height: 1px;
border-radius: var(--border-radius-none, 0px);
background: rgba(218, 220, 224, 0.25);
}

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

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