Skip to content

Commit

Permalink
fix(form-service): update styles to pdf defaults
Browse files Browse the repository at this point in the history
  • Loading branch information
@tzuge
tzuge committed Dec 20, 2024
1 parent ad163b9 commit e994cf6
Showing 1 changed file with 132 additions and 221 deletions.
353 changes: 132 additions & 221 deletions apps/form-service/src/form/pdf.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,243 +43,154 @@ const template = `
`;

const additionalStyles = `
<style>
@font-face {
font-family: 'acumin-pro-semi-condensed';
src: url("https://use.typekit.net/af/3f7b4d/00000000000000003b9acb2d/27/l?subset_id=1&fvd=n4&v=3") format("woff2"), url("https://use.typekit.net/af/3f7b4d/00000000000000003b9acb2d/27/d?subset_id=1&fvd=n4&v=3") format("woff"), url("https://use.typekit.net/af/3f7b4d/00000000000000003b9acb2d/27/a?subset_id=1&fvd=n4&v=3") format("opentype");
font-style: normal;
font-weight: 400;
}
@font-face {
font-family: 'acumin-pro-semi-condensed';
src: url("https://use.typekit.net/af/761912/00000000000000003b9acb2e/27/l?subset_id=1&fvd=i4&v=3") format("woff2"), url("https://use.typekit.net/af/761912/00000000000000003b9acb2e/27/d?subset_id=1&fvd=i4&v=3") format("woff"), url("https://use.typekit.net/af/761912/00000000000000003b9acb2e/27/a?subset_id=1&fvd=i4&v=3") format("opentype");
font-style: italic;
font-weight: 400;
}
@font-face {
font-family: 'acumin-pro-semi-condensed';
src: url("https://use.typekit.net/af/ee7f3d/00000000000000003b9acb33/27/l?subset_id=1&fvd=n7&v=3") format("woff2"), url("https://use.typekit.net/af/ee7f3d/00000000000000003b9acb33/27/d?subset_id=1&fvd=n7&v=3") format("woff"), url("https://use.typekit.net/af/ee7f3d/00000000000000003b9acb33/27/a?subset_id=1&fvd=n7&v=3") format("opentype");
font-style: normal;
font-weight: 700;
}
@font-face {
font-family: 'acumin-pro-semi-condensed';
src: url("https://use.typekit.net/af/503f80/00000000000000003b9acb34/27/l?subset_id=1&fvd=i7&v=3") format("woff2"), url("https://use.typekit.net/af/503f80/00000000000000003b9acb34/27/d?subset_id=1&fvd=i7&v=3") format("woff"), url("https://use.typekit.net/af/503f80/00000000000000003b9acb34/27/a?subset_id=1&fvd=i7&v=3") format("opentype");
font-style: italic;
font-weight: 700;
}
@font-face {
font-family: 'acumin-pro-semi-condensed';
src: url("https://use.typekit.net/af/e60e87/00000000000000003b9acb31/27/l?subset_id=1&fvd=n6&v=3") format("woff2"), url("https://use.typekit.net/af/e60e87/00000000000000003b9acb31/27/d?subset_id=1&fvd=n6&v=3") format("woff"), url("https://use.typekit.net/af/e60e87/00000000000000003b9acb31/27/a?subset_id=1&fvd=n6&v=3") format("opentype");
font-style: normal;
font-weight: 600;
}
@page {
size: letter;
margin: 25mm 20mm 25mm 20mm;
}
html,
body {
width: 210mm;
font-size: 16px;
font-family: 'acumin-pro-semi-condensed', sans-serif;
}
h1 {
margin: 0;
padding: 0;
line-height: 3.5em;
font-size: 3em;
}
h2 {
margin: 1.5em 0 0;
padding: 0;
line-height: 2.75em;
color: #333;
font-size: 2.5em;
font-weight: 400;
}
h3 {
padding: 0;
line-height: 2em;
color: #333;
font-size: 1.5em;
font-weight: 400;
}
h4.groupPadding {
margin: 0.5rem 0 1.5rem 0!important;
line-height: 0;
color: #333;
font-size: 1.5em;
font-weight: 400;
}
h4 {
margin: 1.5em 0 0;
padding: 0;
line-height: 1.75em;
color: #333;
font-size: 1.125em;
font-weight: 700;
}
h5 {
margin: 1.5em 0 0;
padding: 0;
line-height: 1.75em;
color: #333;
font-size: 1.125em;
font-weight: 700;
}
p {
margin: 1.5em 0 0;
font-size: 1.125em;
line-height: 1.75em;
}
.review-item-section {
background-color: #f1f1f1;
margin: 0.5rem 0;
padding: 1rem;
border: 1px solid #dcdcdc;
border-radius: 5px;
}
<style>
/*
* The CSS tab is useful for CSS that applies throughout your template i.e. to the header, footer,
* and body segments. Define your default, common styles for fonts, margins, padding, colours, etc.
* here.
*
* You can always stick all your CSS here, especially if separation of concern is your jam.
*/
div, p {
margin: 0 0 0 0;
padding: 0 0 0 0;
}
.review-item {
display: flex;
flex-direction: column;
border: 1px solid grey;
border-radius: 0.25rem;
margin: 0.25rem 0.25rem 1.25rem 0.25rem;
padding: 0.5rem;
}
/*
* Explicitly set the font size. This is especially important for both the header and the footer
* as puppeteer has a quirk that sometimes sets it to 0, making any text in them unreadable.
*/
div, p {
font-size: 9pt;
font-weight: normal;
}
.review-item-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 2rem;
}
.vertical-flex {
display: flex;
flex-direction: column;
}
/*
* Also, you need to explicitly tell Puppeteer to use colour when generating the
* PDF document, or it will just print out grey tones. This does not
* apply to SVG, however, which seem to render correctly either way.
*/
html {
-webkit-print-color-adjust: exact;
}
.grid {
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: space-between;
align-items: stretch;
}
.clear {
clear: both;
}
.content {
padding: 0 1em;
box-sizing: border-box;
}
.content {
padding: 0 1em;
margin-top: 1.5em;
box-sizing: border-box;
}
.grid-item {
flex: 1 1 calc(41% - 1rem);
margin: 0 3em 0 0;
}
.grid-padding {
display: flex;
flex: 1 1 calc(91% - 1rem);
margin-bottom: 1rem;
}
.content .review-item-section {
background-color: #f1f1f1;
margin: 0.5rem 0;
padding: 1rem;
border: 1px solid #dcdcdc;
border-radius: 5px;
}
.header {
width: 100%;
margin-bottom: 1rem;
}
.content .review-item {
display: flex;
flex-direction: column;
border: 1px solid grey;
border-radius: 0.25rem;
margin: 0.25rem 0.25rem 1.25rem 0.25rem;
padding: 0.5rem;
}
.list-item-borderless {
flex: 1 1 calc(45% - 1rem);
margin: 0;
}
.list-item-borderless-bottom-padding {
flex: 1 1 calc(45% - 1rem);
}
.list-item-basic {
display: flex;
flex-wrap: wrap;
gap: 1rem;
border: 1px solid #dcdcdc;
border-radius: 0.25rem;
padding: 0.75rem;
width: 95%;
margin: 0 0 1em 0;
}
.list-item-basic-list {
display: flex;
flex-direction: row;
gap: 1rem;
border: 1px solid #dcdcdc;
border-radius: 0.25rem;
padding: 0.75rem;
width: 95%;
margin: 0 0 1em 0;
}
.content .review-item-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 2rem;
}
.content .vertical-flex {
display: flex;
flex-direction: column;
}
.list-item-borderless-box {
display: flex;
flex-wrap: wrap;
gap: 1rem;
padding: 0.375rem 0;
width: 95%;
}
.content .grid {
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: space-between;
align-items: stretch;
}
.review-item-title {
font-size: 1.5rem;
line-height: 25px;
font-weight: 300;
}
.content .grid-item {
flex: 1 1 calc(41% - 1rem);
margin: 0 3em 0 0;
}
.content .grid-padding {
display: flex;
flex: 1 1 calc(91% - 1rem);
margin-bottom: 1rem;
}
.review-item-basic {
background-color: #f1f1f1;
padding: 1rem;
}
.content .header {
width: 100%;
margin-bottom: 1rem;
}
.goa-card {
height: 100% !important;
width: 100% !important;
}
.content .list-item-borderless {
flex: 1 1 calc(45% - 1rem);
margin: 0;
}
.content .list-item-borderless-bottom-padding {
flex: 1 1 calc(45% - 1rem);
}
.content .list-item-basic {
display: flex;
flex-wrap: wrap;
gap: 1rem;
border: 1px solid #dcdcdc;
border-radius: 0.25rem;
padding: 0.75rem;
width: 95%;
margin: 0 0 1em 0;
}
.content .list-item-basic-list {
display: flex;
flex-direction: row;
gap: 1rem;
border: 1px solid #dcdcdc;
border-radius: 0.25rem;
padding: 0.75rem;
width: 95%;
margin: 0 0 1em 0;
}
img {
width: 100%;
}
.content .list-item-borderless-box {
display: flex;
flex-wrap: wrap;
gap: 1rem;
padding: 0.375rem 0;
width: 95%;
}
.flex-default {
flex: 0 1 {{styles.flex.default}};
}
.content .review-item-title {
font-size: 1.5rem;
line-height: 25px;
font-weight: 300;
}
@media (min-width: 768px) {
.flex-md {
flex-basis: {{styles.flex.md}};
}
}
.content .review-item-basic {
background-color: #f1f1f1;
padding: 1rem;
}
@media (min-width: 1024px) {
.flex-lg {
flex-basis: {{styles.flex.lg}};
}
}
.content .goa-card {
height: 100% !important;
width: 100% !important;
}
@media (min-width: 1280px) {
.flex-xl {
flex-basis: {{styles.flex.xl}};
}
}
</style>
.content img {
width: 100%;
}
</style>
`;

Expand Down

0 comments on commit e994cf6

Please sign in to comment.