Display the output of the queries as prettified JSON for now

1 files changed, 29 insertions, 2 deletions

diff --git a/bh20simplewebuploader/static/main.css b/bh20simplewebuploader/static/main.css
index 94d38bf..20003f9 100644
--- a/bh20simplewebuploader/static/main.css
+++ b/bh20simplewebuploader/static/main.css
@@ -42,7 +42,7 @@ form h4 {
     text-transform: 'uppercase';
 }
 
-.intro, form {
+.intro, form, .search {
     padding: 20px;
 }
 
@@ -59,7 +59,6 @@ form h4 {
 }
 
 .button {
-    width: 6em;
     border-radius: 5px;
     background: #0ED1CD;
     margin: 0.3em auto;
@@ -120,6 +119,17 @@ span.dropt:hover {text-decoration: none; background: #ffffff; z-index: 6; }
     column-width: 250px;
 }
 
+pre code {
+    background-color: #eee;
+    display: flex;
+    width: max-content;
+    margin: 0 auto;
+    overflow-y: scroll;
+    max-height: 300px;
+    padding: 10px;
+    border: solid 1px black;
+}
+
 .record {
     display: flex;
     flex-direction: column;
@@ -180,10 +190,27 @@ footer {
     display: none;
 }
 
+.loader {
+    display: block;
+    border: 5px solid #f3f3f3; /* Light grey */
+    border-top: 5px solid #3498db; /* Blue */
+    border-radius: 50%;
+    width: 20px;
+    height: 20px;
+    margin-right: auto;
+    margin-left: auto;
+    animation: spin 1.5s linear infinite;
+}
+
 .invisible {
     display: none;
 }
 
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
 @media only screen and (max-device-width: 480px) {
     .grid-container {
         display: flex;