diff options
author | Daniel Schadt <kingdread@gmx.de> | 2024-11-16 19:15:02 +0100 |
---|---|---|
committer | Daniel Schadt <kingdread@gmx.de> | 2024-11-16 19:15:02 +0100 |
commit | a88c715130f8a6ec3fb16ac9e694d447872aee1b (patch) | |
tree | 5a98d2fb72f35f78bebdff8e9b741f5a7777775d | |
parent | c108d1a75791e249aedd8102d5c363eabf36a217 (diff) | |
download | fietsboek-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.jinja2 | 9 | ||||
-rw-r--r-- | 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 |