From a88c715130f8a6ec3fb16ac9e694d447872aee1b Mon Sep 17 00:00:00 2001
From: Daniel Schadt <kingdread@gmx.de>
Date: Sat, 16 Nov 2024 19:15:02 +0100
Subject: fix leaflet weirdness when calendar month switched

The magic is in the invalidateSize method, which we must call because
leaflet was loaded in a hidden tab.
---
 fietsboek/templates/profile.jinja2 | 9 +++++++--
 fietsboek/views/profile.py         | 1 -
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/fietsboek/templates/profile.jinja2 b/fietsboek/templates/profile.jinja2
index a559e63..fb35920 100644
--- a/fietsboek/templates/profile.jinja2
+++ b/fietsboek/templates/profile.jinja2
@@ -60,12 +60,12 @@
 
   <ul class="nav nav-tabs" id="profileTabbar" role="tablist">
     <li class="nav-item" role="presentation">
-      <button class="nav-link {% if not tab_focus or tab_focus == 'overview' %}active{% endif %} {% if disable_noncalendar %}disabled{% endif %}" id="tabOverviewButton" data-bs-toggle="tab" data-bs-target="#tabOverviewPane" type="button" role="tab" aria-controls="tabOverviewPane" aria-selected="{% if not tab_focus or tab_focus == 'overview' %}true{% else %}false{% endif %}">
+      <button class="nav-link {% if not tab_focus or tab_focus == 'overview' %}active{% endif %}" id="tabOverviewButton" data-bs-toggle="tab" data-bs-target="#tabOverviewPane" type="button" role="tab" aria-controls="tabOverviewPane" aria-selected="{% if not tab_focus or tab_focus == 'overview' %}true{% else %}false{% endif %}">
         {{ _("page.profile.tabbar.overview") }}
       </button>
     </li>
     <li class="nav-item" role="presentation">
-      <button class="nav-link {% if tab_focus == 'graph' %}active{% endif %} {% if disable_noncalendar %}disabled{% endif %}" id="tabGraphsButton" data-bs-toggle="tab" data-bs-target="#tabGraphsPane" type="button" role="tab" aria-controls="tabGraphsPane" aria-selected="{% if tab_focus == 'graph' %}true{% else %}false{% endif %}">
+      <button class="nav-link {% if tab_focus == 'graph' %}active{% endif %}" id="tabGraphsButton" data-bs-toggle="tab" data-bs-target="#tabGraphsPane" type="button" role="tab" aria-controls="tabGraphsPane" aria-selected="{% if tab_focus == 'graph' %}true{% else %}false{% endif %}">
         {{ _("page.profile.tabbar.graphs") }}
       </button>
     </li>
@@ -241,6 +241,11 @@
     // selected at the start.
     defaultLayer.addTo(map);
     L.control.layers(baseLayers, overlayLayers).addTo(map);
+
+    // Fix leaflet being all weird if it's loaded on a hidden tab
+    document.querySelector("#tabOverviewButton").addEventListener("shown.bs.tab", event => {
+      map.invalidateSize();
+    });
   })();
 </script>
 {% endblock %}
diff --git a/fietsboek/views/profile.py b/fietsboek/views/profile.py
index 2134b7c..0f96a50 100644
--- a/fietsboek/views/profile.py
+++ b/fietsboek/views/profile.py
@@ -244,7 +244,6 @@ def user_calendar_ym(request: Request) -> dict:
     data["calendar_month"] = date
     data["calendar_prev"], data["calendar_next"] = prev_next_month(date)
     data["tab_focus"] = "calendar"
-    data["disable_noncalendar"] = True
     return data
 
 
-- 
cgit v1.2.3