From 6a53bfa95b74870ce1ee35a6836da1ff78d3bef0 Mon Sep 17 00:00:00 2001
From: Candid Dauth <cdauth@cdauth.eu>
Date: Wed, 5 Oct 2016 11:31:42 +0300
Subject: [PATCH] Adjust legend style

---
 frontend/app/map/legend/legend.css  | 27 +++++++++++++++++++--------
 frontend/app/map/legend/legend.html | 15 +++++++++------
 frontend/app/map/legend/legend.js   |  2 +-
 frontend/app/map/map.css            | 14 ++++++++++++++
 4 files changed, 43 insertions(+), 15 deletions(-)

diff --git a/frontend/app/map/legend/legend.css b/frontend/app/map/legend/legend.css
index 8630d3b5..f1bb0c6c 100644
--- a/frontend/app/map/legend/legend.css
+++ b/frontend/app/map/legend/legend.css
@@ -1,23 +1,34 @@
 .fp-map-legend {
 	position: absolute;
 	right: 10px;
-	bottom: 90px;
-	border: 1px solid #000;
-	border-radius: 4px;
-	background: #fff;
-	padding: 5px;
+	bottom: 10px;
 	z-index: 800;
 	overflow-y: auto;
 
 	/* Somehow Chrome shows a horizontal scrollbar with anything else than this */
 	overflow-x: hidden;
-	padding-right: 20px;
+
+	opacity: .7;
+	transition: opacity .7s;
+}
+
+.fp-map-legend:hover {
+	opacity: 1;
 }
 
 .fp-map-legend h3 {
-	font-size: 1em;
-	margin: 0;
+	font-size: 1.1em;
+	margin: 0 0 5px 0;
 	padding: 0;
+	font-weight: bold;
+}
+
+.fp-map-legend hr {
+	margin: 10px -8px;
+}
+
+.fp-map-legend dl {
+	margin-bottom: 0px;
 }
 
 .fp-map-legend dt {
diff --git a/frontend/app/map/legend/legend.html b/frontend/app/map/legend/legend.html
index 55c02938..6d2fb1e8 100644
--- a/frontend/app/map/legend/legend.html
+++ b/frontend/app/map/legend/legend.html
@@ -1,7 +1,10 @@
-<div class="fp-map-legend" ng-show="legendItems.length > 0">
-	<h3 ng-repeat-start="type in legendItems">{{type.name}}</h3>
-	<dl ng-repeat-end>
-		<dt ng-repeat-start="item in type.items" ng-bind-html="makeSymbol(type.type, item)"></dt>
-		<dd ng-repeat-end>{{item.value}}</dd>
-	</dl>
+<div class="fp-map-legend panel panel-default" ng-show="legendItems.length > 0">
+	<div class="panel-body">
+		<hr ng-repeat-start="type in legendItems" ng-if="$index > 0">
+		<h3>{{type.name}}</h3>
+		<dl ng-repeat-end>
+			<dt ng-repeat-start="item in type.items" ng-bind-html="makeSymbol(type.type, item)"></dt>
+			<dd ng-repeat-end>{{item.value}}</dd>
+		</dl>
+	</div>
 </div>
diff --git a/frontend/app/map/legend/legend.js b/frontend/app/map/legend/legend.js
index e821a74d..8328067b 100644
--- a/frontend/app/map/legend/legend.js
+++ b/frontend/app/map/legend/legend.js
@@ -47,7 +47,7 @@
 
 			scope.$watch("types", update, true);
 
-			var el = $($templateCache.get("map/legend/legend.html")).appendTo(map.map.div)
+			var el = $($templateCache.get("map/legend/legend.html")).appendTo(map.map.div);
 			$compile(el)(scope);
 			scope.$evalAsync(); // $compile only replaces variables on next digest
 
diff --git a/frontend/app/map/map.css b/frontend/app/map/map.css
index 982a9bca..4b1439ab 100644
--- a/frontend/app/map/map.css
+++ b/frontend/app/map/map.css
@@ -48,6 +48,20 @@
 	right: auto;
 }
 
+.olMap .fmControlScaleLine {
+	left: 0;
+	right: 0;
+	bottom: 3px;
+	margin-left: auto;
+	margin-right: auto;
+}
+
+.olMap .olControlMousePosition {
+	left: 3px;
+	right: auto;
+}
+
+
 .fp-map-label {
 	position: absolute;
 	background-color: #fff;