From ae3a9c74925864bcee8eb95f6d60a88cca5f0c1b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Laura=20Kl=C3=BCnder?= <laura@codingcatgirl.de>
Date: Wed, 12 Dec 2018 02:33:03 +0100
Subject: [PATCH] displayed grid: avoid ui elements

---
 src/c3nav/site/static/site/css/c3nav.scss |  9 ++++++---
 src/c3nav/site/static/site/js/c3nav.js    | 19 ++++++++++++++-----
 2 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/src/c3nav/site/static/site/css/c3nav.scss b/src/c3nav/site/static/site/css/c3nav.scss
index 343fadd9..06e3d6a6 100644
--- a/src/c3nav/site/static/site/css/c3nav.scss
+++ b/src/c3nav/site/static/site/css/c3nav.scss
@@ -760,7 +760,7 @@ body:not(.mobileclient) .leaflet-control-user-location a {
     border-width: 1px 0 0;
 }
 .c3nav-grid-row span {
-    padding: 2px 0;
+    padding: 0 5px;
 }
 .c3nav-grid-column {
     top: 0;
@@ -768,8 +768,11 @@ body:not(.mobileclient) .leaflet-control-user-location a {
     flex-direction: column;
     border-width: 0 0 0 1px;
 }
-.c3nav-grid-row span {
-    padding: 0 2px;
+.c3nav-grid-column span {
+    padding: 5px 0;
+}
+.c3nav-grid-column.avoid-top {
+    padding-top: 65px;
 }
 
 
diff --git a/src/c3nav/site/static/site/js/c3nav.js b/src/c3nav/site/static/site/js/c3nav.js
index e92ae136..9c9fbb9f 100644
--- a/src/c3nav/site/static/site/js/c3nav.js
+++ b/src/c3nav/site/static/site/js/c3nav.js
@@ -1533,30 +1533,37 @@ L.SquareGridLayer = L.Layer.extend({
 
         this._updateGrid(map);
 
-        map.on('viewreset zoom move toomend moveend', this._update, this);
+        map.on('viewreset zoom move zoomend moveend', this._update, this);
     },
 
     onRemove: function(map) {
         L.DomUtil.remove(this._container);
-        map.off('viewreset zoom move toomend moveend', this._update, this);
+        map.off('viewreset zoom move zoomend moveend', this._update, this);
     },
 
     _update: function(e) {
-        console.log(e);
         this._updateGrid(e.target);
     },
 
     _updateGrid: function(map) {
-        var mapSize = map.getSize(), coord = null, lastCoord = null, size;
+        var mapSize = map.getSize(),
+            sidebarStart = $('#sidebar').outerWidth() + 15,
+            attributionStart = mapSize.x - $('.leaflet-control-attribution').outerWidth() - 16,
+            bottomRightStart = mapSize.y - $('.leaflet-bottom.leaflet-right').outerHeight() - 24,
+            coord = null, lastCoord = null, size, center;
+        console.log(bottomRightStart);
         for(i=0;i<this.config.cols.length;i++) {
             coord = map.latLngToContainerPoint([0, this.config.cols[i]], map.getZoom()).x;
             coord = Math.min(mapSize.x, Math.max(-1, coord));
             this.cols[i].style.left = coord+'px';
             if (i>0) {
                 size = coord-lastCoord;
+                center = (lastCoord+coord)/2;
                 if (size > 0) {
                     this.cols[i - 1].style.display = '';
-                    this.cols[i - 1].style.width = size+'px';
+                    this.cols[i - 1].style.width = size + 'px';
+                    this.cols[i - 1].style.paddingTop = Math.max(0, Math.min(65, (sidebarStart-center)/15*65)) + 'px';
+                    this.cols[i - 1].style.paddingBottom = Math.max(0, Math.min(16, (center-attributionStart))) + 'px';
                 } else {
                     this.cols[i - 1].style.display = 'none';
                 }
@@ -1569,9 +1576,11 @@ L.SquareGridLayer = L.Layer.extend({
             this.rows[i].style.top = coord+'px';
             if (i>0) {
                 size = lastCoord-coord;
+                center = (lastCoord+coord)/2;
                 if (size > 0) {
                     this.rows[i].style.display = '';
                     this.rows[i].style.height = (lastCoord-coord)+'px';
+                    this.rows[i].style.paddingRight = Math.max(0, Math.min(36, (center-bottomRightStart)*2)) + 'px';
                 } else {
                     this.rows[i].style.display = 'none';
                 }