feat: generate pdf for activity #972
Conversation
|
@aqsaaqeel have you found a solution? where do you need help with this? |
There was a problem hiding this comment.
left comments on the things that we'd need to change. Nice work @aqsaaqeel
| </Container> | ||
|
|
||
| <Typography style={{ color: 'white' }} className={`${classes.pdfSubtitle} ${classes.customTypographyStyle}`}> | ||
| Scan code to view activity |
There was a problem hiding this comment.
this needs translation
| <QRCode value={`https://example.com/activity/${activity.id}`} /> | ||
| </Container> | ||
|
|
||
| <Typography style={{ color: 'white' }} className={`${classes.pdfSubtitle} ${classes.customTypographyStyle}`}> |
| style={{ margin: 'auto', width: '12rem' }} | ||
| className={`${classes.pdfSubtitle}`} | ||
| > | ||
| SHARE THIS ACTIVITY |
| <Container> | ||
| <Container className={classes.flexStyle}> | ||
| <Typography | ||
| style={{ margin: 'auto', width: '12rem' }} |
| </Container> | ||
| <Container className={classes.footerStyle}> | ||
| <Container> | ||
| <img className={classes.pdfFooterLogoStyle} src={images.unstructured} alt={'Faridah_ux'} /> |
There was a problem hiding this comment.
the alt text is hardcoded. Is that supposed to be (asking a genuine question here because I have no idea)?
Is it is supposed to be hardcoded then we need to translate it on the frontend
| <img | ||
| key={index} | ||
| src={img.image?.file_url} | ||
| alt={`Image ${index}`} |
There was a problem hiding this comment.
this alt text is not really helpful to anyone who doesn't speak english. we should translate this. Also maybe improve the alt text? image 0 is not exactly a very descriptive alt
| </Container> | ||
| </Container> | ||
| <Box className={classes.verticalSpace}></Box> | ||
| <Typography className={`${classes.pdfSubtitle}`}>Introduction</Typography> |
| <Container className={classes.justifyPdf}> | ||
| <Typography className={classes.pdfTitle}>{activity?.title}</Typography> | ||
| <Container className={`${classes.creatorProfilePdfStyle}`}> | ||
| <Avatar className={classes.creatorAvatarStyle} src={creator?.avatar} alt={'Faridah_ux'} /> |
There was a problem hiding this comment.
not a very descriptive alt and needs translation
| const commonClasses = makeStyles(styles)(); | ||
| return ( | ||
| <> | ||
| <Container style={{ backgroundColor: 'white', border: 'solid 1.5rem white'}} className={classes.pdfStyle}> |
| import { Container, Typography, Box, makeStyles, Avatar } from '@material-ui/core'; | ||
| import styles from '../../assets/js/styles/index'; | ||
| import { activityDefailsStyles } from './ActivityDetails.styles'; | ||
| // import activity from '../../components/activity/activity'; |
|
@NdibeRaymond working on the requested changes |
Summary
New design for pdf that is generated for the activities. Implemented this figma design
Closes #899
Task List
Screenshots
Everything looks good, but I am not able to add a footer on all the pages. Currently it only appears at the end of all the content.
Blockers
I am unable to add the footer to all the pages in the pdf. The library
html2pdfthat we are using does not support the addition of footer explicitly. So I am trying to find a workaround for it.