Implemented a better inline editor for livecode.

- It shows the code like a textarea and the canvas will to the right
- It will take only the amount of height required for the code
- The existing LiveCodeEditor was renamed as LiveCodeEditorLarge and still
  used or sketches

community/public/css/lms.css

@@ -1,15 +1,35 @@
 
-.canvas-wrapper {
+.livecode-editor-large .canvas-wrapper {
   position: relative;
   padding: 10px;
 }
 
+.livecode-editor-large canvas {
+  position: relative;
+  z-index: 0;
+  border: 1px solid #ddd;
+  height: 300px;
+  width: 300px;
+}
+
+.livecode-editor-large .code {
+  width: 100%;
+  padding: 5px;
+  min-height: 330px;
+  resize: none;
+}
+.livecode-editor-large .output {
+  padding: 5px;
+}
+
+.livecode-editor-large .CodeMirror {
+  height: 320px;
+}
+
 .canvas-editor canvas {
   position: relative;
   z-index: 0;
   border: 1px solid #ddd;
-  height: 300px;
-  width: 300px;
 }
 .canvas-wrapper .output {
   position: absolute;
@@ -19,17 +39,18 @@
   top: 0px;
   background-color: rgba(255, 255, 255, 0);
   margin: 15px;
+  max-height: 200px;
 }
 
 .canvas-editor .code {
   width: 100%;
   padding: 5px;
-  min-height: 330px;
+  /* min-height: 330px; */
   resize: none;
 }
-.canvas-editor .output {
+/* .canvas-editor .output {
   padding: 5px;
-}
+} */
 
 .heading {
   background: #eee;
@@ -39,18 +60,18 @@
   border: 1px solid #ddd;
 }
 
-.canvas-editor h2 {
+.livecode-editor-large h2 {
   font-size: 1.2em;
   text-transform: uppercase;
   margin: 0px;
   font-weight: normal;
 }
 
-.canvas-editor .run {
+.livecode-editor-large .run {
   float: right;
 }
 
-.canvas-editor .col-sm {
+.livecode-editor-large .col-sm {
   border: 1px solid #ddd;
 }
 
@@ -67,3 +88,49 @@
   font-weight: bold;
   color: inherit;
 }
+
+
+.canvas-editor .CodeMirror {
+  background: #ffe;
+  border: 1px solid #eed;
+  margin-bottom: 10px;
+  border-radius: 10px;
+  height: 100%;
+}
+
+canvas {
+  border: 2px solid #eee;
+}
+
+@media (min-width: 768px) {
+  .canvas-wrapper {
+    margin-bottom: -200px;
+  }
+}
+
+@media (max-width: 768px) {
+  .canvas-wrapper {
+    padding-top: 20px;
+    margin-left: 2em;
+  }
+  .canvas-wrapper .output {
+    left: 2em;
+  }
+}
+
+.hidden {
+  display: none;
+}
+
+.livecode-controls {
+  margin-left: 2em;
+}
+
+.livecode-controls a {
+   margin-left: 10px;
+   color: #666;
+}
+
+.canvas-editor {
+  margin: 10px 0px;
+}