Make search box resizable (fixes #62)

frontend/app/map/search/search.css

@@ -23,6 +23,12 @@
 	}
 }
 
+.fm-search.fm-search-resized {
+	width: auto;
+	max-width: none;
+	transition: opacity .7s,background-color .7s,border-color .7s;
+}
+
 .fm-search:hover,.fm-search.fm-hasFocus {
 	opacity: 1;
 }
@@ -60,4 +66,34 @@
 	.fm-search {
 		display: none;
 	}
+}
+
+.fm-search-resize {
+	position: absolute;
+	bottom: 0;
+	right: 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-search-search:not(:hover):not(.fm-hasResults):not(.fm-hasFocus) .fm-search-resize {
+	opacity: 0;
+}
+
+.fm-search:hover .fm-search-resize,.fm-search.fm-hasFocus .fm-search-resize {
+	opacity: 1;
 }

frontend/app/map/search/search.html

@@ -29,4 +29,6 @@
 			<button type="button" class="btn btn-default" ng-model="showAll" uib-btn-checkbox>Show all</button>
 		</div>
 	</div>
+
+	<a href="javascript:" class="fm-search-resize ui-resizable-handle ui-resizable-se"><span class="glyphicon glyphicon-resize-horizontal"></span></a>
 </div>

frontend/app/map/search/search.js

@@ -5,6 +5,8 @@ import ng from 'angular';
 import toGeoJSON from '@mapbox/togeojson';
 import osmtogeojson from 'osmtogeojson';
 import '../../../assets/font/fontello.css';
+import 'jquery-ui';
+import 'jquery-ui/ui/widgets/resizable';
 
 fm.app.factory("fmMapSearch", function($rootScope, $compile, fmUtils, $timeout, $q, fmMapSearchRoute) {
 	return function(map) {
@@ -426,6 +428,16 @@ fm.app.factory("fmMapSearch", function($rootScope, $compile, fmUtils, $timeout,
 
 		var routeUi = fmMapSearchRoute(map, searchUi);
 
+		el.find(".fm-search-results").resizable({
+			handles: {
+				se: el.find(".fm-search-resize")
+			}
+		}).one("resize", () => {
+			el.filter(".fm-search").addClass("fm-search-resized");
+		}).on("resize", () => {
+			el.find("form").css("width", el.find(".fm-search-results").css("width"));
+		});
+
 		return searchUi;
 	};
 });