Move menu icons to bottom on mobile

masks/project.html

@@ -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)
 			}
 		);
 	}

readme.md

@@ -25,4 +25,4 @@
 * Add mail frequency slider
 * Use WMTS servers directly when not using Geo Caching Server
 * Allow HEIF picture format
-* Vector tiles support (https://www.arcgis.com/home/item.html?id=7dc6cea0b1764a1f9af2e679f642f0f5) + Use of GL library. Use Mapbox GL JS / Maplibre GL JS?
+* Vector tiles support (https://www.arcgis.com/home/item.html?id=7dc6cea0b1764a1f9af2e679f642f0f5) + Use of GL library. Use Mapbox GL JS / Maplibre GL JS / ESRI-Leaflet-vector?

style/_mobile.scss

@@ -24,7 +24,7 @@
 				left: calc(#{$panel-width});
 			}
 		
-			.leaflet-control-container .leaflet-bottom.leaflet-right {
+			.leaflet-control-container .leaflet-top.leaflet-right {
 				display: none;
 			}
 
@@ -41,13 +41,9 @@
 			display:none;
 		}
 	
-		.leaflet-control-container {
-			.leaflet-bottom.leaflet-left,
-			.leaflet-bottom.leaflet-right .leaflet-control.elevation {
-				display: none;
-			}
+		.leaflet-control-container .leaflet-top.leaflet-left {
+			display: none;
 		}
-	
 		#feed, #settings {
 			width: calc(#{$panel-width});
 			max-width: calc(#{$panel-width});

style/fa/solid.scss

@@ -1,4 +1,4 @@
-/*!
+/*
  * Font Awesome Pro 5.15.4 by @fontawesome - https://fontawesome.com
  * License - https://fontawesome.com/license (Commercial License)
  */