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 (
<Box sx={{ display: "flex", flexDirection: "column" }}>
<Box sx={{ display: "flex", flexDirection: "column", m: 0, p: 0 }}>
{variant !== "small" &&
<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", flexGrow: 1 }}>
<Box sx={{ display: 'flex', flexDirection: "row", alignItems: 'center', mb: isMobile ? 1 : 2, gap: 1, justifyContent: "space-between" }}>
<Box sx={{ display: "flex", flexDirection: isMobile ? "column" : "row", flexGrow: 1, gap: 1 }}>
{overallScore !== 0 && <>
<Typography variant="h5" component="h2" sx={{ mr: 2 }}>
Overall Match:

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

@ -56,7 +56,7 @@ const CandidateInfo: React.FC<CandidateInfoProps> = (props: CandidateInfoProps)
borderStyle: 'solid',
transition: 'all 0.3s ease',
flexGrow: 1,
p: 3,
p: isMobile ? 1 : 3,
height: '100%',
flexDirection: 'column',
alignItems: 'stretch',
@ -74,8 +74,8 @@ const CandidateInfo: React.FC<CandidateInfoProps> = (props: CandidateInfoProps)
alt={`${candidate.fullName}'s profile`}
sx={{
alignSelf: "flex-start",
width: 80,
height: 80,
width: isMobile ? 40 : 80,
height: isMobile ? 40 : 80,
border: '2px solid #e0e0e0',
}}
/>
@ -128,9 +128,9 @@ const CandidateInfo: React.FC<CandidateInfoProps> = (props: CandidateInfoProps)
</Box>
</Box>
<Typography variant="body1" color="text.secondary">
{(!isMobile || variant !== "small") && <Typography variant="body1" color="text.secondary">
{candidate.description}
</Typography>
</Typography>}
{variant !== "small" && <>
<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}
>
<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={{
display: "flex", flexDirection: (isMobile || variant !== "small") ? "column" : "row",
"& > div > div > :first-of-type": { fontWeight: "bold" },
"& > 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" }}>
<Box>Title</Box>
@ -222,7 +222,7 @@ const JobInfo: React.FC<JobInfoProps> = (props: JobInfoProps) => {
</Box>}
</Box>
<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>{activeJob.summary}</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" }}>
{analysisState && analysisState.job &&
<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} />
</Box>
}
@ -333,7 +333,7 @@ const JobAnalysisPage: React.FC<BackstoryPageProps> = (props: BackstoryPageProps
{!isMobile && <Box sx={{ display: "flex", borderLeft: "1px solid lightgrey" }} />}
{analysisState && analysisState.candidate &&
<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={{}} />
</Box>
}