Make infoBox resizable

frontend/app/map/infoBox/infoBox.html

@@ -3,4 +3,6 @@
 		<div class="html"></div>
 		<button type="button" class="btn btn-link close-button" ng-click="hide()">&times;</button>
 	</div>
+
+	<a href="javascript:" class="ui-resizable-handle ui-resizable-nw"><span class="glyphicon glyphicon-resize-horizontal"></span></a>
 </div>

frontend/app/map/infoBox/infoBox.js

@@ -15,6 +15,14 @@ fm.app.factory("fmInfoBox", function($rootScope, $compile, $timeout) {
 		$timeout(() => {
 			el.insertAfter(map.map.getContainer()).hide();
 			$compile(el)(scope);
+
+			el.resizable({
+				handles: {
+					nw: el.find(".ui-resizable-handle")
+				},
+				minHeight: 100,
+				minWidth: 250
+			});
 		});
 
 		let infoBox = {

frontend/app/map/infoBox/infoBox.scss

@@ -3,8 +3,6 @@
 	right: 10px;
 	bottom: 25px;
 	z-index: 800;
-	width: 350px;
-	max-width: 100%;
 
 	font-size: 12px;
 
@@ -19,8 +17,12 @@
 	box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 5px rgba(0,0,0,.075);
 	margin-bottom: 0;
 
+	width: 350px;
+	height: 200px;
+
 	.panel-body {
 		padding: 0;
+		height: 100%;
 
 		.close-button {
 			position: absolute;
@@ -33,37 +35,41 @@
 			font-weight: bold;
 		}
 
-		.content {
-			height: 200px;
-			overflow: auto;
+		.html {
+			height: 100%;
 
-			/* Replace padding by margin to move horizontal scrollbar a bit to the left so that it can be covered by .buttons */
-			/* Make space for close button on the top and don't cover round corners on top and bottom */
-			margin: 2px 0 28px 0;
-			padding: 15px;
+			.content {
+				height: calc(100% - 47px);
+				overflow: auto;
 
-			h2 {
-				margin-top: 0;
-				font-size: 1.6em;
-			}
+				/* Replace padding by margin to move horizontal scrollbar a bit to the left so that it can be covered by .buttons */
+				/* Make space for close button on the top and don't cover round corners on top and bottom */
+				margin: 2px 0 28px 0;
+				padding: 15px;
 
-			/* Copy dl-horizontal styles, modify sizing, also apply for small screens (as popup size is always the same) */
-			.dl-horizontal dt {
-				float: left;
-				width: 29%;
-				overflow: hidden;
-				clear: left;
-				text-align: right;
-				text-overflow: ellipsis;
-				white-space: nowrap;
-			}
+				h2 {
+					margin-top: 0;
+					font-size: 1.6em;
+				}
 
-			.dl-horizontal dd {
-				margin-left: 33%;
-			}
+				/* Copy dl-horizontal styles, modify sizing, also apply for small screens (as popup size is always the same) */
+				.dl-horizontal dt {
+					float: left;
+					width: 29%;
+					overflow: hidden;
+					clear: left;
+					text-align: right;
+					text-overflow: ellipsis;
+					white-space: nowrap;
+				}
 
-			.pos,.distance,.elevation {
-				color: #888;
+				.dl-horizontal dd {
+					margin-left: 33%;
+				}
+
+				.pos,.distance,.elevation {
+					color: #888;
+				}
 			}
 		}
 
@@ -82,6 +88,28 @@
 			}
 		}
 	}
+
+	.ui-resizable-handle {
+		position: absolute;
+		top: 0;
+		left: 0;
+		transform: translate(-20%,-20%) rotate(45deg);
+		cursor: nwse-resize;
+		font-size: 15px;
+		border: 1px solid #ddd;
+		border-radius: 1000px;
+		display: inline-block;
+		background: #fff;
+		line-height: 25px;
+		width: 25px;
+		height: 25px;
+		text-align: center;
+		vertical-align: middle;
+		box-shadow: 0 1px 2px rgba(0, 0, 0, .075);
+		color: #666;
+		opacity: 0.5;
+		transition: opacity .7s;
+	}
 }
 
 .fm-map-legend.fm-infoBox-hidden {

frontend/app/map/lines/lines.scss

@@ -1,5 +1,6 @@
 :local(.className) {
 	margin-top: 44px !important;
+	height: calc(100% - 89px) !important;
 	padding: 5px;
 
 	.nav-tabs {