Move legend to left

masks/project.html

@@ -1,6 +1,9 @@
 <div id="messages">
 	<div id="map">
 		<div class="loader fa fa-map"></div>
+	</div>
+	<div id="projects">
+		
 	</div>
 	<div id="legend">
 		<div class="line main">Trajet principal</div>
@@ -35,13 +38,13 @@ oSpot.pageInit = function(asHash)
 	}
 	self.vars('project', self.vars(['projects', asHash.items[0]]));
 	self.tmp('$Map', $('#map'));
-	self.tmp('tracktype-colors', 'object');
+	self.tmp('track-type-styles', 'object');
 	
 	//Assign Track Type Colors
 	$('#legend').find('.line').each(function(iKey, oLegend){
 		var $Legend = $(oLegend);
 		var sTrackType = $Legend.attr('class').replace('line', '').trim();
-		self.tmp(['tracktype-colors', sTrackType], $Legend.css('border-top-color'));
+		self.tmp(['track-type-styles', sTrackType], {weight: parseInt($Legend.css('line-height')), color: $Legend.css('border-top-color'), opacity: 1});
 	});
 	
 	//Add "Loading" Post
@@ -102,10 +105,13 @@ function buildSpotMessages(aoMessages, aoTracks){
 		attributionControl: false,
 		zoomControl: false
 	});
+	self.tmp('map', oMap);
 	
 	//Tracks, colors & popup
 	var oTracks = L.geoJson(aoTracks, {
-	    style: function(oTrack) {return {color: self.tmp(['tracktype-colors', oTrack.properties.type]), weight: 4, opacity: 1};},
+	    style: function(oTrack) {
+	    	return self.tmp(['track-type-styles', oTrack.properties.type]);
+	    },
 	    onEachFeature: function (feature, oLayer) {
 	    	var asProperties = feature.properties;
 			var $Tooltip = $('<div>', {'class':'track_tooltip'});
@@ -122,8 +128,7 @@ function buildSpotMessages(aoMessages, aoTracks){
 	    			e.target.closePopup();	
 				});
 	    }
-	})
-	.addTo(oMap);
+	}).addTo(oMap);
 	
 	//Centering map
 	if(self.vars(['project', 'mode'])==self.consts.modes.blog)
@@ -138,13 +143,17 @@ function buildSpotMessages(aoMessages, aoTracks){
 	else oMap.fitBounds(oTracks.getBounds(), {paddingTopLeft: L.point(5, 42), paddingBottomRight: L.point(self.tmp('feed_width')+5, 5)});
 	
 	//Controls
-	L.control.layers({
+	L.control.layers(
+		{
 			'Satellite': oMapBoxSat,
 			'Open Topo Map': oOpenTopoMap,
 			'IGN (France)': oIgnFrance,
 			'IGN (Espagne)': oIgnSpain,
 			'LINZ (Nouvelle-Zélande)': oLinz
-	}, null, {position: 'topleft'}).addTo(oMap);
+		},
+		null, 
+		{position: 'topleft'}
+	).addTo(oMap);
 	
 	//Building messages
 	$.each(aoMessages, function(iKey, oMsg){
@@ -205,11 +214,14 @@ function buildSpotMessages(aoMessages, aoTracks){
 	});
 	
 	//Legend
-	var oLegend = L.control({position: 'bottomright'});
+	var oLegend = L.control({position: 'bottomleft'});
 	oLegend.onAdd = function(oMap) {return L.DomUtil.get('legend');};
 	oLegend.addTo(oMap);
 	
-	self.tmp('map', oMap);
+	//Projects
+	var oProjects = L.control({position: 'bottomleft'});
+	oProjects.onAdd = function(oMap) {return L.DomUtil.get('projects');};
+	oProjects.addTo(oMap);
 }
 
 function initPosts() {

style/spot.scss

@@ -42,7 +42,7 @@
 		}
 	}
 
-	#legend, .leaflet-control-layers.leaflet-control {
+	#legend, #projects, .leaflet-control-layers.leaflet-control {
 		background-color: rgba(255, 255, 255, 0.5);
 		font-family: Roboto, Arial, sans-serif;
 		border-radius: 3px;
@@ -50,12 +50,12 @@
 		margin: 1em;
 	}
 	#legend {
-		right: 30vw;
+		//right: 30vw;
 					
 		.line {
-			display: inline-block;
+			display: block;
 			border-left: 2em solid;
-			line-height: 2px;
+			line-height: 4px;
 			padding-left: 0.5em;
 			margin: 1em;
 			font-size: 1em;