blaisadmin/FlockPal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Wrap adoption report in letter sheet
Deploy / deploy-dev (push) Successful in 1m37s
Details
Deploy / deploy-prod (push) Has been skipped
Details

Browse Source
This commit is contained in:
Corey Blais
2026-06-02 17:24:32 -04:00
parent 41dda33310
commit c3297b5915
1 changed files with 57 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/App.tsx
+57 -43
View File
@@ -4501,18 +4501,28 @@ function App() {
background: ${bodyBackground}; background: ${bodyBackground};
box-sizing: border-box; box-sizing: border-box;
color: var(--ink); color: var(--ink);
display: flex;
font-family: Inter, Arial, sans-serif; font-family: Inter, Arial, sans-serif;
font-size: 13px; font-size: 13px;
justify-content: center;
line-height: 1.38; line-height: 1.38;
margin: 0 auto; margin: 0;
max-width: 7.5in;
min-height: 100vh; min-height: 100vh;
padding: 0.28in; padding: 24px;
position: relative; position: relative;
} }
*, *::before, *::after { box-sizing: inherit; } *, *::before, *::after { box-sizing: inherit; }
img, svg { max-width: 100%; } img, svg { max-width: 100%; }
${backgroundOverlayCss} ${backgroundOverlayCss}
.report-page {
background: ${printFriendly ? '#fff' : 'rgba(255, 253, 249, 0.82)'};
border: 1px solid ${printFriendly ? 'transparent' : 'rgba(53, 129, 98, 0.12)'};
border-radius: ${printFriendly ? '0' : '18px'};
box-shadow: ${printFriendly ? 'none' : '0 18px 42px rgba(86, 63, 34, 0.16)'};
max-width: 100%;
padding: 0.28in;
width: 7.5in;
}
header { header {
background: ${headerBackground}; background: ${headerBackground};
border: 1px solid var(--border); border: 1px solid var(--border);
@@ -4606,12 +4616,14 @@ function App() {
main { margin-top: 16px; } main { margin-top: 16px; }
@media print { @media print {
@page { margin: 0.4in; size: letter; } @page { margin: 0.4in; size: letter; }
body { margin: 0 auto; padding: 0; } body { display: block; margin: 0; padding: 0; }
.report-page { border: 0; border-radius: 0; box-shadow: none; padding: 0; width: 100%; }
header { box-shadow: none; break-inside: avoid; } header { box-shadow: none; break-inside: avoid; }
button { display: none; } button { display: none; }
} }
@media (max-width: 820px) { @media (max-width: 820px) {
body { padding: 18px; } body { padding: 18px; }
.report-page { padding: 18px; width: 100%; }
header { header {
grid-template-columns: 1fr; grid-template-columns: 1fr;
justify-items: center; justify-items: center;
@@ -4625,45 +4637,47 @@ function App() {
</style> </style>
</head> </head>
<body> <body>
<header> <div class="report-page">
<img class="brand-logo" src="${escapeReportHtml(reportLogoUrl)}" alt="FlockPal logo"> <header>
<div class="report-title"> <img class="brand-logo" src="${escapeReportHtml(reportLogoUrl)}" alt="FlockPal logo">
<img class="profile-photo" src="${escapeReportHtml(reportPhotoUrl)}" alt="${escapeReportHtml(selectedBird.name)} profile photo"> <div class="report-title">
<h1>${escapeReportHtml(selectedBird.name)}</h1> <img class="profile-photo" src="${escapeReportHtml(reportPhotoUrl)}" alt="${escapeReportHtml(selectedBird.name)} profile photo">
<p class="muted">Adoption Report</p> <h1>${escapeReportHtml(selectedBird.name)}</h1>
<p class="muted">Generated ${escapeReportHtml(formatDateTime(new Date().toISOString()))}</p> <p class="muted">Adoption Report</p>
</div> <p class="muted">Generated ${escapeReportHtml(formatDateTime(new Date().toISOString()))}</p>
<div class="qr"> </div>
<p class="qr-join-label">Join</p> <div class="qr">
<img class="qr-wordmark" src="${escapeReportHtml(reportWordmarkUrl)}" alt="FlockPal"> <p class="qr-join-label">Join</p>
<svg viewBox="0 0 ${qr.viewBoxSize} ${qr.viewBoxSize}" role="img" aria-label="Transfer code QR"> <img class="qr-wordmark" src="${escapeReportHtml(reportWordmarkUrl)}" alt="FlockPal">
<rect width="${qr.viewBoxSize}" height="${qr.viewBoxSize}" fill="#fff"></rect> <svg viewBox="0 0 ${qr.viewBoxSize} ${qr.viewBoxSize}" role="img" aria-label="Transfer code QR">
<path d="${escapeReportHtml(qr.path)}" fill="#111418"></path> <rect width="${qr.viewBoxSize}" height="${qr.viewBoxSize}" fill="#fff"></rect>
</svg> <path d="${escapeReportHtml(qr.path)}" fill="#111418"></path>
<p class="code">${escapeReportHtml(transferCode)}</p> </svg>
<p class="qr-note">Enter this code to keep ${escapeReportHtml(selectedBird.name)}'s care history flying forward.</p> <p class="code">${escapeReportHtml(transferCode)}</p>
</div> <p class="qr-note">Enter this code to keep ${escapeReportHtml(selectedBird.name)}'s care history flying forward.</p>
</header> </div>
<main> </header>
<h2>Flock Member Info</h2> <main>
<section class="facts"> <h2>Flock Member Info</h2>
${profileRows.map(([label, value]) => `<div class="fact"><span>${escapeReportHtml(label)}</span><strong>${escapeReportHtml(value)}</strong></div>`).join('')} <section class="facts">
</section> ${profileRows.map(([label, value]) => `<div class="fact"><span>${escapeReportHtml(label)}</span><strong>${escapeReportHtml(value)}</strong></div>`).join('')}
${detailList('Motivators', selectedBird.motivators)} </section>
${detailList('Demotivators', selectedBird.demotivators)} ${detailList('Motivators', selectedBird.motivators)}
<h2>Weight Graph</h2> ${detailList('Demotivators', selectedBird.demotivators)}
${chartSvg} <h2>Weight Graph</h2>
<h2>Weight History</h2> ${chartSvg}
<table><thead><tr><th>Date</th><th>Weight</th><th>Notes</th></tr></thead><tbody>${weightRows}</tbody></table> <h2>Weight History</h2>
<h2>Veterinary Clinic Info</h2> <table><thead><tr><th>Date</th><th>Weight</th><th>Notes</th></tr></thead><tbody>${weightRows}</tbody></table>
<section class="facts"> <h2>Veterinary Clinic Info</h2>
${vetRows.map(([label, value]) => `<div class="fact"><span>${escapeReportHtml(label)}</span><strong>${escapeReportHtml(value)}</strong></div>`).join('')} <section class="facts">
</section> ${vetRows.map(([label, value]) => `<div class="fact"><span>${escapeReportHtml(label)}</span><strong>${escapeReportHtml(value)}</strong></div>`).join('')}
<h2>Vet Visit History</h2> </section>
<table><thead><tr><th>Date</th><th>Clinic</th><th>Reason</th><th>Notes</th></tr></thead><tbody>${vetVisitRows}</tbody></table> <h2>Vet Visit History</h2>
<h2>Notes</h2> <table><thead><tr><th>Date</th><th>Clinic</th><th>Reason</th><th>Notes</th></tr></thead><tbody>${vetVisitRows}</tbody></table>
${noteRows} <h2>Notes</h2>
</main> ${noteRows}
</main>
</div>
</body> </body>
</html>`); </html>`);
reportWindow.document.close(); reportWindow.document.close();