Fix design on standard view (#3)

* Move notes above the fields
* Adding documentation
* Add documentation
* Fix design issue on standard view

octoprint_CalibrationTools/templates/tabs/tab-esteps.jinja2

@@ -1,24 +1,36 @@
 {% import "macros.jinja2" as snipped %}
 
 {{ snipped.subSection("Process description", true) }}
+
+You will have to:
+<lu>
+    <li>Mark a specific length of filament at the extruder motor entrance;</li>
+    <li>Set the hot-end on a printing temperature in E-Steps tab;</li>
+    <li>Set the extrusion length and speed;</li>
+    <li>Press "Start extrusion";</li>
+    <li>When extrusion finished, check the remaining length between the extruder and the filament mark location;</li>
+    <li>Refresh the current values from EEPROM;</li>
+    <li>Feed data collected in E-Steps tab and save the results in EEPROM;</li>
+</lu>
+<br>
+
 {{ snipped.quote("
 This calibration is best done with the extruder detached from the hot end, so no restriction is present on the movement. If it is convenient, you can partially disassemble the printer so the output of the extruder is
 open and the filament exits in free air. If this is inconvenient, the process below aims to minimize restrictions by extruding very slowly and with a slightly higher temperature. The results from this should still be
 reliable.
-", "
-<a href='https://teachingtechyt.github.io/calibration.html#esteps' target='_blank'>For more information about how to use this visit teachingtechyt.github.io</a>
-", "text-warning") }}
+", "<a href='https://teachingtechyt.github.io/calibration.html#esteps' target='_blank'>teachingtechyt.github.io</a>", "text-warning") }}
+
+{{ snipped.subSection("Parameters", true) }}
 
-{{ snipped.subSection("Test parameters") }}
 
 <!-- M104 S210 command  -->
 <div class="row-fluid">
-    <div class="span6">
+    <div data-bind="class: $root.columnLabelCls()">
         <label for="temperature" class="pull-right" style="margin-top: 5px;" title="x">
             Heating
         </label>
     </div>
-    <div class="span6">
+    <div data-bind="class: $root.columnFieldCls()">
         <div class="input-prepend input-append">
             {{ snipped.linkToMarlin("M104", "Marlin website") }}
             <span class="add-on" title="Command to preheat the tool before testing">M104&nbsp;&nbsp;&nbsp;S</span>
@@ -29,12 +41,12 @@ reliable.
 </div>
 <!-- G1 E100 F50 command  -->
 <div class="row-fluid">
-    <div class="span6">
+    <div data-bind="class: $root.columnLabelCls()">
         <label for="extrusionLenSpeed" class="pull-right" style="margin-top: 5px;" title="x">
             Extrusion length & speed
         </label>
     </div>
-    <div class="span6">
+    <div data-bind="class: $root.columnFieldCls()">
         <div class="input-prepend input-append">
             {{ snipped.linkToMarlin("G000-G001", "Marlin website") }}
             <span class="add-on" title="Command to extrude filament for testing">G1&nbsp;&nbsp;&nbsp;E</span>
@@ -49,8 +61,8 @@ reliable.
 {{ snipped.field("Extrusion marking length", "The length marked on filament before extrusion. ", "number", "$root.testParam.markLength", "true", "mm", 0.01, 50) }}
 
 <div class="row-fluid" style="margin-bottom: 5px;">
-    <div class="span6"></div>
-    <div class="span6">
+    <div data-bind="class: $root.columnLabelCls()"></div>
+    <div data-bind="class: $root.columnFieldCls()">
         <button class="btn btn-success"
             data-bind="click: $root.startExtrusion, enable: !$root.startExtrusionActive() && $root.is_admin() && $root.controlViewModel.isOperational() && (!$root.controlViewModel.isPrinting())"
             title="This will trigger M90, M83, G1 E100 F50, M82, G90 in order for extruding filament">
@@ -60,15 +72,15 @@ reliable.
     </div>
 </div>
 
-{{ snipped.subSection("Test results") }}
+{{ snipped.subSection("Results") }}
 
 <div class="row-fluid">
-    <div class="span6">
+    <div data-bind="class: $root.columnLabelCls()">
         <label for="eSteps" class="pull-right" style="margin-top: 5px;" title="Current value for number of steps/mm for E axe in EEPROM">
             E steps
         </label>
     </div>
-    <div class="span6">
+    <div data-bind="class: $root.columnFieldCls()">
         <div class="input-append">
             <input type="number" id="eSteps" title="Current value for number of steps/mm for E axe in EEPROM" class="input-small" step="0.01" data-bind="value: $root.steps.E(), enable:false">
             <span class="add-on" title="Current value for number of steps/mm for E axe in EEPROM">steps/mm</span>
@@ -85,12 +97,12 @@ reliable.
 
 <!-- M92 E900 -->
 <div class="row-fluid">
-    <div class="span6">
+    <div data-bind="class: $root.columnLabelCls()">
         <label for="newESteps" class="pull-right" style="margin-top: 5px;" title="The new calculated number of steps/mm for E axe">
             New E axe steps/mm
         </label>
     </div>
-    <div class="span6">
+    <div data-bind="class: $root.columnFieldCls()">
         <div class="input-prepend input-append">
             {{ snipped.linkToMarlin("M092", "Marlin website") }}
             <span class="add-on" title="Command to change number of steps/mm for E axe" data-bind="text: $root.results.newStepsDisplay"></span>
@@ -100,8 +112,8 @@ reliable.
 </div>
 
 <div class="row-fluid" style="margin-bottom: 5px;">
-    <div class="span6"></div>
-    <div class="span6">
+    <div data-bind="class: $root.columnLabelCls()"></div>
+    <div data-bind="class: $root.columnFieldCls()">
         <button class="btn btn-primary" data-bind="click: $root.saveESteps, enable: $root.is_admin() && $root.controlViewModel.isOperational() && (!$root.controlViewModel.isPrinting())"
             title="Saves the new calculated value of steps/mm on printer EEPROM">
             <i class="fas fa-save" data-color="#000000"></i>&nbsp&nbsp