mirror of
https://github.com/SpikeHD/MojoFrontend.git
synced 2024-11-24 17:51:45 +00:00
UI Refinement
This commit is contained in:
parent
ca71310628
commit
99ee47fa85
@ -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">
|
||||
|
@ -10,9 +10,11 @@ async function sendCommand(payload, method="invoke", background=false, persisten
|
||||
},
|
||||
body: data,
|
||||
})
|
||||
|
||||
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, "");
|
||||
@ -21,6 +23,17 @@ async function sendCommand(payload, method="invoke", background=false, persisten
|
||||
message(`${m}`, null, persistent);
|
||||
}
|
||||
return json
|
||||
} catch (e) {
|
||||
var messages = `Request failed.`
|
||||
if (json.code) {
|
||||
messages += ` Code: ${json.message}`
|
||||
}
|
||||
message(messages, "fail", false);
|
||||
}
|
||||
|
||||
} catch (err) {
|
||||
message("Connection issue.", "fail", false);
|
||||
}
|
||||
}
|
||||
|
||||
function dismissMessage(){
|
||||
|
@ -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
|
||||
})
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
Loading…
Reference in New Issue
Block a user