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

Fixing mobile styles

Browse Source
This commit is contained in:
James Ketr 2025-07-19 12:12:43 -07:00
parent 7b392409ca
commit 97272d9175
4 changed files with 79 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -63,17 +63,18 @@ const JobMatchScore: React.FC<{ score: number; variant?: 'small' | 'normal'; sx?
return theme.palette.error.main;
};
const suffix = variant === 'small' ? '' : ' Match';
return (
<Box
className="JobMatchScore"
sx={{
justifyContent: 'center',
m: 0,
p: 0,
width: variant === 'small' ? '8rem' : '10rem',
ml: 1,
p: 1,
gap: 1,
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
flexDirection: variant === 'small' ? 'row' : 'column',
flexDirection: 'row',
...sx,
}}
>
@ -91,40 +92,49 @@ const JobMatchScore: React.FC<{ score: number; variant?: 'small' | 'normal'; sx?
bgcolor: getMatchColor(score),
color: 'white',
fontWeight: 'bold',
fontSize: variant === 'small' ? '0.7rem' : '1rem',
}}
/>
<Box
sx={{
position: 'relative',
display: 'inline-flex',
}}
>
<CircularProgress
variant="determinate"
value={score}
size={variant === 'small' ? 45 : 60}
thickness={5}
sx={{
color: getMatchColor(score),
}}
/>
{variant !== 'small' && (
<Box
sx={{
top: 0,
left: 0,
bottom: 0,
right: 0,
position: 'absolute',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
position: 'relative',
display: 'inline-flex',
p: 0,
m: 0,
}}
>
<Typography variant="caption" component="div" sx={{ fontWeight: 'bold' }}>
{`${Math.round(score)}%`}
</Typography>
<CircularProgress
variant="determinate"
value={score}
size={60}
thickness={5}
sx={{
color: getMatchColor(score),
}}
/>
<Box
sx={{
top: 0,
left: 0,
bottom: 0,
right: 0,
position: 'absolute',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}
>
<Typography
variant="caption"
component="div"
sx={{ fontWeight: 'bold', fontSize: '1rem' }}
>
{`${Math.round(score)}%`}
</Typography>
</Box>
</Box>
</Box>
)}
</Box>
);
};
@ -480,11 +490,12 @@ const JobMatchAnalysis: React.FC<JobAnalysisProps> = (props: JobAnalysisProps) =
return (
<Scrollable
className="JobMatchAnalysis"
sx={{
display: 'flex',
flexDirection: 'column',
m: 0,
p: 0,
p: 1,
width: '100%',
minHeight: 0,
flexGrow: 1,

1
frontend/src/components/ui/ResumeInfo.tsx
View File

@ -96,6 +96,7 @@ const ResumeInfo: React.FC<ResumeInfoProps> = (props: ResumeInfoProps) => {
return (
<Box
className="ResumeInfo"
sx={{
display: 'flex',
borderColor: 'transparent',

4
frontend/src/components/ui/ResumePreview.tsx
View File

@ -409,7 +409,7 @@ export const ResumePreview: React.FC<ResumePreviewProps> = (props: ResumePreview
if (!resume || !candidate || !job) {
return (
<Box sx={{ p: 2 }}>
<Box className="ResumePreview" sx={{ p: 2 }}>
<Typography variant="body1">No resume data available.</Typography>
</Box>
);
@ -417,7 +417,7 @@ export const ResumePreview: React.FC<ResumePreviewProps> = (props: ResumePreview
return (
<Box
className="document-container"
className="ResumePreview document-container"
sx={{
...currentStyle.contentStyle,
position: 'relative',

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

@ -409,6 +409,7 @@ const JobAnalysisPage: React.FC<BackstoryPageProps> = () => {
return (
<Box
className="JobAnalysisPage"
sx={{
display: 'flex',
flexDirection: 'column',
@ -432,6 +433,24 @@ const JobAnalysisPage: React.FC<BackstoryPageProps> = () => {
maxWidth: '100%',
width: '100%',
flexDirection: 'column',
'& .MuiAvatar-root': isMobile
? {
width: 32,
height: 32,
}
: {},
'& .MuiStepLabel-label': isMobile
? {
fontSize: '0.9rem',
marginTop: '4px',
}
: {},
'& .MuiSvgIcon-root': isMobile
? {
width: '0.9rem',
height: '0.9rem',
}
: {},
}}
>
<Stepper
@ -483,7 +502,7 @@ const JobAnalysisPage: React.FC<BackstoryPageProps> = () => {
<Box sx={{ mb: 1, justifyContent: 'center' }}>
Candidate{!isMobile && ' Selection'}
</Box>
{selectedCandidate !== null && !isMobile && (
{selectedCandidate !== null && (
<Box
sx={{
justifySelf: 'flex-start',
@ -508,7 +527,7 @@ const JobAnalysisPage: React.FC<BackstoryPageProps> = () => {
}}
/>
<Box sx={{ flexDirection: 'column', textAlign: 'left' }}>
<Box>Name</Box>
{!isMobile && <Box>Name</Box>}
<Box sx={{ fontWeight: 'normal' }}>{selectedCandidate?.fullName}</Box>
</Box>
</Box>
@ -548,7 +567,7 @@ const JobAnalysisPage: React.FC<BackstoryPageProps> = () => {
}}
>
<Box sx={{ mb: 1, justifyContent: 'center' }}>Job{!isMobile && ' Selection'}</Box>
{selectedJob !== null && !isMobile && (
{selectedJob !== null && (
<Box
sx={{
justifySelf: 'flex-start',
@ -559,11 +578,11 @@ const JobAnalysisPage: React.FC<BackstoryPageProps> = () => {
}}
>
<Box sx={{ flexDirection: 'column', textAlign: 'left' }}>
<Box>Company</Box>
{!isMobile && <Box>Company</Box>}
<Box sx={{ fontWeight: 'normal' }}>{selectedJob.company}</Box>
</Box>
<Box sx={{ flexDirection: 'column', textAlign: 'left' }}>
<Box>Title</Box>
{!isMobile && <Box>Title</Box>}
<Box sx={{ fontWeight: 'normal' }}>{selectedJob.title}</Box>
</Box>
</Box>
@ -600,13 +619,17 @@ const JobAnalysisPage: React.FC<BackstoryPageProps> = () => {
'& :first-of-type': {
whiteSpace: 'nowrap',
},
m: 0,
p: 0,
}}
>
<Box sx={{ mb: 1, justifyContent: 'center' }}>{!isMobile && 'Job '}Analysis</Box>
{analysisState.analysis !== null && (
<Box sx={{ justifyContent: 'center' }}>
<JobMatchScore score={analysisState.analysis.score} variant="small" />
</Box>
<JobMatchScore
sx={{ width: 'min-content', alignSelf: 'center' }}
score={analysisState.analysis.score}
variant="small"
/>
)}
</Box>
</StepLabel>
@ -647,46 +670,6 @@ const JobAnalysisPage: React.FC<BackstoryPageProps> = () => {
</StepLabel>
</Step>
</Stepper>
{isMobile && (
<Box
sx={{
mb: 1,
ml: 1,
display: 'flex',
justifySelf: 'flex-start',
flexDirection: 'row',
fontSize: '0.75rem',
gap: 1,
width: '100%',
}}
>
{selectedCandidate !== null && (
<Box sx={{ display: 'flex', flexDirection: 'row', flexGrow: 1 }}>
<Avatar
src={
selectedCandidate.profileImage
? `/api/1.0/candidates/profile/${selectedCandidate.username}`
: ''
}
alt={`${selectedCandidate.fullName}'s profile`}
sx={{
alignSelf: 'flex-start',
width: 32,
height: 32,
border: '2px solid #e0e0e0',
}}
/>
<Box sx={{ fontWeight: 'normal' }}>{selectedCandidate?.fullName}</Box>
</Box>
)}
{selectedJob !== null && (
<Box sx={{ display: 'flex', flexDirection: 'column', flexGrow: 1 }}>
<Box sx={{ fontWeight: 'normal' }}>{selectedJob.title}</Box>
<Box sx={{ fontWeight: 'normal' }}>{selectedJob.company}</Box>
</Box>
)}
</Box>
)}
</Paper>
<Box
ref={scrollRef}
@ -707,7 +690,7 @@ const JobAnalysisPage: React.FC<BackstoryPageProps> = () => {
{activeStep === 3 && renderResume()}
</Box>
<Box sx={{ display: 'flex', flexDirection: 'row', pt: 2 }}>
<Box sx={{ display: 'flex', flexDirection: 'row', p: 1 }}>
<Button color="inherit" disabled={activeStep === 0} onClick={handleBack} sx={{ mr: 1 }}>
Back
</Button>