Skip to content

Commit

Permalink
fix some overlapping text in experience section
Browse files Browse the repository at this point in the history
  • Loading branch information
@tmanundercover
tmanundercover committed Dec 6, 2023
1 parent 438d79c commit aee3041
Show file tree
Hide file tree
Showing 2 changed files with 79 additions and 53 deletions.
112 changes: 70 additions & 42 deletions src/components/templates/mackenzies-mind/header/Header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,24 @@ import FullTextSearch from "./FullTextSearch";
import AppBarWrapper from './AppBarWrapper';
import {COLORS} from "../../../../theme/common/ColorPalette";


import makeStyles from "@mui/styles/makeStyles";
import {Theme} from "@mui/material/styles";

export const useStyles = makeStyles((theme: Theme) => ({
hover:{
"&:hover": {
backgroundColor: "lightgray !important",
color: "#383838"
}
},
hoverSearch:{
"&:hover": {
color: theme.palette.primary.main
}
}
}))

export type HeaderProps = {
pageHeader?: SanityMenuContainer
isAppBar?: boolean
Expand All @@ -18,6 +36,7 @@ export type HeaderProps = {
}

const Header: FunctionComponent<HeaderProps> = (props) => {
const classes = useStyles()
const customizedTheme = useTheme()

const mdDown = useMediaQuery(customizedTheme.breakpoints.down('md'))
Expand All @@ -26,69 +45,78 @@ const Header: FunctionComponent<HeaderProps> = (props) => {
return (<AppBarWrapper isAppBar={props.isAppBar} isEnhanced={props.isEnhanced}>
{props.pageHeader?.title ?
<Grid item container
alignContent='center' alignItems='center' style={{height:"100%",paddingLeft:"8px"}}>
<Grid container item xs={4} sm={3} md={3} >
alignContent='center' alignItems='center' style={{height: "100%", paddingLeft: "8px"}}>
<Grid container item xs={4} sm={3} md={3}>
<Logo noWrap logoText={props.pageHeader?.logoText}
logoAccentText={props.pageHeader?.logoAccentText}/>
logoAccentText={props.pageHeader?.logoAccentText}/>
</Grid>
<Grid item container xs={8} sm={9} md={9} justifyContent='flex-end' >
<Grid item container xs={8} sm={9} md={9} justifyContent='flex-end'>

{
!mdDown && <Grid xs={4} md={10} lg={10} container item justifyContent='flex-end'
alignItems='center'
alignContent='center'
sx={{
height: "100%",
paddingRight: mdDown ? customizedTheme.spacing(0) : customizedTheme.spacing(4)
}}>
<FilteredMenuItems
// bgColor={!mdDown ? TransformHWTheme.palette.primary.main : COLORS.TRANSPARENTWHITE}
subMenus={props.pageHeader?.subMenus ?? []} onlyButtons={mdDown}
includeMenuItems={!mdDown}
includeMenuGroups={!mdDown}/>
{
!mdDown && <Grid xs={4} md={10} lg={10} container item justifyContent='flex-end'
alignItems='center'
alignContent='center'
sx={{
height: "100%",
paddingRight: mdDown ? customizedTheme.spacing(0) : customizedTheme.spacing(4)
}}>
<FilteredMenuItems
// bgColor={!mdDown ? TransformHWTheme.palette.primary.main : COLORS.TRANSPARENTWHITE}
subMenus={props.pageHeader?.subMenus ?? []} onlyButtons={mdDown}
includeMenuItems={!mdDown}
includeMenuGroups={!mdDown}/>

</Grid>
}
{
mdDown && <Grid item xs={5} sm={4} container justifyContent='flex-end'>
{props.pageHeader && <MainMenu menu={props.pageHeader} anchor='top'/>}
</Grid>
}
</Grid>
}
{
mdDown && <Grid item xs={5} sm={4} container justifyContent='flex-end'>
{props.pageHeader && <MainMenu menu={props.pageHeader} anchor='top'/>}
</Grid>
}
{props.isSearch && <Grid container item maxWidth={96}
// style={{backgroundColor: "blue"}}
justifyContent='flex-end'
// style={{backgroundColor: "blue"}}
justifyContent='flex-end'
alignContent='center' alignItems='center'>
<Grid item><Box sx={{
// maxWidth: "64px",
paddingLeft:"16px",
paddingRight: mdDown?"16px":"8px",
paddingLeft: "16px",
paddingRight: mdDown ? "16px" : "8px",
borderLeft: `1px solid ${customizedTheme.palette.primary.main}`
}}><IconButton color='secondary' sx={{
// marginLeft: "32px",
// marginRight: "32px",
backgroundColor: customizedTheme.palette.primary.main
}}>
<Search color='secondary' fontSize='large' onClick={() => {
setIsSearchOpen((state) => !state)
}}/>
</IconButton></Box></Grid>
<IconButton color='secondary' sx={{
// marginLeft: "32px",
// marginRight: "32px",
color: customizedTheme.palette.text.secondary,
backgroundColor: customizedTheme.palette.primary.main
}} className={classes.hoverSearch}>
<Search color='inherit' fontSize='large' onClick={() => {
setIsSearchOpen((state) => !state)
}}/>
</IconButton></Box></Grid>
</Grid>}
</Grid>
</Grid>
: <></>
}
<Modal open={isSearchOpen}>
<Grid container style={{height: "100%"}}>
<Grid container item justifyContent='flex-end' >
<IconButton sx={{marginTop: "4px", marginRight:"4px", width: "64px", height: "64px", backgroundColor: COLORS.WHITESMOKE}} onClick={() => {
<Grid container item justifyContent='flex-end'>
<IconButton sx={{
marginTop: "4px",
marginRight: "4px",
width: "64px",
height: "64px",
backgroundColor: COLORS.WHITESMOKE
}} onClick={() => {
setIsSearchOpen(false)
}}>
}} className={classes.hover}>

<Close sx={{marginX: "16px", marginY: "16px"}} fontSize={"large"} color={'secondary'}
/>
<Close sx={{marginX: "16px", marginY: "16px"}} fontSize={"large"} color={'secondary'}
/>
</IconButton>
</Grid>
<Grid container item justifyContent='center' paddingX={'8px'} alignContent='flex-start' alignItems='flex-start'>
<Grid container item justifyContent='center' paddingX={'8px'} alignContent='flex-start'
alignItems='flex-start'>
<FullTextSearch/>
</Grid>
</Grid>
Expand Down
20 changes: 9 additions & 11 deletions ...components/templates/my-digital-resume/resume-experience-section/ResumeExperienceItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { Theme} from "@mui/material/styles";
import {Chip, Grid, Typography, useTheme} from "@mui/material";
import {COLORS} from "../../../../theme/common/ColorPalette";
import {ResumeExperience} from "../../../BlockContentTypes";
import dateUtils from "../../../../utils/dateUtils";

export const useStyles = makeStyles((theme: Theme) => ({
root: {
Expand All @@ -30,28 +31,25 @@ const ResumeExperienceItem: FunctionComponent<IProps> = (props:IProps) => {
// // padding: theme.spacing(1.75, 0)
// }}
xs={12}>
<Grid container item role={'experienceheader'}>
<Grid container item role={'experienceheader'} alignContent='center' alignItems='center'>
<Grid item xs={12} md={4}>
<Typography display='inline'
variant='body2'>{props.experience.companyName}</Typography>
</Grid>
<Grid item xs={6} md={4}>

<Typography display='inline'
variant='body1'>{props.experience.title}</Typography>
<Grid item xs={12} sm={6} md={4} container sx={{paddingTop: "4px", paddingBottom: "4px"}}>
<Typography variant='subtitle1'>{props.experience.companySubtitle}</Typography>
</Grid>
<Grid item xs={6} md={4}>

<Typography display='inline'
variant='subtitle1'>{props.experience.companySubtitle}</Typography>
<Grid item xs={12} sm={6} md={4} >
<Typography
variant='body1'>{props.experience.title}</Typography>
</Grid>
</Grid>
<Grid container item>


<Grid item sm={4}>
<Typography display='inline'
variant='body1'>{props.experience.dateStart?.toString().replaceAll('-', '.')}</Typography>
variant='body1'>{dateUtils.YearMonth(new Date(props.experience.dateStart as string))}</Typography>

{/*</Grid>*/}
{/*<Grid item xs={1} container justifyContent='center'>*/}
Expand All @@ -61,7 +59,7 @@ const ResumeExperienceItem: FunctionComponent<IProps> = (props:IProps) => {
{/*</Grid>*/}
{/*<Grid item xs={2} container>*/}
<Typography display='inline'
variant='body1'>{props.experience.dateEnd?.toString().replaceAll('-', '.')}</Typography>
variant='body1'>{dateUtils.YearMonth(new Date(props.experience.dateEnd as string))}</Typography>

</Grid>

Expand Down

0 comments on commit aee3041

Please sign in to comment.