NMS: Tweak search with blinking pink!

I'm proud of this silliness.

2 files changed, 26 insertions, 16 deletions

diff --git a/web/nms.gathering.org/index.html b/web/nms.gathering.org/index.html
index 9906612..f770df0 100644
--- a/web/nms.gathering.org/index.html
+++ b/web/nms.gathering.org/index.html
@@ -82,18 +82,18 @@
 	    <li><p id="updater_name" class="navbar-text"></p></li>
 	    <div class="navbar-form navbar-left">
 	      <div class="form-group">
-		<button class="btn btn-default btn-xs" id="legend-1"></button>
-		<button class="btn btn-default btn-xs" id="legend-2"></button>
-		<button class="btn btn-default btn-xs" id="legend-3"></button>
-		<button class="btn btn-default btn-xs" id="legend-4"></button>
-		<button class="btn btn-default btn-xs" id="legend-5"></button>
+		<button class="btn btn-default btn-sm" id="legend-1"></button>
+		<button class="btn btn-default btn-sm" id="legend-2"></button>
+		<button class="btn btn-default btn-sm" id="legend-3"></button>
+		<button class="btn btn-default btn-sm" id="legend-4"></button>
+		<button class="btn btn-default btn-sm" id="legend-5"></button>
 	      </div>
-	      	<div class="form-group">
-	      <div class="form-inline">
-		  <input id="searchbox" type="text" class="form-control" placeholder="Search" onchange="nmsInfoBox._search()" />
-		  <button class="btn" onclick="nmsInfoBox._search();">Search</button>
+	      <div class="input-group input-group-sm">
+		<input id="searchbox" type="text" class="form-control" placeholder="Search" oninput="nmsInfoBox._search()" />
+		  <span class="input-group-btn">
+		  <button class="btn btn-default" type="button" onclick="nmsInfoBox.show(document.getElementById('searchbox').value);">Go!</button>
+		</span>
 	      </div>
-		</div>
 	    </div>
 	    </li>
 	  </ul>
diff --git a/web/nms.gathering.org/js/nms-info-box.js b/web/nms.gathering.org/js/nms-info-box.js
index 2ef4c3b..58beea5 100644
--- a/web/nms.gathering.org/js/nms-info-box.js
+++ b/web/nms.gathering.org/js/nms-info-box.js
@@ -150,14 +150,24 @@ nmsInfoBox._search = function() {
 		id = el.value;
 	}
 	if (id && nmsData.switches.switches[id] != undefined) {
-		nmsMap.setSwitchColor(id, "pink");
+		nmsMap.setSwitchColor(id, "red");
+		window.setTimeout(function(){
+			nmsMap.setSwitchColor(id, "pink");
+			window.setTimeout(function(){
+				nmsMap.setSwitchColor(id, "red");
+				window.setTimeout(function(){
+					nmsMap.setSwitchColor(id, "pink");
+					window.setTimeout(function(){
+						nmsMap.setSwitchColor(id, "red");
+						window.setTimeout(function(){
+							nmsMap.setSwitchColor(id, "pink");
+						},300);
+					},300);
+				},300);
+			},300);
+		},300);
 		el.parentElement.classList.remove("has-error");
 		el.parentElement.classList.add("has-success");
-		setTimeout(function(){
-			nmsInfoBox.show(id);
-			var el = document.getElementById("searchbox");
-			el.parentElement.classList.remove("has-success");
-			},1000);
 	} else {
 		el.parentElement.classList.add("has-error");
 	}