Use input instead of div for script name (#95)

* Use input instead of div for script name

* Add label to script name box

* Shrink label on smaller screens

* Restore the tabindex of script-description to help merging other PRs.

Author: microbit-sam

editor.html

@@ -228,9 +228,8 @@ <h2><i class="fa fa-unlock-alt"></i> <strong>{{ title }}</strong></h2>
                 </div>
             </div>
             <div class="vbox action" id="script-box">
-                <div id="script-name" class="flex1" contenteditable
-                    tabindex="10">
-                </div>
+                <label for="script-name">Script Name</label>
+                <input id="script-name" class="flex1">
                 <div id="script-description" contenteditable
                     tabindex="11">
                 </div>

python-main.js

@@ -150,7 +150,7 @@ function web_editor(config) {
 
     // Sets the name associated with the code displayed in the UI.
     function setName(x) {
-        $("#script-name").text(x);
+        $("#script-name").val(x);
     }
 
     // Gets the description associated with the code displayed in the UI.
@@ -160,7 +160,7 @@ function web_editor(config) {
 
     // Gets the name associated with the code displayed in the UI.
     function getName() {
-        return $("#script-name").text();
+        return $("#script-name").val();
     }
 
     // Get the font size of the text currently displayed in the editor.

static/css/style.css

@@ -359,6 +359,10 @@ a.command:hover {
     font-weight: bold;
   }
 
+  #script-box > label {
+    font-size: 0.8rem;
+  }
+
   .blocklyTreeRow {
     padding-right: .3em !important;
   }