displayed grid: avoid ui elements
This commit is contained in:
parent
0dbbcbb749
commit
ae3a9c7492
2 changed files with 20 additions and 8 deletions
|
@ -760,7 +760,7 @@ body:not(.mobileclient) .leaflet-control-user-location a {
|
||||||
border-width: 1px 0 0;
|
border-width: 1px 0 0;
|
||||||
}
|
}
|
||||||
.c3nav-grid-row span {
|
.c3nav-grid-row span {
|
||||||
padding: 2px 0;
|
padding: 0 5px;
|
||||||
}
|
}
|
||||||
.c3nav-grid-column {
|
.c3nav-grid-column {
|
||||||
top: 0;
|
top: 0;
|
||||||
|
@ -768,8 +768,11 @@ body:not(.mobileclient) .leaflet-control-user-location a {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
border-width: 0 0 0 1px;
|
border-width: 0 0 0 1px;
|
||||||
}
|
}
|
||||||
.c3nav-grid-row span {
|
.c3nav-grid-column span {
|
||||||
padding: 0 2px;
|
padding: 5px 0;
|
||||||
|
}
|
||||||
|
.c3nav-grid-column.avoid-top {
|
||||||
|
padding-top: 65px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -1533,30 +1533,37 @@ L.SquareGridLayer = L.Layer.extend({
|
||||||
|
|
||||||
this._updateGrid(map);
|
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) {
|
onRemove: function(map) {
|
||||||
L.DomUtil.remove(this._container);
|
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) {
|
_update: function(e) {
|
||||||
console.log(e);
|
|
||||||
this._updateGrid(e.target);
|
this._updateGrid(e.target);
|
||||||
},
|
},
|
||||||
|
|
||||||
_updateGrid: function(map) {
|
_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++) {
|
for(i=0;i<this.config.cols.length;i++) {
|
||||||
coord = map.latLngToContainerPoint([0, this.config.cols[i]], map.getZoom()).x;
|
coord = map.latLngToContainerPoint([0, this.config.cols[i]], map.getZoom()).x;
|
||||||
coord = Math.min(mapSize.x, Math.max(-1, coord));
|
coord = Math.min(mapSize.x, Math.max(-1, coord));
|
||||||
this.cols[i].style.left = coord+'px';
|
this.cols[i].style.left = coord+'px';
|
||||||
if (i>0) {
|
if (i>0) {
|
||||||
size = coord-lastCoord;
|
size = coord-lastCoord;
|
||||||
|
center = (lastCoord+coord)/2;
|
||||||
if (size > 0) {
|
if (size > 0) {
|
||||||
this.cols[i - 1].style.display = '';
|
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 {
|
} else {
|
||||||
this.cols[i - 1].style.display = 'none';
|
this.cols[i - 1].style.display = 'none';
|
||||||
}
|
}
|
||||||
|
@ -1569,9 +1576,11 @@ L.SquareGridLayer = L.Layer.extend({
|
||||||
this.rows[i].style.top = coord+'px';
|
this.rows[i].style.top = coord+'px';
|
||||||
if (i>0) {
|
if (i>0) {
|
||||||
size = lastCoord-coord;
|
size = lastCoord-coord;
|
||||||
|
center = (lastCoord+coord)/2;
|
||||||
if (size > 0) {
|
if (size > 0) {
|
||||||
this.rows[i].style.display = '';
|
this.rows[i].style.display = '';
|
||||||
this.rows[i].style.height = (lastCoord-coord)+'px';
|
this.rows[i].style.height = (lastCoord-coord)+'px';
|
||||||
|
this.rows[i].style.paddingRight = Math.max(0, Math.min(36, (center-bottomRightStart)*2)) + 'px';
|
||||||
} else {
|
} else {
|
||||||
this.rows[i].style.display = 'none';
|
this.rows[i].style.display = 'none';
|
||||||
}
|
}
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue