Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

2 footer #11

Merged
merged 3 commits into from
Dec 1, 2023
Merged

2 footer #11

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f571af1
add footer
tmanundercover Nov 30, 2023
f884690
add option of social media block to footer document
tmanundercover Dec 1, 2023
be81c52
add responsive center
tmanundercover Dec 1, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions sanityIo/schemas/sections/web-dev/FooterSection.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,11 @@ export default {
title: 'Name',
type: 'string',
},
{
name: 'isSocialMediaBlock',
title: 'Show Social Media Block',
type: 'boolean',
},
{
name: 'footerMenuRef',
title: 'Footer Menu',
Expand Down
1 change: 0 additions & 1 deletion src/common/sanityIo/Types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -241,7 +241,6 @@ export type SanityMenuContainer = {
logoAccentText?: string
logoImageSrc?: SanityImageAsset
isSearch?: boolean

}

export type MainMenuAnchorType = 'left' | 'top' | 'right' | 'bottom'
2 changes: 2 additions & 0 deletions src/components/BlockContentLayoutContainer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -463,6 +463,8 @@ const BlockContentLayoutContainer: FunctionComponent<BlockContentLayoutContainer
const mapSection: MapSectionType = columnLayoutContainer

return <Grid key={'map-section'} container item>
<Link id={"MAP_SECTION"} underline="hover"><></>
</Link>
<MapSection
sectionData={mapSection}
/>
Expand Down
1 change: 1 addition & 0 deletions src/components/BlockContentTypes.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -615,6 +615,7 @@ export type DevelopmentFooterSectionType = {
}
export type FooterSectionType = {
name: string
isSocialMediaBlock: boolean
footerMenuRef: SanityMenuContainer
}

Expand Down
1 change: 1 addition & 0 deletions src/components/FooterBlockContentLayoutContainer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,6 +86,7 @@ const FooterBlockContentLayoutContainer: FunctionComponent<FooterBlockContentLay
<Link id={"BOTTOM_OF_PAGE"} underline="hover"><></>
</Link>
<Footer
isSocialMediaBlock={footer.isSocialMediaBlock}
pageFooter={footer.footerMenuRef}
/>
</Grid>
Expand Down
115 changes: 60 additions & 55 deletions src/components/animated/MapSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,12 @@ import React, {FunctionComponent} from 'react'

import makeStyles from "@mui/styles/makeStyles";
import {Theme} from "@mui/material/styles";
import {Box, Card, CircularProgress, Grid, Typography, useMediaQuery, useTheme} from "@mui/material";
import {Card, CircularProgress, Grid, Typography, useMediaQuery, useTheme} from "@mui/material";
import {MapSectionType, ServiceAmenityType} from "../BlockContentTypes";
import {Email, LocationOn, Phone, Rectangle} from "@mui/icons-material";
import {Email, LocationOn, Phone} from "@mui/icons-material";
import {urlFor} from "../block-content-ui/static-pages/cmsStaticPagesClient";
import {COLORS} from "../../theme/common/ColorPalette";
import {GoogleMap, Marker, useJsApiLoader, Data} from '@react-google-maps/api';
import {GoogleMap, Marker, useJsApiLoader} from '@react-google-maps/api';


export const useStyles = makeStyles((theme: Theme) => ({
Expand Down Expand Up @@ -75,7 +75,6 @@ const MapSection: FunctionComponent<IProps> = (props: IProps) => {
}



return (<Grid container item>
<Grid item container className={classes.grayscale}>
{
Expand All @@ -90,70 +89,76 @@ const MapSection: FunctionComponent<IProps> = (props: IProps) => {
text: props.sectionData?.mapMarkerTitle ?? " ",
className: classes.markerClass,
fontSize: "18px"
}}></Marker>
}}></Marker>


</GoogleMap>
: <CircularProgress/>
}
</Grid>
<Grid container item style={{position: "relative"}}>
<Grid container item style={{position: "relative",}}>
<Grid item container sx={{
position: "relative",
position: mdDown?"relative":"absolute",
top: mdDown ? 0 : -66,
backgroundColor: COLORS.TRANSPARENT_DARKBLUE,
border: "1px solid white",
marginLeft: mdDown ? 0 : "32px",
marginRight: mdDown ? 0 : "32px",
padding: theme.spacing(4, 4, 2, 4)
}} justifyContent='space-between'>{
props.sectionData?.contactInfo.map((detail: ServiceAmenityType, index) =>
<Grid key={index}
container
xs={12}
md={3}
style={{marginBottom: "16px"}}
justifyContent='center'
>
<Grid item container alignItems='center' maxWidth={380} minWidth={290}
justifyContent='center'>
<Grid item xs={12} md={3} style={{marginRight: "8px", marginBottom: "4px"}} container
paddingLeft: mdDown?0:"32px",
paddingRight: mdDown?0:"32px",
}}>
<Grid item container
sx={{
backgroundColor: COLORS.TRANSPARENT_DARKBLUE,
border: "1px solid white",
padding: theme.spacing(4, 4, 2, 4)
}}
justifyContent='space-between'>{
props.sectionData?.contactInfo.map((detail: ServiceAmenityType, index) =>
<Grid key={index}
container
xs={12}
md={3}
style={{marginBottom: "16px"}}
justifyContent='center'
>
<Grid item container alignItems='center' maxWidth={380} minWidth={290}
justifyContent='center'>
<Card
elevation={0}
style={{
width: "60px",
height: "60px",
backgroundColor: theme.palette.primary.main,
borderRadius: "50%",
border: `3px solid ${theme.palette.secondary.main}`
}}>
<Grid container justifyContent='center' alignContent='center' alignItems='center'
style={{height: "100%",}}>
<Grid item style={{paddingTop: "6px"}}>
{
detail.imageSrc ?
<img width={24} src={urlFor(detail.imageSrc ?? "").url() ?? ""}
/> : getIcon(detail.muiIcon)
}
<Grid item xs={12} md={3} style={{marginRight: "8px", marginBottom: "4px"}} container
justifyContent='center'>
<Card
elevation={0}
style={{
width: "60px",
height: "60px",
backgroundColor: theme.palette.primary.main,
borderRadius: "50%",
border: `3px solid ${theme.palette.secondary.main}`
}}>
<Grid container justifyContent='center' alignContent='center'
alignItems='center'
style={{height: "100%",}}>
<Grid item style={{paddingTop: "6px"}}>
{
detail.imageSrc ?
<img width={24} src={urlFor(detail.imageSrc ?? "").url() ?? ""}
/> : getIcon(detail.muiIcon)
}
</Grid>
</Grid>
</Grid>
</Card>
</Grid>
<Grid item maxWidth={260}>
<Grid item>
<Typography variant='body1' color='textSecondary' noWrap
align={mdDown ? "center" : "left"}>{detail.name}</Typography>
</Card>
</Grid>
<Grid item>
<Typography fontWeight='bold' fontSize='16px' variant='body2'
color='textSecondary'
align={mdDown ? "center" : "left"}>{detail.description}</Typography>
<Grid item maxWidth={260}>
<Grid item>
<Typography variant='body1' color='textSecondary' noWrap
align={mdDown ? "center" : "left"}>{detail.name}</Typography>
</Grid>
<Grid item>
<Typography fontWeight='bold' fontSize='16px' variant='body2'
color='textSecondary'
align={mdDown ? "center" : "left"}>{detail.description}</Typography>
</Grid>
</Grid>
</Grid>
</Grid>
</Grid>)
}</Grid>
</Grid>)
}</Grid>
</Grid>
</Grid>
</Grid>)
}
Expand Down
34 changes: 18 additions & 16 deletions src/components/templates/mackenzies-mind/footer/Footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,19 @@
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 {Grid} from '@mui/material'
import {Grid, useMediaQuery, useTheme} from '@mui/material'
import FooterMenuContainer from './FooterMenuContainer'
import {SanityMenuContainer} from "../../../../common/sanityIo/Types";
import {COLORS} from "../../../../theme/common/ColorPalette";
import CustomizedThemeContext from "../../../customized-theme-provider/CustomizedThemeContext";

