Merge pull request #467 from dhmit/simulations-line-numbers

Align line numbers in simulations
dhmit · Jul 8, 2019 · fe82f5e · fe82f5e
2 parents e429072 + e621db1
commit fe82f5e
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 11 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,9 @@ body {
 
 .line_no_text {
     vertical-align: center;
+    font-family: Courier, monospace;
+    float: right;
+    text-align: right;
 }
 
 #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="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);
         }
     }
 
@@ -225,7 +228,7 @@ export class GeneralAssemblerRenderer extends Renderer {
 
         const line = $(`
             <div class="row code_line" id="code_line_${this.num_lines}">
-                  <div class="col-sm-1 px-2 line_no_text">
+                  <div class="col-sm-1 pl-3 pr-2 line_no_text">
                          <p>${this.num_lines + 1}.</p>
                   </div>
                   <div class="col-sm-3 px-2" id="code_label_${this.num_lines}">

diff --git a/templates/simulations/base.jinja2 b/templates/simulations/base.jinja2
@@ -17,7 +17,7 @@
                 <h3>Code</h3>
                 <div class="pre-scrollable mb-2" id="code"> {# TODO: make sure this doesn't obscure the line numbers #}
                     <div id="code_heading" class="row">
-                        <div class="col-sm-1 px-2">#</div>
+                        <div class="col-sm-1 pl-3 pr-2 float-right text-right">#</div>
                         <div class="col-sm-3 px-2" >Lbl</div>
                         <div class="col-sm-3 px-2">Op</div>
                         <div class="col-sm-4 px-2">ATD</div>