Skip to content

Commit

Permalink
feat: make view page repsonsive
Browse files Browse the repository at this point in the history
  • Loading branch information
@soumitradev
soumitradev committed Jan 5, 2024
1 parent e0d7d56 commit 08541c7
Showing 1 changed file with 57 additions and 15 deletions.
72 changes: 57 additions & 15 deletions frontend/src/ViewTimetable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import {
Edit2,
GripHorizontal,
GripVertical,
Menu,
Trash,
} from "lucide-react";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
Expand Down Expand Up @@ -51,6 +52,7 @@ import {
} from "./components/ui/tooltip";
import { toast, useToast } from "./components/ui/use-toast";
import { router } from "./main";
import { Popover, PopoverContent, PopoverTrigger } from "./components/ui/popover";

const fetchTimetable = async (timetableId: string) => {
const response = await axios.get<z.infer<typeof timetableWithSectionsType>>(
Expand Down Expand Up @@ -709,6 +711,16 @@ function ViewTimetable() {
[currentCourseID],
);

const [screenIsLarge, setScreenIsLarge] = useState(
window.matchMedia("(min-width: 1024px)").matches,
);

useEffect(() => {
window
.matchMedia("(min-width: 1024px)")
.addEventListener("change", (e) => setScreenIsLarge(e.matches));
}, []);

if (courseQueryResult.isFetching) {
return <span>Loading...</span>;
}
Expand Down Expand Up @@ -818,12 +830,14 @@ function ViewTimetable() {
return (
<>
{!isSpinner ? (
<div className="grow">
<div className="grow h-[calc(100vh-12rem)]">
<TooltipProvider>
<div className="flex justify-between p-4">
<span>
<p className="font-bold text-3xl">{timetable.name}</p>
<span className="flex justify-between items-center gap-2">
<p className="font-bold lg:text-3xl text-md sm:text-lg md:text-xl">
{timetable.name}
</p>
<span className="flex lg:flex-row flex-col justify-between lg:items-center gap-2">
<Badge variant="default" className="w-fit">
<p className="flex items-center gap-1">
<span>{timetable.acadYear}</span>
Expand All @@ -833,8 +847,8 @@ function ViewTimetable() {
<span className="flex-none">{`${timetable.year}-${timetable.semester}`}</span>
</p>
</Badge>
<span className="text-muted-foreground">
<p className="text-sm font-bold inline">Last Updated: </p>
<span className="lg:text-md md:text-sm text-xs text-muted-foreground">
<p className="font-bold inline">Last Updated: </p>
<p className="inline">
{new Date(timetable.lastUpdated).toLocaleString()}
</p>
Expand All @@ -846,17 +860,17 @@ function ViewTimetable() {
<TooltipTrigger asChild>
<Button
onClick={generateScreenshot}
className="flex justify-between items-center gap-2"
className="flex justify-between items-center gap-2 md:text-md text-sm"
>
<Download />
<Download className="w-5 h-5 md:w-6 md:h-6"/>
PNG
</Button>
</TooltipTrigger>
<TooltipContent>
<p>Download timetable as image</p>
</TooltipContent>
</Tooltip>
<Tooltip>
{screenIsLarge && <Tooltip>
<TooltipTrigger asChild>
<Button
variant="ghost"
Expand All @@ -871,7 +885,7 @@ function ViewTimetable() {
Make timetable {isVertical ? "horizontal" : "vertical"}
</p>
</TooltipContent>
</Tooltip>
</Tooltip>}
{userQueryResult.data.id ===
timetableQueryResult.data.authorId && (
<Tooltip>
Expand All @@ -887,7 +901,7 @@ function ViewTimetable() {
})
}
>
<Edit2 />
<Edit2 className="w-5 h-5 md:w-6 md:h-6" />
</Button>
</TooltipTrigger>
<TooltipContent>
Expand All @@ -907,7 +921,7 @@ function ViewTimetable() {
}, 2000);
}}
>
<Copy />
<Copy className="w-5 h-5 md:w-6 md:h-6"/>
</Button>
</TooltipTrigger>
<TooltipContent>
Expand All @@ -924,7 +938,7 @@ function ViewTimetable() {
variant="ghost"
className="rounded-full p-3 hover:bg-destructive/90 hover:text-destructive-foreground"
>
<Trash />
<Trash className="w-5 h-5 md:w-6 md:h-6" />
</Button>
</TooltipTrigger>
</AlertDialogTrigger>
Expand Down Expand Up @@ -960,9 +974,34 @@ function ViewTimetable() {
</div>
{/* the bg-background here is necessary so the generated image has the background in it */}
<div
className="flex flex-row gap-4 bg-background"
className="flex flex-row gap-4 bg-background h-full relative"
ref={screenshotContentRef}
>
>{screenIsLarge ? (
<SideMenu
timetable={timetable}
isOnEditPage={false}
allCoursesDetails={courses}
cdcs={cdcs}
setCurrentCourseID={setCurrentCourseID}
currentCourseDetails={currentCourseQueryResult}
uniqueSectionTypes={uniqueSectionTypes}
currentSectionType={currentSectionType}
setCurrentSectionType={setCurrentSectionType}
addSectionMutation={addSectionMutation}
removeSectionMutation={removeSectionMutation}
coursesInTimetable={coursesInTimetable}
currentTab={currentTab}
setCurrentTab={setCurrentTab}
isOnCourseDetails={isOnCourseDetails}
setSectionTypeChangeRequest={setSectionTypeChangeRequest}
isScreenshotMode={isScreenshotMode}
/> ) : (
<Popover>
<PopoverTrigger className="absolute left-2 top-[-1rem]">
<Button variant={"default"} className="rounded-full">
<Menu />
</Button>
</PopoverTrigger><PopoverContent>
<SideMenu
timetable={timetable}
isOnEditPage={false}
Expand All @@ -982,8 +1021,11 @@ function ViewTimetable() {
setSectionTypeChangeRequest={setSectionTypeChangeRequest}
isScreenshotMode={isScreenshotMode}
/>
</PopoverContent>
</Popover>
)}
<TimetableGrid
isVertical={isVertical}
isVertical={screenIsLarge ? isVertical : true}
timetableDetailsSections={timetableDetailsSections}
handleUnitClick={(e) => console.log(e)}
handleUnitDelete={(e) => console.log("DELETING", e)}
Expand Down

0 comments on commit 08541c7

Please sign in to comment.