Placeholder loading anim. Multiline text support.

This commit is contained in:
Dejvino 2023-05-28 07:09:51 +02:00
parent 3b66ecfbdd
commit a4c0732b55
6 changed files with 40 additions and 7 deletions

View File

@ -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']
}
]
},

View File

@ -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>
);

View File

@ -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>

View File

@ -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}

View File

@ -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>

View File

@ -61,3 +61,9 @@ body {
.accordion-button.collapsed {
background-color: lavender;
}
.accordion {
margin: 1rem;
}
.multiline {
white-space: pre-line;
}