From 99ee47fa85e95323baea02e931829c99e01f3c53 Mon Sep 17 00:00:00 2001
From: mingjun97 <my@lyric.today>
Date: Wed, 4 May 2022 18:16:56 -0700
Subject: [PATCH] UI Refinement

---
 console.html       |  3 ++-
 scripts/console.js | 31 ++++++++++++++++++++++---------
 scripts/onload.js  |  3 ++-
 styles/cheat.css   | 15 +++++++++++++--
 styles/console.css | 15 ++++++++++++---
 5 files changed, 51 insertions(+), 16 deletions(-)
diff --git a/console.html b/console.html
index 6f88f4a..17e31e0 100644
--- a/console.html
+++ b/console.html
@@ -4,12 +4,13 @@
     <link rel="stylesheet" type="text/css" href="styles/console.css" />
     <script src="scripts/onload.js"></script>
     <script src="scripts/console.js"></script>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   </head>
   <body>
     <div id="main">
       <div id="titleBar">
         Mojo Console <img src="" id="logo" />
-        <div id="status" class="ready"><span class="dot"></span><span id="statusText">Ready</span></div>
+        <div id="status" class="ready"><span id="statusText">Ready</span><span class="dot"></span></div>
       </div>
       <div id="right">
         <div id="sidebar">
diff --git a/scripts/console.js b/scripts/console.js
index 055f9ef..44c073f 100644
--- a/scripts/console.js
+++ b/scripts/console.js
@@ -10,17 +10,30 @@ async function sendCommand(payload, method="invoke", background=false, persisten
     },
     body: data,
   })
-
-  let json = await response.json();
-  if (method == 'invoke' && !background) {
-    var m = json.payload.trim().replace(/\r/g, "").replace(/\n\n/g, "\n");
-    if(persistent == "auto") {
-      var m2 = m.replace(/\n/g, "");
-      persistent = (m.length - m2.length) > 3; // true more than 3 lines
+  try {
+    let json = await response.json();
+    try{
+      if (method == 'invoke' && !background) {
+        if (json.code != 200) throw Error('');
+        var m = json.payload.trim().replace(/\r/g, "").replace(/\n\n/g, "\n");
+        if(persistent == "auto") {
+          var m2 = m.replace(/\n/g, "");
+          persistent = (m.length - m2.length) > 3; // true more than 3 lines
+        }
+        message(`${m}`, null, persistent);
+      }
+      return json
+    } catch (e) {
+      var messages = `Request failed.`
+      if (json.code) {
+        messages += ` Code: ${json.message}`
+      }
+      message(messages, "fail", false);
     }
-    message(`${m}`, null, persistent);
+
+  } catch (err) {
+    message("Connection issue.", "fail", false);
   }
-  return json
 }
 
 function dismissMessage(){
diff --git a/scripts/onload.js b/scripts/onload.js
index 9a13574..9ecdc2c 100644
--- a/scripts/onload.js
+++ b/scripts/onload.js
@@ -26,6 +26,7 @@ document.addEventListener("DOMContentLoaded", () => {
     checkStatus();
   }, 30 * 1000 );
   // adjust frame height
+  setTimeout(() => {
     var height = window.innerHeight
     || document.documentElement.clientHeight
     || document.body.clientHeight;
@@ -34,5 +35,5 @@ document.addEventListener("DOMContentLoaded", () => {
     content.style.height = height + "px";
 
     message("Welcome to MojoConsolePlus!");
-    
+  },10); // delay height modification to avoid issues
   })
diff --git a/styles/cheat.css b/styles/cheat.css
index 426360a..f52b9ce 100644
--- a/styles/cheat.css
+++ b/styles/cheat.css
@@ -7,14 +7,14 @@
 .toolset {
     display: flex;
     flex-direction: column;
+    overflow-y: auto;
 }
 
 #panel {
     margin-left: 3em;
     display: flex;
     flex-direction: column;
-    margin-right: 3em;
-    min-width: 30em;
+    min-width: 70vw;
     overflow-y: auto;
 }
 
@@ -26,6 +26,17 @@
     padding-right: 0.5em;
 }
 
+.commandGroup>*:last-child {
+
+    /* margin-left: auto; */
+    margin-right: 0.5em;
+}
+
+.commandGroup input{
+    /* margin-left: 1em; */
+    margin-right: 1em;
+}
+
 hr.solid {
     border-top: 1px solid #bbb;
     margin-left: 1px;
diff --git a/styles/console.css b/styles/console.css
index 4f46d7f..c10df76 100644
--- a/styles/console.css
+++ b/styles/console.css
@@ -57,7 +57,7 @@ button:hover {
 }
 
 #titleBar {
-  font-size: 3em;
+  font-size: 2em;
   padding: 20px;
   text-align: left;
   font-weight: bold;
@@ -66,8 +66,10 @@ button:hover {
 
 #status {
   font-size: 0.7em;
-  display: inline-block;
-  margin-left: 20em;
+  float: right;
+  margin-top: -1em;
+  display: flex;
+  align-items: center;
 }
 
 #sidebar {
@@ -100,7 +102,9 @@ button:hover {
   height: 20px;
   width: 20px;
   border-radius: 50%;
+  border: 2px solid grey;
   display: inline-block;
+  margin-left: 3px;
 }
 
 .ready {
@@ -152,6 +156,11 @@ button:hover {
   height: fit-content;
 }
 
+.messageBox.fail {
+  background-color: #f65531;
+
+}
+
 .messageBox.initial {
   transform: translateY(100%);
   opacity: 0;
