Skip to content

Commit 4f4be98

Browse files
jacobfilikjacobfilik
authored
Start work on responsiveness with submission pages (#54)
* Start work on responsiveness with submission pages
1 parent d47d520 commit 4f4be98

File tree

12 files changed

+46
-147
lines changed

12 files changed

+46
-147
lines changed

‎web-conexs-client/src/App.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { CssBaseline, Stack } from "@mui/material";
1+
import { CssBaseline, responsiveFontSizes, Stack } from "@mui/material";
22
import Header from "./components/Header";
33
import WelcomePage from "./components/WelcomePage";
44
import MoleculePage from "./components/molecules/MoleculePage";
@@ -27,9 +27,11 @@ import SimulationView from "./components/SimulationView";
2727

2828
const queryClient = new QueryClient();
2929

30+
const theme = responsiveFontSizes(DiamondTheme);
31+
3032
function App() {
3133
return (
32-
<ThemeProvider theme={DiamondTheme}>
34+
<ThemeProvider theme={theme}>
3335
<CssBaseline />
3436
<QueryClientProvider client={queryClient}>
3537
<UserProvider>

‎web-conexs-client/src/components/Header.test.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,6 @@ describe("App", () => {
2020
it("renders the App component", () => {
2121
render(<Header />, { wrapper: themeProvider });
2222

23-
expect(screen.getByText("Web-CONEXS")).toBeDefined();
23+
expect(screen.getByText("Web‑CONEXS")).toBeDefined();
2424
});
2525
});

‎web-conexs-client/src/components/Header.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -45,11 +45,10 @@ export default function Header() {
4545
<Typography
4646
variant="h4"
4747
color={theme.palette.primary.contrastText}
48-
sx={{ padding: "10px 0px 2px 0px" }}
49-
s
48+
sx={{ padding: "10px 5px 2px 5px" }}
5049
height="100%"
5150
>
52-
Web-CONEXS
51+
Web&#8209;CONEXS
5352
</Typography>
5453
</Navbar>
5554
);

‎web-conexs-client/src/components/React3dMol.tsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -139,7 +139,13 @@ export default function React3dMol(props: Molecule3DProps) {
139139
return (
140140
<div
141141
ref={moleculeViewer}
142-
style={{ height: "100%", width: "100%", position: "relative" }}
142+
style={{
143+
height: "100%",
144+
width: "100%",
145+
position: "relative",
146+
minHeight: "100px",
147+
minWidth: "100px",
148+
}}
143149
/>
144150
);
145151
}

‎web-conexs-client/src/components/SideDrawer.tsx‎

Lines changed: 1 addition & 130 deletions
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ function ListItemStyled(props: {
6464
sx={[
6565
{
6666
width: { drawerWidth },
67-
minHeight: 48,
67+
minHeight: 32,
6868
px: 2.5,
6969
},
7070
open
@@ -252,129 +252,10 @@ export default function SideDrawer() {
252252
</>
253253
);
254254

255-
// return (
256-
// <Drawer2
257-
// variant="permanent"
258-
// open={open}
259-
// onMouseEnter={() => {
260-
// setOpen(true);
261-
// }}
262-
// onMouseLeave={() => {
263-
// setOpen(false);
264-
// }}
265-
// >
266-
// <Divider />
267-
// <List>
268-
// {["Inbox", "Starred", "Send email", "Drafts"].map((text, index) => (
269-
// <ListItem key={text} disablePadding sx={{ display: "block" }}>
270-
// <ListItemButton
271-
// sx={[
272-
// {
273-
// minHeight: 48,
274-
// px: 2.5,
275-
// },
276-
// open
277-
// ? {
278-
// justifyContent: "initial",
279-
// }
280-
// : {
281-
// justifyContent: "center",
282-
// },
283-
// ]}
284-
// >
285-
// <ListItemIcon
286-
// sx={[
287-
// {
288-
// minWidth: 0,
289-
// justifyContent: "center",
290-
// },
291-
// open
292-
// ? {
293-
// mr: 3,
294-
// }
295-
// : {
296-
// mr: "auto",
297-
// },
298-
// ]}
299-
// >
300-
// <MenuIcon />
301-
// </ListItemIcon>
302-
// <ListItemText
303-
// primary={text}
304-
// sx={[
305-
// open
306-
// ? {
307-
// opacity: 1,
308-
// }
309-
// : {
310-
// opacity: 0,
311-
// },
312-
// ]}
313-
// />
314-
// </ListItemButton>
315-
// </ListItem>
316-
// ))}
317-
// </List>
318-
// <Divider />
319-
// <List>
320-
// {["All mail", "Trash", "Spam"].map((text, index) => (
321-
// <ListItem key={text} disablePadding sx={{ display: "block" }}>
322-
// <ListItemButton
323-
// sx={[
324-
// {
325-
// minHeight: 48,
326-
// px: 2.5,
327-
// },
328-
// open
329-
// ? {
330-
// justifyContent: "initial",
331-
// }
332-
// : {
333-
// justifyContent: "center",
334-
// },
335-
// ]}
336-
// >
337-
// <ListItemIcon
338-
// sx={[
339-
// {
340-
// minWidth: 0,
341-
// justifyContent: "center",
342-
// },
343-
// open
344-
// ? {
345-
// mr: 3,
346-
// }
347-
// : {
348-
// mr: "auto",
349-
// },
350-
// ]}
351-
// >
352-
// <MenuIcon />
353-
// </ListItemIcon>
354-
// <ListItemText
355-
// primary={text}
356-
// sx={[
357-
// open
358-
// ? {
359-
// opacity: 1,
360-
// }
361-
// : {
362-
// opacity: 0,
363-
// },
364-
// ]}
365-
// />
366-
// </ListItemButton>
367-
// </ListItem>
368-
// ))}
369-
// </List>
370-
// </Drawer2>
371-
// );
372-
373255
return (
374256
<Drawer2
375257
variant="permanent"
376258
open={open}
377-
// onClose={toggleDrawer(false)}
378259
onMouseEnter={() => {
379260
setOpen(true);
380261
}}
@@ -385,14 +266,4 @@ export default function SideDrawer() {
385266
{DrawerList}
386267
</Drawer2>
387268
);
388-
389-
// return DrawerList;
390-
// <>
391-
// <IconButton size="large" onClick={toggleDrawer(true)}>
392-
// <MenuIcon color="secondary" fontSize="large" />
393-
// </IconButton>
394-
// <Drawer open={open} onClose={toggleDrawer(false)}>
395-
// {DrawerList}
396-
// </Drawer>
397-
// </>
398269
}

‎web-conexs-client/src/components/fdmnes/FdmnesForm.tsx‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -66,9 +66,15 @@ export default function FdmnesForm(props: {
6666
justifyContent="space-between"
6767
margin="5px"
6868
spacing="5px"
69+
overflow="auto"
6970
>
7071
{props.hasData && props.data != null ? (
71-
<Stack direction="row" flex={1} spacing={"5px"}>
72+
<Stack
73+
direction={{ sm: "column", md: "row" }}
74+
flex={1}
75+
spacing={"5px"}
76+
align-content={"stretch"}
77+
>
7278
<Stack flex={1}>
7379
<JsonForms
7480
schema={props.schema}
@@ -98,11 +104,12 @@ export default function FdmnesForm(props: {
98104
sx={{
99105
margin: "20px",
100106
flex: 1,
101-
minHeight: 0,
107+
minHeight: "auto",
102108
alignItems: "stretch",
103109
display: "flex",
104110
flexDirection: "column",
105111
spacing: "2px",
112+
minWidth: "auto",
106113
}}
107114
elevation={3}
108115
>

‎web-conexs-client/src/components/fdmnes/FdmnesSubmitPage.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ export default function FdmnesSubmitPage(props: { isCrystal: boolean }) {
66
const theme = useTheme();
77
return (
88
<MainPanel>
9-
<Stack flex={1}>
9+
<Stack flex={1} overflow="hidden">
1010
<Toolbar
1111
sx={{
1212
justifyContent: "space-between",

‎web-conexs-client/src/components/molecules/MoleculePage.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ export default function MoleculePage() {
4646
Molecules
4747
</Typography>
4848
</Toolbar>
49-
<Stack direction={"row"} spacing={3}>
49+
<Stack spacing={3} direction={{ sm: "column", md: "row" }}>
5050
<StructureTable
5151
structures={query.data ? query.data : []}
5252
selectedStructure={undefined}

‎web-conexs-client/src/components/orca/OrcaForm.tsx‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -69,9 +69,15 @@ export default function OrcaForm() {
6969
justifyContent="space-between"
7070
margin="5px"
7171
spacing="5px"
72+
overflow="auto"
7273
>
7374
{hasData && data != null ? (
74-
<Stack direction="row" flex={1} spacing={"5px"}>
75+
<Stack
76+
flex={1}
77+
spacing={"5px"}
78+
direction={{ sm: "column", md: "row" }}
79+
align-content={"stretch"}
80+
>
7581
<Stack flex={1}>
7682
<JsonForms
7783
schema={schema}
@@ -108,11 +114,12 @@ export default function OrcaForm() {
108114
sx={{
109115
margin: "20px",
110116
flex: 1,
111-
minHeight: 0,
117+
minHeight: "auto",
112118
alignItems: "stretch",
113119
display: "flex",
114120
flexDirection: "column",
115121
spacing: "2px",
122+
minWidth: "auto",
116123
}}
117124
elevation={3}
118125
>

‎web-conexs-client/src/components/orca/OrcaSubmitPage.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ export default function OrcaSubmitPage() {
66
const theme = useTheme();
77
return (
88
<MainPanel>
9-
<Stack flex={1} overflow="auto">
9+
<Stack flex={1} overflow="hidden">
1010
<Toolbar
1111
sx={{
1212
justifyContent: "space-between",

0 commit comments

Comments
 (0)