upskill-event-manager/templates/page-find-trainer-minimal.php
bengizmo 7ac8a11ca7 feat: Implement comprehensive mobile optimization system for HVAC plugin
Complete mobile-first responsive design implementation addressing all critical usability issues:

PRIORITY 1 (CRITICAL) - Responsive Tables:
- Converted dashboard events table to mobile card layout using CSS Grid/Flexbox
- Certificate reports table now displays as stacked cards on mobile screens
- Added data labels for all table cells using CSS pseudo-elements
- Touch-friendly action buttons with 44x44px minimum sizing
- Horizontal scroll indicators for overflow content

PRIORITY 2 (HIGH) - Registration Form Mobile UX:
- Implemented collapsible form sections with smooth animations
- Touch-friendly form fields with 16px font size (prevents iOS zoom)
- Enhanced input styling with 44px minimum height for accessibility
- Improved checkbox and radio button layouts
- Mobile-optimized submit button (52px height, full width)

PRIORITY 3 (MEDIUM) - Mobile Navigation Enhancement:
- Added hamburger menu toggle for mobile screens
- Touch-friendly navigation links (54px minimum height)
- Submenu expand/collapse functionality
- Outside-click menu closing behavior
- ARIA attributes for accessibility compliance

PRIORITY 4 (POLISH) - Content Spacing Improvements:
- Single-column layouts for screens under 480px
- Optimized padding/margins across all mobile breakpoints
- Enhanced focus indicators (3px solid outlines)
- Modal full-screen behavior on mobile devices
- Swipe-to-close functionality for mobile modals

Technical Implementation:
- Created hvac-mobile-responsive.css (889 lines) with comprehensive mobile styles
- Created hvac-mobile-responsive.js with interactive functionality
- Integrated with HVAC_Scripts_Styles system for conditional loading
- Added Safari browser compatibility checks and resource optimization
- Implemented touch device detection and enhanced interactions

Testing Results:
- Verified at 320px (iPhone SE) and 375px (iPhone 12) viewports
- All interactive elements meet WCAG 2.1 AA touch target requirements
- Form inputs properly sized to prevent mobile browser zoom
- Complete cross-device compatibility maintained
- Professional appearance across all breakpoints

Performance Optimizations:
- Conditional loading based on viewport detection
- Debounced resize event handlers
- Efficient CSS cascade prevention for Safari browsers
- Touch-optimized event handling with minimal performance impact

Files Modified:
- includes/class-hvac-scripts-styles.php: Added mobile asset loading
- assets/css/hvac-mobile-responsive.css: Complete responsive framework
- assets/js/hvac-mobile-responsive.js: Mobile interaction enhancements
- Multiple template files: Added mobile-specific optimizations

🤖 Generated with Claude Code

Co-Authored-By: Claude <noreply@anthropic.com>
2025-08-11 08:45:47 -03:00

96 lines
No EOL
2.7 KiB
PHP

<?php
/**
* Template Name: Find a Trainer - Minimal Test
* Minimal version for Safari debugging
*
* @package HVAC_Plugin
* @since 1.0.0
*/
// Define constant to identify we're in a page template
define('HVAC_IN_PAGE_TEMPLATE', true);
// Get header
get_header();
?>
<div class="hvac-find-trainer-minimal">
<div class="ast-container">
<h1>Find a Trainer - Minimal Test</h1>
<p>If you can see this text, the basic page loading works.</p>
<p><strong>Browser Info:</strong></p>
<ul>
<li>User Agent: <code id="user-agent"></code></li>
<li>Browser: <span id="browser-detection"></span></li>
<li>JavaScript: <span id="js-status">❌ Not loaded</span></li>
</ul>
<div id="test-results">
<h3>JavaScript Tests:</h3>
<div id="test-output"></div>
</div>
</div>
</div>
<!-- Minimal JavaScript test -->
<script type="text/javascript">
// ES5 only - basic compatibility test
(function() {
'use strict';
// Test 1: Basic JavaScript works
document.getElementById('js-status').innerHTML = '✅ Basic JS working';
document.getElementById('user-agent').innerHTML = navigator.userAgent;
// Test 2: Browser detection
var userAgent = navigator.userAgent;
var isSafari = userAgent.indexOf('Safari') !== -1 && userAgent.indexOf('Chrome') === -1;
var isOldSafari = false;
if (isSafari) {
var versionMatch = userAgent.match(/Version\/([0-9]+)/);
if (versionMatch && parseInt(versionMatch[1]) < 10) {
isOldSafari = true;
}
}
var browserText = isSafari ? (isOldSafari ? '🚨 Old Safari (needs ES5)' : '✅ Modern Safari') : '✅ Other browser';
document.getElementById('browser-detection').innerHTML = browserText;
// Test 3: Add test results
var testOutput = document.getElementById('test-output');
var tests = [
'Basic JavaScript: ✅ Working',
'DOM manipulation: ✅ Working',
'User agent detection: ✅ Working'
];
for (var i = 0; i < tests.length; i++) {
var p = document.createElement('p');
p.innerHTML = tests[i];
testOutput.appendChild(p);
}
// Test 4: Try some potentially problematic syntax
try {
var testVar = 'test';
testOutput.appendChild(createTestResult('var declaration: ✅ Working'));
} catch (e) {
testOutput.appendChild(createTestResult('var declaration: ❌ Error - ' + e.message));
}
function createTestResult(text) {
var p = document.createElement('p');
p.innerHTML = text;
return p;
}
})();
</script>
<?php
// Get footer
get_footer();
?>