Align line numbers in general memory

dhmit · Jul 5, 2019 · f6d5a8c · f6d5a8c
1 parent bdaf97c
commit f6d5a8c
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 9 deletions.
diff --git a/static/css/simulations.css b/static/css/simulations.css
@@ -1,3 +1,12 @@
+button {
+    font-family: Acre-Regular;
+}
+
+.general_memory {
+    float: left;
+    text-align: left;
+}
+
 .tooltip-inner {
     white-space: pre-wrap;
 }
@@ -51,6 +60,7 @@ body {
 
 .line_no_text {
     vertical-align: center;
+    font-family: Courier, monospace;
 }
 
 #code {

diff --git a/static/js/render.js b/static/js/render.js
@@ -14,15 +14,18 @@ export class Renderer {
     create_memory_display() {
         const general_memory_display = document.getElementById("general_memory_div");
         for (let i = 0; i < this.computer.size; i++) {
-            const para = document.createElement("p");
-            const register = document.createTextNode(i.toString()+": ");
-            para.appendChild(register);
-            const span = document.createElement("span");
-            span.setAttribute("class", "general_memory number");
-            span.setAttribute("id", "general_memory" + i.toString());
-            span.setAttribute("data-toggle", "tooltip");
-            para.appendChild(span);
-            general_memory_display.appendChild(para);
+            let element = $(`
+                <div class="row general_memory_row">
+                      <div class="col-2">
+                             <p class="text-right float-right line_no_text">${i.toString()}: </p>
+                      </div>
+                      <div class="col-10">
+                             <span class="general_memory number" id="general_memory_${i.toString()}" 
+                             data-toggle="tooltip"></span>
+                      </div>
+               </div>
+            `)[0];
+            general_memory_display.appendChild(element);
         }
     }