Update styles

download/static/download/css/download.css

@@ -1,7 +1,7 @@
 body {
   background-color: rgba(0, 0, 0, 0.0);
-  padding: 0px;
-  margin: 0px;
+  padding: 0;
+  margin: 0;
   height: 100%;
   display: flex;
   align-items: center;
@@ -11,8 +11,8 @@ input[type=text] {
   display: block;
   font-size: 16px;
   text-align: left;
+  padding: 8px;
   width: 100%;
-  margin: auto;
 }
 #wrapper {
   width: 80%;
@@ -21,27 +21,34 @@ input[type=text] {
 }
 #search-wrapper {
   position: relative;
+  padding-right: 16px;
   display: inline-block;
   font-size: 12px;
   width: 100%;
 }
 #addrlist {
+  margin: 0;
   position: absolute;
   z-index: 99;
   top: 100%;
   left: 0;
-  right: 0;
+  width: 100%;
   background-color: white;
 }
 #addrlist li {
   margin-left: 0px;
 }
+#addrlist li:nth-child(odd) {
+  background-color: #ddd;
+}
+#addrlist li:nth-child(even) {
+  background-color: lightblue;
+}
 #addrlist li:hover,
 #addrlist li.fake-hover {
-  background-color: lightgrey;
+  background-color: #FFFC25;
 }
 input {
-  padding: 5px;
   border-radius: 10px;
 }
 input[type=submit] {

download/static/download/js/download.js

@@ -29,7 +29,7 @@ const XHR = new XMLHttpRequest(),
 
 // Push our data into our FormData object
 for( name in data ) {
-FD.append( name, data[ name ] );
+  FD.append( name, data[ name ] );
 }
 
 // Define what happens on successful data submission
@@ -91,25 +91,39 @@ ADDR_BOX.oninput = async (e) => {
   console.log(e.target.value);
 
   let response = await fetch(SEARCH_URL + ADDR_INPUT);
-  let addresses = await response.json();
+  var addresses;
+  var has_results = false;
+  try {
+    addresses = await response.json();
+  } catch {
+    addresses = '';
+  }
   console.log(addresses);
   ADDR_LIST.innerHTML = '';
+  ADDR_LIST.style.border = 'none';
   let ul = document.createElement('ul');
   ul.classList.add('semantic');
   for (var i = 0; i < addresses.length; i++) {
-    let address = addresses[i];
+    const address = addresses[i];
+    has_results = true
     let li = document.createElement('li');
     li.innerText = address.address;
     li.onclick = function(e) {
       console.log(e.target.innerText);
       ADDR_BOX.value = e.target.innerText;
       ADDR_LIST.innerHTML = '';
+      ADDR_LIST.style.border = 'none';
       // focus on next input box; depends on layout
       document.getElementById('id_code').focus();
     }
     ul.appendChild(li);
   }
-  ADDR_LIST.appendChild(ul);
+  if (has_results) {
+    ADDR_LIST.appendChild(ul);
+    ADDR_LIST.style.border = '1px solid black';
+  } else {
+    ADDR_LIST.style.border = 'none';
+  }
 }
 FORM.addEventListener('submit', (e) => {
   e.preventDefault();