+
+
+
-
-
-
-
-
+
+
+
Last Run Operations
+
+
+
+
-
-
+
+
+
+
diff --git a/www/src/js/virtual_machine/index.js b/www/src/js/virtual_machine/index.js
index d692881..b0cee3c 100644
--- a/www/src/js/virtual_machine/index.js
+++ b/www/src/js/virtual_machine/index.js
@@ -128,27 +128,11 @@ class VirtualMachineUI {
class VMStateUI {
constructor(ui) {
this.ui = ui;
- const stateDom = document.getElementById("vmActiveICState");
- this.tbl = document.createElement("table");
- this.tbl.classList.add("table");
- this.ipRow = this.tbl.insertRow();
- this.counterRow = this.tbl.insertRow()
- this.stateRow = this.tbl.insertRow()
- const ipTh = document.createElement("th");
- ipTh.appendChild(document.createTextNode("Instruction Pointer"));
- this.ipRow.appendChild(ipTh);
- this.instructionPointer = this.ipRow.insertCell();
- const conuterTh = document.createElement("th");
- conuterTh.appendChild(document.createTextNode("Last Run Operations"));
- this.counterRow.appendChild(conuterTh);
- this.instructionCounter = this.counterRow.insertCell();
- const stateTh = document.createElement("th");
- stateTh.appendChild(document.createTextNode("Last State"));
- this.stateRow.appendChild(stateTh);
- this.lastState = this.stateRow.insertCell();
+ this.instructionPointer = document.getElementById("vmActiveICStateIP");
+ this.instructionCounter = document.getElementById("vmActiveICStateICount");
+ this.lastState = document.getElementById("vmActiveICStateLastRun");
- stateDom.appendChild(this.tbl);
}
update(ic) {
@@ -165,11 +149,11 @@ class VMRegistersUI {
this.ui = ui;
const regDom = document.getElementById("vmActiveRegisters");
this.tbl = document.createElement("div");
- this.tbl.classList.add("d-flex", "flex-wrap", "justify-content-start", "align-items-start", "align-self-center");
+ this.tbl.classList.add("d-flex", "flex-wrap", "justify-content-start", "align-items-end",);
this.regCels = [];
for (var i = 0; i < 18; i++) {
const container = document.createElement("div");
- container.classList.add("vm_reg_cel");
+ container.classList.add("vm_reg_cel", "align-self-stretch");
const cell = document.createElement("div");
cell.classList.add("input-group", "input-group-sm")
// cell.style.width = "30%";
@@ -183,7 +167,7 @@ class VMRegistersUI {
input.dataset.index = i;
cell.appendChild(input);
const aliasesLabel = document.createElement("span");
- aliasesLabel.classList.add("input-group-text")
+ aliasesLabel.classList.add("input-group-text", "reg_label")
aliasesLabel.innerText = "\xa0";
cell.appendChild(aliasesLabel);
this.regCels.push({
diff --git a/www/src/scss/dark.scss b/www/src/scss/dark.scss
index ab07df9..afb557b 100644
--- a/www/src/scss/dark.scss
+++ b/www/src/scss/dark.scss
@@ -288,41 +288,10 @@ code {
color: #e685b5
}
-.navbar-default {
- background-color: #343a40;
- border-color: #495057;
-}
-
-.navbar-brand {
- float: left;
- padding: 5px 5px;
- font-size: 18px;
-}
-
-.navbar-default .navbar-brand {
- color: #fff;
- text-wrap: nowrap;
- white-space: nowrap;
-}
-
-.navbar-brand a {
- text-decoration: none;
-}
-
-.nav>li {
- position: relative;
- display: block;
-}
-
.navbar-default .navbar-nav>li>a {
color: #fff;
}
-.navbar-default .navbar-text {
- color: #fff;
- text-wrap: nowrap;
- white-space: nowrap;
-}
.navbar-text {
padding: 0;
@@ -336,12 +305,12 @@ code {
line-height: 20px;
}
-@media (min-width: 768px) {
- .navbar-nav>li>a {
- padding-top: 15px;
- padding-bottom: 15px;
- }
-}
+// @media (min-width: 768px) {
+// .navbar-nav>li>a {
+// padding-top: 15px;
+// padding-bottom: 15px;
+// }
+// }
.nav>li>a {
position: relative;
@@ -419,8 +388,9 @@ code {
.vm_reg {
overflow-x: auto;
overflow-y: auto;
- max-width: 1200px;
- max-height: 400px;
+ max-width: 180rem;
+ max-height: 20rem;
+ align-content: flex-end
}
// .vm_unset_reg .input-group {
@@ -428,15 +398,37 @@ code {
// }
.vm_reg_cel {
- max-width: 300px;
- height: 32px;
+ max-width: 20rem;
+ height: 24px;
}
.vm_reg_cel span {
min-width: 2.5rem;
+ height: 22px;
+}
+
+.vm_reg_cel span.reg_label {
+ width: 6rem;
+ height: 22px;
+ overflow-x: auto;
+ overflow-y: auto;
}
.vm_reg_cel input {
- width: 6rem;
+ max-width: 8rem;
+ min-width: 3rem;
background-color: var(--bs-body-bg);
+ height: 22px;
}
+
+#vmActiveIC {
+ min-width: 28rem;
+}
+
+#editor {
+ min-width: 32em;
+}
+
+#vmActiveICState hr {
+ margin: 0.25rem 0;
+}
\ No newline at end of file
diff --git a/www/src/scss/styles.scss b/www/src/scss/styles.scss
index 5ab86d1..69f83ab 100644
--- a/www/src/scss/styles.scss
+++ b/www/src/scss/styles.scss
@@ -1,4 +1,3 @@
-
// Toggle global options
// $enable-gradients: true;
$enable-shadows: true;
@@ -14,6 +13,11 @@ $body-bg: #fff;
$border-radius: .4rem;
$success: rgb(121, 82, 179);
+$accordion-button-active-bg: #343a40;
+$accordion-button-active-color: #dee2e6;
+$accordion-icon-color-dark: #dee2e6;
+$accordion-icon-active-color-dark: #dee2e6;
+
// Required
@import "bootstrap/scss/variables";
@import "bootstrap/scss/variables-dark";
@@ -38,6 +42,7 @@ $success: rgb(121, 82, 179);
@import "bootstrap/scss/card";
// @import "bootstrap/scss/breadcrumb";
@import "bootstrap/scss/accordion";
+
// @import "bootstrap/scss/pagination";
@import "bootstrap/scss/badge";
@import "bootstrap/scss/alert";
@@ -63,5 +68,4 @@ $success: rgb(121, 82, 179);
//
// Custom styles
-//
-
+//
\ No newline at end of file