Moved CSS and height/width to custom CSS file

From Django 4.2, map_height/map_width are deprecated and Django recommends setting the map sizes in external CSS instead.
makinacorpus · Apr 24, 2023 · eec5302 · eec5302
1 parent 02f1d1a
commit eec5302
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 24 deletions.
diff --git a/leaflet/admin.py b/leaflet/admin.py
@@ -1,5 +1,6 @@
 from django.contrib.admin import ModelAdmin
 from django.core.exceptions import ImproperlyConfigured
+from django.forms import Media
 
 try:
     from djgeojson.fields import GeoJSONField
@@ -14,12 +15,18 @@
 from .forms.widgets import LeafletWidget
 
 
+class LeafletAdminWidget(LeafletWidget):
+    include_media = True
+
+    @property
+    def media(self):
+        return super().media + Media(css={'screen': ['leaflet/leaflet_django.css']})
+
+
 class LeafletGeoAdminMixin:
-    widget = LeafletWidget
+    widget = LeafletAdminWidget
     map_template = 'leaflet/admin/widget.html'
     modifiable = True
-    map_width = 'min(calc(100vw - 30px), 720px)'
-    map_height = '400px'
     display_raw = False
     settings_overrides = {}
 
@@ -51,11 +58,8 @@ def _get_map_widget(self, db_field, widget):
         """
         class LeafletMap(widget):
             template_name = self.map_template
-            include_media = True
             geom_type = db_field.geom_type
             modifiable = self.modifiable
-            map_width = self.map_width
-            map_height = self.map_height
             display_raw = self.display_raw
             settings_overrides = self.settings_overrides
         return LeafletMap

diff --git a/leaflet/static/leaflet/leaflet_django.css b/leaflet/static/leaflet/leaflet_django.css
@@ -0,0 +1,13 @@
+.leaflet-container {
+    width: min(calc(100vw - 30px), 720px);
+    height: 400px;
+}
+
+/* Fixes for Django base.css */
+.module .leaflet-draw ul {
+    margin-left: 0px;
+    padding-left: 0px;
+}
+.module .leaflet-draw ul li {
+    list-style-type: none;
+}
diff --git a/leaflet/templates/leaflet/admin/widget.html b/leaflet/templates/leaflet/admin/widget.html
@@ -2,21 +2,6 @@
 {% load i18n %}
 {% load static %}
 
-
-{% block map_css %}
-    {{ block.super }}
-
-    /* Fixes for Django base.css */
-    .module .leaflet-draw ul {
-        margin-left: 0px;
-        padding-left: 0px;
-    }
-    .module .leaflet-draw ul li {
-        list-style-type: none;
-    }
-{% endblock map_css %}
-
-
 {% block vars %}
     {{ block.super }}
 

diff --git a/leaflet/tests/tests.py b/leaflet/tests/tests.py
@@ -198,8 +198,6 @@ def test_widget_parameters(self):
         widget = self.formfield.widget
         self.assertEqual(widget.geom_type, 'POINT')
         self.assertEqual(widget.settings_overrides, {'DEFAULT_CENTER': (8.0, 3.15), })
-        self.assertFalse(widget.map_height is None)
-        self.assertFalse(widget.map_width is None)
         self.assertTrue(widget.modifiable)
 
     def test_widget_media(self):
@@ -344,5 +342,13 @@ class LeafletGeoAdminMapTest(LeafletGeoAdminTest):
     def test_widget_template_overriden(self):
         widget = self.formfield.widget
         output = widget.render('geom', '', {'id': 'geom'})
-        self.assertIn(".module .leaflet-draw ul", output)
         self.assertIn('<div id="geom-div-map">', output)
+        link_type = 'type="text/css" ' if django.get_version() < '4.1' else ''
+        self.assertEqual(
+            list(widget.media.render_css()),
+            [
+                f'<link href="/static/leaflet/leaflet.css" {link_type}media="screen" rel="stylesheet">',
+                f'<link href="/static/leaflet/leaflet_django.css" {link_type}media="screen" rel="stylesheet">',
+                f'<link href="/static/leaflet/draw/leaflet.draw.css" {link_type}media="screen" rel="stylesheet">',
+            ]
+        )