Skip to content

Commit

Permalink
fixes for spacing in animated about us section
Browse files Browse the repository at this point in the history
  • Loading branch information
@tmanundercover
tmanundercover committed Nov 28, 2023
1 parent 3d77c9b commit d9ea3a1
Show file tree
Hide file tree
Showing 3 changed files with 83 additions and 62 deletions.
4 changes: 2 additions & 2 deletions src/components/animated/AnimatedAboutUsItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -102,10 +102,10 @@ const AnimatedAboutUsItem: FunctionComponent<IProps> = (props: IProps) => {
<Grid item>
<motion.div animate={textColorControls} initial={{color: 'initial'}}>
<Typography style={{marginTop: "16px", marginBottom: "16px",}}
variant='h6' align='center'>{props.service.contentTitle}</Typography>
variant='h6' align='center' noWrap>{props.service.contentTitle}</Typography>
</motion.div>
</Grid>
<Grid item container justifyContent='center'>
<Grid item container justifyContent='center' minWidth={150}>
<Typography variant='body1' align='center'
>{props.service.contentText}</Typography>
</Grid>
Expand Down
136 changes: 79 additions & 57 deletions src/components/animated/AnimatedAboutUsSection.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,20 @@
import React, {FunctionComponent, useContext} from 'react'
import {Theme, ThemeProvider} from '@mui/material/styles';
import React, {FunctionComponent} from 'react'
import {Theme} from '@mui/material/styles';
import makeStyles from '@mui/styles/makeStyles';
import {Card, Grid, Typography} from '@mui/material'
import {Grid, Typography, useMediaQuery, useTheme} from '@mui/material'
import AnimatedAboutUsItem from "./AnimatedAboutUsItem";
import CustomizedThemeContext from "../customized-theme-provider/CustomizedThemeContext";
import {AnimatedAboutUsSectionType, AnimatedServiceItemNoRefType, ServiceAmenityType} from "../BlockContentTypes";
import {urlFor} from "../block-content-ui/static-pages/cmsStaticPagesClient";
import {Circle} from "@mui/icons-material";
import {motion, useAnimationControls} from "framer-motion"
import {motion} from "framer-motion"
import BulletedHeader from "./BulletedHeader";
import HorizontalAmenity from "./HorizontalAmenity";

export const useStyles = makeStyles((theme: Theme) => ({
root: {
paddingTop: '64px',
backgroundColor: '#f6f6f6'
backgroundColor: '#f6f6f6',
position: "relative"
},
}))

Expand All @@ -25,21 +25,39 @@ interface IProps {

const AnimatedAboutUsSection: FunctionComponent<IProps> = (props) => {
const classes = useStyles()
// const mdDown = widthUtils.useIsWidthDown('md')
const customizedThemeContext = useContext(CustomizedThemeContext)

const theme = useTheme()
const xsOnly = useMediaQuery(theme.breakpoints.only('xs'))

return (
<ThemeProvider theme={customizedThemeContext.customizedTheme}>
<Grid container item className={classes.root} xs={12} alignItems='center'>
<Grid item container justifyContent='center' spacing={2}>
{!xsOnly && <motion.div style={{
opacity: .2,
width: 256,
height: 256,
bottom: 32,
left: 32,
// marginLeft: "-10px",
// marginTop: "-5px",
position: "absolute"
}}
animate={{rotate: 360}}
transition={{ease: "linear", duration: 10, repeat: Infinity}}
>

<img
width={256}
height={256}
src={urlFor(props.sectionData?.servicesMasonryAccentImageSrc ?? "").width(64).height(64).url() ?? ""}
/>
</motion.div>}
<Grid item container justifyContent='center' spacing={2} px={4}>
{props.sectionData.servicesList?.map((service: AnimatedServiceItemNoRefType, index: number) => {
return <Grid item xs={12} sm={3} key={index}><AnimatedAboutUsItem service={service}/></Grid>
return <Grid item xs={12} sm={5} md={4} key={index} container justifyContent='center'><AnimatedAboutUsItem service={service}/></Grid>
})}
</Grid>
<Grid item container style={{padding: customizedThemeContext.customizedTheme.spacing(8, 6)}}
<Grid item container style={{padding: theme.spacing(8, 6)}}
spacing={2} justifyContent='center'>
<Grid item xs={12} sm={6}>
<Grid item xs={12} sm={11}>
<Grid item container>
<BulletedHeader textContent={props.sectionData?.contentPreTitle} heroBullet={props.sectionData?.heroBullet} />
</Grid>
Expand All @@ -59,14 +77,14 @@ const AnimatedAboutUsSection: FunctionComponent<IProps> = (props) => {
</Grid>))}
</Grid>
<Grid item container>
<Grid item style={{padding: customizedThemeContext.customizedTheme.spacing(4, 0)}}>
<Grid item style={{padding: theme.spacing(4, 0)}}>
<Typography variant='h6'
gutterBottom>{props.sectionData?.highlightedAmenitiesTitle}</Typography>
</Grid>
</Grid>
<Grid item container style={{paddingBottom: "32px"}}>
{props.sectionData.highlightedAmenities?.map((amenity: ServiceAmenityType, index: number) => {
return <Grid item key={index}><HorizontalAmenity amenity={amenity} /></Grid>
return <Grid container item key={index} xs={12} sm={6}><HorizontalAmenity amenity={amenity} /></Grid>
})}
</Grid>
<Grid item container>
Expand All @@ -75,7 +93,7 @@ const AnimatedAboutUsSection: FunctionComponent<IProps> = (props) => {
<Typography variant='body1' gutterBottom>{segment}</Typography>
</Grid>))}
</Grid>
<Grid item container style={{paddingLeft: customizedThemeContext.customizedTheme.spacing(3)}}>
<Grid item container style={{paddingLeft: theme.spacing(3)}}>
{props.sectionData?.highlightedAmenitiesBullets?.map((segment: string, index: number) => (
<Grid item container key={index} alignContent='center' spacing={1}>
<Grid item><Circle style={{fontSize: "8px"}}/></Grid><Grid item><Typography
Expand All @@ -84,29 +102,28 @@ const AnimatedAboutUsSection: FunctionComponent<IProps> = (props) => {
</Grid>
</Grid>

<Grid item xs={12} md={6} spacing={2} style={{position: "relative"}}>
{
<Grid item container justifyContent='center' alignContent='center'>
<Grid
container
item
style={{
left: "200px",
top: "50%",
paddingTop: "8px",
borderRadius: "50%",
height: "90px",
width: "90px",
position: "absolute",
backgroundColor: customizedThemeContext.customizedTheme.palette.background.paper
}}
>
<Grid item xs={12} md={6} spacing={2} container justifyContent='center'>

<Grid container item spacing={1} style={{position: "relative"}} >
{
<Grid item container justifyContent='center' alignContent='center' alignItems='center' style={{
left: "calc(50% - 45px)",
top: "calc(50% - 8px)",
// top: "50%",
paddingTop: "8px",
borderRadius: "50%",
height: "90px",
width: "90px",
position: "absolute",
backgroundColor: theme.palette.background.paper
}}>

<Grid item>
<motion.div style={{
width: 64,
height: 64,
marginLeft: "12px",
marginTop: "6px"
marginLeft: "-10px",
marginTop: "-5px"
}}
animate={{rotate: 360}}
transition={{ease: "linear", duration: 10, repeat: Infinity}}
Expand All @@ -119,34 +136,39 @@ const AnimatedAboutUsSection: FunctionComponent<IProps> = (props) => {
/>
</motion.div>
</Grid>
{/*</Card>*/}
</Grid>
{/*</Card>*/}
</Grid>
}
{
props.sectionData?.servicesImageSrcArr &&
<Grid item container xs={12} justifyContent='center'>
<Grid item style={{marginBottom: "8px",}}><img
src={urlFor(props.sectionData?.servicesImageSrcArr[0] ?? "").url() ?? ""}/></Grid>
</Grid>
}
{
props.sectionData?.servicesImageSrcArr &&
<Grid item container spacing={2} justifyContent='center' xs={12} minWidth={522}
maxWidth={"100%"}>
<Grid item xs={6}>
<img src={urlFor(props.sectionData?.servicesImageSrcArr[1] ?? "").url() ?? ""}/>
}
{
props.sectionData?.servicesImageSrcArr &&
<Grid item container justifyContent='center'>
<Grid item>
<img
src={urlFor(props.sectionData?.servicesImageSrcArr[0] ?? "").url() ?? ""}/>
</Grid>
</Grid>
<Grid item xs={6}>
<img src={urlFor(props.sectionData?.servicesImageSrcArr[2] ?? "").url() ?? ""}/>
}
{
props.sectionData?.servicesImageSrcArr &&
<Grid item container justifyContent='center' spacing={2}>
<Grid item xs={6} container justifyContent='flex-end'>
<Grid item><img
src={urlFor(props.sectionData?.servicesImageSrcArr[1] ?? "").url() ?? ""}/></Grid>
</Grid>
<Grid item xs={6}>
<Grid item>
<img
style={{maxWidth: "100%"}}
src={urlFor(props.sectionData?.servicesImageSrcArr[2] ?? "").url() ?? ""}/></Grid>
</Grid>
</Grid>
</Grid>
}
}

</Grid>

</Grid>
</Grid>
</Grid>
</ThemeProvider>
)
}

Expand Down
5 changes: 2 additions & 3 deletions src/components/animated/HorizontalAmenity.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,8 +30,7 @@ const HorizontalAmenity: FunctionComponent<IProps> = (props: IProps) => {

return (
<motion.div onHoverStart={animateFlipIcon} onHoverEnd={animateUnFlipIcon}>
<Grid item container xs={12} sm={6}
maxWidth={350} spacing={1}>
<Grid item container spacing={1}>
<Grid item maxWidth={64} style={{position: "relative"}}>
<Card style={{
position: "absolute",
Expand All @@ -50,7 +49,7 @@ const HorizontalAmenity: FunctionComponent<IProps> = (props: IProps) => {
</Grid>
<Grid item maxWidth={250}>
<Grid item>
<Typography variant='body2' gutterBottom>{props.amenity.name}</Typography>
<Typography variant='body2' gutterBottom noWrap>{props.amenity.name}</Typography>
</Grid>
<Grid item>
<Typography variant='body1'>{props.amenity.description}</Typography>
Expand Down

0 comments on commit d9ea3a1

Please sign in to comment.