Added Title Bar

javascript/src/CodeCorrection.js

@@ -20,8 +20,8 @@ var QfqNS = QfqNS || {};
     'use strict';
 
     /**
-     * Displays Code in a stylized fashion and allows for the ability
-     * to write and display comments for each line.
+     * Displays Code in a stylized fashion and allows
+     * to write and display comments for each line of code.
      *
      * @param form Reference to the parent qfq Element
      * @param data Object containing the to be displayed data
@@ -45,7 +45,7 @@ var QfqNS = QfqNS || {};
     /**
      * Breaks up the String by line and returns it as an Array
      * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/split
-     * @param text Unix formated text of the Code File
+     * @param text Unix formatted text of the Code File
      * @returns {Array} Array with the Code broken up by Line
      */
     n.CodeCorrection.prototype.createLineByLineArray = function(text) {
@@ -93,6 +93,10 @@ var QfqNS = QfqNS || {};
      */
     n.CodeCorrection.prototype._buildEditor = function() {
         var that = this;
+        var $title = $('<div/>', {
+            class: 'qfqCodeCorrectionTitle'
+        });
+        $title.appendTo(this.$parent);
         var container = $('<div/>', {
             class: 'codeCorrectionWrap'
         });

less/qfq-bs.css.less

@@ -418,8 +418,17 @@ i.@{spinner_class} {
 
 .codeCorrectionWrap {
   border: 1px solid #ccc;
+  border-top: unset;
 }
 
+.qfqCodeCorrectionTitle {
+  border: 1px solid #ccc;
+  border-radius: 10px 10px 0 0;
+  background-image: linear-gradient(to bottom, #fff 0, #e0e0e0 100%);
+  box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075);
+  height: 40px;
+};
+
 .qfqLineCount {
   width: 50px;
   height: 100%;