Various CSS cleanup and fixes, many for touch. Fixes #7.

perliedman · perliedman · commit e36a0296da47 · 2014-02-16T22:34:20.000+01:00
diff --git a/Control.Geocoder.css b/Control.Geocoder.css
@@ -5,7 +5,10 @@
 	        border-radius: 4px;
 }
 
-.leaflet-touch .leaflet-bar {
+.leaflet-touch .leaflet-control-geocoder {
+	box-shadow: none;
+	border: 4px solid rgba(0,0,0,0.2);
+	background-clip: padding-box;
 	-webkit-border-radius: 10px;
 	        border-radius: 10px;
 }
@@ -15,14 +18,6 @@
 }
 
 .leaflet-control-geocoder-form input, .leaflet-control-geocoder-form ul, .leaflet-control-geocoder-error {
-/*	float: right;
-	clear: both;
-	box-shadow: 0 1px 7px rgba(0,0,0,0.4);
-	background: #f8f8f9;
-	-webkit-border-radius: 5px;
-	        border-radius: 5px;
-	border: 0;
-	color: transparent;*/
 	border: 0;
 	color: transparent;
 	background: white;
@@ -34,23 +29,29 @@
 	transition: width 0.125s ease-in;
 }
 
+.leaflet-touch .leaflet-control-geocoder-form input {
+	font-size: 22px;
+}
+
 .leaflet-control-geocoder-icon {
 	width: 26px;
 	height: 26px;
 	background-image: url(images/geocoder.png);
 	background-repeat: no-repeat;
 	background-position: right;
 	float: right;
+	cursor: pointer;
 }
 
 .leaflet-control-geocoder-throbber .leaflet-control-geocoder-icon {
 	background-image: url(images/throbber.gif);
 }
 
 .leaflet-control-geocoder-expanded input, .leaflet-control-geocoder-error {
-	width: 200px;
-	padding-left: 8px;
-	padding-right: 26px;
+	width: 226px;
+	margin-left: 4px;
+	padding-left: 4px;
+	padding-right: 0px;
 	color: #000;
 }
 
@@ -98,6 +99,7 @@ ul.leaflet-control-geocoder-alternatives {
 	padding: 0;
 }
 
+
 .leaflet-control-geocoder-alternatives li:last-child {
 	border-bottom: none;
 }
@@ -110,6 +112,10 @@ ul.leaflet-control-geocoder-alternatives {
 	font-size: 14px;
 }
 
+.leaflet-touch .leaflet-control-geocoder-alternatives a {
+	font-size: 18px;
+}
+
 .leaflet-control-geocoder-alternatives a:hover, .leaflet-control-geocoder-selected {
 	background-color: #ddd;
 }
diff --git a/test/touch.html b/test/touch.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title>Leaflet Control Geocoder</title>
+
+	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" />
+	<!--[if lte IE 8]><link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.ie.css" /><![endif]-->
+	<link rel="stylesheet" href="../Control.Geocoder.css" />
+
+	<script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet-src.js"></script>
+	<script src="../Control.Geocoder.js"></script>
+	<style type="text/css">
+		body {
+			margin: 0;
+		}
+		#map {
+			position: absolute;
+			width: 100%;
+			height: 100%;
+		}
+	</style>
+</head>
+<body>
+	<div id="map" class="leaflet-touch"></div>
+
+	<script type="text/javascript">
+		var map = L.map('map').setView([0, 0], 2);
+		L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
+		    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
+		}).addTo(map);
+		L.Control.geocoder().addTo(map);
+	</script>
+</body>
+</html>
