From 8a6269d440dbdb21a88d30c1d9d80fffb7c88238 Mon Sep 17 00:00:00 2001 From: Giang Vu Date: Wed, 16 Oct 2024 23:51:22 +1100 Subject: [PATCH 1/5] fix: styling of sidebar + header + footer --- frontend/src/components/Footer.tsx | 2 +- frontend/src/components/Header.tsx | 7 +++---- frontend/src/pages/SemesterInfo.tsx | 2 +- frontend/src/pages/TimetableMod.tsx | 2 +- 4 files changed, 6 insertions(+), 7 deletions(-) diff --git a/frontend/src/components/Footer.tsx b/frontend/src/components/Footer.tsx index 3b5d1ae..ccb35dd 100644 --- a/frontend/src/components/Footer.tsx +++ b/frontend/src/components/Footer.tsx @@ -14,7 +14,7 @@ export default function Footer({ children } : { children?: React.ReactNode }) { bottom: 0, left: 0, width: 100+"%", - height: "10vh", + height: "60px", zIndex: 10000, }; diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx index 8c0da99..fe0e9b1 100644 --- a/frontend/src/components/Header.tsx +++ b/frontend/src/components/Header.tsx @@ -10,16 +10,15 @@ export default function Header() { backgroundColor: "#F5F5f5", color: "white", padding: "20px", - textAlign: "left", - height: "12vh" + textAlign: "left" }; return ( logo.exe ); diff --git a/frontend/src/pages/SemesterInfo.tsx b/frontend/src/pages/SemesterInfo.tsx index 4d69fa7..816f87c 100644 --- a/frontend/src/pages/SemesterInfo.tsx +++ b/frontend/src/pages/SemesterInfo.tsx @@ -16,7 +16,7 @@ export default function SemesterInfo() { return (
- + {/* Spreadsheet */}
diff --git a/frontend/src/pages/TimetableMod.tsx b/frontend/src/pages/TimetableMod.tsx index 831e78d..90d2556 100644 --- a/frontend/src/pages/TimetableMod.tsx +++ b/frontend/src/pages/TimetableMod.tsx @@ -41,7 +41,7 @@ export default function TimetableMod() { return (
- +
Date: Thu, 17 Oct 2024 01:56:28 +1100 Subject: [PATCH 2/5] fix(display ganttchart): dynamic sidebar now here --- frontend/src/components/Footer.tsx | 2 +- frontend/src/components/Header.tsx | 29 +++++++++++++------------ frontend/src/components/ModSiderbar.tsx | 12 +++++----- frontend/src/components/Sidebar.tsx | 3 ++- frontend/src/components/UploadPopUp.tsx | 2 +- frontend/src/pages/SemesterInfo.tsx | 8 ++++--- frontend/src/pages/TimetableMod.tsx | 2 +- frontend/src/styles/enrolment.css | 2 +- 8 files changed, 31 insertions(+), 29 deletions(-) diff --git a/frontend/src/components/Footer.tsx b/frontend/src/components/Footer.tsx index ccb35dd..3b5d1ae 100644 --- a/frontend/src/components/Footer.tsx +++ b/frontend/src/components/Footer.tsx @@ -14,7 +14,7 @@ export default function Footer({ children } : { children?: React.ReactNode }) { bottom: 0, left: 0, width: 100+"%", - height: "60px", + height: "10vh", zIndex: 10000, }; diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx index fe0e9b1..1d0ec55 100644 --- a/frontend/src/components/Header.tsx +++ b/frontend/src/components/Header.tsx @@ -1,4 +1,4 @@ -import { Box } from "@mui/material"; +import { AppBar, Box, CssBaseline, Toolbar } from "@mui/material"; import VIT_Logo from '../assets/logo.png'; /** @@ -6,20 +6,21 @@ import VIT_Logo from '../assets/logo.png'; * @returns JSX element representing the header with a logo. */ export default function Header() { - const headerStyle = { - backgroundColor: "#F5F5f5", - color: "white", - padding: "20px", - textAlign: "left" - }; return ( - - logo.exe + + + theme.zIndex.drawer + 1, + height: "17vh", + padding: "20px", + backgroundColor: "#F5F5f5", + boxShadow: "none", + }} + > + logo.exe + ); } \ No newline at end of file diff --git a/frontend/src/components/ModSiderbar.tsx b/frontend/src/components/ModSiderbar.tsx index 3fdadc7..6bb2b8c 100644 --- a/frontend/src/components/ModSiderbar.tsx +++ b/frontend/src/components/ModSiderbar.tsx @@ -9,7 +9,7 @@ import LocationCityIcon from "@mui/icons-material/LocationCity"; import GanttChart from "./GanttChart"; import { TimetableSolution } from "../scripts/api"; import { useState } from "react"; -import { ListItemIcon } from "@mui/material"; +import { Box, ListItemIcon } from "@mui/material"; interface SidebarProps { marginTop: number; @@ -40,12 +40,12 @@ export default function ModSidebar({ marginTop, width }: SidebarProps) { "& .MuiDrawer-paper": { width: drawerWidth, boxSizing: "border-box", - marginTop: marginTop, }, }} variant="permanent" anchor="left" > + {campusSolutions && campusSolutions.length > 0 ? ( campusSolutions.map((solution) => { @@ -64,11 +64,9 @@ export default function ModSidebar({ marginTop, width }: SidebarProps) { }} > - + - + ); @@ -89,7 +87,7 @@ export default function ModSidebar({ marginTop, width }: SidebarProps) { } + element={} /> ); })} diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx index c54ff5d..341d3cb 100644 --- a/frontend/src/components/Sidebar.tsx +++ b/frontend/src/components/Sidebar.tsx @@ -8,6 +8,7 @@ import SchoolIcon from "@mui/icons-material/School"; import MeetingRoomIcon from "@mui/icons-material/MeetingRoom"; import { Link } from "react-router-dom"; +import { Box, Toolbar } from "@mui/material"; interface SidebarProps { @@ -34,12 +35,12 @@ export default function Sidebar({ marginTop, width }: SidebarProps) { "& .MuiDrawer-paper": { width: drawerWidth, boxSizing: "border-box", - marginTop: marginTop, }, }} variant="permanent" anchor="left" > + diff --git a/frontend/src/components/UploadPopUp.tsx b/frontend/src/components/UploadPopUp.tsx index 0630b5f..07aebe4 100644 --- a/frontend/src/components/UploadPopUp.tsx +++ b/frontend/src/components/UploadPopUp.tsx @@ -49,7 +49,7 @@ export default function UploadPopUp() { onClose={handleClose} slots={{ backdrop: StyledBackdrop }} > - + diff --git a/frontend/src/pages/SemesterInfo.tsx b/frontend/src/pages/SemesterInfo.tsx index 816f87c..203f952 100644 --- a/frontend/src/pages/SemesterInfo.tsx +++ b/frontend/src/pages/SemesterInfo.tsx @@ -5,6 +5,8 @@ import Footer from "../components/Footer.tsx"; import '../styles/seminfo.css'; import NextButton from "../components/NextButton.tsx"; import BackButton from "../components/BackButton.tsx"; +import { AppBar, Box, CssBaseline, Drawer, List, ListItem, ListItemButton, ListItemText, Toolbar } from "@mui/material"; +import VIT_Logo from "../assets/logo.png"; /** * Renders the SemesterInfo component with a header, sidebar, spreadsheet, @@ -15,8 +17,8 @@ import BackButton from "../components/BackButton.tsx"; export default function SemesterInfo() { return (
-
- +
+ {/* Spreadsheet */}
@@ -31,5 +33,5 @@ export default function SemesterInfo() {
- ) + ); } \ No newline at end of file diff --git a/frontend/src/pages/TimetableMod.tsx b/frontend/src/pages/TimetableMod.tsx index 90d2556..cb1b2f4 100644 --- a/frontend/src/pages/TimetableMod.tsx +++ b/frontend/src/pages/TimetableMod.tsx @@ -41,7 +41,7 @@ export default function TimetableMod() { return (
- +
Date: Thu, 17 Oct 2024 01:57:35 +1100 Subject: [PATCH 3/5] fix: fix frontend build error --- frontend/src/components/Header.tsx | 2 +- frontend/src/components/Sidebar.tsx | 2 +- frontend/src/pages/SemesterInfo.tsx | 2 -- 3 files changed, 2 insertions(+), 4 deletions(-) diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx index 1d0ec55..454cecc 100644 --- a/frontend/src/components/Header.tsx +++ b/frontend/src/components/Header.tsx @@ -1,4 +1,4 @@ -import { AppBar, Box, CssBaseline, Toolbar } from "@mui/material"; +import { AppBar, Box, CssBaseline } from "@mui/material"; import VIT_Logo from '../assets/logo.png'; /** diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx index 341d3cb..01c874b 100644 --- a/frontend/src/components/Sidebar.tsx +++ b/frontend/src/components/Sidebar.tsx @@ -8,7 +8,7 @@ import SchoolIcon from "@mui/icons-material/School"; import MeetingRoomIcon from "@mui/icons-material/MeetingRoom"; import { Link } from "react-router-dom"; -import { Box, Toolbar } from "@mui/material"; +import { Box } from "@mui/material"; interface SidebarProps { diff --git a/frontend/src/pages/SemesterInfo.tsx b/frontend/src/pages/SemesterInfo.tsx index 203f952..7b2a635 100644 --- a/frontend/src/pages/SemesterInfo.tsx +++ b/frontend/src/pages/SemesterInfo.tsx @@ -5,8 +5,6 @@ import Footer from "../components/Footer.tsx"; import '../styles/seminfo.css'; import NextButton from "../components/NextButton.tsx"; import BackButton from "../components/BackButton.tsx"; -import { AppBar, Box, CssBaseline, Drawer, List, ListItem, ListItemButton, ListItemText, Toolbar } from "@mui/material"; -import VIT_Logo from "../assets/logo.png"; /** * Renders the SemesterInfo component with a header, sidebar, spreadsheet, From 5db43f55319e7d7e284afb3d2566b0e144e7cc9b Mon Sep 17 00:00:00 2001 From: NguyenDonLam Date: Thu, 17 Oct 2024 10:48:50 +1100 Subject: [PATCH 4/5] fix(enrolment page): logo now in place --- frontend/src/components/Header.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx index 454cecc..d13f84d 100644 --- a/frontend/src/components/Header.tsx +++ b/frontend/src/components/Header.tsx @@ -19,7 +19,11 @@ export default function Header() { boxShadow: "none", }} > - logo.exe + logo.exe ); From d060d5fd5a56199f0d0842c850c6fca93f6ab09c Mon Sep 17 00:00:00 2001 From: NguyenDonLam Date: Thu, 17 Oct 2024 11:14:02 +1100 Subject: [PATCH 5/5] fix: Constant Logo and Header --- frontend/src/components/Header.tsx | 14 ++++++++++---- frontend/src/components/ModSiderbar.tsx | 2 +- frontend/src/components/Sidebar.tsx | 2 +- frontend/src/pages/SemesterInfo.tsx | 2 +- frontend/src/pages/TimetableMod.tsx | 2 +- 5 files changed, 14 insertions(+), 8 deletions(-) diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx index d13f84d..963ec7d 100644 --- a/frontend/src/components/Header.tsx +++ b/frontend/src/components/Header.tsx @@ -7,22 +7,28 @@ import VIT_Logo from '../assets/logo.png'; */ export default function Header() { return ( - + theme.zIndex.drawer + 1, - height: "17vh", + height: "130px", padding: "20px", backgroundColor: "#F5F5f5", - boxShadow: "none", + boxShadow: "none" }} > logo.exe diff --git a/frontend/src/components/ModSiderbar.tsx b/frontend/src/components/ModSiderbar.tsx index 6bb2b8c..15579e7 100644 --- a/frontend/src/components/ModSiderbar.tsx +++ b/frontend/src/components/ModSiderbar.tsx @@ -45,7 +45,7 @@ export default function ModSidebar({ marginTop, width }: SidebarProps) { variant="permanent" anchor="left" > - + {campusSolutions && campusSolutions.length > 0 ? ( campusSolutions.map((solution) => { diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx index 01c874b..ce434a6 100644 --- a/frontend/src/components/Sidebar.tsx +++ b/frontend/src/components/Sidebar.tsx @@ -40,7 +40,7 @@ export default function Sidebar({ marginTop, width }: SidebarProps) { variant="permanent" anchor="left" > - + diff --git a/frontend/src/pages/SemesterInfo.tsx b/frontend/src/pages/SemesterInfo.tsx index 7b2a635..07fc8f3 100644 --- a/frontend/src/pages/SemesterInfo.tsx +++ b/frontend/src/pages/SemesterInfo.tsx @@ -16,7 +16,7 @@ export default function SemesterInfo() { return (
- + {/* Spreadsheet */}
diff --git a/frontend/src/pages/TimetableMod.tsx b/frontend/src/pages/TimetableMod.tsx index cb1b2f4..45d8544 100644 --- a/frontend/src/pages/TimetableMod.tsx +++ b/frontend/src/pages/TimetableMod.tsx @@ -41,7 +41,7 @@ export default function TimetableMod() { return (
- +