feat(find-training): Refactor marker visibility dots into inline tab checkboxes
Replace standalone colored dot toggles with custom checkboxes inline beside each category tab heading (Events, Trainers, Venues). Version bump 2.2.17 → 2.2.18 for CDN cache busting. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
9dbe472c45
commit
95382ac3a3
4 changed files with 187 additions and 60 deletions
119
Status.md
119
Status.md
|
|
@ -1,8 +1,8 @@
|
|||
# HVAC Community Events - Project Status
|
||||
|
||||
**Last Updated:** February 9, 2026
|
||||
**Current Session:** Mobile Find Training Scroll Fix
|
||||
**Version:** 2.2.14 (Deployed to Production)
|
||||
**Current Session:** Marker Visibility Toggle Checkbox Refactor
|
||||
**Version:** 2.2.18 (Deployed to Production)
|
||||
|
||||
---
|
||||
|
||||
|
|
@ -20,7 +20,118 @@
|
|||
|
||||
---
|
||||
|
||||
## 🎯 CURRENT SESSION - MOBILE FIND TRAINING SCROLL FIX (Feb 9, 2026)
|
||||
## 🎯 CURRENT SESSION - MARKER VISIBILITY TOGGLE CHECKBOX REFACTOR (Feb 9, 2026)
|
||||
|
||||
### Status: ✅ **COMPLETE - Deployed to Production (v2.2.18)**
|
||||
|
||||
**Objective:** Refactor the marker visibility toggles on the Find Training page from standalone colored dots into inline checkboxes beside each category tab heading.
|
||||
|
||||
### Changes Made
|
||||
|
||||
1. **Inline Checkboxes in Tab Buttons** (`templates/page-find-training.php`)
|
||||
- Removed standalone `hvac-visibility-toggles` div with 3 colored dot toggles
|
||||
- Moved each checkbox inline into its corresponding tab button (`Events`, `Trainers`, `Venues`)
|
||||
- `onclick="event.stopPropagation()"` on labels prevents checkbox clicks from triggering tab switches
|
||||
- Checkbox IDs unchanged (`hvac-show-events`, `hvac-show-trainers`, `hvac-show-venues`) — no JS changes needed
|
||||
|
||||
2. **Custom Checkbox Styling** (`assets/css/find-training-map.css`)
|
||||
- Replaced old dot-based toggle CSS with custom checkbox styles
|
||||
- 14x14px checkboxes with rounded corners, white background, CSS checkmark
|
||||
- Category-specific colors when checked: teal for events (`#0ebaa6`), green for trainers (`#6aad1e`), green for venues (`#89c92e`)
|
||||
- Unchecked state: grey-bordered empty box
|
||||
- Tablet: smaller 12px checkboxes
|
||||
- Mobile (<768px): checkboxes hidden (same behavior as before)
|
||||
|
||||
3. **Trainer Checkbox Color Fix** (`assets/css/find-training-map.css`)
|
||||
- `--hvac-trainer-color` CSS variable is `#f0f7e8` (near-white), too light for checkbox fill
|
||||
- Overrode trainer checkbox specifically with `#6aad1e` for visible green
|
||||
|
||||
4. **Version Bump** (`includes/class-hvac-plugin.php`)
|
||||
- Bumped `HVAC_VERSION` and `HVAC_PLUGIN_VERSION` from `2.2.17` to `2.2.18` for CDN cache busting
|
||||
|
||||
### Files Modified
|
||||
|
||||
| File | Change |
|
||||
|------|--------|
|
||||
| `templates/page-find-training.php` | Removed visibility toggles div, added inline checkboxes in tab buttons |
|
||||
| `assets/css/find-training-map.css` | Replaced dot toggle CSS with checkbox styles, responsive adjustments |
|
||||
| `includes/class-hvac-plugin.php` | Version bump `2.2.17` → `2.2.18` |
|
||||
|
||||
### Verification
|
||||
|
||||
- ✅ All 3 checkboxes render inline beside tab headings with category colors
|
||||
- ✅ Unchecking a checkbox removes that category's markers from map
|
||||
- ✅ Re-checking restores markers
|
||||
- ✅ Tab switching works independently of checkbox state
|
||||
- ✅ Counts display correctly: Events (8), Trainers (42), Venues (9)
|
||||
- ✅ No JS changes required — existing event handlers work with unchanged checkbox IDs
|
||||
|
||||
---
|
||||
|
||||
## 📋 PREVIOUS SESSION - FIND TRAINING TAB REORDER, MARKER HIGHLIGHTING & MAP RESET (Feb 9, 2026)
|
||||
|
||||
### Status: ✅ **COMPLETE - Deployed to Production (v2.2.17)**
|
||||
|
||||
**Objective:** Reorder Find Training page tabs to make Events the default, add visual marker highlighting when switching tabs, add a map reset button, and fix mobile overflow caused by the changes.
|
||||
|
||||
### Changes Made
|
||||
|
||||
1. **Tab Reorder: Events First** (`templates/page-find-training.php`, `assets/js/find-training-map.js`)
|
||||
- Moved Events tab from 3rd to 1st position (default active tab)
|
||||
- Tab order is now: **Events | Trainers | Venues**
|
||||
- Updated search placeholder to "Search events..."
|
||||
- Updated skip link to target `#hvac-event-grid`
|
||||
- Updated filter bar aria-label for all three categories
|
||||
- Reordered tab panels to match (Events panel active with loading spinner)
|
||||
|
||||
2. **Marker Highlighting on Tab Selection** (`assets/js/find-training-map.js`)
|
||||
- Added 4 highlighted icon methods: `getTrainerIconHighlighted()`, `getChampionIconHighlighted()`, `getVenueIconHighlighted()`, `getEventIconHighlighted()`
|
||||
- Highlighted icons are larger (scale +4) with brighter/thicker strokes (strokeWeight 3)
|
||||
- URL-based icons scale from 32x32 to 40x40 with adjusted anchors
|
||||
- Added `highlightMarkersForTab(tab)` method with no-map guard
|
||||
- Highlighted markers get `zIndex: 100` (vs default `1`) to render on top
|
||||
- Called from both `switchTab()` and `updateMarkers()`
|
||||
|
||||
3. **Map Reset Button** (`templates/page-find-training.php`, `assets/js/find-training-map.js`, `assets/css/find-training-map.css`)
|
||||
- Added reset button (rotate icon) positioned bottom-right of map container
|
||||
- Calls `fitBounds()` to restore original zoom encompassing all markers
|
||||
- Styled to match Google Maps UI controls (white, rounded, shadow)
|
||||
|
||||
4. **Mobile Overflow Fix** (`assets/css/find-training-map.css`)
|
||||
- **Symptom:** Making Events the default tab exposed long event titles (e.g., "measureQuick 101: Cooling and Heat Pump Commissioning") that pushed sidebar beyond viewport width
|
||||
- **Root Cause:** Tablet media query had `overflow: visible !important` on `.hvac-sidebar`, overriding base `overflow: hidden`
|
||||
- **Fix:** Changed to `overflow-x: hidden !important; overflow-y: visible !important;`
|
||||
- Also added `overflow: hidden` and `min-width: 0; text-overflow: ellipsis` to tab buttons
|
||||
|
||||
5. **Version Bump** (`includes/class-hvac-plugin.php`)
|
||||
- Bumped `HVAC_VERSION` and `HVAC_PLUGIN_VERSION` from `2.2.14` to `2.2.17`
|
||||
- Intermediate bumps (2.2.15, 2.2.16) needed during debugging to bust CSS cache
|
||||
|
||||
### Files Modified
|
||||
|
||||
| File | Change |
|
||||
|------|--------|
|
||||
| `templates/page-find-training.php` | Reorder tabs/panels (Events first), update placeholder/skip link/aria, add reset button |
|
||||
| `assets/js/find-training-map.js` | Default to `'events'`, 4 highlighted icon methods, `highlightMarkersForTab()`, `resetMapView()`, dynamic `showLoading()` |
|
||||
| `assets/css/find-training-map.css` | Reset button styles, mobile overflow fix (`overflow-x: hidden`), tab overflow protection |
|
||||
| `includes/class-hvac-plugin.php` | Version bump `2.2.14` → `2.2.17` |
|
||||
|
||||
### Git Commit
|
||||
- `9dbe472c` - feat(find-training): Reorder tabs (Events first), add marker highlighting and map reset
|
||||
|
||||
### Verification
|
||||
|
||||
- ✅ Events tab active and first on page load, placeholder says "Search events..."
|
||||
- ✅ Event markers highlighted (larger, brighter) by default
|
||||
- ✅ Switching tabs highlights corresponding marker category, others revert to normal
|
||||
- ✅ Highlighted markers render on top (zIndex 100)
|
||||
- ✅ Reset button restores original zoom/bounds after zooming in
|
||||
- ✅ Mobile (375px): no horizontal overflow, sidebar fits viewport
|
||||
- ✅ Keyboard tab navigation still works (arrow keys)
|
||||
|
||||
---
|
||||
|
||||
## 📋 PREVIOUS SESSION - MOBILE FIND TRAINING SCROLL FIX (Feb 9, 2026)
|
||||
|
||||
### Status: ✅ **COMPLETE - Deployed to Production (v2.2.14)**
|
||||
|
||||
|
|
@ -1127,7 +1238,7 @@ DISPLAY=:1 HEADLESS=false node test-comprehensive-validation.js
|
|||
|
||||
### Production Environment
|
||||
**URL:** https://upskillhvac.com
|
||||
**Version:** 2.2.13 (latest)
|
||||
**Version:** 2.2.17 (latest)
|
||||
**Server:** Cloudways Shared VPS
|
||||
|
||||
---
|
||||
|
|
|
|||
|
|
@ -1362,14 +1362,20 @@ body .hvac-find-training-page {
|
|||
font-size: 12px;
|
||||
}
|
||||
|
||||
.hvac-visibility-toggles {
|
||||
gap: 8px;
|
||||
padding: 4px 0;
|
||||
.hvac-marker-checkbox {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
.hvac-toggle-dot {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
.hvac-marker-checkbox::after {
|
||||
left: 2px;
|
||||
top: 0px;
|
||||
width: 3px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
.hvac-marker-toggle {
|
||||
margin-right: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1448,7 +1454,7 @@ body .hvac-find-training-page {
|
|||
font-size: 11px;
|
||||
}
|
||||
|
||||
.hvac-visibility-toggles {
|
||||
.hvac-marker-toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
|
@ -1804,57 +1810,71 @@ body .hvac-find-training-page {
|
|||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Visibility Toggles */
|
||||
.hvac-visibility-toggles {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.hvac-visibility-toggle {
|
||||
display: flex;
|
||||
/* Marker Toggle Checkboxes (inline in tab buttons) */
|
||||
.hvac-marker-toggle {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
margin-right: 4px;
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.hvac-visibility-toggle input {
|
||||
.hvac-marker-toggle input {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.hvac-toggle-dot {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid;
|
||||
transition: all 0.2s;
|
||||
.hvac-marker-checkbox {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border: 2px solid #999;
|
||||
border-radius: 3px;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
transition: all 0.15s ease;
|
||||
background: #fff;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.hvac-toggle-trainer {
|
||||
background: var(--hvac-trainer-color);
|
||||
border-color: #5a8a1a;
|
||||
.hvac-marker-checkbox::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 3px;
|
||||
top: 0px;
|
||||
width: 4px;
|
||||
height: 8px;
|
||||
border: solid #fff;
|
||||
border-width: 0 2px 2px 0;
|
||||
transform: rotate(45deg);
|
||||
opacity: 0;
|
||||
transition: opacity 0.15s ease;
|
||||
}
|
||||
|
||||
.hvac-toggle-venue {
|
||||
.hvac-marker-toggle input:checked + .hvac-marker-checkbox::after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Category-specific checkbox colors */
|
||||
.hvac-marker-toggle-trainer input:checked + .hvac-marker-checkbox {
|
||||
background: #6aad1e;
|
||||
border-color: #6aad1e;
|
||||
}
|
||||
|
||||
.hvac-marker-toggle-venue input:checked + .hvac-marker-checkbox {
|
||||
background: var(--hvac-venue-color);
|
||||
border-color: #6fa024;
|
||||
border-color: var(--hvac-venue-color);
|
||||
}
|
||||
|
||||
.hvac-toggle-event {
|
||||
.hvac-marker-toggle-event input:checked + .hvac-marker-checkbox {
|
||||
background: var(--hvac-event-color);
|
||||
border-color: #0a9a8a;
|
||||
border-color: var(--hvac-event-color);
|
||||
}
|
||||
|
||||
.hvac-visibility-toggle input:not(:checked) + .hvac-toggle-dot {
|
||||
background: #f5f5f5;
|
||||
border-color: #ccc;
|
||||
}
|
||||
|
||||
.hvac-visibility-toggle:hover .hvac-toggle-dot {
|
||||
transform: scale(1.1);
|
||||
.hvac-marker-toggle:hover .hvac-marker-checkbox {
|
||||
border-color: #666;
|
||||
}
|
||||
|
||||
/* Tab Panels */
|
||||
|
|
|
|||
|
|
@ -112,10 +112,10 @@ final class HVAC_Plugin {
|
|||
*/
|
||||
private function defineConstants(): void {
|
||||
if (!defined('HVAC_PLUGIN_VERSION')) {
|
||||
define('HVAC_PLUGIN_VERSION', '2.2.17');
|
||||
define('HVAC_PLUGIN_VERSION', '2.2.18');
|
||||
}
|
||||
if (!defined('HVAC_VERSION')) {
|
||||
define('HVAC_VERSION', '2.2.17');
|
||||
define('HVAC_VERSION', '2.2.18');
|
||||
}
|
||||
if (!defined('HVAC_PLUGIN_FILE')) {
|
||||
define('HVAC_PLUGIN_FILE', dirname(__DIR__) . '/hvac-community-events.php');
|
||||
|
|
|
|||
|
|
@ -138,32 +138,28 @@ $api_key_configured = $find_training->is_api_key_configured();
|
|||
<!-- Tab Navigation -->
|
||||
<div class="hvac-sidebar-tabs" role="tablist" aria-label="Browse by category">
|
||||
<button role="tab" class="hvac-tab active" data-tab="events" aria-selected="true" aria-controls="hvac-panel-events">
|
||||
<label class="hvac-marker-toggle hvac-marker-toggle-event" title="Show events on map" onclick="event.stopPropagation()">
|
||||
<input type="checkbox" id="hvac-show-events" checked>
|
||||
<span class="hvac-marker-checkbox"></span>
|
||||
</label>
|
||||
Events (<span data-count="events">0</span>)
|
||||
</button>
|
||||
<button role="tab" class="hvac-tab" data-tab="trainers" aria-selected="false" aria-controls="hvac-panel-trainers">
|
||||
<label class="hvac-marker-toggle hvac-marker-toggle-trainer" title="Show trainers on map" onclick="event.stopPropagation()">
|
||||
<input type="checkbox" id="hvac-show-trainers" checked>
|
||||
<span class="hvac-marker-checkbox"></span>
|
||||
</label>
|
||||
Trainers (<span data-count="trainers">0</span>)
|
||||
</button>
|
||||
<button role="tab" class="hvac-tab" data-tab="venues" aria-selected="false" aria-controls="hvac-panel-venues">
|
||||
<label class="hvac-marker-toggle hvac-marker-toggle-venue" title="Show venues on map" onclick="event.stopPropagation()">
|
||||
<input type="checkbox" id="hvac-show-venues" checked>
|
||||
<span class="hvac-marker-checkbox"></span>
|
||||
</label>
|
||||
Venues (<span data-count="venues">0</span>)
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Visibility Toggles (moved from map overlay) -->
|
||||
<div class="hvac-visibility-toggles">
|
||||
<label class="hvac-visibility-toggle" title="Show trainers on map">
|
||||
<input type="checkbox" id="hvac-show-trainers" checked>
|
||||
<span class="hvac-toggle-dot hvac-toggle-trainer"></span>
|
||||
</label>
|
||||
<label class="hvac-visibility-toggle" title="Show venues on map">
|
||||
<input type="checkbox" id="hvac-show-venues" checked>
|
||||
<span class="hvac-toggle-dot hvac-toggle-venue"></span>
|
||||
</label>
|
||||
<label class="hvac-visibility-toggle" title="Show events on map">
|
||||
<input type="checkbox" id="hvac-show-events" checked>
|
||||
<span class="hvac-toggle-dot hvac-toggle-event"></span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Mobile collapse toggle -->
|
||||
<button type="button"
|
||||
class="hvac-sidebar-toggle"
|
||||
|
|
|
|||
Loading…
Reference in a new issue