Add full-size toggle for map in xl breakpoint

freezingsaddles · Jan 6, 2025 · 467c175 · 467c175
1 parent 4efdb43
commit 467c175
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 3 deletions.
diff --git a/freezing/web/static/js/ride-map.js b/freezing/web/static/js/ride-map.js
@@ -27,8 +27,10 @@ function create_ride_map(id, url, ride_color = null, recenter = false) {
       let minlat = 90, maxlat = -90, minlon = 180, maxlon = -180;
       for (const { track } of data.tracks) {
         for (const [lat, lon] of track) {
-          if (lat < minlat) minlat = lat; else if (lat > maxlat) maxlat = lat;
-          if (lon < minlon) minlon = lon; else if (lon > maxlon) maxlon = lon;
+          if (lat < minlat) minlat = lat;
+          if (lat > maxlat) maxlat = lat;
+          if (lon < minlon) minlon = lon;
+          if (lon > maxlon) maxlon = lon;
         }
       }
       if (minlat < maxlat) {
@@ -42,4 +44,5 @@ function create_ride_map(id, url, ride_color = null, recenter = false) {
       var polyline = L.polyline([track], { color, opacity, weight: 2 }).addTo(map);
     });
   });
+  return map;
 }
diff --git a/freezing/web/templates/index.html b/freezing/web/templates/index.html
@@ -23,6 +23,16 @@
     font-size: 1.1rem;
 }
 
+body.map-expanded {
+  #map {
+    aspect-ratio: 1.333;
+  }
+
+  #sect-stats {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+  }
+}
+
 @media (min-width: 768px) {
     #map, #cal {
         aspect-ratio: 1.333;
@@ -250,6 +260,17 @@ <h3>
                 {% endif %}
             </div>
             <div id="map">
+                <div class="leaflet-control-container d-none d-xl-block">
+                    <div class="leaflet-top leaflet-right">
+                        <div class="leaflet-bar leaflet-control">
+                            <a id="expand-map"
+                               class="leaflet-control-expand"
+                               href="#"
+                               role="button"
+                               title="Toggle full size">↹</a>
+                        </div>
+                    </div>
+                </div>
             </div>
         </div>
         {# djlint:off H021 #}
@@ -299,7 +320,13 @@ <h3>
 {% block foot %}
     <script>
 $(() => {
-    create_ride_map('map', '/api/all/trackmap.json');
+    const map = create_ride_map('map', '/api/all/trackmap.json');
+    $('#expand-map').click(e => {
+      e.preventDefault();
+      $('body').toggleClass('map-expanded');
+      map.invalidateSize();
+      $('#map')[0].scrollIntoView({block: 'center'});
+    })
 });
     </script>
 {% endblock %}