ben/upskill-event-manager
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 2

fix(find-training): Fix Near Me button mobile layout and add empty results notification

Browse source 
- Fixed CSS bug where Near Me button HTML was replaced without .hvac-btn-text
  wrapper class, causing layout issues on mobile when text became visible
- Applied fix to all 5 locations: loading state, success state, error reset,
  clear filters, and remove location filter
- Added notification when Near Me filter returns no results within 100km radius
  to improve UX feedback

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
ben 2026-02-06 10:43:11 -04:00
parent fcd55fd164
commit 4b53d3eab6
2 changed files with 75 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

64
Status.md
View file

@ -1,8 +1,8 @@
# HVAC Community Events - Project Status
**Last Updated:** February 2, 2026
**Current Session:** Champion Differentiation on Find Training Map
**Version:** 2.2.6 (Deployed to Production)
**Last Updated:** February 6, 2026
**Current Session:** Near Me Button Mobile Fix
**Version:** 2.2.6 (Deployed to Staging)
---
@ -20,7 +20,63 @@
---
## 🎯 CURRENT SESSION - CHAMPION DIFFERENTIATION ON FIND TRAINING (Feb 2, 2026)
## 🎯 CURRENT SESSION - NEAR ME BUTTON MOBILE FIX (Feb 6, 2026)
### Status: ✅ **COMPLETE - Deployed to Staging**
**Objective:** Fix mobile layout issue where the "Near Me" button caused the search bar to shrink when location was granted.
### Issues Found & Fixed
1. ✅ **CSS/HTML Button Structure Bug** (`assets/js/find-training-filters.js`)
- When the Near Me button state changed, the HTML was replaced without the `.hvac-btn-text` wrapper class
- On mobile, CSS hides `.hvac-btn-text`, but unwrapped text was visible causing layout issues
- Fixed in 5 locations: loading state, success state, error reset, clear filters, remove location filter
2. ✅ **No Feedback for Empty Results** (`assets/js/find-training-filters.js`)
- When "Near Me" filter returned no results within 100km, user saw empty map with no explanation
- Added notification: "No trainers, venues, or events found within 100km of your location. Try removing the 'Near Me' filter to see all results."
### Files Modified
| File | Change |
|------|--------|
| `assets/js/find-training-filters.js` | Fixed button HTML to preserve `.hvac-btn-text` wrapper; added empty results notification |
### Code Changes
**Button HTML Fix (5 locations):**
```javascript
// Before (broken on mobile):
$button.html('<span class="dashicons dashicons-yes-alt"></span> Near Me');
// After (correct):
$button.html('<span class="dashicons dashicons-yes-alt"></span><span class="hvac-btn-text">Near Me</span>');
```
**Empty Results Notification:**
```javascript
if (self.userLocation) {
const totalResults = HVACTrainingMap.trainers.length +
HVACTrainingMap.venues.length +
HVACTrainingMap.events.length;
if (totalResults === 0) {
self.showLocationError('No trainers, venues, or events found within 100km...');
}
}
```
### Mobile Testing Performed
- ✅ 375x812 (iPhone X) - Map and markers display correctly
- ✅ 320x568 (iPhone SE) - Map and markers display correctly
- ✅ Cluster markers expand on click
- ✅ Individual trainer markers clickable
- ✅ Info windows display correctly
- ✅ Profile modal opens and displays correctly
---
## 📋 PREVIOUS SESSION - CHAMPION DIFFERENTIATION ON FIND TRAINING (Feb 2, 2026)
### Status: ✅ **COMPLETE - Deployed to Production**

20
assets/js/find-training-filters.js
View file

@ -179,6 +179,16 @@
// Render the active tab
HVACTrainingMap.renderActiveTabList();
// Show notification if "Near Me" filter returned no results
if (self.userLocation) {
const totalResults = HVACTrainingMap.trainers.length +
HVACTrainingMap.venues.length +
HVACTrainingMap.events.length;
if (totalResults === 0) {
self.showLocationError('No trainers, venues, or events found within 100km of your location. Try removing the "Near Me" filter to see all results.');
}
}
// Note: syncSidebarWithViewport will be called by map 'idle' event
}
},
@ -199,7 +209,7 @@
// Show loading state
$button.prop('disabled', true);
$button.html('<span class="dashicons dashicons-update-alt hvac-spin"></span> Locating...');
$button.html('<span class="dashicons dashicons-update-alt hvac-spin"></span><span class="hvac-btn-text">Locating...</span>');
// Clear any previous error message
this.clearLocationError();
@ -216,7 +226,7 @@
self.applyFilters();
// Update button state
$button.html('<span class="dashicons dashicons-yes-alt"></span> Near Me');
$button.html('<span class="dashicons dashicons-yes-alt"></span><span class="hvac-btn-text">Near Me</span>');
$button.addClass('active');
// Add to active filters display
@ -226,7 +236,7 @@
self.showLocationError(error || 'Unable to get your location. Please check browser permissions.');
// Reset button
$button.html('<span class="dashicons dashicons-location-alt"></span> Near Me');
$button.html('<span class="dashicons dashicons-location-alt"></span><span class="hvac-btn-text">Near Me</span>');
$button.prop('disabled', false);
}
});
@ -294,7 +304,7 @@
// Reset Near Me button
$('#hvac-near-me-btn')
.removeClass('active')
.html('<span class="dashicons dashicons-location-alt"></span> Near Me')
.html('<span class="dashicons dashicons-location-alt"></span><span class="hvac-btn-text">Near Me</span>')
.prop('disabled', false);
// Clear active filters display
@ -336,7 +346,7 @@
this.userLocation = null;
$('#hvac-near-me-btn')
.removeClass('active')
.html('<span class="dashicons dashicons-location-alt"></span> Near Me')
.html('<span class="dashicons dashicons-location-alt"></span><span class="hvac-btn-text">Near Me</span>')
.prop('disabled', false);
break;
case 'include_past':