Skip to content

Commit dc649a0

Browse files
danagerousclaude
danagerous
and
claude
authored
Full Mobile Fix (#7)
* Modernize codebase: Bootstrap 5, vanilla JS, improved code structure 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 * Fix UI issues: search button icons visibility and desktop close button - 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 * Fix desktop layout: filter menu height, map visibility, search icons - 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 * Fix desktop layout: map attribution visibility and button styling - 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 * Fix Leaflet attribution visibility on desktop - 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 45px spacing to Leaflet attribution 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. * Revert Leaflet attribution right positioning to 45px Change .leaflet-bottom.leaflet-right from 310px/360px back to 45px for both desktop and extra large screen media queries. * Fix map canvas positioning on desktop - 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 * Make map filters toggleable on all screen sizes - 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 * Fix gap between map canvas and footer 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. * Fix map container positioning between navbars 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 * Fix map container positioning to account for actual navbar height - 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 * Fix map container positioning with correct navbar/footer spacing Update .container-map to use top: 70px and bottom: 45px to properly fit between the navbar and footer without gaps or overlaps. --------- Co-authored-by: Claude <noreply@anthropic.com>
1 parent ad01983 commit dc649a0

3 files changed

Lines changed: 1171 additions & 686 deletions

File tree

‎css/catchment.css‎

Lines changed: 230 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,251 @@
1-
/* This is used to specify the map area. */
2-
html, body, .row, .container, .container-map, #map {
1+
/**
2+
* School Catchment Map - Custom Styles
3+
* Bootstrap 5 compatible
4+
*/
5+
6+
/* ============================================================================
7+
Layout & Container Styles
8+
============================================================================ */
9+
10+
html, body {
311
height: 100%;
4-
padding-bottom: 16px;
12+
margin: 0;
13+
padding: 0;
14+
}
15+
16+
.container-map {
17+
position: absolute;
18+
top: 70px;
19+
bottom: 45px;
20+
left: 0;
21+
right: 0;
22+
}
23+
24+
#map {
25+
height: 100%;
26+
width: 100%;
27+
}
28+
29+
/* ============================================================================
30+
Navigation & Offcanvas
31+
============================================================================ */
32+
33+
34+
/* Offcanvas body scrolling */
35+
.offcanvas-body {
36+
overflow-y: auto;
37+
}
38+
39+
/* ============================================================================
40+
Address Search / Geocoder
41+
============================================================================ */
42+
43+
.address-search {
44+
position: absolute;
45+
top: 10px;
46+
left: 50%;
47+
transform: translateX(-50%);
48+
z-index: 1000;
49+
width: 90%;
50+
max-width: 400px;
51+
}
52+
53+
.address-search .input-group {
54+
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
555
}
656

7-
/* Add padding on the top and bottom so the top and bottom of map align with nav bars */
8-
body {
9-
padding: 54px 0;
10-
}
57+
/* Fix transparent SVG icons in search buttons */
58+
.address-search .btn-outline-secondary {
59+
color: #6c757d;
60+
background-color: white;
61+
border-color: #ced4da;
62+
}
63+
64+
.address-search .btn-outline-secondary:hover {
65+
color: #495057;
66+
background-color: #e9ecef;
67+
border-color: #6c757d;
68+
}
69+
70+
.address-search .btn-outline-secondary svg {
71+
fill: currentColor;
72+
}
73+
74+
/* Autocomplete dropdown */
75+
.autocomplete-items {
76+
position: absolute;
77+
top: 100%;
78+
left: 0;
79+
right: 0;
80+
z-index: 1001;
81+
background-color: white;
82+
border: 1px solid #ced4da;
83+
border-top: none;
84+
border-radius: 0 0 0.25rem 0.25rem;
85+
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
86+
max-height: 200px;
87+
overflow-y: auto;
88+
display: none;
89+
}
90+
91+
.autocomplete-item {
92+
padding: 10px;
93+
cursor: pointer;
94+
background-color: white;
95+
border-bottom: 1px solid #e9ecef;
96+
font-size: 0.9rem;
97+
}
1198

12-
/* To remove border and shading in footer */
13-
.panel-footer {
14-
line-height: 1.8;
15-
background-color: #f8f8f8;
16-
border-top: 0px;
17-
}
99+
.autocomplete-item:hover,
100+
.autocomplete-item.autocomplete-active {
101+
background-color: #e9ecef;
102+
}
103+
104+
.autocomplete-item:last-child {
105+
border-bottom: none;
106+
}
107+
108+
/* ============================================================================
109+
Filter Menu Styles
110+
============================================================================ */
111+
112+
.offcanvas-body .form-check {
113+
margin-bottom: 0.5rem;
114+
}
115+
116+
.offcanvas-body .form-check-label {
117+
cursor: pointer;
118+
user-select: none;
119+
}
18120

