update for bs5

plugin.json

@@ -38,13 +38,13 @@
   "modules": {
     "../admin/plugins/osm-map.js": "static/lib/admin.js"
   },
-  "less": [
-    "static/styles.less"
+  "scss": [
+    "static/styles.scss"
   ],
   "upgrades": [
     "./upgrades/osm-map-users-set.js"
   ],
   "nbbpm": {
-    "compatibility": "^2.0.0"
+    "compatibility": "^3.0.0"
   }
 }

static/styles.scss

@@ -0,0 +1,58 @@
+@import "../node_modules/leaflet/dist/leaflet";
+@import "../node_modules/leaflet.markercluster/dist/MarkerCluster";
+
+$icon-size: 40px;
+$cluster-sm-size: 50px;
+$cluster-md-size: 60px;
+$cluster-lg-size: 70px;
+
+#map {
+	z-index: 0;
+}
+
+.leaflet-container {
+	font: inherit;
+}
+
+.leaflet-marker-icon {
+	border-radius: calc($icon-size / 2);
+	border: none;
+	background: none;
+
+	.user-icon {
+		border-radius: calc($icon-size / 2);
+		width: $icon-size;
+		height: $icon-size;
+		line-height: $icon-size;
+		font-size: 2em;
+	}
+}
+
+.leaflet-cluster-icon {
+	.user-icon {
+		background-color: #fff;
+		color: #777;
+		font-size: 2.5em;
+  	}
+
+  	.cluster-small {
+		border-radius: calc($cluster-sm-size / 2);
+		height: $cluster-sm-size;
+		width: $cluster-sm-size;
+		line-height: $cluster-sm-size;
+	}
+
+  	.cluster-medium {
+		border-radius: calc($cluster-md-size / 2);
+		height: $cluster-md-size;
+		width: $cluster-md-size;
+		line-height: $cluster-md-size;
+	}
+
+  	.cluster-large {
+		border-radius: calcl($cluster-lg-size / 2);
+		height: $cluster-lg-size;
+		width: $cluster-lg-size;
+		line-height: $cluster-lg-size;
+	}
+}

static/templates/admin/plugins/osm-map.tpl

@@ -1,14 +1,13 @@
 <form role="form" class="osm-map-settings">
   <div class="row">
-    <div class="col-sm-2 col-xs-12 settings-header">Mapbox</div>
-    <div class="col-sm-10 col-xs-12">
-      <div class="form-group">
-        <label for="mapboxAccessToken">Access token</label>
+    <div class="col-sm-2 col-12 settings-header">Mapbox</div>
+    <div class="col-sm-10 col-12">
+      <div class="">
+        <label class="form-label" for="mapboxAccessToken">Access token</label>
         <input type="text" id="mapboxAccessToken" name="mapboxAccessToken" title="Access token" class="form-control" placeholder="Access token">
       </div>
     </div>
   </div>
-
 </form>
 
 <button id="save" class="floating-button mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored">

static/templates/map.tpl

@@ -1,8 +1,6 @@
 <input type="hidden" template-variable="mapboxAccessToken" value="{settings.mapboxAccessToken}" />
 <input type="hidden" template-variable="users" value="{users}" />
 
-<div class="panel panel-default">
-  <div class="panel-body">
-    <div id="map" style="height: 75vh;"></div>
-  </div>
+<div class="card card-body">
+  <div id="map" style="height: 75vh;"></div>
 </div>