aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorDaniel Schadt <kingdread@gmx.de>2024-11-16 19:15:02 +0100
committerDaniel Schadt <kingdread@gmx.de>2024-11-16 19:15:02 +0100
commita88c715130f8a6ec3fb16ac9e694d447872aee1b (patch)
tree5a98d2fb72f35f78bebdff8e9b741f5a7777775d
parentc108d1a75791e249aedd8102d5c363eabf36a217 (diff)
downloadfietsboek-a88c715130f8a6ec3fb16ac9e694d447872aee1b.tar.gz
fietsboek-a88c715130f8a6ec3fb16ac9e694d447872aee1b.tar.bz2
fietsboek-a88c715130f8a6ec3fb16ac9e694d447872aee1b.zip
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.
-rw-r--r--fietsboek/templates/profile.jinja29
-rw-r--r--fietsboek/views/profile.py1
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