improve layout

snippets/map.html

@@ -18,14 +18,14 @@
 <script src="static/bulma-calendar/js/bulma-calendar.min.js"></script>
 <script src="static/js/map.js"></script>
 
-<div class="columns" id="myselectors">
-  <div class="column is-half py-1">
-    <div id="reportrange" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%">
+<div class="columns is-mobile" id="myselectors">
+  <div class="column is-narrow py-1">
+    <div id="reportrange" class="datepicker" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%">
       <i class="fa fa-calendar"></i>&nbsp;
       <span></span> <i class="fa fa-caret-down"></i>
     </div>
   </div>
-  <div class="column is-half py-1">
+  <div class="column py-1" align="right">
     <a href="/downloadmetrics" id="btn_download" class="button" download>
       <span class="icon">
         <i class="fa fa-download"></i>

static/css/map.css

@@ -1,3 +0,0 @@
-.map {
-  height: 350px;
-}

static/css/wo-bisch-web-custom.css

@@ -1,9 +1,9 @@
-html,body,.section,.container {
+html,body {
   height: 100%;
 }
 
-.container {
-  height: 70%;
+.section,.container {
+  height: 90%;
 }
 
 hr {

static/js/map.js

@@ -123,7 +123,7 @@ function refreshDatapoints(deveui, start, stop) {
       lcontrol = L.control.layers({}).addTo(map);
       lcontrol.addOverlay(allmarkers, 'alle Positionen anzeigen');
       bounds = new L.LatLngBounds([[mydata['max_lat'], mydata['max_lon']], [mydata['min_lat'], mydata['min_lon']]]);
-      map.fitBounds(bounds, { padding: [20, 20] });
+      map.fitBounds(bounds, { padding: [15, 15] });
     } else {
       $('#map').hide();
       $('#datetimeslider').hide();