19-
/* This sets the mobile size of the off cavas menus */
20-
.navmenu {
21-
padding: 0 10px;
22-
width: 250px;
121+
.offcanvas-body .badge {
122+
display: inline-block;
123+
width: 100%;
124+
text-align: left;
125+
padding: 0.5rem;
126+
font-size: 0.875rem;
127+
font-weight: 600;
23128
}
24129

25-
/* To accommodate header with filter and see Leaflet Control */
26-
@media (max-width: 365px) {
27-
.navbar-brand {
28-
font-size: 12px;
29-
padding-left: 10px;
130+
/* Section headers within filter groups */
131+
.offcanvas-body strong.small {
132+
display: block;
133+
margin-bottom: 0.25rem;
134+
color: #495057;
135+
}
136+
137+
/* ============================================================================
138+
Responsive Adjustments
139+
============================================================================ */
140+
141+
/* Small screens */
142+
@media (max-width: 576px) {
143+
.address-search {
144+
width: 95%;
145+
max-width: none;
146+
}
147+
148+
.navbar-brand span {
149+
font-size: 0.9rem;
30150
}
31151

32-
.panel-footer {
33-
font-size: 11px;
152+
.offcanvas-body .form-check-label {
153+
font-size: 0.85rem;
34154
}
35155
}
36156

37-
/* To accommodate iPad portrait mode */
38-
@media (min-width: 0px) {
39-
.navbar-toggle {
40-
display: block; /* force showing the toggle */
157+
/* Medium screens and up */
158+
@media (min-width: 768px) {
159+
.address-search {
160+
width: 400px;
161+
}
162+
163+
/* Wider offcanvas on larger screens */
164+
.offcanvas-end {
165+
width: 400px;
41166
}
42167
}
43168

44-
/* This is for the "normal" size off canvas menu */
45-
@media (min-width: 992px) {
46-
body {
47-
padding: 50px 250px 50px 0;
169+
/* ============================================================================
170+
Footer Styles
171+
============================================================================ */
172+
173+
.navbar-fixed-bottom {
174+
border-top: 1px solid rgba(0, 0, 0, 0.125);
175+
}
176+
177+
/* ============================================================================
178+
Leaflet Override Styles
179+
============================================================================ */
180+
181+
/* Ensure Leaflet controls don't overlap with search bar */
182+
.leaflet-top.leaflet-left {
183+
margin-top: 60px;
184+
}
185+
186+
/* Ensure Leaflet attribution has proper spacing */
187+
.leaflet-bottom.leaflet-left {
188+
margin-bottom: 50px;
189+
margin-left: 10px;
190+
}
191+
192+
/* Better popup styling */
193+
.leaflet-popup-content {
194+
margin: 13px 19px;
195+
line-height: 1.4;
196+
}
197+
198+
.leaflet-popup-content b {
199+
font-weight: 600;
200+
}
201+
202+
/* Marker cluster styling adjustments */
203+
.marker-cluster-small,
204+
.marker-cluster-medium,
205+
.marker-cluster-large {
206+
background-color: rgba(51, 136, 255, 0.6);
207+
}
208+
209+
.marker-cluster-small div,
210+
.marker-cluster-medium div,
211+
.marker-cluster-large div {
212+
background-color: rgba(51, 136, 255, 0.8);
213+
color: white;
214+
font-weight: bold;
215+
}
216+
217+
/* ============================================================================
218+
Utility Classes
219+
============================================================================ */
220+
221+
/* Smooth transitions */
222+
.form-check-input {
223+
cursor: pointer;
224+
transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
225+
}
226+
227+
/* Loading state (can be used later for better UX) */
228+
.loading {
229+
opacity: 0.6;
230+
pointer-events: none;
231+
}
232+
233+
/* ============================================================================
234+
Print Styles
235+
============================================================================ */
236+
237+
@media print {
238+
.navbar,
239+
.offcanvas,
240+
.address-search {
241+
display: none;
48242
}
49243

50-
.navmenu {
51-
padding: 50px 10px;
244+
body {
245+
padding: 0;
52246
}
53247

54-
.navmenu-toggle {
55-
display: none !important;
248+
#map {
249+
height: 100vh;
56250
}
57251
}
58-
59-
/* Geocoder */
60-
.ui-autocomplete {
61-
z-index: 1000;
62-
}

0 commit comments

Comments
 (0)