fix: Complete mobile button fixes - transparency, color, and layout
Fixes three critical mobile UI issues: 1. Theme Button Transparency (FIXED) - Changed theme button from 50% to full opacity on mobile - Updated _themes.css with rgba(x, y, z, 1) for all theme modes - Added opacity: 1 !important to mobile media query 2. Info Button Color Differentiation (FIXED) - Changed info button from green (#27ae60) to blue (#3498db) - Now visually distinct from green back-to-top button - Updated all states: default, hover, at-bottom 3. Button Layout Reorganization (FIXED) - Added .is-mobile-device rules for 5-button layout (no shortcuts) - Buttons centered without gap: Download, Print, Theme, Info, Back-to-top - Total width: 290px (5 buttons + 4 gaps) vs 350px (6 buttons) Files modified: - static/css/01-foundation/_themes.css - Primary theme button fix - static/css/04-interactive/_scroll-behavior.css - Info color + layout - static/css/color-theme.css - Mobile device positioning sync - tests/mjs/53-final-mobile-fixes-test.mjs - Comprehensive validation Test results: ✅ Shortcuts hidden on real mobile (iPhone user agent) ✅ 5 buttons evenly spaced with no gap (60px spacing) ✅ Info button blue (52, 152, 219) vs back-to-top green (39, 174, 96) ✅ Theme button full opacity (alpha: 1, opacity: 1)
This commit is contained in:
juanatsap
Executable
+150
@@ -0,0 +1,150 @@
|
||||
#!/usr/bin/env node
|
||||
|
||||
import { chromium } from 'playwright';
|
||||
|
||||
const MOBILE_VIEWPORT = { width: 375, height: 667 };
|
||||
|
||||
(async () => {
|
||||
const browser = await chromium.launch({ headless: true });
|
||||
|
||||
console.log('🧪 Testing Final Mobile Fixes\n');
|
||||
|
||||
// Test with iPhone user agent (real mobile device)
|
||||
const context = await browser.newContext({
|
||||
viewport: MOBILE_VIEWPORT,
|
||||
userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 15_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.0 Mobile/15E148 Safari/604.1',
|
||||
hasTouch: true
|
||||
});
|
||||
const page = await context.newPage();
|
||||
|
||||
await page.goto('http://localhost:1999/?lang=en&view=extended');
|
||||
await page.waitForLoadState('networkidle');
|
||||
|
||||
// FIX 1: Check button reorganization (no gap from hidden shortcuts)
|
||||
console.log('📱 FIX 1: Button Reorganization (5 buttons, no gap)\n');
|
||||
|
||||
const buttonPositions = await page.evaluate(() => {
|
||||
const buttons = {
|
||||
download: document.querySelector('.download-btn'),
|
||||
print: document.querySelector('.print-friendly-btn'),
|
||||
theme: document.querySelector('.color-theme-switcher'),
|
||||
info: document.querySelector('.info-button'),
|
||||
backToTop: document.querySelector('.back-to-top'),
|
||||
shortcuts: document.querySelector('.shortcuts-btn')
|
||||
};
|
||||
|
||||
const positions = {};
|
||||
for (const [name, btn] of Object.entries(buttons)) {
|
||||
if (btn) {
|
||||
const rect = btn.getBoundingClientRect();
|
||||
const computed = window.getComputedStyle(btn);
|
||||
positions[name] = {
|
||||
left: Math.round(rect.left),
|
||||
visible: computed.display !== 'none'
|
||||
};
|
||||
}
|
||||
}
|
||||
return positions;
|
||||
});
|
||||
|
||||
console.log('Button Positions:');
|
||||
Object.entries(buttonPositions).forEach(([name, pos]) => {
|
||||
console.log(` • ${name}: ${pos.visible ? 'VISIBLE' : 'HIDDEN'} at ${pos.left}px from left`);
|
||||
});
|
||||
|
||||
const shortcutsHidden = !buttonPositions.shortcuts.visible;
|
||||
const buttonsEvenlySpaced = Math.abs(
|
||||
(buttonPositions.print.left - buttonPositions.download.left) - 60
|
||||
) < 5; // Should be ~60px apart
|
||||
|
||||
console.log(`\n Shortcuts hidden: ${shortcutsHidden ? '✅' : '❌'}`);
|
||||
console.log(` Buttons evenly spaced: ${buttonsEvenlySpaced ? '✅' : '❌'}\n`);
|
||||
|
||||
// FIX 2: Check info button is BLUE (not green)
|
||||
console.log('🎨 FIX 2: Info Button Color (Blue vs Green)\n');
|
||||
|
||||
const buttonColors = await page.evaluate(() => {
|
||||
const info = document.querySelector('.info-button');
|
||||
const backToTop = document.querySelector('.back-to-top');
|
||||
|
||||
const infoStyles = window.getComputedStyle(info);
|
||||
const backToTopStyles = window.getComputedStyle(backToTop);
|
||||
|
||||
return {
|
||||
info: {
|
||||
background: infoStyles.backgroundColor,
|
||||
opacity: infoStyles.opacity
|
||||
},
|
||||
backToTop: {
|
||||
background: backToTopStyles.backgroundColor,
|
||||
opacity: backToTopStyles.opacity
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
console.log('Info Button:');
|
||||
console.log(` • Background: ${buttonColors.info.background}`);
|
||||
console.log(` • Opacity: ${buttonColors.info.opacity}`);
|
||||
console.log(` • Expected: rgb(52, 152, 219) - Blue\n`);
|
||||
|
||||
console.log('Back-to-Top Button:');
|
||||
console.log(` • Background: ${buttonColors.backToTop.background}`);
|
||||
console.log(` • Opacity: ${buttonColors.backToTop.opacity}`);
|
||||
console.log(` • Expected: rgb(39, 174, 96) - Green\n`);
|
||||
|
||||
const infoIsBlue = buttonColors.info.background.includes('52, 152, 219') ||
|
||||
buttonColors.info.background.includes('52,152,219');
|
||||
const backToTopIsGreen = buttonColors.backToTop.background.includes('39, 174, 96') ||
|
||||
buttonColors.backToTop.background.includes('39,174,96');
|
||||
const differentColors = buttonColors.info.background !== buttonColors.backToTop.background;
|
||||
|
||||
console.log(` Info is blue: ${infoIsBlue ? '✅' : '❌'}`);
|
||||
console.log(` Back-to-top is green: ${backToTopIsGreen ? '✅' : '❌'}`);
|
||||
console.log(` Different colors: ${differentColors ? '✅' : '❌'}\n`);
|
||||
|
||||
// FIX 3: Check theme button full opacity
|
||||
console.log('🌈 FIX 3: Theme Button Transparency\n');
|
||||
|
||||
const themeButtonStyles = await page.evaluate(() => {
|
||||
const theme = document.querySelector('.color-theme-switcher');
|
||||
const computed = window.getComputedStyle(theme);
|
||||
const bg = computed.backgroundColor;
|
||||
|
||||
// Extract rgba values
|
||||
const match = bg.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/);
|
||||
const alpha = match && match[4] ? parseFloat(match[4]) : 1.0;
|
||||
|
||||
return {
|
||||
background: bg,
|
||||
opacity: computed.opacity,
|
||||
alpha: alpha,
|
||||
themeMode: theme.getAttribute('data-theme-mode')
|
||||
};
|
||||
});
|
||||
|
||||
console.log('Theme Button:');
|
||||
console.log(` • Mode: ${themeButtonStyles.themeMode}`);
|
||||
console.log(` • Background: ${themeButtonStyles.background}`);
|
||||
console.log(` • Opacity: ${themeButtonStyles.opacity}`);
|
||||
console.log(` • Alpha: ${themeButtonStyles.alpha}`);
|
||||
|
||||
const themeFullOpacity = parseFloat(themeButtonStyles.opacity) === 1.0 &&
|
||||
themeButtonStyles.alpha === 1.0;
|
||||
|
||||
console.log(` • Full opacity: ${themeFullOpacity ? '✅' : '❌'}\n`);
|
||||
|
||||
// Take screenshot
|
||||
await page.screenshot({
|
||||
path: 'tests/screenshots/final-mobile-fixes.png',
|
||||
fullPage: true
|
||||
});
|
||||
console.log('📸 Screenshot: tests/screenshots/final-mobile-fixes.png\n');
|
||||
|
||||
const allPassed = shortcutsHidden && buttonsEvenlySpaced &&
|
||||
infoIsBlue && differentColors && themeFullOpacity;
|
||||
|
||||
console.log(`${allPassed ? '✅' : '❌'} Tests ${allPassed ? 'PASSED' : 'FAILED'}\n`);
|
||||
|
||||
await browser.close();
|
||||
process.exit(allPassed ? 0 : 1);
|
||||
})();
|
||||
Reference in New Issue
Block a user