jketreno/backstory
1
0
Fork 0
Code Issues 12 Actions Releases Activity

Fixed some Mobile UI issues

Browse Source
This commit is contained in:
James Ketr 2025-06-10 18:03:46 -07:00
parent 0a23b7deae
commit e61e88561e
4 changed files with 13 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/components/JobMatchAnalysis.tsx
View File

@ -243,13 +243,13 @@ const JobMatchAnalysis: React.FC<JobAnalysisProps> = (props: JobAnalysisProps) =
}; };
return ( return (
<Box sx={{ display: "flex", flexDirection: "column" }}> <Box sx={{ display: "flex", flexDirection: "column", m: 0, p: 0 }}>
{variant !== "small" && {variant !== "small" &&
<JobInfo job={job} variant="normal" /> <JobInfo job={job} variant="normal" />
} }
<Box sx={{ display: 'flex', flexDirection: "row", alignItems: 'center', mb: 2, gap: 1, justifyContent: "space-between" }}> <Box sx={{ display: 'flex', flexDirection: "row", alignItems: 'center', mb: isMobile ? 1 : 2, gap: 1, justifyContent: "space-between" }}>
<Box sx={{ display: "flex", flexDirection: "row", flexGrow: 1 }}> <Box sx={{ display: "flex", flexDirection: isMobile ? "column" : "row", flexGrow: 1, gap: 1 }}>
{overallScore !== 0 && <> {overallScore !== 0 && <>
<Typography variant="h5" component="h2" sx={{ mr: 2 }}> <Typography variant="h5" component="h2" sx={{ mr: 2 }}>
Overall Match: Overall Match:

10
frontend/src/components/ui/CandidateInfo.tsx
View File

@ -56,7 +56,7 @@ const CandidateInfo: React.FC<CandidateInfoProps> = (props: CandidateInfoProps)
borderStyle: 'solid', borderStyle: 'solid',
transition: 'all 0.3s ease', transition: 'all 0.3s ease',
flexGrow: 1, flexGrow: 1,
p: 3, p: isMobile ? 1 : 3,
height: '100%', height: '100%',
flexDirection: 'column', flexDirection: 'column',
alignItems: 'stretch', alignItems: 'stretch',
@ -74,8 +74,8 @@ const CandidateInfo: React.FC<CandidateInfoProps> = (props: CandidateInfoProps)
alt={`${candidate.fullName}'s profile`} alt={`${candidate.fullName}'s profile`}
sx={{ sx={{
alignSelf: "flex-start", alignSelf: "flex-start",
width: 80, width: isMobile ? 40 : 80,
height: 80, height: isMobile ? 40 : 80,
border: '2px solid #e0e0e0', border: '2px solid #e0e0e0',
}} }}
/> />
@ -128,9 +128,9 @@ const CandidateInfo: React.FC<CandidateInfoProps> = (props: CandidateInfoProps)
</Box> </Box>
</Box> </Box>
<Typography variant="body1" color="text.secondary"> {(!isMobile || variant !== "small") && <Typography variant="body1" color="text.secondary">
{candidate.description} {candidate.description}
</Typography> </Typography>}
{variant !== "small" && <> {variant !== "small" && <>
<Divider sx={{ my: 2 }} /> <Divider sx={{ my: 2 }} />

6
frontend/src/components/ui/JobInfo.tsx
View File

@ -203,13 +203,13 @@ const JobInfo: React.FC<JobInfoProps> = (props: JobInfoProps) => {
}} }}
{...rest} {...rest}
> >
<Box sx={{ display: "flex", flexGrow: 1, p: 3, height: '100%', flexDirection: 'column', alignItems: 'stretch', position: "relative" }}> <Box sx={{ display: "flex", flexGrow: 1, p: isMobile ? 1 : 3, height: '100%', flexDirection: 'column', alignItems: 'stretch', position: "relative" }}>
<Box sx={{ <Box sx={{
display: "flex", flexDirection: (isMobile || variant !== "small") ? "column" : "row", display: "flex", flexDirection: (isMobile || variant !== "small") ? "column" : "row",
"& > div > div > :first-of-type": { fontWeight: "bold" }, "& > div > div > :first-of-type": { fontWeight: "bold" },
"& > div > div > :last-of-type": { mb: 0.75, mr: 1 } "& > div > div > :last-of-type": { mb: 0.75, mr: 1 }
}}> }}>
<Box sx={{ display: "flex", flexDirection: "column", flexGrow: 1 }}> <Box sx={{ display: "flex", flexDirection: isMobile ? "row" : "column", flexGrow: 1 }}>
{ {
activeJob.title && <Box sx={{ fontSize: "0.8rem" }}> activeJob.title && <Box sx={{ fontSize: "0.8rem" }}>
<Box>Title</Box> <Box>Title</Box>
@ -222,7 +222,7 @@ const JobInfo: React.FC<JobInfoProps> = (props: JobInfoProps) => {
</Box>} </Box>}
</Box> </Box>
<Box sx={{ display: "flex", flexDirection: "column", width: "75%" }}> <Box sx={{ display: "flex", flexDirection: "column", width: "75%" }}>
{activeJob.summary && <Box sx={{ fontSize: "0.8rem" }}> {!isMobile && activeJob.summary && <Box sx={{ fontSize: "0.8rem" }}>
<Box>Summary</Box> <Box>Summary</Box>
<Box>{activeJob.summary}</Box> <Box>{activeJob.summary}</Box>
</Box>} </Box>}

4
frontend/src/pages/JobAnalysisPage.tsx
View File

@ -325,7 +325,7 @@ const JobAnalysisPage: React.FC<BackstoryPageProps> = (props: BackstoryPageProps
<Box sx={{ display: "flex", flexDirection: isMobile ? "column" : "row" }}> <Box sx={{ display: "flex", flexDirection: isMobile ? "column" : "row" }}>
{analysisState && analysisState.job && {analysisState && analysisState.job &&
<Box sx={{ display: "flex", flexDirection: "column", width: "100%" }}> <Box sx={{ display: "flex", flexDirection: "column", width: "100%" }}>
<Box sx={{ ml: 3, fontWeight: "bold" }}>Selected Job</Box> {!isMobile && <Box sx={{ ml: 3, fontWeight: "bold" }}>Selected Job</Box>}
<JobInfo variant="small" job={analysisState.job} /> <JobInfo variant="small" job={analysisState.job} />
</Box> </Box>
} }
@ -333,7 +333,7 @@ const JobAnalysisPage: React.FC<BackstoryPageProps> = (props: BackstoryPageProps
{!isMobile && <Box sx={{ display: "flex", borderLeft: "1px solid lightgrey" }} />} {!isMobile && <Box sx={{ display: "flex", borderLeft: "1px solid lightgrey" }} />}
{analysisState && analysisState.candidate && {analysisState && analysisState.candidate &&
<Box sx={{ display: "flex", flexDirection: "column", width: "100%" }}> <Box sx={{ display: "flex", flexDirection: "column", width: "100%" }}>
<Box sx={{ ml: 3, fontWeight: "bold" }}>Selected Candidate</Box> {!isMobile && <Box sx={{ ml: 3, fontWeight: "bold" }}>Selected Candidate</Box>}
<CandidateInfo variant="small" candidate={analysisState.candidate} sx={{}} /> <CandidateInfo variant="small" candidate={analysisState.candidate} sx={{}} />
</Box> </Box>
} }