From 61ee8fd9db23941a62bdbd30a4dcddaefee80a63 Mon Sep 17 00:00:00 2001 From: VWRoli Date: Sun, 30 Jan 2022 11:53:01 +0100 Subject: [PATCH] style: issue #443 refine planter page --- next.config.js | 1 + src/components/PageWrapper.js | 15 ++- src/components/TreeSpeciesCard.js | 28 ++++- src/components/common/CustomCard.js | 22 ++-- src/components/common/DataTag.js | 5 +- src/pages/planters/[planterid].js | 161 ++++++++++++++++++---------- src/theme.js | 11 ++ 7 files changed, 164 insertions(+), 79 deletions(-) diff --git a/next.config.js b/next.config.js index 66278ba77..561c877ad 100644 --- a/next.config.js +++ b/next.config.js @@ -14,5 +14,6 @@ module.exports = { '180.earth', 'purecatamphetamine.github.io', ], + disableStaticImages: true, }, }; diff --git a/src/components/PageWrapper.js b/src/components/PageWrapper.js index 35432c1bd..2a137a3cb 100644 --- a/src/components/PageWrapper.js +++ b/src/components/PageWrapper.js @@ -1,4 +1,4 @@ -import { Box } from '@mui/material'; +import { Box, useMediaQuery, useTheme } from '@mui/material'; import clsx from 'clsx'; import { useRouter } from 'next/router'; import { makeStyles } from 'models/makeStyles'; @@ -29,6 +29,8 @@ const useStyles = makeStyles()((theme) => ({ export default function PageWrapper({ children, className, ...otherProps }) { const { classes } = useStyles(); const router = useRouter(); + const theme = useTheme(); + const isMobileScreen = useMediaQuery(theme.breakpoints.down('md')); const onBackHandler = () => { router.back(); @@ -36,10 +38,13 @@ export default function PageWrapper({ children, className, ...otherProps }) { return ( - - - - + {isMobileScreen || ( + + + + + )} + {children} diff --git a/src/components/TreeSpeciesCard.js b/src/components/TreeSpeciesCard.js index a8fc390ec..544c26953 100644 --- a/src/components/TreeSpeciesCard.js +++ b/src/components/TreeSpeciesCard.js @@ -19,7 +19,10 @@ const useStyles = makeStyles()((theme) => ({ countBox: { background: theme.palette.textLight.main, color: theme.palette.common.white, - padding: theme.spacing(5), + padding: theme.spacing(6, 8), + [theme.breakpoints.down('md')]: { + padding: theme.spacing(5.75, 7.5), + }, display: 'flex', flexDirection: 'column', alignItems: 'center', @@ -33,14 +36,31 @@ function TreeSpeciesCard(props) { return ( - - + + {name} Count: - + {count} diff --git a/src/components/common/CustomCard.js b/src/components/common/CustomCard.js index 2e46e8524..29c8baeba 100644 --- a/src/components/common/CustomCard.js +++ b/src/components/common/CustomCard.js @@ -12,8 +12,6 @@ const useStyles = makeStyles()((theme) => ({ flexDirection: 'row', alignItems: 'center', borderRadius: theme.spacing(2), - marginTop: theme.spacing(6), - marginBottom: theme.spacing(6), cursor: 'pointer', }, avatar: { @@ -61,9 +59,7 @@ function CustomCard(props) { : theme.palette.background.greenGradient, }} > - + - + {title} - + {text} diff --git a/src/components/common/DataTag.js b/src/components/common/DataTag.js index e14412351..e10999bbd 100644 --- a/src/components/common/DataTag.js +++ b/src/components/common/DataTag.js @@ -18,7 +18,10 @@ function DataTag({ data, location }) { ) : ( )} - + {!location && `Planter since`} {data} diff --git a/src/pages/planters/[planterid].js b/src/pages/planters/[planterid].js index c0f7e4921..fee3ec8ba 100644 --- a/src/pages/planters/[planterid].js +++ b/src/pages/planters/[planterid].js @@ -1,6 +1,6 @@ import GroupsOutlinedIcon from '@mui/icons-material/GroupsOutlined'; import ParkOutlinedIcon from '@mui/icons-material/ParkOutlined'; -import { Stack } from '@mui/material'; +import { Stack, useMediaQuery, useTheme } from '@mui/material'; import Avatar from '@mui/material/Avatar'; import Box from '@mui/material/Box'; // import Card from '@mui/material/Card'; @@ -11,8 +11,9 @@ import log from 'loglevel'; import moment from 'moment'; // import Image from 'next/image'; import { useEffect, useState } from 'react'; +import CustomWorldMap from 'components/CustomWorldMap'; import TreeSpeciesCard from 'components/TreeSpeciesCard'; -import FeaturedTreesSlider from '../../components/FeaturedTreesSlider'; +import CustomImageWrapper from 'components/common/CustomImageWrapper'; import InformationCard1 from '../../components/InformationCard1'; import PageWrapper from '../../components/PageWrapper'; import VerifiedBadge from '../../components/VerifiedBadge'; @@ -55,6 +56,8 @@ export default function Planter({ planter }) { const mapContext = useMapContext(); const [isPlanterTab, setIsPlanterTab] = useState(true); + const theme = useTheme(); + const isMobileScreen = useMediaQuery(theme.breakpoints.down('md')); const { classes } = useStyles(); @@ -78,41 +81,36 @@ export default function Planter({ planter }) { } } reload(); - }, [mapContext.map]); - - function handleCardClick() { - setIsPlanterTab(!isPlanterTab); - } + }, [mapContext, planter]); return ( {planter.first_name} {planter.last_name} + + + + + - - - - - - {/* - - */} + {isMobileScreen || ( + + )} + setIsPlanterTab(true)} icon={} title="Trees Planted" - text={planter.featuredTrees.total} + text={planter.featuredTrees.trees.length} disabled={!isPlanterTab} /> setIsPlanterTab(false)} icon={} title="Ass. Orgs" - text={planter.associatedOrganizations.total} + text={planter.associatedOrganizations.organizations.length} disabled={!!isPlanterTab} /> {isPlanterTab && ( <> + + + - Explore some trees planted by {planter.first_name} + Species of trees planted - - + + {planter.species.species.map((species) => ( + + ))} + {/* Placeholder, remove after API fixed */} + + )} - {!isPlanterTab && + {/* {!isPlanterTab && planter.associatedOrganizations.organizations.map((org) => (
- ))} - - Species of trees planted - - - {planter.species.species.map((species) => ( - + - ))} - + + + )} + - - About + + About the Planter - + + {/* Just some placeholder text */} + Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa iusto + nesciunt quasi praesentium non cupiditate ratione nihil. Perferendis, + velit ipsa illo, odit unde atque doloribus tempora distinctio facere + dolorem expedita error. Natus, provident. Tempore harum repellendus + reprehenderit vitae temporibus, consequuntur blanditiis officia + excepturi, natus explicabo laborum delectus repudiandae placeat + eligendi. {planter.about} Mission - + + {/* Just some placeholder text */} + Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa iusto + nesciunt quasi praesentium non cupiditate ratione nihil. Perferendis, + velit ipsa illo, odit unde atque doloribus tempora distinctio facere + dolorem expedita error. Natus, provident. Tempore harum repellendus + reprehenderit vitae temporibus, consequuntur blanditiis officia + excepturi, natus explicabo laborum delectus repudiandae placeat + eligendi. {planter.mission} + + Check out the planting effort in action + + + {/* Placeholder image, should be changed later */} + + ); } diff --git a/src/theme.js b/src/theme.js index c397a8850..5543fc7cb 100644 --- a/src/theme.js +++ b/src/theme.js @@ -115,6 +115,17 @@ const theme = createTheme(colorTheme, { lineHeight: '14.4px', }, }, + body2: { + fontFamily: 'Lato', + fontSize: '20px', + lineHeight: '28px', + letterSpacing: '0.04em', + [colorTheme.breakpoints.down('md')]: { + fontSize: '16px', + lineHeight: '23.2px', + letterSpacing: '0.02em', + }, + }, caption: { fontFamily: 'Lato', fontSize: '12px',