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

fix: place hours and courses under schedule name (#388)

Browse Source 
* fix(header): bottom-aligned the schedule name + hours/courses in calendar

* feat: updated font style in header and dropdown

* fix: new hour/course styling per discussion

i love having 80 different ideas, hopefully after this there's like maybe a tiny commit left to do before this is done..

* feat(header): added icons to cal header

WORK IN PROGRESS

* style: updated layout of header and main popup

* fix: updated font and spacing for header and popup

* fix: updated cal + popup style details
- schedule title is now in normal casing w/ colon removed
- last updated on is now entirely deleted from everywhere
- hour and course numbers now h3 in calendar ONLY

* refactor: changed size for calendar header

* refactor: changed ut-black to theme-black

* refactor: remove hiding on small window sizes

* refactor: reduced spacing in popup

* refactor: updated unocss for small-caps configuration

* style: changed variant + className order

* fix: readded update time text

* style: auto formatter, unused imports, capitalization

---------

Co-authored-by: Razboy20 <razboy20@gmail.com>
Co-authored-by: Samuel Gunter <sgunter@utexas.edu>
Co-authored-by: doprz <52579214+doprz@users.noreply.github.com>
This commit is contained in:
Warith Rahman
2024-11-21 20:56:56 -06:00
committed by GitHub
parent 7dbffc6eef
commit 7dd93690d6
9 changed files with 76 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/views/components/common/ScheduleDropdown.tsx
View File

@@ -27,17 +27,23 @@ export default function ScheduleDropdown(props: ScheduleDropdownProps) {
<>
<DisclosureButton className='w-full flex items-center border-none bg-transparent px-3.5 py-2.5 text-left'>
<div className='flex-1'>
<Text as='div' variant='h4' className='mb-1 w-100% text-ut-burntorange'>
{(activeSchedule ? activeSchedule.name : 'Schedule').toUpperCase()}:
<Text as='div' variant='h3' className='w-100% text-ut-burntorange normal-case!'>
{activeSchedule ? activeSchedule.name : 'Schedule'}
</Text>
<p className='-mb-0.5'>
<Text variant='h3' className='text-theme-black leading-[75%]!'>
{activeSchedule ? activeSchedule.hours : 0} HOURS
</Text>
<Text variant='h4' className='ml-2.5 text-ut-black leading-[75%]!'>
{activeSchedule ? activeSchedule.courses.length : 0} Courses
</Text>
</p>
<div className='flex gap-2.5 text-theme-black leading-[75%]!'>
<div className='flex gap-1.25'>
<Text variant='h4'>{activeSchedule ? activeSchedule.hours : 0}</Text>
<Text variant='h4' className='font-all-small-caps!'>
{activeSchedule.hours === 1 ? 'HOUR' : 'HOURS'}
</Text>
</div>
<div className='flex gap-1.25'>
<Text variant='h4'>{activeSchedule ? activeSchedule.courses.length : 0}</Text>
<Text variant='h4' className='font-all-small-caps!'>
{activeSchedule.courses.length === 1 ? 'COURSE' : 'COURSES'}
</Text>
</div>
</div>
</div>
<Text className='text-ut-burntorange text-2xl! font-normal!'>
{open ? <DropdownArrowDown /> : <DropdownArrowUp />}

38
src/views/components/common/ScheduleTotalHoursAndCourses.tsx
View File

@@ -24,16 +24,36 @@ export default function ScheduleTotalHoursAndCourses({
totalCourses,
}: ScheduleTotalHoursAndCoursesProps): JSX.Element {
return (
<div className='min-w-full w-0 flex items-center gap-2.5 whitespace-nowrap'>
<Text className='truncate text-ut-burntorange uppercase' variant='h1' as='span'>
{`${scheduleName}: `}
</Text>
<Text variant='h3' as='div' className='flex flex-row items-center gap-2 text-theme-black'>
{totalHours} {totalHours === 1 ? 'Hour' : 'Hours'}
<Text variant='h4' as='span' className='hidden capitalize screenshot:inline sm:inline'>
{totalCourses} {totalCourses === 1 ? 'Course' : 'Courses'}
</Text>
<div className='min-w-full w-0 items-center whitespace-nowrap'>
<Text className='truncate text-ut-burntorange normal-case!' variant='h1' as='span'>
{scheduleName}
</Text>
<div className='flex flex-row items-center gap-2.5 text-theme-black'>
<div className='flex flex-row items-center gap-1.25 text-theme-black'>
<Text variant='h3' as='span' className='capitalize screenshot:inline sm:inline'>
{totalHours}
</Text>
<Text
variant='h3'
as='span'
className='capitalize screenshot:inline sm:inline font-all-small-caps!'
>
{totalHours === 1 ? 'HOUR' : 'HOURS'}
</Text>
</div>
<div className='flex flex-row items-center gap-1.25 text-theme-black'>
<Text variant='h3' as='span' className='capitalize screenshot:inline sm:inline'>
{totalCourses}
</Text>
<Text
variant='h3'
as='span'
className='capitalize screenshot:inline sm:inline font-all-small-caps!'
>
{totalCourses === 1 ? 'COURSE' : 'COURSES'}
</Text>
</div>
</div>
</div>
);
}