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>