gitadmin
/
jsoncv
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

simulate page size on .cv-container rather than body 

making other elements in cv page not wraped in the paper like frame
This commit is contained in:
Reorx 2023-02-11 22:21:18 +08:00
parent 01d3f40fde
commit 4f342f4b1e
4 changed files with 23 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
index.html
View File

@ -4,10 +4,10 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<title><%= fn.getCVTitle(cv) %></title> <title><%= fn.getCVTitle(cv) %></title>
<style> <style>
/* styles here should be removed in @media print */ /* Note: if you add additional styles to this class, you should remove them in `@media print` to ensure .cv-container remains styleless when printing */
body { .cv-container {
border: 1px solid #ccc; border: 1px solid #ccc;
border-left: 0; margin: 10mm auto;
} }
</style> </style>
<link rel="stylesheet" href="/src/scss/print.css"> <link rel="stylesheet" href="/src/scss/print.css">

3
src/preview/index.html
View File

@ -4,10 +4,11 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>CV</title> <title>CV</title>
<style> <style>
body { .cv-container {
border-right: 1px solid #ddd; border-right: 1px solid #ddd;
} }
</style> </style>
<link rel="stylesheet" href="../scss/print.css">
</head> </head>
<body> <body>
<div class="cv-container"></div> <div class="cv-container"></div>

2
src/preview/main.js
View File

@ -1,5 +1,3 @@
import '../scss/print.css';
import { import {
getCVData, getCVData,
getCVSavedTime, getCVSavedTime,

31
src/scss/print.css
View File

@ -1,4 +1,4 @@
/* Page setup works for all themes */ /* Mandatory page setup for all themes */
@page { @page {
/* A4 */ /* A4 */
/* size: 210mm 297mm; */ /* size: 210mm 297mm; */
@ -6,26 +6,31 @@
margin: 10mm; /* approximately 0.4in */ margin: 10mm; /* approximately 0.4in */
} }
/* simulate print page size */
.cv-container {
width: calc(210mm - 20mm);
padding: 10mm;
}
@media print {
/* remove the printing simulations and common decorations , let @page decide the size and margin */
.cv-container {
margin: 0;
padding: 0;
border: 0;
width: auto;
}
}
html { html {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
body { body {
margin: 0; margin: 0;
page-break-inside: auto; padding: 0;
border: 0;
print-color-adjust: exact; print-color-adjust: exact;
-webkit-print-color-adjust: exact; -webkit-print-color-adjust: exact;
/* simulate print page size */
padding: 10mm;
width: calc(210mm - 20mm);
}
@media print {
/* remove simulate print page size, let @page decide the size and margin */
body {
padding: 0;
border: 0;
}
} }
.section-title, .section-title,