aimond/sapiens-web2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve the visual appearance of reports with enhanced styling

Browse Source 
Update the Report page to apply custom CSS to iframe content for a more aesthetically pleasing presentation.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 0fb68265-c270-4198-9584-3d9be9bddb41
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/3df548ff-50ae-432f-9be4-25d34eccc983/0fb68265-c270-4198-9584-3d9be9bddb41/g8mUCzT
This commit is contained in:
kimjaehyeon0101
2025-09-30 07:54:26 +00:00
parent 7395b0e038
commit 0894a95fa9
1 changed files with 162 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

170
client/src/pages/Report.tsx
View File

@ -64,31 +64,185 @@ export default function Report() {
return `${baseUrl}${content.pptPath}`;
};
// Remove margins and padding from iframe content
// Enhance report styling
const handleReportLoad = (e: React.SyntheticEvent<HTMLIFrameElement>) => {
try {
const iframe = e.currentTarget;
const iframeDoc = iframe.contentDocument || iframe.contentWindow?.document;
if (iframeDoc) {
if (iframeDoc && iframeDoc.body) {
// Wrap all body content in a container if not already wrapped
if (!iframeDoc.querySelector('.sapiens-report-wrapper')) {
const wrapper = iframeDoc.createElement('div');
wrapper.className = 'sapiens-report-wrapper';
while (iframeDoc.body.firstChild) {
wrapper.appendChild(iframeDoc.body.firstChild);
}
iframeDoc.body.appendChild(wrapper);
}
const style = iframeDoc.createElement('style');
style.textContent = `
html, body {
margin: 0 !important;
padding: 0 !important;
background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 100%) !important;
max-width: none !important;
width: 100% !important;
}
body > * {
margin: 0 !important;
body {
padding: 48px 32px !important;
}
h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote {
.sapiens-report-wrapper {
background: white !important;
border-radius: 16px !important;
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
padding: 56px !important;
max-width: 1000px !important;
margin: 0 auto !important;
}
h1 {
font-size: 36px !important;
font-weight: 700 !important;
color: #1a202c !important;
margin-bottom: 28px !important;
margin-top: 0 !important;
padding-bottom: 20px !important;
border-bottom: 3px solid #3b82f6 !important;
background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
background-clip: text !important;
}
.report, .container, .page, .content {
margin: 0 !important;
padding: 8px !important;
h2 {
font-size: 26px !important;
font-weight: 600 !important;
color: #2d3748 !important;
margin-top: 44px !important;
margin-bottom: 18px !important;
padding-bottom: 10px !important;
border-bottom: 2px solid #e2e8f0 !important;
}
h3 {
font-size: 22px !important;
font-weight: 600 !important;
color: #374151 !important;
margin-top: 32px !important;
margin-bottom: 14px !important;
}
h4 {
font-size: 19px !important;
font-weight: 600 !important;
color: #4b5563 !important;
margin-top: 26px !important;
margin-bottom: 12px !important;
}
p {
font-size: 17px !important;
line-height: 1.8 !important;
color: #374151 !important;
margin-bottom: 18px !important;
text-align: justify !important;
}
.metadata {
background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%) !important;
padding: 24px !important;
border-radius: 12px !important;
border-left: 4px solid #3b82f6 !important;
margin-bottom: 36px !important;
font-size: 15px !important;
color: #1e40af !important;
text-align: center !important;
}
.section {
margin-bottom: 36px !important;
}
ul, ol {
margin-bottom: 20px !important;
padding-left: 32px !important;
}
li {
font-size: 17px !important;
line-height: 1.8 !important;
color: #4b5563 !important;
margin-bottom: 10px !important;
}
.highlight {
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%) !important;
padding: 24px !important;
border-left: 4px solid #f59e0b !important;
border-radius: 10px !important;
margin: 28px 0 !important;
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.08) !important;
}
.quote {
background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%) !important;
padding: 24px 28px !important;
border-left: 4px solid #6b7280 !important;
border-radius: 10px !important;
margin: 28px 0 !important;
font-style: italic !important;
color: #374151 !important;
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.08) !important;
}
strong {
font-weight: 700 !important;
color: #1f2937 !important;
}
img {
max-width: 100% !important;
height: auto !important;
border-radius: 12px !important;
box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.15) !important;
margin: 20px 0 !important;
}
table {
max-width: 100% !important;
width: 100% !important;
border-collapse: collapse !important;
margin: 20px 0 !important;
}
table, iframe {
max-width: 100% !important;
}
@page {
margin: 0 !important;
}
@media (max-width: 768px) {
.sapiens-report-wrapper {
padding: 32px 24px !important;
}
h1 {
font-size: 28px !important;
}
h2 {
font-size: 22px !important;
}
h3 {
font-size: 19px !important;
}
}
`;
iframeDoc.head.appendChild(style);
}