Fixes for mobile
This commit is contained in:
parent
92065ab182
commit
b5eaf8bd43
@ -7,6 +7,7 @@ import { Candidate } from 'types/types';
|
||||
import { useAuth } from 'hooks/AuthContext';
|
||||
import { useAppState, useSelectedCandidate } from 'hooks/GlobalContext';
|
||||
import { Paper } from '@mui/material';
|
||||
import { Scrollable } from 'components/Scrollable';
|
||||
|
||||
interface CandidatePickerProps extends BackstoryElementProps {
|
||||
onSelect?: (candidate: Candidate) => void;
|
||||
@ -52,7 +53,17 @@ const CandidatePicker = (props: CandidatePickerProps): JSX.Element => {
|
||||
}, [candidates, setSnack, apiClient]);
|
||||
|
||||
return (
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', ...sx }}>
|
||||
<Scrollable
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
m: 0,
|
||||
p: 0,
|
||||
width: '100%',
|
||||
minHeight: 0,
|
||||
position: 'relative',
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
@ -87,7 +98,7 @@ const CandidatePicker = (props: CandidatePickerProps): JSX.Element => {
|
||||
</Paper>
|
||||
))}
|
||||
</Box>
|
||||
</Box>
|
||||
</Scrollable>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -492,15 +492,22 @@ const JobsView: React.FC<JobsViewProps> = ({
|
||||
</Box>
|
||||
</TableCell>
|
||||
<TableCell>Description</TableCell>
|
||||
<TableCell>Owner</TableCell>
|
||||
<TableCell sx={{ cursor: 'pointer' }} onClick={(): void => handleSort('updatedAt')}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
|
||||
<ScheduleIcon fontSize="small" />
|
||||
Updated {getSortIcon('updatedAt')}
|
||||
</Box>
|
||||
</TableCell>
|
||||
{!isMobile && (
|
||||
<>
|
||||
<TableCell>Owner</TableCell>
|
||||
<TableCell
|
||||
sx={{ cursor: 'pointer' }}
|
||||
onClick={(): void => handleSort('updatedAt')}
|
||||
>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
|
||||
<ScheduleIcon fontSize="small" />
|
||||
Updated {getSortIcon('updatedAt')}
|
||||
</Box>
|
||||
</TableCell>
|
||||
</>
|
||||
)}
|
||||
{/* <TableCell>Status</TableCell> */}
|
||||
{showActions && <TableCell align="center">Actions</TableCell>}
|
||||
{!isMobile && showActions && <TableCell align="center">Actions</TableCell>}
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
@ -566,12 +573,16 @@ const JobsView: React.FC<JobsViewProps> = ({
|
||||
{truncateDescription(job.summary || job.description || '', 100)}
|
||||
</Typography>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Typography variant="body2">{getOwnerName(job.owner)}</Typography>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Typography variant="body2">{formatDate(job.updatedAt)}</Typography>
|
||||
</TableCell>
|
||||
{!isMobile && (
|
||||
<>
|
||||
<TableCell>
|
||||
<Typography variant="body2">{getOwnerName(job.owner)}</Typography>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Typography variant="body2">{formatDate(job.updatedAt)}</Typography>
|
||||
</TableCell>
|
||||
</>
|
||||
)}
|
||||
{/* <TableCell>
|
||||
<Chip
|
||||
label={job.details?.isActive ? 'Active' : 'Inactive'}
|
||||
@ -579,7 +590,7 @@ const JobsView: React.FC<JobsViewProps> = ({
|
||||
size="small"
|
||||
/>
|
||||
</TableCell> */}
|
||||
{showActions && (
|
||||
{!isMobile && showActions && (
|
||||
<TableCell align="center" onClick={(e): void => e.stopPropagation()}>
|
||||
<Box sx={{ display: 'flex', gap: 0.5 }}>
|
||||
{onJobView && (
|
||||
|
||||
@ -91,7 +91,7 @@ const JobAnalysisPage: React.FC<BackstoryPageProps> = () => {
|
||||
});
|
||||
const [canAdvance, setCanAdvance] = useState<boolean>(false);
|
||||
const scrollRef = useRef<HTMLDivElement>(null);
|
||||
// const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
|
||||
const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
|
||||
const [activeStep, setActiveStep] = useState<number>(user === null ? 0 : 1);
|
||||
const maxStep = 4;
|
||||
|
||||
@ -348,12 +348,14 @@ const JobAnalysisPage: React.FC<BackstoryPageProps> = () => {
|
||||
flexDirection: 'column',
|
||||
height: '100%' /* Restrict to main-container's height */,
|
||||
width: '100%',
|
||||
maxWidth: '100%',
|
||||
position: 'relative',
|
||||
}}
|
||||
>
|
||||
<Paper
|
||||
elevation={4}
|
||||
sx={{
|
||||
fontSize: isMobile ? '0.875rem' : '1rem',
|
||||
display: 'flex',
|
||||
position: 'relative',
|
||||
m: 0,
|
||||
@ -361,6 +363,8 @@ const JobAnalysisPage: React.FC<BackstoryPageProps> = () => {
|
||||
mb: 1,
|
||||
p: 0,
|
||||
gap: 1,
|
||||
maxWidth: '100%',
|
||||
width: '100%',
|
||||
flexDirection: 'column',
|
||||
}}
|
||||
>
|
||||
@ -376,6 +380,8 @@ const JobAnalysisPage: React.FC<BackstoryPageProps> = () => {
|
||||
flexDirection: 'column',
|
||||
width: '100%',
|
||||
},
|
||||
maxWidth: '100%',
|
||||
overflow: 'hidden',
|
||||
}}
|
||||
>
|
||||
<Step key={0}>
|
||||
@ -408,8 +414,10 @@ const JobAnalysisPage: React.FC<BackstoryPageProps> = () => {
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Box sx={{ mb: 1, justifyContent: 'center' }}>Candidate Selection</Box>
|
||||
{selectedCandidate !== null && (
|
||||
<Box sx={{ mb: 1, justifyContent: 'center' }}>
|
||||
Candidate{!isMobile && 'Selection'}
|
||||
</Box>
|
||||
{selectedCandidate !== null && !isMobile && (
|
||||
<Box
|
||||
sx={{
|
||||
justifySelf: 'flex-start',
|
||||
@ -473,8 +481,8 @@ const JobAnalysisPage: React.FC<BackstoryPageProps> = () => {
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Box sx={{ mb: 1, justifyContent: 'center' }}>Job Selection</Box>
|
||||
{selectedJob !== null && (
|
||||
<Box sx={{ mb: 1, justifyContent: 'center' }}>Job{!isMobile && 'Selection'}</Box>
|
||||
{selectedJob !== null && !isMobile && (
|
||||
<Box
|
||||
sx={{
|
||||
justifySelf: 'flex-start',
|
||||
@ -528,7 +536,7 @@ const JobAnalysisPage: React.FC<BackstoryPageProps> = () => {
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Box sx={{ mb: 1, justifyContent: 'center' }}>Job Analysis</Box>
|
||||
<Box sx={{ mb: 1, justifyContent: 'center' }}>{!isMobile && 'Job '}Analysis</Box>
|
||||
{analysisState.analysis !== null && (
|
||||
<Box sx={{ justifyContent: 'center' }}>
|
||||
<JobMatchScore score={analysisState.analysis.score} variant="small" />
|
||||
@ -568,11 +576,51 @@ const JobAnalysisPage: React.FC<BackstoryPageProps> = () => {
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Box sx={{ mb: 1, justifyContent: 'center' }}>Generate Resume</Box>
|
||||
<Box sx={{ mb: 1, justifyContent: 'center' }}>{!isMobile && 'Generate '}Resume</Box>
|
||||
</Box>
|
||||
</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}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user