Simplify title & panels mecanism

languages/en.lang

@@ -59,7 +59,7 @@ hikes				= Hikes
 mode				= Mode
 mode_previz			= Project in preparation
 mode_blog			= Active Project
-mode_histo			= Archived project
+mode_histo			= Archived Project
 code_name			= Code name
 start				= Start
 end					= End

masks/project.html

@@ -38,15 +38,15 @@
 			<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>
+		<div id="feed-button" class="spot-control"><i class="fa"></i></div>
 		<div id="legend" class="leaflet-control-layers leaflet-control leaflet-control-layers-expanded">
 			<div class="track"><span class="line main"></span><span class="desc">[#]lang:track_main[#]</span></div>
 			<div class="track"><span class="line off-track"></span><span class="desc">[#]lang:track_off-track[#]</span></div>
 			<div class="track"><span class="line hitchhiking"></span><span class="desc">[#]lang:track_hitchhiking[#]</span></div>
 		</div>
+		<div id="title" class="leaflet-control-layers leaflet-control leaflet-control-layers-expanded leaflet-control-inline"><span id="project_name" class=""></span></div>
 	</div>
 </div>
 <div id="mobile" class="mobile"></div>
@@ -104,10 +104,6 @@ function toggleFeedPanel(bShow, sMapAction) {
 	self.tmp('$Projects').toggleClass('with-feed', (typeof bShow === 'undefined')?null:bShow);
 	bShow = isFeedPanelOpen();
 	oSpot.onResize();
-	if(isMobile()) {
-		$('#settings-button').toggle(!bShow);
-		toggleTitle(!bShow);
-	}
 
 	sMapAction = sMapAction || 'panTo';
 	switch(sMapAction) {
@@ -126,8 +122,6 @@ function toggleSettingsPanel(bShow, sMapAction) {
 	self.tmp('$Projects').toggleClass('with-settings', (typeof bShow === 'undefined')?null:bShow);
 	oSpot.onResize();
 	bShow = isSettingsPanelOpen();
-	if(isMobile()) $('#post-button').toggle(!bShow);
-	toggleTitle(!bShow);
 
 	sMapAction = sMapAction || 'panTo';
 	switch(sMapAction) {
@@ -141,11 +135,6 @@ 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')
@@ -394,9 +383,15 @@ function initSpotMessages(aoMessages, aoTracks) {
 	oSettingsPanel.onAdd = function(oMap) {return $SettingsButton[0];};
 	oSettingsPanel.addTo(oMap);
 
+	//Project Title
+	var oTitle = L.control({position: 'topleft'});
+	var $Title = $('#title').clone();
+	oTitle.onAdd = function(oMap) {return $Title[0];};
+	oTitle.addTo(oMap);
+
 	//Controls: Feed Panel
 	var oFeedPanel = L.control({position: 'topright'});
-	var $PostButton = $('#post-button').clone();
+	var $PostButton = $('#feed-button').clone();
 	$PostButton.click(toggleFeedPanel);
 	oFeedPanel.onAdd = function(oMap) {return $PostButton[0];};
 	oFeedPanel.addTo(oMap);
@@ -571,7 +566,8 @@ function initSpotMessages(aoMessages, aoTracks) {
 	var oLastMsg = (aoMessages.length > 0)?aoMessages[aoMessages.length-1]:{};
 
 	//Centering map
-	var iPanelWidth = isMobile()?0:parseInt(self.tmp('$Feed').outerWidth(true));
+	var bIsMobile = isMobile();
+	var iPanelWidth = bIsMobile?0:parseInt(self.tmp('$Feed').outerWidth(true));
 	if(
 		self.vars(['project', 'mode']) == self.consts.modes.blog &&
 		!$.isEmptyObject(oLastMsg) &&
@@ -579,9 +575,17 @@ function initSpotMessages(aoMessages, aoTracks) {
 	) {
 		//Zoom on last message
 		oMap.setView(L.latLng(oLastMsg.latitude, oLastMsg.longitude), 15);
-		oMap.panBy([iPanelWidth/2, 0]);
+		oMap.panBy([iPanelWidth/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)
+			}
+		);
 	}
-	else oMap.fitBounds(self.tmp('track').getBounds(), {paddingTopLeft: L.point(5, self.tmp('marker_size').height + 5), paddingBottomRight: L.point(5 + iPanelWidth, 5)});
 
 	//Add Spot messages
 	addSpotMessages(aoMessages);
@@ -637,7 +641,7 @@ function addSpotMessages(aoMessages) {
 
 		//Weather
 		if(oMsg.weather_icon && oMsg.weather_icon!='unknown') {
-			$Tooltip.append($('<p>', {'class':'weather', 'title':oSpot.lang(oMsg.weather_cond)})
+			$Tooltip.append($('<p>', {'class':'weather', 'title':(oMsg.weather_cond==''?'':oSpot.lang(oMsg.weather_cond))})
 				.addIcon('fa-'+oMsg.weather_icon+' fa-fw fa-lg', true)
 				.append(oMsg.weather_temp+'°C')
 			);

style/_mask_project.scss

@@ -3,8 +3,9 @@ $elem-spacing: 0.5rem;
 $block-spacing: 1rem;
 $block-radius: 3px;
 $block-shadow: 3px;
-$panel-width: 30%;
+$panel-width: 30vw;
 $panel-width-max: "400px + 3 * #{$block-spacing}";
+$button-width: 44px;
 
 //Feed colors
 $post-input-bg: 		#ffffff;					//#d9deff;
@@ -41,15 +42,18 @@ $legend-color: $post-color;
 		}
 
 		.leaflet-right {
-			width: $panel-width;
+			right: min(#{$panel-width}, #{$panel-width-max});
-			max-width: calc(#{$panel-width-max});
 		}
 
-		#post-button {
+		#feed-button {
 			.fa {
 				@extend .fa-next;
 			}
 		}
+
+		#title {
+			max-width: calc(100vw - max(#{$panel-width}, #{$panel-width-max}) - (#{$button-width} + #{$block-spacing} * 2) * 2);
+		}
 	}
 
 	&.with-settings {
@@ -58,20 +62,23 @@ $legend-color: $post-color;
 			min-width: calc(100% - #{$panel-width-max});
 		}
 
-		.leaflet-left {
-			width: $panel-width;
-			max-width: calc(#{$panel-width-max});
-		}
-
 		#settings {
 			left: 0;
 		}
 
+		.leaflet-left {
+			left: min(#{$panel-width}, #{$panel-width-max});
+		}
+
 		#settings-button {
 			.fa {
 				@extend .fa-prev;
 			}
 		}
+
+		#title {
+			max-width: calc(100vw - #{$block-spacing} * 2 - min(#{$panel-width}, #{$panel-width-max}) - (#{$button-width} + #{$block-spacing} * 2) * 2);
+		}
 	}
 
 	&.with-feed.with-settings {
@@ -79,6 +86,10 @@ $legend-color: $post-color;
 			width: calc(100% - #{$panel-width} * 2);
 			min-width: calc(100% - #{$panel-width-max} * 2);
 		}
+
+		#title {
+			max-width: calc(100vw - #{$block-spacing} * 2 - min(#{$panel-width}, #{$panel-width-max}) * 2 - (#{$button-width} + #{$block-spacing} * 2) * 2);
+		}
 	}
 
 	#background {
@@ -226,9 +237,12 @@ $legend-color: $post-color;
 		margin: $block-spacing;
 		box-shadow: 0 1px 7px rgba(0, 0, 0, .4);
 
-		&+ .leaflet-control {
+		&+ .leaflet-control:not(.leaflet-control-inline) {
 			margin-top: 0;
 		}
+		&+ .leaflet-control.leaflet-control-inline {
+			margin-left: 0;
+		}
 
 		&.leaflet-control-scale {
 			padding: 0.5em;
@@ -237,23 +251,19 @@ $legend-color: $post-color;
 				background: none;
 			}
 		}
+
+		&.leaflet-control-inline {
+			clear: none;
+		}
 	}
 
 	/* Pull right/left controls by $panel-width */
 	.leaflet-right, .leaflet-left {
-		transition: width 0.5s, max-width 0.5s, left 0.5s, right 0.5s;
+		transition: left 0.5s, right 0.5s;
-		width: 0;
-		max-width: 0;
-	}
-	.leaflet-right .leaflet-control {
-		left: -100%;
-	}
-	.leaflet-left .leaflet-control {
-		right: -100%;
 	}
 
 	/* Hide default layer control */
-	.leaflet-top.leaflet-left .leaflet-control-layers {
+	.leaflet-top.leaflet-left .leaflet-control-layers .leaflet-control-layers-toggle {
 		display: none;
 	}
 
@@ -287,19 +297,20 @@ $legend-color: $post-color;
 	}
 
 	#title {
-		left: calc(44px + 1rem);
+		text-overflow: ellipsis;
-		width: auto;
+		overflow: hidden;
-		cursor: inherit;
+		white-space: nowrap;
-		
+		line-height: $button-width;
+		height: $button-width;
+		padding: 0 $block-spacing;
+		margin-bottom: 0;
+
 		span#project_name {
-			font-size: 1.5em;
+			font-size: 1.3em;
-			line-height: 44px;
-			padding: 0 $block-spacing;
-			text-shadow: none;
 		}
 	}
 
-	#post-button .fa {
+	#feed-button .fa {
 		@extend .fa-post;
 	}
 	#settings-button .fa {

style/_mobile.scss

@@ -1,25 +1,44 @@
 @media only screen and (max-width: 800px) {
 
-	$panel-width: "100% - 44px - 2 * #{$block-spacing}";
+	$panel-width: "100vw - #{$button-width} - 2 * #{$block-spacing}";
 
 	.desktop {
 		display: none;
 	}
 
 	#projects {
-				
+
+		.leaflet-right, .leaflet-left {
+			transition: none;
+		}
+
 		&.with-feed, &.with-settings {
 			#submap {
 				width: 100%;
 			}
-		
+
-			.leaflet-right, .leaflet-left {
+			.leaflet-right {
-				width: calc(#{$panel-width});
+				right: calc(#{$panel-width});
+			}
+			.leaflet-left {
+				left: calc(#{$panel-width});
 			}
 		
 			.leaflet-control-container .leaflet-bottom.leaflet-right {
 				display: none;
 			}
+
+			#title {
+				display: none;
+			}
+		}
+
+		&.with-feed #settings-button {
+			display:none;
+		}
+
+		&.with-settings #feed-button {
+			display:none;
 		}
 	
 		.leaflet-control-container {
@@ -31,19 +50,22 @@
 	
 		#feed, #settings {
 			width: calc(#{$panel-width});
+			max-width: calc(#{$panel-width});
+			transition: none;
 		}
 
 		#feed {
 			right: calc((#{$panel-width}) * -1);
 		}
 
-		#title {
-			width: calc(#{$panel-width} - 44px - 2 * #{$block-spacing});
-		}
-
 		#settings {
 			left: calc((#{$panel-width}) * -1);
 		}
+
+		#title {
+			width: calc(#{$panel-width} - #{$button-width} - 4 * #{$block-spacing});
+			text-align: center;
+		}
 	}
 }