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

Improve visual layout and aspect ratio for Mohamed Salah report slides

Browse Source 
Adjust image and text spacing, and fix image aspect ratio to 16:9 in the Mohamed Salah report slides.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 9a264234-c5d7-4dcc-adf3-a954b149b30d
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/3df548ff-50ae-432f-9be4-25d34eccc983/9a264234-c5d7-4dcc-adf3-a954b149b30d/yjv3HO6
This commit is contained in:
kimjaehyeon0101
2025-10-14 06:23:22 +00:00
parent f4154434d2
commit 0ed3b3e4d5
9 changed files with 37 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -208,23 +208,25 @@ function MohamedSalahSlides() {
return (
<div className="space-y-6">
<Card className={`${slides[currentSlide].bgColor || 'bg-white'}`}>
<CardContent className={`p-12 ${slides[currentSlide].bgColor ? 'text-white' : 'text-gray-900'}`}>
<div className="min-h-[400px] flex flex-col justify-center">
<h2 className="text-4xl font-bold mb-4" data-testid="text-slide-title">
{slides[currentSlide].title}
</h2>
{slides[currentSlide].subtitle && (
<p className="text-xl opacity-90 mb-6">{slides[currentSlide].subtitle}</p>
)}
{slides[currentSlide].content && (
<div className={slides[currentSlide].bgColor ? 'bg-white/10 backdrop-blur p-6 rounded-lg' : ''}>
{slides[currentSlide].content}
</div>
)}
</div>
</CardContent>
</Card>
<div className="w-full relative overflow-hidden" style={{ paddingTop: '56.25%' }} data-testid="slide-container-16-9">
<Card className={`${slides[currentSlide].bgColor || 'bg-white'} absolute inset-0`}>
<CardContent className={`p-6 h-full ${slides[currentSlide].bgColor ? 'text-white' : 'text-gray-900'} overflow-auto`}>
<div className="h-full flex flex-col justify-center">
<h2 className="text-2xl font-bold mb-2" data-testid="text-slide-title">
{slides[currentSlide].title}
</h2>
{slides[currentSlide].subtitle && (
<p className="text-base opacity-90 mb-3">{slides[currentSlide].subtitle}</p>
)}
{slides[currentSlide].content && (
<div className={slides[currentSlide].bgColor ? 'bg-white/10 backdrop-blur p-3 rounded-lg text-sm' : 'text-sm'}>
{slides[currentSlide].content}
</div>
)}
</div>
</CardContent>
</Card>
</div>
<div className="flex items-center justify-between">
<Button
@ -329,6 +331,11 @@ export default function Report() {
padding: 56px !important;
max-width: 1000px !important;
margin: 0 auto !important;
text-align: center !important;
}
.sapiens-report-wrapper p {
text-align: justify !important;
}
h1 {
@ -379,6 +386,11 @@ export default function Report() {
text-align: justify !important;
}
p + img,
img + p {
margin-top: 24px !important;
}
.metadata {
background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%) !important;
padding: 24px !important;
@ -436,7 +448,10 @@ export default function Report() {
height: auto !important;
border-radius: 12px !important;
box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.15) !important;
margin: 20px 0 !important;
margin: 32px auto !important;
display: block !important;
clear: both !important;
float: none !important;
}
table {