export const useStyles = makeStyles((theme: Theme) => ({
root: {
// paddingTop: "32px",
backgroundColor: COLORS.DARK_GRAY,
// color: '#FDF3EB',
// marginLeft: -1 * theme.spacing(1),
// zIndex: 1000,
padding: theme.spacing(4),
padding: theme.spacing(4, 4, 1, 4),
'& .MuiFormLabel-root': {
color: 'white',
},
Expand Down Expand Up @@ -42,24 +42,26 @@ interface IProps {
pageFooter?: SanityMenuContainer
footerMenuSlug?: string
updateIsLoading?: (value: boolean) => void
isSocialMediaBlock?: boolean
}

const Footer: FunctionComponent<IProps> = (props: IProps) => {
const customizedTheme = useContext(CustomizedThemeContext)
const classes = useStyles(customizedTheme)
const classes = useStyles()

const theme = useTheme()

const mdDown = useMediaQuery(theme.breakpoints.down('md'))
return (
<ThemeProvider theme={customizedTheme.customizedTheme}>
<Grid container className={classes.root}>
<Grid container justifyContent="flex-start">
<Grid item xs={12}>
{props.pageFooter && <FooterMenuContainer pageFooterMenu={props.pageFooter}
updateIsLoading={props.updateIsLoading}
/>}
</Grid>
<Grid container className={classes.root}>
<Grid container justifyContent="flex-start" sx={{paddingTop: mdDown ? 0 : "56px"}}>
<Grid item xs={12}>
{props.pageFooter && <FooterMenuContainer isSocialMediaBlock={props.isSocialMediaBlock}
pageFooterMenu={props.pageFooter}
updateIsLoading={props.updateIsLoading}
/>}
</Grid>
</Grid>
</ThemeProvider>
</Grid>
)
}

Expand Down
34 changes: 29 additions & 5 deletions src/components/templates/mackenzies-mind/footer/FooterMenuContainer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,17 @@ import PageContext from "../../../page-context/PageContext";
import MailTo from "../../../mail-to/MailTo";
import Logo from "../../../logo/Logo";
import AlternatingText from "../../../logo/AlternatingText";
import SocialMediaBlock from "../../my-digital-resume/social-media-block/SocialMediaBlock";

interface IProps {
pageFooterMenu?: SanityMenuContainer
updateIsLoading?: (value: boolean) => void
isSocialMediaBlock?:boolean
}

const FooterMenuContainer: FunctionComponent<IProps> = (props: IProps) => {

const theme = useTheme()

const pageContext = useContext(PageContext)
const customizedThemeContext = useTheme()
Expand All @@ -26,6 +29,9 @@ const FooterMenuContainer: FunctionComponent<IProps> = (props: IProps) => {
const classes = useStyles(customizedThemeContext)

const smDown = useMediaQuery(customizedThemeContext.breakpoints.down('sm'))
const mdDown = useMediaQuery(customizedThemeContext.breakpoints.down('md'))
const mdOnly = useMediaQuery(customizedThemeContext.breakpoints.only('md'))
const mdUp = useMediaQuery(customizedThemeContext.breakpoints.up('md'))
return (
<Grid container item className={classes.root}>
<Grid container item xs={12} md={4}
Expand All @@ -41,14 +47,14 @@ const FooterMenuContainer: FunctionComponent<IProps> = (props: IProps) => {
{
props.pageFooterMenu?.subMenus?.map((menuGroup: any, index: number) => {
return (
<Grid key={index} item xs={6}>
<FooterMenuGroup menuGroup={menuGroup}/>
<Grid key={index} item xs={12} container justifyContent={mdUp?'flex-start':'center'}>
<Grid item><FooterMenuGroup menuGroup={menuGroup}/></Grid>
</Grid>
)
})
}
</Grid>
<Grid item container xs={12} md={4} justifyContent='center'>
<Grid item container xs={12} md={4} justifyContent='center' sx={{paddingTop: mdDown?2:0}}>
{props.pageFooterMenu?.logoImageSrc ?
<Logo isCenter logoImageSrc={props.pageFooterMenu.logoImageSrc} height={108}/> :
<Grid container item justifyContent='center' alignContent='center'>
Expand Down Expand Up @@ -91,8 +97,26 @@ const FooterMenuContainer: FunctionComponent<IProps> = (props: IProps) => {
</Grid>
</Grid>
</Grid>
<Grid item container xs={12} md={4} alignContent='flex-start' spacing={2}>

<Grid item container xs={12} md={4} spacing={2} alignItems='center' alignContent='center'>
{!mdDown && <Grid container item justifyContent='flex-end' xs={6} md={12}>
<Typography variant='body2'>Social Media</Typography>
</Grid>}
<Grid container item xs={12} md={12} sx={{paddingTop:"4px !important", marginTop:mdDown?4:0,borderTop:"1px solid "+theme.palette.primary.main}}>
{mdDown && <Grid container item justifyContent='flex-end' >
<Typography variant='body2'>Social Media</Typography>
</Grid>}
{
props.isSocialMediaBlock && <SocialMediaBlock
bgColor={true}
color='secondary'
spacing={1}
facebook={pageContext.page?.businessContact?.facebook}
twitter={pageContext.page?.businessContact?.twitter}
instagram={pageContext.page?.businessContact?.instagram}
linkedIn={pageContext.page?.businessContact?.linkedIn}
github={pageContext.page?.businessContact?.linkedIn}
/>
}</Grid>
</Grid>
</Grid>
)
Expand Down
14 changes: 9 additions & 5 deletions src/components/templates/mackenzies-mind/footer/FooterMenuGroup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import {Theme} from '@mui/material/styles';

import makeStyles from '@mui/styles/makeStyles';

import {Grid, Link, Typography} from '@mui/material'
import {Grid, Link, Typography, useMediaQuery, useTheme} from '@mui/material'
import {SanityMenuGroup, SanityMenuItem} from "../../../../common/sanityIo/Types";

export const useStyles = makeStyles((theme: Theme) => ({
Expand Down Expand Up @@ -43,7 +43,7 @@ export type LandingPagesFooterMenuGroupProps = {

const FooterMenuGroup: FunctionComponent<LandingPagesFooterMenuGroupProps> = ({menuGroup}) => {
const classes = useStyles()

const theme = useTheme()
const [menuGroupContents, setMenuGroupContents] = useState<SanityMenuGroup>()
const [menuItemContents, setMenuItemContents] = useState<SanityMenuItem>()

Expand All @@ -55,14 +55,18 @@ const FooterMenuGroup: FunctionComponent<LandingPagesFooterMenuGroupProps> = ({m
}
}, [menuGroup])

const mdOnly = useMediaQuery(theme.breakpoints.only('sm'))
const lgUp = useMediaQuery(theme.breakpoints.up('md'))
const mdUp = useMediaQuery(theme.breakpoints.up('md'))

return (
<Grid container direction="column" spacing={2} className={classes.root}>
<Grid container item>
<Grid container direction="column" spacing={2} className={classes.root} >
<Grid container item justifyContent={lgUp?'flex-start':'center'}>
<Typography color='primary' variant="body2"
className={classes.menuTitle}>{menuGroupContents && menuGroupContents.menuGroupTitle}</Typography>
</Grid>
<Grid item container>
<Grid container item xs={8} direction='column' spacing={2}>
<Grid container item xs={12} direction={mdOnly ? 'row' : 'column'} spacing={2} alignItems={lgUp?'flex-start':'center'} alignContent={lgUp?'flex-start':'center'} justifyContent={mdUp?'flex-start':'center'} >
{
menuGroup?.links && menuGroup.links.map((menuLink: any, index: any) => {
return (
Expand Down
Loading
Loading