fix: apply zoom to cv-container and footer to properly reduce document space
Changed zoom target from .cv-paper to .cv-container and .cv-footer to fix issue where 50% zoom still reserved 100% document space creating empty areas. Both elements now scale together, properly reducing space at low zoom levels while keeping main action bar unaffected. - Modified applyZoom() to target .cv-container and .cv-footer - Added transform-origin, transition, and will-change to both CSS selectors - Maintains proportional scroll compensation for smooth visual experience
This commit is contained in:
+9
-5
@@ -319,11 +319,12 @@
|
||||
* @param {boolean} saveToStorage - Whether to persist to localStorage
|
||||
*/
|
||||
function applyZoom(zoomValue, saveToStorage = true) {
|
||||
const cvPaper = document.querySelector('.cv-paper');
|
||||
if (!cvPaper) return;
|
||||
const cvContainer = document.querySelector('.cv-container');
|
||||
const cvFooter = document.querySelector('.cv-footer');
|
||||
if (!cvContainer) return;
|
||||
|
||||
// Get current scale to calculate ratio
|
||||
const currentTransform = cvPaper.style.transform;
|
||||
const currentTransform = cvContainer.style.transform;
|
||||
const currentScaleMatch = currentTransform.match(/scale\(([\d.]+)\)/);
|
||||
const oldScale = currentScaleMatch ? parseFloat(currentScaleMatch[1]) : 1.0;
|
||||
|
||||
@@ -334,8 +335,11 @@
|
||||
// Store current scroll position
|
||||
const oldScrollTop = window.pageYOffset || document.documentElement.scrollTop;
|
||||
|
||||
// Apply the new scale
|
||||
cvPaper.style.transform = `scale(${newScale})`;
|
||||
// Apply the new scale to both container and footer
|
||||
cvContainer.style.transform = `scale(${newScale})`;
|
||||
if (cvFooter) {
|
||||
cvFooter.style.transform = `scale(${newScale})`;
|
||||
}
|
||||
|
||||
// Calculate proportional scroll position to maintain visual position
|
||||
// If zooming from 100% to 50%, content at pixel 1000 moves to pixel 500
|
||||
|
||||
Reference in New Issue
Block a user