update top form html and css

server/scripts/index.mjs

@@ -44,10 +44,13 @@ const init = () => {
 		if (document.fullscreenElement) updateFullScreenNavigate();
 	});
 
+	document.getElementById('txtAddress').addEventListener('keydown', (key) => { if (key.code === 'Enter') formSubmit(); });
+	document.getElementById('btnGetLatLng').addEventListener('click', () => formSubmit());
+
 	document.addEventListener('keydown', documentKeydown);
 	document.addEventListener('touchmove', (e) => { if (fullScreenOverride) e.preventDefault(); });
 
-	$('#frmGetLatLng #txtAddress').devbridgeAutocomplete({
+	$('#txtAddress').devbridgeAutocomplete({
 		serviceUrl: 'https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/suggest',
 		deferRequestBy: 300,
 		paramName: 'text',
@@ -71,11 +74,11 @@ const init = () => {
 		width: 490,
 	});
 
-	$('#frmGetLatLng').on('submit', () => {
-		const ac = $('#frmGetLatLng #txtAddress').devbridgeAutocomplete();
+	const formSubmit = () => {
+		const ac = $('#txtAddress').devbridgeAutocomplete();
 		if (ac.suggestions[0]) $(ac.suggestionsContainer.children[0]).trigger('click');
 		return false;
-	});
+	};
 
 	// Auto load the previous query
 	const query = localStorage.getItem('latLonQuery');

server/styles/scss/_page.scss

@@ -20,31 +20,20 @@ body {
 	}
 }
 
-input,
-button {
-	font-family: "Star4000";
-}
+#divQuery {
+	max-width: 640px;
 
-#imgGetGps {
+	.buttons {
+		display: inline-block;
+		width: 150px;
+		text-align: right;
+
+		#imgGetGps {
 			height: 13px;
 			vertical-align: middle;
-}
-
-#txtAddress {
-	width: 490px;
-	font-size: 16pt;
-	max-width: calc(100% - 8px);
-
-	@media (prefers-color-scheme: dark) {
-		background-color: #000000;
-		color: white;
-		border: 1px solid darkgray;
 		}
-}
 
-#btnGetGps,
-#btnGetLatLng,
-#btnClearQuery {
+		button {
 			font-size: 16pt;
 
 			@media (prefers-color-scheme: dark) {
@@ -53,9 +42,9 @@ button {
 			}
 
 			border: 1px solid darkgray;
-}
+		}
 
-#btnGetGps {
+		#btnGetGps {
 			img {
 
 				&.dark {
@@ -84,8 +73,30 @@ button {
 					filter: invert(1);
 				}
 			}
-}
+		}
+	}
 
+	input,
+	button {
+		font-family: "Star4000";
+	}
+
+	#txtAddress {
+		width: calc(100% - 170px);
+		max-width: 490px;
+		font-size: 16pt;
+		min-width: 200px;
+		display: inline-block;
+
+		@media (prefers-color-scheme: dark) {
+			background-color: #000000;
+			color: white;
+			border: 1px solid darkgray;
+		}
+	}
+
+	
+}
 .autocomplete-suggestions {
 	background-color: #ffffff;
 	border: 1px solid #000000;
@@ -93,19 +104,19 @@ button {
 	@media (prefers-color-scheme: dark) {
 		background-color: #000000;
 	}
-}
 
-.autocomplete-suggestion {
+	.autocomplete-suggestion {
 		/*padding: 2px 5px;*/
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
 		font-size: 16pt;
-}
+	}
 
-.autocomplete-selected {
+	.autocomplete-selected {
 		background-color: #0000ff;
 		color: #ffffff;
+	}
 }
 
 #divTwc {

views/index.ejs

@@ -60,13 +60,14 @@
 
 
   <div id="divQuery">
-    <form id="frmGetLatLng">
-      <input id="txtAddress" type="text" value="" placeholder="Zip or City, State" /><button id="btnGetGps" type="button" title="Get GPS Location"><img src="images/nav/ic_gps_fixed_black_18dp_1x.png" class="light"/><img src="images/nav/ic_gps_fixed_white_18dp_1x.png" class="dark"/></button>
-      <input id="btnGetLatLng" type="submit" value="GO" />
-      <input id="btnClearQuery" type="reset" value="Reset" />
-    </form>
-    <div id="divLat"></div>
-    <div id="divLng"></div>
+		<input id="txtAddress" type="text" value="" placeholder="Zip or City, State" />
+		<div class="buttons">
+			<button id="btnGetGps" type="button" title="Get GPS Location"><img src="images/nav/ic_gps_fixed_black_18dp_1x.png" class="light"/>
+				<img src="images/nav/ic_gps_fixed_white_18dp_1x.png" class="dark"/>
+			</button>
+			<button id="btnGetLatLng" type="submit">GO</button>
+			<button id="btnClearQuery" type="reset">Reset</button>
+		</div>
   </div>
   <div id="version" style="display:none">
     <%- version %>