From e34d521dccf438d4f99ff6b9d289b154fd7ff295 Mon Sep 17 00:00:00 2001
From: j433866 <j433866@gmail.com>
Date: Fri, 10 May 2019 13:48:03 +0100
Subject: [PATCH] Improve UI for searching for input tabs

---
 src/web/html/index.html            | 39 ++++++++++++++++--------------
 src/web/stylesheets/layout/_io.css | 30 ++++++++++++++++++++---
 2 files changed, 47 insertions(+), 22 deletions(-)

diff --git a/src/web/html/index.html b/src/web/html/index.html
index 4fba6210..46c1b3c7 100755
--- a/src/web/html/index.html
+++ b/src/web/html/index.html
@@ -769,24 +769,27 @@
                     </div>
                     <div class="modal-body" id="input-tab-body">
                         <h6>Load Status</h6>
-                        <div class="checkbox .input-find-option">
-                            <label for="input-show-pending">
-                                <input type="checkbox" id="input-show-pending" checked="">
-                                Pending
-                            </label>
-                        </div>
-                        <div class="checkbox .input-find-option">
-                            <label for="input-show-loading">
-                                <input type="checkbox" id="input-show-loading" checked="">
-                                Loading
-                            </label>
-                        </div>
-                        <div class="checkbox .input-find-option">
-                            <label for="input-show-loaded">
-                                <input type="checkbox" id="input-show-loaded" checked="">
-                                Loaded
-                            </label>
-                        </div>
+                        <ul id="input-find-options">
+                            <li class="checkbox .input-find-option">
+                                <label for="input-show-pending">
+                                    <input type="checkbox" id="input-show-pending" checked="">
+                                    Pending
+                                </label>
+                            </li>
+                            <li class="checkbox .input-find-option">
+                                <label for="input-show-loading">
+                                    <input type="checkbox" id="input-show-loading" checked="">
+                                    Loading
+                                </label>
+                            </li>
+                            <li class="checkbox .input-find-option">
+                                <label for="input-show-loaded">
+                                    <input type="checkbox" id="input-show-loaded" checked="">
+                                    Loaded
+                                </label>
+                            </li>
+                        </ul>
+                        <br>
                         <div class="form-group .input-find-option">
                             <label for="input-filename-filter" class="bmd-label-floating">Filename</label>
                             <input type="text" class="form-control" id="input-filename-filter">
diff --git a/src/web/stylesheets/layout/_io.css b/src/web/stylesheets/layout/_io.css
index 7e7122e7..898225db 100755
--- a/src/web/stylesheets/layout/_io.css
+++ b/src/web/stylesheets/layout/_io.css
@@ -296,9 +296,26 @@
     fill: var(--primary-font-colour);
 }
 
+#input-find-options {
+    list-style: none;
+    width: 100%;
+}
+
+#input-find-options li {
+    display: flex;
+    flex-direction: row;
+    float: left;
+    padding: 10px;
+    width: auto;
+    text-align: center;
+    vertical-align: middle;
+}
+
+
 #input-search-results {
     list-style: none;
-    width: fit-content;
+    width: 75%;
+    min-width: 200px;
     margin-left: auto;
     margin-right: auto;
 }
@@ -309,12 +326,17 @@
     padding-top: 10px;
     padding-bottom: 10px;
     text-align: center;
-    transition: 0.25s ease all;
     width: 100%;
-    background: var(--secondary-background-colour);
+    color: var(--op-list-operation-font-colour);
+    background-color: var(--op-list-operation-bg-colour);
+    border-bottom: 2px solid var(--op-list-operation-border-colour);
+}
+
+#input-search-results li:first-of-type {
+    border-top: 2px solid var(--op-list-operation-border-colour);
 }
 
 #input-search-results li:hover {
     cursor: pointer;
-    background: var(--primary-background-colour);
+    filter: brightness(98%);
 }