poyrazavsever/poyraz-portfolio
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

fix: adjust PDF preview scaling and layout for better responsiveness

Browse Source
This commit is contained in:
Poyraz Avsever
2026-03-11 16:38:46 +03:00
parent 04c30d0fe8
commit 9beee24b6b
2 changed files with 9 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+1 -1
View File
@@ -1,4 +1,4 @@
# Portfolio New # Portfolio New
Bu monorepo, Next.js tabanlı portfolyo web uygulaması ve Electron ile geliştirilen veri yönetim panelini bir arada sunar. Bu monorepo, Next.js tabanlı portfolyo web uygulaması ve Electron ile geliştirilen veri yönetim panelini bir arada sunar.
components/content-content.tsx
+7 -13
View File
@@ -54,7 +54,7 @@ function PdfFirstPagePreview({ src, title }: { src: string; title: string }) {
}; };
const page = await pdf.getPage(1); const page = await pdf.getPage(1);
const viewport = page.getViewport({ scale: 1.2 }); const viewport = page.getViewport({ scale: 1 });
const canvas = canvasRef.current; const canvas = canvasRef.current;
if (!canvas || cancelled) return; if (!canvas || cancelled) return;
@@ -64,8 +64,8 @@ function PdfFirstPagePreview({ src, title }: { src: string; title: string }) {
const ratio = window.devicePixelRatio || 1; const ratio = window.devicePixelRatio || 1;
canvas.width = Math.floor(viewport.width * ratio); canvas.width = Math.floor(viewport.width * ratio);
canvas.height = Math.floor(viewport.height * ratio); canvas.height = Math.floor(viewport.height * ratio);
canvas.style.width = `${viewport.width}px`; canvas.style.width = "100%";
canvas.style.height = `${viewport.height}px`; canvas.style.height = "auto";
context.setTransform(ratio, 0, 0, ratio, 0, 0); context.setTransform(ratio, 0, 0, ratio, 0, 0);
await page.render({ canvasContext: context, viewport }).promise; await page.render({ canvasContext: context, viewport }).promise;
@@ -97,8 +97,8 @@ function PdfFirstPagePreview({ src, title }: { src: string; title: string }) {
} }
return ( return (
<div className="flex h-full w-full items-center justify-center bg-white p-2"> <div className="w-full bg-white p-2">
<canvas ref={canvasRef} aria-label={title} className="h-auto max-h-full w-auto max-w-full" /> <canvas ref={canvasRef} aria-label={title} className="block h-auto w-full" />
</div> </div>
); );
} }
@@ -231,7 +231,7 @@ export function ContentContent({
<Typography variant="large" className="text-base"> <Typography variant="large" className="text-base">
LinkedIn PDF Notları LinkedIn PDF Notları
</Typography> </Typography>
<div className="grid gap-2 grid-cols-2 md:grid-cols-3"> <div className="grid grid-cols-2 gap-2 lg:grid-cols-3">
{pdfFiles.map((pdf, index) => ( {pdfFiles.map((pdf, index) => (
<button <button
key={pdf} key={pdf}
@@ -240,9 +240,7 @@ export function ContentContent({
className="cursor-pointer text-left" className="cursor-pointer text-left"
> >
<Card className="overflow-hidden rounded-sm border-border p-0 transition-colors hover:border-zinc-700"> <Card className="overflow-hidden rounded-sm border-border p-0 transition-colors hover:border-zinc-700">
<div className="aspect-square w-full">
<PdfFirstPagePreview src={`/pdf/${pdf}`} title={`${pdf} önizleme`} /> <PdfFirstPagePreview src={`/pdf/${pdf}`} title={`${pdf} önizleme`} />
</div>
</Card> </Card>
</button> </button>
))} ))}
@@ -348,11 +346,7 @@ export function ContentContent({
{activePdf ? ( {activePdf ? (
<div className="mt-3 h-[70dvh] overflow-hidden rounded-sm border border-border"> <div className="mt-3 h-[70dvh] overflow-hidden rounded-sm border border-border">
<iframe <iframe src={`/pdf/${activePdf}`} title={activePdf} className="h-full w-full" />
src={`/pdf/${activePdf}`}
title={activePdf}
className="h-full w-full"
/>
</div> </div>
) : ( ) : (
<Card className="mt-3 rounded-sm border-border p-3"> <Card className="mt-3 rounded-sm border-border p-3">