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

3
src/preview/index.html
View File

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

2
src/preview/main.js
View File

@ -1,5 +1,3 @@
import '../scss/print.css';
import {
getCVData,
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 {
/* A4 */
/* size: 210mm 297mm; */
@ -6,26 +6,31 @@
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 {
margin: 0;
padding: 0;
}
body {
margin: 0;
page-break-inside: auto;
padding: 0;
border: 0;
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,