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

feat: async text hiding on Calendar's Bottom Bar when there are no async courses (#152)

Browse Source 
* feat: async text not visible when no async courses

* refactor: converted useState to boolean

* fix: remove unused import

* fix: maintain component height when hiding is enabled

* refactor: match stylings to figma

* refactor: padding change to match when there are courses to display

---------

Co-authored-by: Razboy20 <razboy20@gmail.com>
This commit is contained in:
Casey Charleston
2024-03-12 23:13:27 -05:00
committed by GitHub
parent a5e9e3c214
commit 0dff12232c
3 changed files with 47 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
src/views/components/calendar/CalendarBottomBar/CalendarBottomBar.tsx
View File

@@ -24,28 +24,37 @@ type CalendarBottomBarProps = {
* @returns {JSX.Element} The rendered bottom bar component.
*/
export default function CalendarBottomBar({ courses, calendarRef }: CalendarBottomBarProps): JSX.Element {
const displayCourses = courses && courses.length > 0;
return (
<div className='w-full flex py-1.25'>
<div className='flex flex-grow items-center gap-3.75 pl-7.5 pr-2.5'>
<Text variant='h4'>Async. and Other:</Text>
<div className='h-14 inline-flex gap-2.5'>
{courses?.map(({ courseDeptAndInstr, status, colors, className }) => (
<CalendarCourseBlock
courseDeptAndInstr={courseDeptAndInstr}
status={status}
colors={colors}
key={courseDeptAndInstr}
className={clsx(className, 'w-35!')}
/>
))}
</div>
<div className='w-full flex py-1.25 pl-7.5 pr-6.25'>
<div
className={clsx('flex flex-grow items-center gap-3.75 text-nowrap', {
'py-7.5': !displayCourses,
})}
>
{displayCourses && (
<>
<Text variant='h4'>Other Classes:</Text>
<div className='inline-flex gap-2.5'>
{courses.map(({ courseDeptAndInstr, status, colors, className }) => (
<CalendarCourseBlock
courseDeptAndInstr={courseDeptAndInstr}
status={status}
colors={colors}
key={courseDeptAndInstr}
className={clsx(className, 'w-35! h-15!')}
/>
))}
</div>
</>
)}
</div>
<div className='flex items-center pl-2.5 pr-7.5'>
<Divider orientation='vertical' size='1rem' className='mx-1.25' />
<div className='flex items-center'>
{displayCourses && <Divider orientation='vertical' size='1rem' className='mx-1.25' />}
<Button variant='single' color='ut-black' icon={CalendarMonthIcon} onClick={saveAsCal}>
Save as .CAL
</Button>
<Divider orientation='vertical' size='1rem' className='mx-1.25' />
<Button variant='single' color='ut-black' icon={ImageIcon} onClick={() => saveCalAsPng(calendarRef)}>
Save as .PNG
</Button>

23
src/views/components/calendar/CalendarCourseCell/CalendarCourseCell.tsx
View File

@@ -56,30 +56,27 @@ export default function CalendarCourseCell({
return (
<div
className={clsx(
'h-full w-full flex justify-center rounded p-2 overflow-x-hidden cursor-default hover:cursor-pointer',
fontColor,
className
)}
className={clsx('h-full w-full flex justify-center rounded p-2 cursor-pointer', fontColor, className)}
style={{
backgroundColor: colors.primaryColor,
}}
onClick={onClick}
>
<div className='flex flex-1 flex-col gap-1 overflow-x-hidden'>
<div
className={clsx('flex flex-1 flex-col gap-0.25 overflow-hidden max-h-full', {
'self-center': !timeAndLocation,
})}
>
<Text
variant='h1-course'
className={clsx('-my-0.8 leading-tight', {
truncate: timeAndLocation,
className={clsx('leading-tight truncate', {
'-my-0.8': timeAndLocation,
'text-wrap': !timeAndLocation,
})}
>
{courseDeptAndInstr}
</Text>
{timeAndLocation && (
<Text variant='h3-course' className='-mb-0.5'>
{timeAndLocation}
</Text>
)}
{timeAndLocation && <Text variant='h3-course'>{timeAndLocation}</Text>}
</div>
{rightIcon && (
<div