Tidied up search code.

Moved CSS into style.css, tidied it, and moved the progress element out
of the results div.

css/style.css

@@ -39,6 +39,9 @@ a {
 #progress {
     margin: 16px;
 }
+#progress.hidden {
+    display: none;
+}
 
 /* For MD subheaders suitable for lists, menus and grids. */
 .subheader {
@@ -106,3 +109,18 @@ nav > .divider {
 .loot-member .loot-contributor__contributions {
     color: rgba(255, 255, 255, 0.7);
 }
+
+/* For masterlist search results. */
+code.loot-search-result {
+    background: white;
+    white-space:pre;
+    display:block;
+    overflow-x:auto;
+    font-family: monospace;
+    font-size: 1rem;
+    padding: 16px;
+    border-top: 1px rgba(0, 0, 0, 0.12) solid;
+}
+code.loot-search-result:first-of-type {
+    border-top: none;
+}

js/search.js

@@ -55,14 +55,16 @@ function readMasterlist(err, data) {
             if (index != -1) {
                 console.log("Match: " + JSON.stringify(masterlist["plugins"][index]));
                 var code = document.createElement('code');
+                code.className = 'loot-search-result';
                 code.textContent = '  - ' + jsyaml.safeDump(masterlist["plugins"][index]).replace(new RegExp('\n', 'g'), '\n    ').trim();
                 resultsDiv.appendChild(code);
             }
         }
     }
 
-    if (!resultsDiv.firstElementChild.nextElementSibling) {
-        var elem = document.createElement('p');
+    if (resultsDiv.children.length == 0) {
+        var elem = document.createElement('code');
+        elem.className = 'loot-search-result';
         elem.textContent = "No matching entries found.";
         resultsDiv.appendChild(elem);
     }
@@ -102,9 +104,8 @@ function onSearchInit(evt) {
     github.repos('loot', gameButton.getAttribute('data-selected')).git.refs('heads/' + repoBranch).fetch(fetchTree);
 
     /* Clear any previous search results. */
-    var progress = document.getElementById('progress');
-    while (progress.nextElementSibling) {
-        progress.parentElement.removeChild(progress.nextElementSibling);
+    while (resultsDiv.children.length > 0) {
+        resultsDiv.removeChild(resultsDiv.firstElementChild);
     }
 
     console.log("Loading masterlist...");

search.html

@@ -4,37 +4,6 @@ title: Masterlist Search
 permalink: /search/
 ---
 
-<style>
-#results {
-    background: white;
-}
-#progress.hidden {
-    display: none;
-}
-#results p {
-    padding: 0 16px;
-    height: 48px;
-    line-height: 48px;
-}
-#results code {
-    white-space:pre;
-    display:block;
-    overflow-x:auto;
-    font-family: monospace;
-    font-size: 1rem;
-    padding: 16px;
-    border-top: 1px rgba(0, 0, 0, 0.12) solid;
-}
-#results code:first-of-type {
-    border-top: none;
-}
-#searchBoxDecorator {
-    vertical-align: top;
-    position: relative;
-    top: 7px;
-}
-</style>
-
 <p>Search for a plugin name to find matching entries in the LOOT masterlists. Partial matching is only supported for non-regex entries, so use the full plugin name to find any regex entries for it.</p>
 
 <div>
@@ -52,10 +21,8 @@ permalink: /search/
     masterlist.
 </div>
 
-
-<div id="results" class="mdl-shadow--2dp">
-    <div id="progress" class="mdl-spinner mdl-js-spinner mdl-spinner--single-color is-active hidden"></div>
-</div>
+<div id="progress" class="mdl-spinner mdl-js-spinner mdl-spinner--single-color is-active hidden"></div>
+<div id="results" class="mdl-shadow--2dp"></div>
 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/js-yaml/3.3.1/js-yaml.min.js"></script>
 <script src="/bower_components/octokat/dist/octokat.js"></script>