Add Project Title

languages/en.lang

@@ -55,6 +55,7 @@ time_zone			= Time Zone
 id_project			= Project ID
 project				= Project
 projects			= Projects
+hikes				= Hikes
 mode				= Mode
 code_name			= Code name
 start				= Start

languages/fr.lang

@@ -55,6 +55,7 @@ time_zone			= Fuseau horaire
 id_project			= ID projet
 project				= Projet
 projects			= Projets
+hikes				= Randonnées
 mode				= Mode
 code_name			= Nom de code
 start				= Départ

masks/project.html

@@ -7,18 +7,18 @@
 	<div id="settings">
 		<div id="settings-panel">
 			<div class="settings-header">
-					<div class="logo"><img src="images/logo_black.png" /></div>
-					<div id="last_update"><p><span><img src="images/spot-logo-only.svg" alt="" /></span><abbr></abbr></p></div>
+				<div class="logo"><img src="images/logo_black.png" /></div>
+				<div id="last_update"><p><span><img src="images/spot-logo-only.svg" alt="" /></span><abbr></abbr></p></div>
 			</div>
 			<div class="settings-sections">
 				<div id="settings-sections-scrollbox">
 					<div class="settings-section">
-						<h1><i class="fa fa-fw push fa-map"></i>[#]lang:maps[#]</h1>
-						<div id="layers"></div>
+						<h1><i class="fa fa-fw push fa-project"></i>[#]lang:hikes[#]</h1>
+						<div id="settings-projects"></div>
 					</div>
 					<div class="settings-section">
-						<h1><i class="fa fa-fw push fa-project"></i>[#]lang:projects[#]</h1>
-						<div id="settings-projects"></div>
+						<h1><i class="fa fa-fw push fa-map"></i>[#]lang:maps[#]</h1>
+						<div id="layers"></div>
 					</div>
 					<div class="settings-section newsletter">
 						<h1><i class="fa fa-fw push fa-newsletter"></i>[#]lang:newsletter[#]</h1>
@@ -38,6 +38,7 @@
 			<div id="loading"></div>
 		</div>
 	</div>
+	<div id="title" class="leaflet-control spot-control"><span id="project_name" class="leaflet-control-attribution"></span></div>
 	<div id="elems">
 		<div id="settings-button" class="spot-control"><i class="fa fa-menu"></i></div>
 		<div id="post-button" class="spot-control"><i class="fa"></i></div>
@@ -101,8 +102,12 @@ oSpot.onKeydown = function(oEvent) {
 
 function toggleFeedPanel(bShow, sMapAction) {
 	self.tmp('$Projects').toggleClass('with-feed', (typeof bShow === 'undefined')?null:bShow);
+	bShow = isFeedPanelOpen();
 	oSpot.onResize();
-	if(isMobile()) $('#settings-button').toggle(!isFeedPanelOpen());
+	if(isMobile()) {
+		$('#settings-button').toggle(!bShow);
+		toggleTitle(!bShow);
+	}
 
 	sMapAction = sMapAction || 'panTo';
 	switch(sMapAction) {
@@ -120,7 +125,9 @@ function isFeedPanelOpen() {
 function toggleSettingsPanel(bShow, sMapAction) {
 	self.tmp('$Projects').toggleClass('with-settings', (typeof bShow === 'undefined')?null:bShow);
 	oSpot.onResize();
-	if(isMobile()) $('#post-button').toggle(!isSettingsPanelOpen());
+	bShow = isSettingsPanelOpen();
+	if(isMobile()) $('#post-button').toggle(!bShow);
+	toggleTitle(!bShow);
 
 	sMapAction = sMapAction || 'panTo';
 	switch(sMapAction) {
@@ -134,6 +141,11 @@ function isSettingsPanelOpen() {
 	return self.tmp('$Projects').hasClass('with-settings');
 }
 
+function toggleTitle(bShow) {
+	if(bShow) self.tmp('$Title').delay(300).fadeTo(500, 1);
+	else self.tmp('$Title').css('opacity', '0');
+}
+
 function updateSettingsPanel(asLastUpdate) {
 	var $LastUpdate = self.tmp('$Settings').find('#last_update').toggle(self.vars(['project', 'mode']) == self.consts.modes.blog && asLastUpdate.unix_time > 0);
 	$LastUpdate.find('abbr')
@@ -154,6 +166,7 @@ function initPage(asHash) {
 		self.tmp('$PostList', $('#posts_list'));
 		self.tmp('$Feed', $('#feed'));
 		self.tmp('$Settings', $('#settings'));
+		self.tmp('$Title', $('#title'));
 		self.tmp('updatable', true);
 		self.tmp('out-of-data', false);
 		self.tmp('tile_api', getWmtsApiUrl('{id}', '{y}', '{x}', '{z}'));
@@ -215,6 +228,7 @@ function initProject(sProjectCodeName, oFocusPost){
 
 	//Page Title
 	self.setPageTitle(oSpot.vars(['project', 'name']));
+	self.tmp('$Title').find('#project_name').text(oSpot.vars(['project', 'name']));
 
 	//Load Track & Markers
 	$.when(

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 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?

style/_common.scss

@@ -62,6 +62,14 @@
 
 /* Common objects */
 
+*:focus {
+	outline: 0px none transparent;
+}
+
+textarea:focus, input:focus {
+	outline: 1px solid #CCC;
+}
+
 body {
 	overflow: hidden;
 }

style/_mask_project.scss

@@ -286,6 +286,19 @@ $legend-color: $post-color;
 		}
 	}
 
+	#title {
+		left: calc(44px + 1rem);
+		width: auto;
+		cursor: inherit;
+		
+		span#project_name {
+			font-size: 1.5em;
+			line-height: 44px;
+			padding: 0 $block-spacing;
+			text-shadow: none;
+		}
+	}
+
 	#post-button .fa {
 		@extend .fa-post;
 	}
@@ -431,7 +444,7 @@ $legend-color: $post-color;
 					margin: 0;
 				}
 				.signature {
-					margin: 0.5em 0 0 0;
+					margin: $elem-spacing 0 0 0;
 					text-align: right;
 					font-style: italic;
 
@@ -442,8 +455,9 @@ $legend-color: $post-color;
 					}
 				}
 				.header {
-					padding: 0.5em 1em;
+					padding: 0 $block-spacing;
 					line-height: 1em;
+					position: relative;
 
 					span {
 						display: inline-block;
@@ -452,12 +466,13 @@ $legend-color: $post-color;
 						text-overflow: ellipsis;
 						overflow: visible;
 						white-space: nowrap;
+						padding: $elem-spacing 0px;
 
 						&.index {
 							width: 25%;
 
 							.link, .link:visited, .link_copied {
-								margin-left: 0.5em;
+								margin-left: $elem-spacing;
 							}
 						}
 
@@ -470,7 +485,7 @@ $legend-color: $post-color;
 				}
 				.body {
 					clear: both;
-					padding: 0em 1em 1em;
+					padding: 0em $block-spacing $block-spacing;
 				}
 
 				&.headerless {
@@ -478,7 +493,7 @@ $legend-color: $post-color;
 						display: none;
 					}
 					.body {
-						padding-top: 0.5em;
+						padding-top: $elem-spacing;
 					}
 				}
 
@@ -488,7 +503,7 @@ $legend-color: $post-color;
 
 					p {
 						font-size: 0.9em;
-						margin: 0 0 .5em 0;
+						margin: 0 0 $elem-spacing 0;
 						display: inline-block;
 						width: 100%;
 					}

style/_mobile.scss

@@ -37,6 +37,10 @@
 			right: calc((#{$panel-width}) * -1);
 		}
 
+		#title {
+			width: calc(#{$panel-width} - 44px - 2 * #{$block-spacing});
+		}
+
 		#settings {
 			left: calc((#{$panel-width}) * -1);
 		}