txeo/cv-site
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: print-friendly improvements and PDF download modal

Browse Source 
Print CSS enhancements:
- Show ALL icons, logos, and badges by default in print (16px section icons, 40px company/project logos)
- Improved header layout with bigger photo (110x147px, 3:4 ratio) positioned on right
- Name and years right-aligned with justified intro text below
- Maintained flex layout for experience/project items to show logos side-by-side
- Compact badge sizing (7pt font) for print

PDF Download UX:
- Replaced direct download links with modal popup
- Shows work-in-progress message directing users to Print Friendly feature
- Bilingual modal (English/Spanish) matching info modal styling
- Modal closable via backdrop click, X button, or Escape key
- Prevents accidental downloads of outdated PDFs

UI improvements:
- Enhanced icon toggle contrast and visibility
- Consistent modal behavior across info and PDF modals
This commit is contained in:
juanatsap
2025-11-10 16:03:29 +00:00
parent fc700f1f0e
commit d9bea8a923
3 changed files with 89 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/css/print.css
+36 -11
View File
@@ -192,20 +192,30 @@
}
/* ===================================
HEADER - Reduced Spacing
HEADER - Reduced Spacing with Desktop Layout
=================================== */
.cv-header {
page-break-after: avoid;
margin-bottom: 8mm !important; /* Reduced from 15mm */
}
/* Override mobile layout - use positioned layout for print */
.cv-header-content {
gap: 1.5rem !important;
display: block !important; /* Use block instead of flex */
position: relative !important;
}
.cv-header-left {
display: block !important;
position: static !important;
padding-right: 130px !important; /* Make room for bigger photo on the right */
text-align: right !important; /* Right-align name and years */
}
.cv-name {
font-size: 20pt;
margin-bottom: 4pt;
text-align: right !important; /* Override mobile center alignment */
}
.cv-title {
@@ -215,19 +225,25 @@
.years-experience,
.cv-experience-years {
font-size: 10pt;
text-align: right !important; /* Override mobile center alignment */
}
/* ===================================
PHOTO - FIXED ASPECT RATIO (3:4 Portrait)
PHOTO - FIXED ASPECT RATIO (3:4 Portrait) - RIGHT SIDE
=================================== */
.cv-photo {
width: 90px !important;
height: 120px !important; /* Maintains 3:4 ratio */
width: 110px !important; /* Increased from 90px */
height: 147px !important; /* Maintains 3:4 ratio (110 * 1.33) */
object-fit: contain !important; /* Show full photo, no crop */
border: none !important; /* Remove border */
box-shadow: none !important;
margin: 0px 0px 20px 20px !important;
page-break-inside: avoid;
/* Position photo to the right */
position: absolute !important;
top: 0 !important;
right: 0 !important;
margin: 10px 0 0 0!important;
max-width: none !important;
}
.cv-photo img {
@@ -236,13 +252,15 @@
object-fit: contain !important;
}
/* ===================================
INTRO TEXT
=================================== */
/* Intro text should be justified and below name/years */
.intro-text {
font-size: 9pt;
line-height: 1.5;
font-size: 9pt !important;
line-height: 1.5 !important;
text-align: justify !important; /* Justified text for print */
margin-top: 3mm !important;
width: 100% !important;
padding-right: 0 !important; /* Intro text extends full width below photo */
text-align-last: left !important; /* Last line left-aligned */
}
/* ===================================
@@ -453,6 +471,13 @@
.education-item {
margin-bottom: 3mm;
font-size: 9pt !important; /* Match body text size (equivalent to 0.95rem) */
line-height: 1.5 !important;
}
.education-item strong {
font-size: 9pt !important; /* Ensure degree title matches body text */
font-weight: 600 !important;
}
/* ===================================