fix: CalendarCourseCell spacing

This commit is contained in:
doprz
2024-03-06 13:47:34 -06:00
parent 27d945f57c
commit 13c69ef862
3 changed files with 57 additions and 45 deletions

View File

@@ -1,4 +1,6 @@
import { Status } from '@shared/types/Course';
import { Course, Status } from '@shared/types/Course';
import { CourseMeeting } from '@shared/types/CourseMeeting';
import clsx from 'clsx';
import React from 'react';
import { CourseColors, pickFontColor } from 'src/shared/util/colors';
import ClosedIcon from '~icons/material-symbols/lock';
@@ -36,6 +38,7 @@ const CalendarCourseCell: React.FC<CalendarCourseCellProps> = ({ course, meeting
backgroundColor: colors.primaryColor,
}}
>
<<<<<<< HEAD
<div className='flex flex-1 flex-col gap-1'>
<Text variant='h1-course' className='leading-[75%]!'>
{courseDeptAndInstr}
@@ -43,6 +46,22 @@ const CalendarCourseCell: React.FC<CalendarCourseCellProps> = ({ course, meeting
{timeAndLocation && (
<Text variant='h3-course' className='leading-[75%]!'>
{timeAndLocation}
=======
<div className='flex flex-1 flex-col gap-1 overflow-x-hidden'>
<Text
variant='h1-course'
className={clsx('-my-0.8 leading-tight', {
truncate: meeting,
})}
>
{course.department} {course.number} - {course.instructors[0].lastName}
</Text>
{meeting && (
<Text variant='h3-course' className='-mb-0.5'>
{`${meeting.getTimeString({ separator: '', capitalize: true })}${
meeting.location ? ` ${meeting.location.building}` : ''
}`}
>>>>>>> 73fe14e (fix calendar course cell spacing)
</Text>
)}
</div>

View File

@@ -1,8 +1,8 @@
import clsx from 'clsx';
import React, { useState } from 'react';
import { Course, Status } from '@shared/types/Course';
import { CourseColors, pickFontColor } from '@shared/util/colors';
import { StatusIcon } from '@shared/util/icons';
import { CourseColors, getCourseColors, pickFontColor } from '@shared/util/colors';
import clsx from 'clsx';
import React from 'react';
import DragIndicatorIcon from '~icons/material-symbols/drag-indicator';
import Text from '../Text/Text';
@@ -21,7 +21,12 @@ export interface PopupCourseBlockProps {
*
* @param props PopupCourseBlockProps
*/
export default function PopupCourseBlock({ className, course, colors, dragHandleProps }: PopupCourseBlockProps): JSX.Element {
export default function PopupCourseBlock({
className,
course,
colors,
dragHandleProps,
}: PopupCourseBlockProps): JSX.Element {
// whiteText based on secondaryColor
const fontColor = pickFontColor(colors.primaryColor);
@@ -41,10 +46,7 @@ export default function PopupCourseBlock({ className, course, colors, dragHandle
>
<DragIndicatorIcon className='h-6 w-6 text-white' />
</div>
<Text
className={clsx('flex-1 py-3.5 text-ellipsis whitespace-nowrap overflow-hidden', fontColor)}
variant='h1-course'
>
<Text className={clsx('flex-1 py-3.5 truncate', fontColor)} variant='h1-course'>
<span className='px-0.5 font-450'>{course.uniqueId}</span> {course.department} {course.number} &ndash;{' '}
{course.instructors.length === 0 ? 'Unknown' : course.instructors.map(v => v.lastName)}
</Text>