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

style: always show scrollbar (#215)

Browse Source 
* style: always show scrollbar

* fix: hide header scrollbar in specific instances

* hotfix: prettier fail

* style: always show scrollbar

* fix: hide header scrollbar in specific instances
This commit is contained in:
Razboy20
2024-05-20 21:56:36 -05:00
committed by GitHub
parent 0c7cd3e790
commit e3c2da36df
5 changed files with 28 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/stories/components/List.stories.tsx
View File

@@ -97,6 +97,7 @@ export const Default: Story = {
children: generateCourseBlocks, children: generateCourseBlocks,
itemKey: item => item.uniqueId, itemKey: item => item.uniqueId,
gap: 12, gap: 12,
onReordered: () => {},
}, },
render: args => ( render: args => (
<div className='w-sm'> <div className='w-sm'>

6
src/views/components/calendar/Calendar.tsx
View File

@@ -72,8 +72,8 @@ export default function Calendar(): JSX.Element {
/> />
<div className='h-full flex overflow-auto pl-3'> <div className='h-full flex overflow-auto pl-3'>
{showSidebar && ( {showSidebar && (
<div className='h-full flex flex-none flex-col justify-between pb-5 pl-4.5 screenshot:hidden'> <div className='h-full flex flex-none flex-col justify-between pb-5 screenshot:hidden'>
<div className='mb-3 h-full w-fit flex flex-col overflow-auto pb-2 pr-4 pt-5'> <div className='mb-3 h-full w-fit flex flex-col overflow-auto pb-2 pr-4 pl-4.5 pt-5'>
<CalendarSchedules /> <CalendarSchedules />
<Divider orientation='horizontal' size='100%' className='my-5' /> <Divider orientation='horizontal' size='100%' className='my-5' />
<ImportantLinks /> <ImportantLinks />
@@ -83,7 +83,7 @@ export default function Calendar(): JSX.Element {
<CalendarFooter /> <CalendarFooter />
</div> </div>
)} )}
<div className='h-full min-w-4xl flex flex-grow flex-col overflow-y-auto'> <div className='h-full min-w-5xl flex flex-grow flex-col overflow-y-auto'>
<div className='min-h-2xl flex-grow overflow-auto pl-2 pr-4 pt-6 screenshot:min-h-xl'> <div className='min-h-2xl flex-grow overflow-auto pl-2 pr-4 pt-6 screenshot:min-h-xl'>
<CalendarGrid courseCells={courseCells} setCourse={setCourse} /> <CalendarGrid courseCells={courseCells} setCourse={setCourse} />
</div> </div>

2
src/views/components/calendar/CalendarFooter.tsx
View File

@@ -12,7 +12,7 @@ import Link from '../common/Link';
*/ */
export default function CalendarFooter(): JSX.Element { export default function CalendarFooter(): JSX.Element {
return ( return (
<footer className='min-w-full w-0 space-y-2'> <footer className='min-w-full w-0 pl-4.5 space-y-2'>
<div className='flex gap-2'> <div className='flex gap-2'>
<Link className='linkanimate' href='#'> <Link className='linkanimate' href='#'>
<InstagramIcon className='h-6 w-6' /> <InstagramIcon className='h-6 w-6' />

4
src/views/components/calendar/CalenderHeader.tsx
View File

@@ -34,7 +34,7 @@ export default function CalendarHeader({ onSidebarToggle }: CalendarHeaderProps)
const [activeSchedule] = useSchedules(); const [activeSchedule] = useSchedules();
return ( return (
<div className='flex items-center gap-5 border-b border-ut-offwhite px-7 py-4'> <div className='flex items-center gap-5 overflow-x-auto overflow-y-hidden border-b border-ut-offwhite px-7 py-4 md:overflow-x-hidden'>
<Button <Button
variant='single' variant='single'
icon={MenuIcon} icon={MenuIcon}
@@ -51,7 +51,7 @@ export default function CalendarHeader({ onSidebarToggle }: CalendarHeaderProps)
totalCourses={activeSchedule.courses.length} totalCourses={activeSchedule.courses.length}
/> />
<div className='flex items-center gap-1 screenshot:hidden'> <div className='flex items-center gap-1 screenshot:hidden'>
<Text variant='mini' className='text-ut-gray font-normal'> <Text variant='mini' className='text-nowrap text-ut-gray font-normal'>
DATA LAST UPDATED: {getUpdatedAtDateTimeString(activeSchedule.updatedAt)} DATA LAST UPDATED: {getUpdatedAtDateTimeString(activeSchedule.updatedAt)}
</Text> </Text>
<button className='inline-block h-4 w-4 bg-transparent p-0 btn'> <button className='inline-block h-4 w-4 bg-transparent p-0 btn'>

21
src/views/components/common/ExtensionRoot/ExtensionRoot.module.scss
View File

@@ -18,3 +18,24 @@
cursor: move; cursor: move;
} }
} }
::-webkit-scrollbar {
width: 14px;
height: 14px;
background: transparent;
}
::-webkit-scrollbar-thumb {
border: 3px solid #fff;
border-radius: 7px;
min-height: 40px;
box-shadow: none;
background: rgb(218, 220, 224);
}
:hover::-webkit-scrollbar-thumb,
::-webkit-scrollbar-thumb:hover {
background: rgb(189, 193, 198);
}
::-webkit-scrollbar-thumb:active {
background: rgb(128, 134, 139);
}