Skip to content

Commit 0128764

Browse files
elainefan331elainefan331
committed
feat: update landing page layout for responsive behavior on different screen sizes; closes #51 
1 parent 95795c0 commit 0128764

File tree

8 files changed

+96
-48
lines changed

8 files changed

+96
-48
lines changed

‎public/img/section1_logo_colored.png‎

1.64 MB
Loading

‎public/img/section1_logo_contained.png‎

1.01 MB
Loading

‎public/img/section1_logo_outlined.png‎

924 KB
Loading

‎src/components/HomePageComponents/Section1.tsx‎

Lines changed: 29 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -47,11 +47,17 @@ const Section1: React.FC<Section1Props> = ({ scrollToNext }) => {
4747
container
4848
direction="column"
4949
alignItems="center"
50+
justifyContent="center"
5051
spacing={4}
51-
sx={{ mt: "10rem", width: "100%" }}
52+
sx={{ mt: "3rem", width: "100%" }}
5253
>
5354
{/* first row: logo and text */}
54-
<Grid item sx={{ width: "60%" }}>
55+
<Grid
56+
item
57+
sx={{
58+
width: { xs: "80%", sm: "80%", md: "60%", lg: "60%" },
59+
}}
60+
>
5561
<Box
5662
sx={{
5763
display: "flex",
@@ -61,15 +67,18 @@ const Section1: React.FC<Section1Props> = ({ scrollToNext }) => {
6167
>
6268
<Box
6369
component="img"
64-
src={`${process.env.PUBLIC_URL}/img/3d_graph_logo.png`}
65-
alt="3d_graph"
70+
// src={`${process.env.PUBLIC_URL}/img/3d_graph_logo.png`}
71+
src={`${process.env.PUBLIC_URL}/img/section1_logo_colored.png`}
72+
// src={`${process.env.PUBLIC_URL}/img/section1_logo_contained.png`}
73+
alt="logo"
6674
height="auto"
6775
sx={{
68-
height: "auto",
69-
width: {
70-
xs: 0,
71-
sm: 0,
72-
md: "30%",
76+
height: "150px",
77+
width: "auto",
78+
display: {
79+
xs: "none",
80+
sm: "none",
81+
md: "block",
7382
},
7483
}}
7584
></Box>
@@ -78,6 +87,12 @@ const Section1: React.FC<Section1Props> = ({ scrollToNext }) => {
7887
sx={{
7988
color: Colors.lightGray,
8089
fontWeight: "bold",
90+
height: "auto",
91+
display: {
92+
xs: "none",
93+
sm: "none",
94+
md: "block",
95+
},
8196
}}
8297
>
8398
Efficiently manage and explore your databases and datasets with
@@ -87,7 +102,10 @@ const Section1: React.FC<Section1Props> = ({ scrollToNext }) => {
87102
</Grid>
88103

89104
{/* search row */}
90-
<Grid item sx={{ width: "60%" }}>
105+
<Grid
106+
item
107+
sx={{ width: { xs: "80%", sm: "80%", md: "60%", lg: "60%" } }}
108+
>
91109
<Box sx={{ display: "flex", gap: 2 }}>
92110
<TextField
93111
fullWidth
@@ -142,7 +160,7 @@ const Section1: React.FC<Section1Props> = ({ scrollToNext }) => {
142160
<Grid
143161
item
144162
sx={{
145-
width: "60%",
163+
width: "80%",
146164
mb: { xs: 10, sm: 10, md: 14, lg: 14 },
147165
}}
148166
>

‎src/components/HomePageComponents/Section2.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ const Section2: React.FC<Section2Props> = ({
4545
justifyContent: "center",
4646
gap: 6,
4747
px: { xs: 2, md: 6 },
48-
py: { xs: 8, md: 12 },
48+
py: { xs: 12, md: 12 },
4949
mt: { xs: 2, md: 8 },
5050
}}
5151
>

‎src/components/HomePageComponents/Section3.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,9 +29,9 @@ const Section3: React.FC<Section3Props> = ({ scrollToNext }) => {
2929
flexDirection: { xs: "column", md: "row-reverse" },
3030
alignItems: "center",
3131
justifyContent: "center",
32-
gap: 15,
32+
gap: { xs: 5, md: 15 },
3333
px: { xs: 2, md: 6 },
34-
py: { xs: 8, md: 12 },
34+
py: { xs: 12, md: 12 },
3535
}}
3636
>
3737
{/* title and text */}

‎src/components/HomePageComponents/Section4.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,9 +29,9 @@ const Section4: React.FC = () => {
2929
flexDirection: { xs: "column", md: "row-reverse" },
3030
alignItems: "center",
3131
justifyContent: "center",
32-
gap: 15,
32+
gap: { xs: 5, md: 15 },
3333
px: { xs: 2, md: 6 },
34-
py: { xs: 8, md: 12 },
34+
py: { xs: 12, md: 12 },
3535
}}
3636
>
3737
{/* title and text container */}

‎src/components/NavBar/NavItems.tsx‎

Lines changed: 62 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,91 @@
1-
import { Toolbar, Grid, Button, Typography } from "@mui/material";
1+
import { Toolbar, Grid, Button, Typography, Box } from "@mui/material";
22
import { Colors } from "design/theme";
33
import React from "react";
44
import { useNavigate, Link } from "react-router-dom";
55
import RoutesEnum from "types/routes.enum";
66

7-
// import useIsLargeScreen from "hooks/useIsLargeScreen";
8-
97
const NavItems: React.FC = () => {
10-
// const isLargeScreen = useIsLargeScreen();
11-
// const justifyContentValue = isLargeScreen ? "flex-start" : "space-between";
12-
138
const navigate = useNavigate();
149

1510
return (
1611
<Toolbar sx={{ marginTop: "0.5rem" }}>
1712
<Grid
1813
container
1914
alignItems="center"
20-
// justifyContent={justifyContentValue}
21-
sx={{ maxWidth: "100%" }}
15+
sx={{
16+
maxWidth: "100%",
17+
border: "2px solid red",
18+
}}
2219
>
23-
<Grid item sm={12} md={5} lg={5}>
24-
<Button
25-
disableRipple
20+
{/* <Box
21+
sx={{
22+
display: "flex",
23+
flexDirection: { sx: "row", sm: "row", md: "column", lg: "column" },
24+
border: "2px solid red",
25+
}}
26+
> */}
27+
<Grid item sm={12} md={5} lg={5} sx={{ border: "2px solid yellow" }}>
28+
<Box
2629
sx={{
2730
display: "flex",
2831
alignItems: "center",
29-
justifyContent: "center",
30-
flexDirection: "column",
31-
backgroundColor: "transparent",
32-
"&:hover": {
33-
backgroundColor: "transparent",
34-
},
32+
gap: 2, // space between image and text
3533
}}
36-
onClick={() => navigate("/")}
3734
>
38-
<Typography
39-
variant="h1"
35+
<Box
36+
component="img"
37+
src={`${process.env.PUBLIC_URL}/img/section1_logo_colored.png`}
38+
alt="logo"
39+
onClick={() => navigate("/")}
40+
height="auto"
4041
sx={{
41-
color: Colors.yellow,
42+
height: "80px",
43+
width: "auto",
44+
display: { xs: "block", sm: "block", md: "none" },
4245
}}
43-
>
44-
NeuroJSON.io
45-
</Typography>
46-
<Typography
47-
variant="h2"
46+
></Box>
47+
<Button
48+
disableRipple
4849
sx={{
49-
color: Colors.lightGray,
50+
display: "flex",
51+
alignItems: "center",
52+
justifyContent: "center",
53+
flexDirection: "column",
54+
backgroundColor: "transparent",
55+
"&:hover": {
56+
backgroundColor: "transparent",
57+
},
5058
}}
59+
onClick={() => navigate("/")}
5160
>
52-
Free Data Worth Sharing
53-
</Typography>
54-
</Button>
61+
<Typography
62+
variant="h1"
63+
sx={{
64+
color: Colors.yellow,
65+
}}
66+
>
67+
NeuroJSON.io
68+
</Typography>
69+
<Typography
70+
variant="h2"
71+
sx={{
72+
color: Colors.lightGray,
73+
}}
74+
>
75+
Free Data Worth Sharing
76+
</Typography>
77+
</Button>
78+
</Box>
5579
</Grid>
5680

5781
{/* Navigation links*/}
58-
<Grid item paddingLeft="2rem">
59-
<Grid container spacing={3} justifyContent="center">
82+
<Grid item sx={{ border: "2px solid green" }}>
83+
<Grid
84+
container
85+
spacing={3}
86+
justifyContent="center"
87+
// sx={{ border: "2px solid green" }}
88+
>
6089
{[
6190
{ text: "ABOUT", url: "https://neurojson.org/Doc/Start" },
6291
{ text: "WIKI", url: "https://neurojson.org/Wiki" },
@@ -112,6 +141,7 @@ const NavItems: React.FC = () => {
112141
))}
113142
</Grid>
114143
</Grid>
144+
{/* </Box> */}
115145
</Grid>
116146
</Toolbar>
117147
);

0 commit comments

Comments
 (0)