franzz/spot
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Move menu icons to bottom on mobile

Browse Source
This commit is contained in:
Franzz
2021-12-19 12:52:15 +01:00
parent cce983291e
commit 7ca66a200f
6 changed files with 33 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
masks/project.html
View File

@@ -378,6 +378,8 @@ function setMapLayers(asLayers) {
}
function initSpotMessages(aoMessages, aoTracks) {
var bIsMobile = isMobile();
//Map
var oMap = L.map(self.tmp('$Map')[0], {
layers: [oSpot.tmp('layers')[oSpot.lang('map_satellite')]],
@@ -387,29 +389,38 @@ function initSpotMessages(aoMessages, aoTracks) {
self.tmp('map', oMap);
//Controls: Settings Panel
var oSettingsPanel = L.control({position: 'topleft'});
var oSettingsPanel = L.control({position: bIsMobile?'bottomleft':'topleft'});
var $SettingsButton = $('#settings-button').clone();
$SettingsButton.click(toggleSettingsPanel);
oSettingsPanel.onAdd = function(oMap) {return $SettingsButton[0];};
oSettingsPanel.addTo(oMap);
//Project Title
var oTitle = L.control({position: 'topleft'});
var oTitle = L.control({position: bIsMobile?'bottomleft':'topleft'});
var $Title = $('#title').clone();
oTitle.onAdd = function(oMap) {return $Title[0];};
oTitle.addTo(oMap);
if(bIsMobile) {
oTitle.addTo(oMap);
oSettingsPanel.addTo(oMap);
}
else {
oSettingsPanel.addTo(oMap);
oTitle.addTo(oMap);
}
//Controls: Feed Panel
var oFeedPanel = L.control({position: 'topright'});
var oFeedPanel = L.control({position: bIsMobile?'bottomright':'topright'});
var $PostButton = $('#feed-button').clone();
$PostButton.click(toggleFeedPanel);
oFeedPanel.onAdd = function(oMap) {return $PostButton[0];};
oFeedPanel.addTo(oMap);
//Controls: Legend
var oLegend = L.control({position: 'bottomleft'});
oLegend.onAdd = function(oMap) {return $('#legend').clone()[0];};
oLegend.addTo(oMap);
if(!bIsMobile) {
var oLegend = L.control({position: 'bottomleft'});
oLegend.onAdd = function(oMap) {return $('#legend').clone()[0];};
oLegend.addTo(oMap);
}
//Controls: Projects
var $Labels = $('<div>', {'class': 'leaflet-control-layers-base'});
@@ -431,10 +442,10 @@ function initSpotMessages(aoMessages, aoTracks) {
$('#settings-projects').empty().append($Labels);
//Controls: Scale
oScale = L.control.scale({imperial: false, 'position':'bottomright'}).addTo(oMap);
oScale = L.control.scale({imperial: false, position: bIsMobile?'topright':'bottomright'}).addTo(oMap);
//Controls: Elevation
if(!isMobile()) {
if(!bIsMobile) {
var aoElevTracks = {type: 'FeatureCollection', features:[], properties: {summary: 'trackType'}};
var aoLegend = {trackType: {}};
for(var i in aoTracks.features) {
@@ -576,8 +587,8 @@ function initSpotMessages(aoMessages, aoTracks) {
var oLastMsg = (aoMessages.length > 0)?aoMessages[aoMessages.length-1]:{};
//Centering map
var bIsMobile = isMobile();
var iPanelWidth = bIsMobile?0:parseInt(self.tmp('$Feed').outerWidth(true));
var iFeedPanelWidth = bIsMobile?0:parseInt(self.tmp('$Feed').outerWidth(true));
var iTitleHeight = bIsMobile?self.tmp('$Title').outerHeight(true):0;
if(
self.vars(['project', 'mode']) == self.consts.modes.blog &&
!$.isEmptyObject(oLastMsg) &&
@@ -585,14 +596,14 @@ function initSpotMessages(aoMessages, aoTracks) {
) {
//Zoom on last message
oMap.setView(L.latLng(oLastMsg.latitude, oLastMsg.longitude), 15);
oMap.panBy([iPanelWidth/2, bIsMobile?(self.tmp('$Title').outerHeight(true) * -1/2):0]);
oMap.panBy([iFeedPanelWidth/2, /*bIsMobile?(self.tmp('$Title').outerHeight(true) * -1/2):*/0]);
}
else {
oMap.fitBounds(
self.tmp('track').getBounds(),
{
paddingTopLeft: L.point(5, 5 + self.tmp('marker_size').height + (bIsMobile?self.tmp('$Title').outerHeight(true):0)),
paddingBottomRight: L.point(5 + iPanelWidth, 5)
paddingTopLeft: L.point(5, 5 + self.tmp('marker_size').height), //So that the first marker isn't off screen
paddingBottomRight: L.point(5 + iFeedPanelWidth, 5 + iTitleHeight)
}
);
}