Placeholder loading anim. Multiline text support.
This commit is contained in:
parent
3b66ecfbdd
commit
a4c0732b55
@ -37,7 +37,11 @@ export const personalData: PersonalData = {
|
||||
position: 'Software Engineer',
|
||||
company: 'Q2 Interactive',
|
||||
timerange: '2009 - 2013',
|
||||
description: '',
|
||||
description: `Development and project lead of multiple web applications:
|
||||
- CRM system (PHP backend with Android frontend),
|
||||
- Accounting web app,
|
||||
- e-commerce sites.`,
|
||||
tags: ['PHP', 'Java', 'Server hosting', 'Linux', 'Android']
|
||||
}
|
||||
]
|
||||
},
|
||||
|
@ -1,6 +1,7 @@
|
||||
import React from 'react';
|
||||
import Card from 'react-bootstrap/Card';
|
||||
import { useAutoFocus, useFocusedElement } from '../../hooks/FocusedElement';
|
||||
import { useAutoFocus } from '../../hooks/FocusedElement';
|
||||
import { Placeholder } from 'react-bootstrap';
|
||||
|
||||
export type Props = {
|
||||
heading?: string,
|
||||
@ -10,6 +11,20 @@ export type Props = {
|
||||
description: string
|
||||
};
|
||||
|
||||
export function JobCardPlaceholder() {
|
||||
return <Card className='job-card'>
|
||||
<Card.Body>
|
||||
<Placeholder as={Card.Title} animation="glow">
|
||||
<Placeholder xs={6} />
|
||||
</Placeholder>
|
||||
<Placeholder as={Card.Text} animation="glow">
|
||||
<Placeholder xs={7} /> <Placeholder xs={4} /> <Placeholder xs={5} />{' '}
|
||||
<Placeholder xs={4} /> <Placeholder xs={3} />
|
||||
</Placeholder>
|
||||
</Card.Body>
|
||||
</Card>
|
||||
}
|
||||
|
||||
export default function JobCard(props: Props) {
|
||||
const focusRef = useAutoFocus<HTMLDivElement>([props.position, props.company, props.timerange].join(' - '))
|
||||
return (
|
||||
@ -22,7 +37,7 @@ export default function JobCard(props: Props) {
|
||||
<Card.Subtitle>
|
||||
<span className='company-name'>{props.company}</span>, <span className='timerange'>{props.timerange}</span>
|
||||
</Card.Subtitle>
|
||||
<Card.Text>{props.description}</Card.Text>
|
||||
<Card.Text className='multiline'>{props.description}</Card.Text>
|
||||
</Card.Body>
|
||||
</Card>
|
||||
);
|
||||
|
@ -40,7 +40,7 @@ export default function JobsAccordion(props: JobListProps) {
|
||||
{jobs.previous?.map((job, index) => (
|
||||
<Accordion.Item eventKey={`previous-${index}`} key={index}>
|
||||
<Accordion.Header><JobTitle job={job} /></Accordion.Header>
|
||||
<Accordion.Body>
|
||||
<Accordion.Body className='multiline'>
|
||||
{job.description}
|
||||
</Accordion.Body>
|
||||
</Accordion.Item>
|
||||
|
@ -3,7 +3,7 @@ import React from 'react';
|
||||
import Container from 'react-bootstrap/Container';
|
||||
import Col from 'react-bootstrap/Col';
|
||||
import Row from 'react-bootstrap/Row';
|
||||
import JobCard from './JobCard';
|
||||
import JobCard, { JobCardPlaceholder } from './JobCard';
|
||||
import { partition } from '../../utils';
|
||||
import { JobListProps } from './types';
|
||||
|
||||
@ -16,6 +16,13 @@ const defaultProps = {
|
||||
currentHeading: 'Currently',
|
||||
}
|
||||
|
||||
export function JobsCardsPlaceholder() {
|
||||
return <Container>
|
||||
<Row><Col><JobCardPlaceholder /></Col></Row>
|
||||
<Row><Col><JobCardPlaceholder /></Col></Row>
|
||||
</Container>
|
||||
}
|
||||
|
||||
export default function JobsCards(props: JobListProps) {
|
||||
const {jobs} = props
|
||||
const config = {...defaultProps, ...props}
|
||||
|
@ -4,7 +4,7 @@ import Container from 'react-bootstrap/Container';
|
||||
import useSize from '../../hooks/Size';
|
||||
import { JobListProps } from './types';
|
||||
import JobsAccordion from './JobsAccordion';
|
||||
import JobsCards from './JobsCards';
|
||||
import JobsCards, { JobsCardsPlaceholder } from './JobsCards';
|
||||
|
||||
export type Props = {
|
||||
heading: string,
|
||||
@ -18,7 +18,8 @@ const defaultProps = {
|
||||
export default function JobHistory(props: Props) {
|
||||
const {SizeWrapper, size} = useSize()
|
||||
|
||||
const jobsList = size.width < 600 ? <JobsAccordion {...props} /> : <JobsCards {...props} />
|
||||
const jobsList = size.width === 0 ? <JobsCardsPlaceholder /> : (
|
||||
size.width < 600 ? <JobsAccordion {...props} /> : <JobsCards {...props} />)
|
||||
|
||||
return (
|
||||
<Container>
|
||||
|
@ -61,3 +61,9 @@ body {
|
||||
.accordion-button.collapsed {
|
||||
background-color: lavender;
|
||||
}
|
||||
.accordion {
|
||||
margin: 1rem;
|
||||
}
|
||||
.multiline {
|
||||
white-space: pre-line;
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user