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

rename to course block and fix line height for styling

Browse Source
This commit is contained in:
abhinavchadaga
2024-02-01 20:55:13 -06:00
parent 856d6cda24
commit 77a1d67af3
4 changed files with 47 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/stories/components/CalendarCourse.stories.tsx
View File

@@ -3,7 +3,7 @@ import { Course, Status } from 'src/shared/types/Course';
import { CourseMeeting, DAY_MAP } from 'src/shared/types/CourseMeeting'; import { CourseMeeting, DAY_MAP } from 'src/shared/types/CourseMeeting';
import { CourseSchedule } from 'src/shared/types/CourseSchedule'; import { CourseSchedule } from 'src/shared/types/CourseSchedule';
import Instructor from 'src/shared/types/Instructor'; import Instructor from 'src/shared/types/Instructor';
import CalendarCourse from 'src/views/components/common/CalendarCourseMeeting/CalendarCourseMeeting'; import CalendarCourse from 'src/views/components/common/CalendarCourseBlock/CalendarCourseMeeting';
const meta = { const meta = {
title: 'Components/Common/CalendarCourseMeeting', title: 'Components/Common/CalendarCourseMeeting',

34
src/views/components/common/CalendarCourseBlock/CalendarCourseMeeting.module.scss Normal file
View File

@@ -0,0 +1,34 @@
.component {
display: flex;
padding: 7px 7px 9px 7px;
flex-direction: column;
align-items: flex-start;
gap: 5px;
flex: 1 0 0;
align-self: stretch;
border-radius: 4px;
background: #cbd5e1;
.content {
display: flex;
gap: 7px;
.course-detail {
display: flex;
flex-direction: column;
gap: 5px;
width: 154px;
.course {
font-size: 16px;
line-height: 16px;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.time-and-location {
font-size: 11px;
line-height: 11px;
font-weight: 400;
}
}
}
}

22
src/views/components/common/CalendarCourseMeeting/CalendarCourseMeeting.tsx → src/views/components/common/CalendarCourseBlock/CalendarCourseMeeting.tsx
View File

@@ -29,17 +29,19 @@ const CalendarCourseMeeting: React.FC<CalendarCourseMeetingProps> = ({
}: CalendarCourseMeetingProps) => { }: CalendarCourseMeetingProps) => {
let meeting: CourseMeeting | null = meetingIdx !== undefined ? course.schedule.meetings[meetingIdx] : null; let meeting: CourseMeeting | null = meetingIdx !== undefined ? course.schedule.meetings[meetingIdx] : null;
return ( return (
<div className={styles['calendar-course']}> <div className={styles.component}>
<div> <div className={styles.content}>
{course.department} {course.number} - {course.instructors[0].lastName} <div className={styles['course-detail']}>
</div> <div className={styles.course}>
{meeting && ( {course.department} {course.number} - {course.instructors[0].lastName}
<div> </div>
{`${meeting.getTimeString({ separator: '-', capitalize: true })}${ <div className={styles['time-and-location']}>
meeting.location ? ` - ${meeting.location.building}` : '' {`${meeting.getTimeString({ separator: '-', capitalize: true })}${
}`} meeting.location ? ` - ${meeting.location.building}` : ''
}`}
</div>
</div> </div>
)} </div>
</div> </div>
); );
}; };

11
src/views/components/common/CalendarCourseMeeting/CalendarCourseMeeting.module.scss
View File

@@ -1,11 +0,0 @@
.calendar-course {
display: flex;
padding: 7px 7px 9px 7px;
flex-direction: column;
align-items: flex-start;
gap: 5px;
flex: 1 0 0;
align-self: stretch;
border-radius: 4px;
background: #cbd5e1;
}