style: improved the sketch page

community/public/css/lms.css

@@ -1,57 +1,4 @@
 
-.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;
-}
-.canvas-wrapper .output {
-  position: absolute;
-  z-index: 1;
-  width: 100%;
-  left: 0px;
-  top: 0px;
-  background-color: rgba(255, 255, 255, 0);
-  margin: 15px;
-  max-height: 200px;
-}
-
-.canvas-editor .code {
-  width: 100%;
-  padding: 5px;
-  /* min-height: 330px; */
-  resize: none;
-}
-/* .canvas-editor .output {
-  padding: 5px;
-} */
-
 .heading {
   background: #eee;
   padding: 10px;
@@ -60,21 +7,6 @@
   border: 1px solid #ddd;
 }
 
-.livecode-editor-large h2 {
-  font-size: 1.2em;
-  text-transform: uppercase;
-  margin: 0px;
-  font-weight: normal;
-}
-
-.livecode-editor-large .run {
-  float: right;
-}
-
-.livecode-editor-large .col-sm {
-  border: 1px solid #ddd;
-}
-
 .sketch-header h1 {
   font-size: 1.5em;
   margin-bottom: 0px;
@@ -89,48 +21,6 @@
   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;
-}

community/public/css/style.less

@@ -232,3 +232,54 @@ section.lightgray {
   color: inherit;
   text-decoration: underline;
 }
+
+// LiveCode editor
+
+.livecode-editor-large {
+
+  .CodeMirror {
+    border: 1px solid #ddd;
+    background: #ffe;
+    height: auto;
+  }
+  .CodeMirror-scroll {
+    max-height: 310px;
+    min-height: 310px;
+  }
+  .controls {
+    padding: 10px 0px;
+  }
+  canvas {
+    border: 5px solid #ddd;
+    position: relative;
+    z-index: 0;
+  }
+
+  .output {
+    position: absolute;
+    z-index: 1;
+    width: 300px;
+    left: 0px;
+    top: 0px;
+    background-color: rgba(255, 255, 255, 0);
+    max-height: 300px;
+    white-space: pre-wrap;
+    margin: 0px;
+    margin-left: 20px;
+    padding: 4px;
+    color: #888;
+  }
+
+  @media (max-width: 768px) {
+  .canvas-wrapper {
+    padding-top: 10px;
+  }
+  .code-wrapper {
+    min-height: 50px;
+  }
+  .CodeMirror {
+    min-height: 50px;
+  }
+  }
+
+}

community/www/macros/livecode.html

@@ -1,23 +1,27 @@
 
 {% macro LiveCodeEditorLarge(name, code) %}
-<div class="livecode-editor livecode-editor-large row no-gutters" id="editor-{{name}}">
+<div class="livecode-editor livecode-editor-large" id="editor-{{name}}">
-  <div class="col-sm">
+  <div class="row">
-    <div class="heading">
+    <div class="col-lg-8 col-md-6">
+      <div class="controls">
         <button class="run">Run</button>
-      <h2>Editor</h2>
       </div>
+    </div>
+  </div>
+  <div class="code-editor">
+    <div class="row">
+      <div class="col-lg-8 col-md-6">
+        <div class="code-wrapper">
           <textarea class="code">{{code}}</textarea>
         </div>
-  <div class="col-sm">
-    <div class="heading">
-      <h2>Output</h2>
       </div>
-    <div class="canvas-wrapper">
+      <div class="col-lg-4 col-md-6 canvas-wrapper">
-      <canvas class="canvas" width="300" height="300"></canvas>
+          <canvas width="300" height="300"></canvas>
           <pre class="output"></pre>
       </div>
     </div>
   </div>
+</div>
 {% endmacro %}
 
 {% macro LiveCodeEditor(name, code) %}

community/www/profiles/profile.html

@@ -84,9 +84,6 @@
     }
 
     @media (max-width: 900px) {
-      /* .dashboard__photo {
-        display: none;
-      } */
       .dashboard__parent {
         flex-direction: column;
       }

community/www/sketches/sketch.html

@@ -30,14 +30,18 @@
 
     <div class="sketch-header">
       {% if editable %}
-        <input type="button" class="pull-right" id="sketch-save" value="Save"/>
+      <div class="form-row">
-        <h1 class="sketch-title">
+        <div class="col-lg-8 col-md-6">
-            <input type="text" name="title" id="sketch-title" value="{{ sketch.title }}" />
+          <input type="text" id="sketch-title" name="title" class="form-control" value="{{ sketch.title }}">
-        </h1>
+        </div>
+        <div class="col-lg-4 col-md-6">
+          <button type="submit" id="sketch-save" class="btn-save btn btn-primary">Save</button>
+        </div>
+      </div>
       {% else %}
         <h1 class="sketch-title">{{sketch.title}}</h1>
-      {% endif %}
         <div class="sketch-owner-wrapper">By <span class="sketch-owner">{{sketch.get_owner_name()}}</span></div>
+      {% endif %}
     </div>
 
   {% if sketch.is_new() and not editable %}
@@ -49,7 +53,6 @@
     <div class="sketch-editor">
       {{LiveCodeEditorLarge(sketch.name, sketch.code) }}
     </div>
-</section>
 {% endblock %}
 
 {%- block script %}