diff --git a/assets/css/find-training-map.css b/assets/css/find-training-map.css index a9548ea3..75c58c66 100644 --- a/assets/css/find-training-map.css +++ b/assets/css/find-training-map.css @@ -668,6 +668,37 @@ body .hvac-find-training-page { background: var(--hvac-event-color); } +/* Reset Map View Button */ +.hvac-reset-map-btn { + position: absolute; + bottom: 24px; + right: 12px; + width: 36px; + height: 36px; + background: #fff; + border: none; + border-radius: 6px; + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); + cursor: pointer; + z-index: 10; + display: flex; + align-items: center; + justify-content: center; + transition: background 0.2s, box-shadow 0.2s; +} + +.hvac-reset-map-btn:hover { + background: #f0f0f0; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); +} + +.hvac-reset-map-btn .dashicons { + font-size: 18px; + width: 18px; + height: 18px; + color: var(--hvac-text-muted); +} + /* Map Toggles Overlay */ .hvac-map-toggles { position: absolute; @@ -1264,7 +1295,8 @@ body .hvac-find-training-page { .hvac-sidebar { border-right: none; border-top: 1px solid var(--hvac-border); - overflow: visible !important; + overflow-x: hidden !important; + overflow-y: visible !important; max-height: none !important; } @@ -1732,10 +1764,12 @@ body .hvac-find-training-page { border-bottom: 2px solid var(--hvac-border); margin: 0 -16px; padding: 0 16px; + overflow: hidden; } .hvac-tab { flex: 1; + min-width: 0; padding: 10px 8px; background: transparent; border: none; @@ -1747,6 +1781,8 @@ body .hvac-find-training-page { cursor: pointer; transition: all 0.2s; white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } .hvac-tab:hover { diff --git a/assets/js/find-training-map.js b/assets/js/find-training-map.js index 9a9fda92..ba499cfb 100644 --- a/assets/js/find-training-map.js +++ b/assets/js/find-training-map.js @@ -39,7 +39,7 @@ visibleEvents: [], // Active tab - activeTab: 'trainers', + activeTab: 'events', // Items per page for load more itemsPerPage: 6, @@ -327,6 +327,9 @@ // Fit bounds if we have markers this.fitBounds(); + + // Highlight markers for active tab + this.highlightMarkersForTab(this.activeTab); }, /** @@ -510,6 +513,122 @@ }; }, + /** + * Get highlighted trainer marker icon (larger, brighter stroke) + */ + getTrainerIconHighlighted: function() { + if (hvacFindTraining.marker_icons?.trainer) { + return { + url: hvacFindTraining.marker_icons.trainer, + scaledSize: new google.maps.Size(40, 40), + anchor: new google.maps.Point(20, 20) + }; + } + return { + path: google.maps.SymbolPath.CIRCLE, + fillColor: '#f0f7e8', + fillOpacity: 1, + strokeColor: '#3d6e00', + strokeWeight: 3, + scale: 14 + }; + }, + + /** + * Get highlighted champion marker icon (larger, brighter stroke) + */ + getChampionIconHighlighted: function() { + return { + path: google.maps.SymbolPath.CIRCLE, + fillColor: '#f0f7e8', + fillOpacity: 1, + strokeColor: '#e0e0e0', + strokeWeight: 3.5, + scale: 14 + }; + }, + + /** + * Get highlighted venue marker icon (larger, brighter stroke) + */ + getVenueIconHighlighted: function() { + if (hvacFindTraining.marker_icons?.venue) { + return { + url: hvacFindTraining.marker_icons.venue, + scaledSize: new google.maps.Size(40, 40), + anchor: new google.maps.Point(20, 20) + }; + } + return { + path: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW, + fillColor: '#89c92e', + fillOpacity: 1, + strokeColor: '#e0e0e0', + strokeWeight: 3, + scale: 8 + }; + }, + + /** + * Get highlighted event marker icon (larger, brighter stroke) + */ + getEventIconHighlighted: function() { + if (hvacFindTraining.marker_icons?.event) { + return { + url: hvacFindTraining.marker_icons.event, + scaledSize: new google.maps.Size(40, 40), + anchor: new google.maps.Point(20, 20) + }; + } + return { + path: google.maps.SymbolPath.CIRCLE, + fillColor: '#0ebaa6', + fillOpacity: 1, + strokeColor: '#e0e0e0', + strokeWeight: 3, + scale: 11 + }; + }, + + /** + * Highlight markers for the active tab category. + * Active tab markers get larger icons + higher zIndex. + * Inactive tab markers revert to normal icons + default zIndex. + */ + highlightMarkersForTab: function(tab) { + if (!this.map) return; + + const DEFAULT_Z = 1; + const HIGHLIGHT_Z = 100; + + // Trainer markers + const trainerHighlighted = (tab === 'trainers'); + this.trainerMarkers.forEach(function(marker) { + const isChampion = marker.trainerData && marker.trainerData.is_champion; + if (trainerHighlighted) { + marker.setIcon(isChampion ? HVACTrainingMap.getChampionIconHighlighted() : HVACTrainingMap.getTrainerIconHighlighted()); + marker.setZIndex(HIGHLIGHT_Z); + } else { + marker.setIcon(isChampion ? HVACTrainingMap.getChampionIcon() : HVACTrainingMap.getTrainerIcon()); + marker.setZIndex(DEFAULT_Z); + } + }); + + // Venue markers + const venueHighlighted = (tab === 'venues'); + this.venueMarkers.forEach(function(marker) { + marker.setIcon(venueHighlighted ? HVACTrainingMap.getVenueIconHighlighted() : HVACTrainingMap.getVenueIcon()); + marker.setZIndex(venueHighlighted ? HIGHLIGHT_Z : DEFAULT_Z); + }); + + // Event markers + const eventHighlighted = (tab === 'events'); + this.eventMarkers.forEach(function(marker) { + marker.setIcon(eventHighlighted ? HVACTrainingMap.getEventIconHighlighted() : HVACTrainingMap.getEventIcon()); + marker.setZIndex(eventHighlighted ? HIGHLIGHT_Z : DEFAULT_Z); + }); + }, + /** * Initialize marker clustering */ @@ -1157,6 +1276,11 @@ $('#hvac-load-more').on('click', function() { self.loadMoreTrainers(); }); + + // Reset map view button + $('#hvac-reset-map').on('click', function() { + self.resetMapView(); + }); }, /** @@ -1362,6 +1486,14 @@ this.map.setZoom(zoom || 10); }, + /** + * Reset map to fit all markers (or default view if none) + */ + resetMapView: function() { + if (!this.map) return; + this.fitBounds(); + }, + /** * Sync sidebar lists with visible map viewport */ @@ -1417,14 +1549,16 @@ * Show loading state */ showLoading: function() { - $('#hvac-trainer-grid').html('