Merged
Conversation
Major refactoring to modernize the school catchment map application: HTML Changes: - Upgraded from Bootstrap 3 to Bootstrap 5 - Replaced jasny-bootstrap with native Bootstrap 5 offcanvas - Removed jQuery UI dependencies - Updated to latest Leaflet (1.9.4) and related libraries - Improved semantic HTML structure - Added proper ARIA labels and accessibility attributes - Replaced Glyphicons with inline SVG icons - Cleaner modal and navigation markup JavaScript Changes: - Complete removal of jQuery dependencies - Migrated to modern ES6+ syntax (const/let, arrow functions, async/await) - Replaced $.ajax with native fetch API - Implemented custom autocomplete without jQuery UI - Better code organization with clear sections and JSDoc comments - Centralized configuration in CONFIG object - Proper state management with AppState object - Enhanced error handling throughout - Debounced autocomplete for better performance - Keyboard navigation support for autocomplete (arrow keys, Enter, Escape) - Better separation of concerns (init, events, data loading) CSS Changes: - Updated for Bootstrap 5 compatibility - Reorganized with clear section headers - Improved autocomplete dropdown styling - Better responsive design for all screen sizes - Enhanced offcanvas behavior on desktop (always visible sidebar) - Added print styles - Removed unused/redundant styles - Better Leaflet control positioning - Improved form control styling Benefits: - No jQuery dependency (smaller bundle size, better performance) - Modern JavaScript patterns (easier to maintain and extend) - Better error handling and user feedback - Improved accessibility - Cleaner, more maintainable code structure - Updated to current library versions with security patches - Better mobile/desktop responsive behavior
- Add fill color to SVG icons in search buttons (magnifying glass and X) - Hide offcanvas close button on desktop mode (992px+) where sidebar is permanent - Improve icon hover state for better UX
- Extend filter menu to bottom of viewport (bottom: 0 instead of bottom: 56px) - Fix search button icon visibility by setting explicit color on btn-outline-secondary - Add hover styles for search buttons for better UX - Ensure map container doesn't have extra padding on desktop - Reorder extra large screen styles for consistency
- Change from padding-right to margin-right on .container-map to properly offset map from filter menu - Ensures Leaflet attribution (including "contributors" text) is fully visible - Add white background to search buttons instead of transparent - Add border-color to match Bootstrap outline-secondary style - Explicitly set offcanvas width in media query for consistency
- Position Leaflet bottom-right controls (attribution) away from filter menu - Set right: 310px on desktop (300px sidebar + 10px spacing) - Set right: 360px on extra large screens (350px sidebar + 10px spacing) - Ensures "OpenStreetMap contributors" text is fully visible
Add margin-bottom of 45px and margin-left of 10px to ensure the Leaflet attribution has proper spacing from the bottom navbar and left edge.
Change .leaflet-bottom.leaflet-right from 310px/360px back to 45px for both desktop and extra large screen media queries.
- Change container-map height to calc(100vh - 112px) to properly fit between header and footer - Change offcanvas bottom to 56px on desktop to not overlap with footer - Fixes map extending under header/filter menu and gap between footer and map
- Remove desktop-specific always-visible sidebar styling - Allow filters to be minimized/hidden on desktop via toggle button - Filters now work consistently across all devices (click to open/close) - Simplify responsive design by using Bootstrap offcanvas behavior everywhere - Set offcanvas width to 400px on medium+ screens for better UX - Eliminate overlap issues by giving users control over filter visibility
Remove unnecessary padding-bottom from body element that was creating a gap between the map canvas and the footer. The .container-map height calculation already accounts for both the top and bottom navbar heights (calc(100vh - 112px)), making the body bottom padding redundant and causing double spacing.
Use absolute positioning for .container-map to fill exactly the space between the fixed top and bottom navbars. This eliminates the gap at the bottom and prevents content from being hidden under the header. Changed from: - body padding-top + relative positioned container with calculated height To: - Absolutely positioned container with top: 56px and bottom: 56px
- Increase top/bottom offset from 56px to 62px to match Bootstrap navbar height (46px logo + 16px total vertical padding) - This fixes the map overlapping the header and white space above footer - Adjust Leaflet attribution bottom margin from 45px to 50px for better spacing
Update .container-map to use top: 70px and bottom: 45px to properly fit between the navbar and footer without gaps or overlaps.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This fix enable the filter to be shown in full desktop mode with map positioned in proper frame.