Skip to content

Commit 64f6b22

Browse files
chrisdiconochrisdicono
committed
responsive design, mocks satisfied
1 parent 465cc42 commit 64f6b22

4 files changed

Lines changed: 73 additions & 67 deletions

File tree

‎src/frontend/src/pages/HomePage/IntroGuestHomePage.tsx‎

Lines changed: 27 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,14 @@
11
import { Typography, Box } from '@mui/material';
22
import PageLayout from '../../components/PageLayout';
3-
import ImageWithButton from './components/ImageWithButton';
43
import { useHistory } from 'react-router-dom';
5-
import { routes } from '../../utils/routes';
64
import { useCurrentUser } from '../../hooks/users.hooks';
75
import { useEffect } from 'react';
86
import { useHomePageContext } from '../../app/HomePageContext';
97
import { useCurrentOrganization } from '../../hooks/organizations.hooks';
108
import LoadingIndicator from '../../components/LoadingIndicator';
119
import ErrorPage from '../ErrorPage';
1210
import { useGetImageUrl } from '../../hooks/onboarding.hook';
11+
import FeaturedProjects from './components/FeaturedProjects';
1312

1413
const IntroGuestHomePage = () => {
1514
const user = useCurrentUser();
@@ -22,31 +21,31 @@ const IntroGuestHomePage = () => {
2221
} = useCurrentOrganization();
2322
const { setCurrentHomePage } = useHomePageContext();
2423

25-
const {
26-
data: applyInterestImageUrl,
27-
isLoading: applyImageLoading,
28-
isError: applyImageIsError,
29-
error: applyImageError
30-
} = useGetImageUrl(organization?.applyInterestImageId ?? null);
31-
const {
32-
data: exploreGuestImageUrl,
33-
isLoading: exploreImageLoading,
34-
isError: exploreImageIsError,
35-
error: exploreImageError
36-
} = useGetImageUrl(organization?.exploreAsGuestImageId ?? null);
24+
// const {
25+
// data: applyInterestImageUrl,
26+
// isLoading: applyImageLoading,
27+
// isError: applyImageIsError,
28+
// error: applyImageError
29+
// } = useGetImageUrl(organization?.applyInterestImageId ?? null);
30+
// const {
31+
// data: exploreGuestImageUrl,
32+
// isLoading: exploreImageLoading,
33+
// isError: exploreImageIsError,
34+
// error: exploreImageError
35+
// } = useGetImageUrl(organization?.exploreAsGuestImageId ?? null);
3736

3837
useEffect(() => {
3938
setCurrentHomePage('guest');
4039
}, [setCurrentHomePage]);
4140

42-
if (organizationIsError) {
43-
return <ErrorPage message={organizationError.message} />;
44-
}
45-
if (applyImageIsError) return <ErrorPage message={applyImageError.message} />;
46-
if (exploreImageIsError) return <ErrorPage message={exploreImageError.message} />;
41+
// if (organizationIsError) {
42+
// return <ErrorPage message={organizationError.message} />;
43+
// }
44+
// if (applyImageIsError) return <ErrorPage message={applyImageError.message} />;
45+
// if (exploreImageIsError) return <ErrorPage message={exploreImageError.message} />;
4746

48-
if (!organization || organizationIsLoading || applyImageLoading || exploreImageLoading) return <LoadingIndicator />;
49-
if (!applyInterestImageUrl || !exploreGuestImageUrl) return <LoadingIndicator />;
47+
// if (!organization || organizationIsLoading || applyImageLoading || exploreImageLoading) return <LoadingIndicator />;
48+
// if (!applyInterestImageUrl || !exploreGuestImageUrl) return <LoadingIndicator />;
5049

5150
return (
5251
<PageLayout title="Home" hidePageTitle>
@@ -60,22 +59,15 @@ const IntroGuestHomePage = () => {
6059
alignItems: 'center',
6160
flexDirection: { xs: 'column', md: 'row' },
6261
mt: 4,
63-
padding: '20px'
62+
padding: '20px',
63+
px: { xs: 1, sm: 2 },
64+
width: '100%',
65+
boxSizing: 'border-box',
66+
overflow: 'hidden'
6467
}}
6568
>
66-
<Box sx={{ display: 'flex', gap: 5 }}>
67-
<ImageWithButton
68-
title="Interested in applying"
69-
imageSrc={applyInterestImageUrl}
70-
buttonText="Learn More"
71-
onClick={() => history.push(routes.HOME_PNM)}
72-
/>
73-
<ImageWithButton
74-
title="Explore Our Work as a Guest"
75-
imageSrc={exploreGuestImageUrl}
76-
buttonText="FinishLine"
77-
onClick={() => history.push(routes.HOME_MEMBER)}
78-
/>
69+
<Box sx={{ width: '100%', minWidth: 0 }}>
70+
<FeaturedProjects />
7971
</Box>
8072
</Box>
8173
</PageLayout>

‎src/frontend/src/pages/HomePage/components/FeaturedProjects.tsx‎

Lines changed: 14 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import { wbsPipe } from 'shared';
1010
import LoadingIndicator from '../../../components/LoadingIndicator';
1111
import ScrollablePageBlock from './ScrollablePageBlock';
1212
import EmptyPageBlockDisplay from './EmptyPageBlockDisplay';
13-
import { Box } from '@mui/material';
13+
import { Box, Stack, useMediaQuery } from '@mui/material';
1414
import { Error } from '@mui/icons-material';
1515

1616
const NoFeaturedProjectsDisplay: React.FC = () => {
@@ -36,17 +36,24 @@ const NoFeaturedProjectsDisplay: React.FC = () => {
3636

3737
const FeaturedProjects: React.FC = () => {
3838
const { data: featuredProjects, isLoading, isError, error } = useFeaturedProjects();
39+
const isMobilePortrait = useMediaQuery('(max-width:480px)');
3940

4041
if (isLoading || !featuredProjects) return <LoadingIndicator />;
4142
if (isError) return <ErrorPage error={error} message={error.message} />;
4243

4344
const fullDisplay = (
44-
<ScrollablePageBlock title={`Featured Projects`} horizontal>
45-
{featuredProjects.length === 0 ? (
46-
<NoFeaturedProjectsDisplay />
47-
) : (
48-
featuredProjects.map((p) => <FeaturedProjectsCard key={wbsPipe(p.wbsNum)} project={p} />)
49-
)}
45+
<ScrollablePageBlock title={`What We're Working On`} horizontal={!isMobilePortrait}>
46+
<Stack
47+
direction={isMobilePortrait ? 'column' : 'row'}
48+
spacing={isMobilePortrait ? 2 : 3}
49+
sx={{ width: '100%', px: isMobilePortrait ? 1 : 0 }}
50+
>
51+
{featuredProjects.length === 0 ? (
52+
<NoFeaturedProjectsDisplay />
53+
) : (
54+
featuredProjects.map((p) => <FeaturedProjectsCard key={wbsPipe(p.wbsNum)} project={p} />)
55+
)}
56+
</Stack>
5057
</ScrollablePageBlock>
5158
);
5259

‎src/frontend/src/pages/HomePage/components/FeaturedProjectsCard.tsx‎

Lines changed: 30 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,57 @@
1-
import { Construction, Work } from '@mui/icons-material';
2-
import { Box, Card, CardContent, Chip, Link, Stack, Typography, useTheme } from '@mui/material';
3-
import { wbsPipe, wbsNamePipe, ProjectPreview } from 'shared';
4-
import { datePipe, fullNamePipe } from '../../../utils/pipes';
5-
import { routes } from '../../../utils/routes';
6-
import { Link as RouterLink } from 'react-router-dom';
1+
import { alpha, Box, Card, CardContent, Chip, Stack, Typography, useTheme, useMediaQuery } from '@mui/material';
2+
import { wbsNamePipe, ProjectPreview } from 'shared';
3+
import { datePipe } from '../../../utils/pipes';
74

85
interface ProjectCardProps {
96
project: ProjectPreview;
107
}
118

129
const FeaturedProjectsCard: React.FC<ProjectCardProps> = ({ project }) => {
1310
const theme = useTheme();
11+
const isMobilePortrait = useMediaQuery('(max-width:600px)');
12+
1413
return (
1514
<Card
1615
variant="outlined"
1716
sx={{
1817
minWidth: 'fit-content',
1918
minHeight: 'fit-content',
20-
mr: 3,
21-
background: theme.palette.background.default
19+
width: isMobilePortrait ? '100%' : 'auto',
20+
background: theme.palette.background.paper,
21+
borderRadius: 2
2222
}}
2323
>
2424
<CardContent sx={{ padding: 2 }}>
2525
<Stack direction="row" justifyContent="space-between">
2626
<Box>
27-
<Typography fontWeight={'regular'} variant="subtitle2" noWrap>
28-
<Link color={'text.primary'} component={RouterLink} to={`${routes.PROJECTS}/${wbsPipe(project.wbsNum)}`}>
29-
{wbsPipe(project.wbsNum)} - {wbsNamePipe(project)}
30-
</Link>
27+
<Typography
28+
fontWeight={'regular'}
29+
variant="h5"
30+
sx={{ marginBottom: '0.3rem', fontSize: { xs: '1.15rem', sm: '1.5rem' } }}
31+
>
32+
{wbsNamePipe(project)}
33+
</Typography>
34+
<Typography fontWeight={'regular'} fontSize={{ xs: 14, sm: 16 }} noWrap>
35+
Budget: ${project.budget}
3136
</Typography>
32-
<Link component={RouterLink} to={`${routes.PROJECTS}/${wbsPipe(project.wbsNum)}`} noWrap>
33-
<Typography fontWeight={'regular'} variant="h5">
34-
{wbsPipe(project.wbsNum)} - {project.name}
35-
</Typography>
36-
</Link>
37-
<Typography fontWeight={'regular'} fontSize={20} variant="h6" noWrap>
37+
<Typography fontWeight={'regular'} fontSize={{ xs: 14, sm: 16 }} noWrap>
3838
{datePipe(project.startDate) + ' ⟝ ' + project.duration + ' wks ⟞ ' + datePipe(project.endDate)}
3939
</Typography>
4040
</Box>
4141
</Stack>
4242
<Stack direction="row" sx={{ marginTop: 1 }}>
43-
<Chip
44-
sx={{ marginTop: 1, marginRight: 2 }}
45-
icon={<Construction />}
46-
label={fullNamePipe(project.lead)}
47-
size="medium"
48-
/>
49-
<Chip sx={{ marginTop: 1 }} icon={<Work />} label={fullNamePipe(project.manager)} size="medium" />
43+
{project.teams.map((team) => (
44+
<Chip
45+
sx={{
46+
marginTop: 1,
47+
marginRight: 2,
48+
bgcolor: alpha(theme.palette.primary.main, 0.45),
49+
color: theme.palette.primary.light
50+
}}
51+
label={team.teamName}
52+
size="medium"
53+
/>
54+
))}
5055
</Stack>
5156
</CardContent>
5257
</Card>

‎src/frontend/src/pages/HomePage/components/ScrollablePageBlock.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@ const ScrollablePageBlock: React.FC<ScrollablePageBlockProps> = ({ children, tit
1313
<Card
1414
sx={{
1515
height: '100%',
16+
width: 'fit-content',
17+
maxWidth: '100%',
1618
background: theme.palette.background.paper
1719
}}
1820
variant="outlined"

0 commit comments

Comments
 (0)