Skip to content

Added Responsiveness to Pages #178

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Added Responsiveness to Pages #178

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
42f2e00
Added Responsiveness
Mohit-Davar Aug 7, 2025
1b1c130
formatting
Mohit-Davar Aug 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions frontend/src/components/Charts/QueueResourcesBarChart.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -172,6 +172,7 @@ const QueueResourcesBarChart = ({ data }) => {
display: "flex",
justifyContent: "space-between",
alignItems: "center",
gap: 2,
mb: 2,
}}
>
Expand Down
15 changes: 10 additions & 5 deletions frontend/src/components/Charts/StatCard.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,18 +5,23 @@ const StatCard = ({ title, value, icon }) => (
<Paper
sx={{
p: 2,
display: "flex",
alignItems: "center",
justifyContent: "space-between",
height: "100%",
}}
>
<Box>
<Box
sx={{
display: "flex",
flexDirection: "column",
justifyContent: "space-between",
flex: 1,
}}
>
<Typography variant="subtitle2" color="textSecondary">
{title}
</Typography>
<Typography variant="h4">{value}</Typography>
</Box>
{icon}
<Box mt={2}>{icon}</Box>
</Paper>
);

Expand Down
28 changes: 14 additions & 14 deletions frontend/src/components/Layout.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import {
Toolbar,
Typography,
Tooltip,
useMediaQuery,
} from "@mui/material";
import MenuIcon from "@mui/icons-material/Menu";
import CloudIcon from "@mui/icons-material/Cloud";
Expand All @@ -25,7 +26,8 @@ import volcanoLogo from "../assets/volcano-icon-color.svg";
const Layout = () => {
// Hooks must be used inside component functions
const location = useLocation();
const [open, setOpen] = useState(true);
const [open, setOpen] = useState(false);
const isMobile = useMediaQuery("(max-width:960px)");

// constants can be kept outside the component
const volcanoOrange = "#E34C26"; // orange red theme
Expand Down Expand Up @@ -78,30 +80,30 @@ const Layout = () => {

<Drawer
data-testid="sidebar-drawer"
variant="permanent"
variant="temporary"
onClose={handleDrawerToggle}
open={open}
ModalProps={{
keepMounted: true,
}}
sx={{
width: open ? drawerWidth : 60,
flexShrink: 0,
[`& .MuiDrawer-paper`]: {
width: open ? drawerWidth : 60,
width: drawerWidth,
boxSizing: "border-box",
backgroundColor: "#f5f5f5",
transition: "width 0.2s",
overflowX: "hidden",
display: "flex",
flexDirection: "column",
},
}}
>
<Toolbar />
<Box sx={{ overflow: "hidden auto", flexGrow: 1 }}>
<Box sx={{ overflow: "auto", flexGrow: 1 }}>
<List>
{menuItems.map((item) => {
const listItem = (
<ListItem
key={item.text}
component={Link}
to={item.path}
onClick={() => setOpen(false)} // auto-close on navigation
className={
location.pathname === item.path
? "active"
Expand All @@ -125,12 +127,10 @@ const Layout = () => {
}}
>
<ListItemIcon>{item.icon}</ListItemIcon>
{open && (
<ListItemText primary={item.text} />
)}
<ListItemText primary={item.text} />
</ListItem>
);
return !open ? (
return isMobile ? (
<Tooltip
key={item.text}
title={item.text}
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/components/Searchbar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ const SearchBar = ({
className="border rounded-pill overflow-hidden shadow-sm bg-white"
style={{
height: "35px",
maxWidth: "250px",
maxWidth: "300px",
}}
>
<Button
Expand Down Expand Up @@ -104,7 +104,7 @@ const SearchBar = ({

<Col
xs="auto"
className="d-flex align-items-center gap-2"
className="d-flex flex-wrap align-items-center gap-2"
>
<Button
variant="outline-danger"
Expand Down
54 changes: 37 additions & 17 deletions frontend/src/components/jobs/JobPagination.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,49 +1,69 @@
import React from "react";
import { Box, MenuItem, Pagination, Select, Typography } from "@mui/material";
import {
Box,
MenuItem,
Pagination,
Select,
Typography,
useTheme,
useMediaQuery,
} from "@mui/material";

const JobPagination = ({
pagination,
totalJobs,
handleChangePage,
handleChangeRowsPerPage,
}) => {
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down("sm"));

return (
<Box
sx={{
mt: 2,
display: "flex",
justifyContent: "space-between",
alignItems: "center",
flexDirection: isMobile ? "column" : "row",
justifyContent: isMobile ? "center" : "space-between",
alignItems: isMobile ? "stretch" : "center",
gap: 2,
}}
>
<Select
value={pagination.rowsPerPage}
onChange={handleChangeRowsPerPage}
size="small"
<Box
sx={{
display: "flex",
justifyContent: isMobile ? "center" : "flex-start",
}}
>
<MenuItem value={5}>5 per page</MenuItem>
<MenuItem value={10}>10 per page</MenuItem>
<MenuItem value={20}>20 per page</MenuItem>
</Select>
<Select
value={pagination.rowsPerPage}
onChange={handleChangeRowsPerPage}
size="small"
>
<MenuItem value={5}>5 per page</MenuItem>
<MenuItem value={10}>10 per page</MenuItem>
<MenuItem value={20}>20 per page</MenuItem>
</Select>
</Box>

<Box
sx={{
display: "flex",
justifyContent: "space-between",
flexDirection: isMobile ? "column" : "row",
justifyContent: "center",
alignItems: "center",
mt: 2,
mb: 2,
gap: isMobile ? 1 : 2,
}}
>
<Typography variant="body2" sx={{ mr: 2 }}>
Total Jobs: {totalJobs}
</Typography>
<Typography variant="body2">Total Jobs: {totalJobs}</Typography>
<Pagination
count={Math.ceil(totalJobs / pagination.rowsPerPage)}
page={pagination.page}
onChange={handleChangePage}
color="primary"
showFirstButton
showLastButton
siblingCount={isMobile ? 0 : 1}
/>
</Box>
</Box>
Expand Down
12 changes: 10 additions & 2 deletions frontend/src/components/jobs/JobTable/JobTable.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import {
} from "@mui/material";
import JobTableHeader from "./JobTableHeader";
import JobTableRow from "./JobTableRow";
import JobTableDeleteDialog from "./JobTableDeleteDialog"; // Be sure to have this component
import JobTableDeleteDialog from "./JobTableDeleteDialog";

const JobTable = ({
jobs,
Expand Down Expand Up @@ -114,6 +114,8 @@ const JobTable = ({
<TableContainer
component={Paper}
sx={{
width: "100%",
maxWidth: "100%",
maxHeight: "calc(100vh - 200px)",
overflow: "auto",
borderRadius: "16px",
Expand Down Expand Up @@ -144,7 +146,13 @@ const JobTable = ({
},
}}
>
<Table stickyHeader>
<Table
stickyHeader
sx={{
minWidth: 750,
tableLayout: "auto",
}}
>
<JobTableHeader
filters={filters}
uniqueStatuses={uniqueStatuses}
Expand Down
6 changes: 4 additions & 2 deletions frontend/src/components/jobs/JobTable/JobTableHeader.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,8 +100,11 @@ const JobTableHeader = ({
),
backdropFilter: "blur(8px)",
padding: "16px 24px",
minWidth: 140,
minWidth: 250,
borderBottom: `2px solid ${alpha(theme.palette.primary.main, 0.2)}`,
display: "flex",
alignItems: "center",
gap: 2,
}}
>
<Typography
Expand All @@ -128,7 +131,6 @@ const JobTableHeader = ({
padding: "4px 12px",
minWidth: "auto",
borderRadius: "20px",
marginTop: "8px",
fontSize: "0.8rem",
fontWeight: 500,
letterSpacing: "0.02em",
Expand Down
12 changes: 11 additions & 1 deletion frontend/src/components/jobs/Jobs.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -211,7 +211,17 @@ const Jobs = () => {
}, []);

return (
<Box sx={{ bgcolor: "background.default", minHeight: "100vh", p: 3 }}>
<Box
sx={{
bgcolor: "background.default",
minHeight: "100vh",
px: { xs: 0, sm: 3 },
py: { xs: 0, sm: 3 },
width: "100%",
overflow: "hidden",
maxWidth: "100vw",
}}
>
{error && (
<Box sx={{ mt: 2, color: theme.palette.error.main }}>
<Typography variant="body1">{error}</Typography>
Expand Down
12 changes: 11 additions & 1 deletion frontend/src/components/pods/Pods.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -177,7 +177,17 @@ const Pods = () => {
}, []);

return (
<Box sx={{ bgcolor: "background.default", minHeight: "100vh", p: 3 }}>
<Box
sx={{
bgcolor: "background.default",
minHeight: "100vh",
px: { xs: 0, sm: 3 },
py: { xs: 0, sm: 3 },
width: "100%",
overflow: "hidden",
maxWidth: "100vw",
}}
>
{error && (
<Box sx={{ mt: 2, color: theme.palette.error.main }}>
<Typography variant="body1">{error}</Typography>
Expand Down
51 changes: 34 additions & 17 deletions frontend/src/components/pods/PodsPagination.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,13 @@
import React from "react";
import { Box, MenuItem, Pagination, Select, Typography } from "@mui/material";
import {
Box,
MenuItem,
Pagination,
Select,
Typography,
useTheme,
useMediaQuery,
} from "@mui/material";

const PodsPagination = ({ totalPods, pagination, onPaginationChange }) => {
const handleChangePage = (event, newPage) => {
Expand All @@ -9,37 +17,46 @@ const PodsPagination = ({ totalPods, pagination, onPaginationChange }) => {
const handleChangeRowsPerPage = (event) => {
onPaginationChange(1, parseInt(event.target.value, 10));
};
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down("sm"));

return (
<Box
sx={{
mt: 2,
display: "flex",
justifyContent: "space-between",
alignItems: "center",
flexDirection: isMobile ? "column" : "row",
justifyContent: isMobile ? "center" : "space-between",
alignItems: isMobile ? "stretch" : "center",
gap: 2,
}}
>
<Select
value={pagination.rowsPerPage}
onChange={handleChangeRowsPerPage}
size="small"
<Box
sx={{
display: "flex",
justifyContent: isMobile ? "center" : "flex-start",
}}
>
<MenuItem value={5}>5 per page</MenuItem>
<MenuItem value={10}>10 per page</MenuItem>
<MenuItem value={20}>20 per page</MenuItem>
</Select>
<Select
value={pagination.rowsPerPage}
onChange={handleChangeRowsPerPage}
size="small"
>
<MenuItem value={5}>5 per page</MenuItem>
<MenuItem value={10}>10 per page</MenuItem>
<MenuItem value={20}>20 per page</MenuItem>
</Select>
</Box>
<Box
sx={{
display: "flex",
justifyContent: "space-between",
flexDirection: isMobile ? "column" : "row",
justifyContent: "center",
alignItems: "center",
mt: 2,
mb: 2,
gap: isMobile ? 1 : 2,
}}
>
<Typography variant="body2" sx={{ mr: 2 }}>
Total Pods: {totalPods}
</Typography>
<Typography variant="body2">Total Pods: {totalPods}</Typography>
<Pagination
count={Math.ceil(totalPods / pagination.rowsPerPage)}
page={pagination.page}
Expand Down
Loading