From 95382ac3a3076c9a904022d6d3dc8e53f727ec25 Mon Sep 17 00:00:00 2001 From: ben Date: Mon, 9 Feb 2026 19:19:58 -0400 Subject: [PATCH] feat(find-training): Refactor marker visibility dots into inline tab checkboxes MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- Status.md | 119 +++++++++++++++++++++++++++++-- assets/css/find-training-map.css | 96 +++++++++++++++---------- includes/class-hvac-plugin.php | 4 +- templates/page-find-training.php | 28 ++++---- 4 files changed, 187 insertions(+), 60 deletions(-) diff --git a/Status.md b/Status.md index 1b7d0eb2..9a7060f1 100644 --- a/Status.md +++ b/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 --- diff --git a/assets/css/find-training-map.css b/assets/css/find-training-map.css index 75c58c66..954009e6 100644 --- a/assets/css/find-training-map.css +++ b/assets/css/find-training-map.css @@ -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 */ diff --git a/includes/class-hvac-plugin.php b/includes/class-hvac-plugin.php index 6e543610..13d558aa 100644 --- a/includes/class-hvac-plugin.php +++ b/includes/class-hvac-plugin.php @@ -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'); diff --git a/templates/page-find-training.php b/templates/page-find-training.php index d28d48ce..7c27440a 100644 --- a/templates/page-find-training.php +++ b/templates/page-find-training.php @@ -138,32 +138,28 @@ $api_key_configured = $find_training->is_api_key_configured();
- -
- - - -
-