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

fix: Show photo at 50% size in landscape mode instead of hiding

Browse Source 
Changed landscape orientation behavior to display profile photo
at reduced size (50% width, max 80px) instead of hiding it completely.

Changes:
- static/css/05-responsive/_breakpoints.css: Changed from display:none to width:50%
- tests/mjs/48-mobile-landscape-and-blur-test.mjs: Updated test to verify photo visibility

Test Results:
✅ Photo visible in landscape: YES
✅ Photo width: 80px (max: 80px)
✅ Landscape mode optimized with visible photo

Screenshot: tests/screenshots/mobile-landscape-optimized.png
This commit is contained in:
juanatsap
2025-11-23 08:24:59 +00:00
parent dab21f753d
commit dc5bb3d4f3
2 changed files with 15 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/css/05-responsive/_breakpoints.css
+4 -2
View File
@@ -712,9 +712,11 @@
font-size: 0.9em !important;
}
/* Hide photo in landscape to save vertical space */
/* Reduce photo size in landscape to 50% */
.cv-photo {
display: none !important;
width: 50% !important;
height: auto !important;
max-width: 80px !important;
}
/* Compact action bar */
tests/mjs/48-mobile-landscape-and-blur-test.mjs
+11 -4
View File
@@ -85,8 +85,13 @@ const LANDSCAPE = { width: 667, height: 375 }; // iPhone SE landscape
};
});
const photoDisplay = await cvPhoto.evaluate(el => {
return window.getComputedStyle(el).display;
const photoStyles = await cvPhoto.evaluate(el => {
const computed = window.getComputedStyle(el);
return {
display: computed.display,
width: computed.width,
maxWidth: computed.maxWidth
};
});
const actionBarPadding = await actionBar.evaluate(el => {
@@ -95,10 +100,12 @@ const LANDSCAPE = { width: 667, height: 375 }; // iPhone SE landscape
console.log(`📊 Landscape Optimizations:`);
console.log(` • Name font size: ${nameStyles.fontSize} (should be ~1.2rem)`);
console.log(` • Photo hidden: ${photoDisplay === 'none' ? '✅ YES' : '❌ NO'}`);
console.log(` • Photo visible: ${photoStyles.display !== 'none' ? '✅ YES' : '❌ NO'}`);
console.log(` • Photo width: ${photoStyles.width} (max: ${photoStyles.maxWidth})`);
console.log(` • Action bar compact: ${actionBarPadding}`);
const isOptimized = photoDisplay === 'none' &&
const isOptimized = photoStyles.display !== 'none' &&
parseFloat(photoStyles.maxWidth) <= 80 &&
parseFloat(nameStyles.fontSize) < 20;
console.log(`\n${isOptimized ? '✅' : '❌'} Landscape mode ${isOptimized ? 'IS' : 'is NOT'} optimized`);