From 24bb0f2b2a5494cdf6fd65b7cd3a4854404c7a9a Mon Sep 17 00:00:00 2001
From: Anand Chitipothu <anandology@gmail.com>
Date: Mon, 29 Mar 2021 18:56:48 +0000
Subject: [PATCH] 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       | 85 ++++++++++++++++++++++++++----
 community/www/courses/topic.html   |  6 ++-
 community/www/macros/livecode.html | 31 +++++++++--
 community/www/sketches/sketch.html |  4 +-
 4 files changed, 111 insertions(+), 15 deletions(-)

diff --git a/community/public/css/lms.css b/community/public/css/lms.css
index 004767ee..8a6c57b8 100644
--- a/community/public/css/lms.css
+++ b/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;
+}
diff --git a/community/www/courses/topic.html b/community/www/courses/topic.html
index e2817d1e..4d632bc0 100644
--- a/community/www/courses/topic.html
+++ b/community/www/courses/topic.html
@@ -51,7 +51,11 @@
 {% endmacro %}
 
 {% macro render_section_text(s) %}
-  {{ frappe.utils.md_to_html(s.contents) }}
+  <div class="row">
+    <div class="col-md-9">
+      {{ frappe.utils.md_to_html(s.contents) }}
+    </div>
+  </div>
 {% endmacro %}
 
 {%- block script %}
diff --git a/community/www/macros/livecode.html b/community/www/macros/livecode.html
index 8035cbd7..6336023c 100644
--- a/community/www/macros/livecode.html
+++ b/community/www/macros/livecode.html
@@ -1,6 +1,6 @@
 
-{% macro LiveCodeEditor(name, code) %}
-<div class="canvas-editor row no-gutters" id="editor-{{name}}">
+{% macro LiveCodeEditorLarge(name, code) %}
+<div class="livecode-editor livecode-editor-large row no-gutters" id="editor-{{name}}">
   <div class="col-sm">
     <div class="heading">
       <button class="run">Run</button>
@@ -20,6 +20,31 @@
 </div>
 {% endmacro %}
 
+{% macro LiveCodeEditor(name, code) %}
+<div class="livecode-editor canvas-editor" id="editor-{{name}}">
+  <div class="row">
+    <div class="col-md-9">
+    <div>
+      <textarea class="code">{{code}}</textarea>
+      <div class="livecode-controls">
+        <button type="button" class="run">Run</button>
+        <a href="javascript:;" class="reset">Reset</a>
+        <a href="javascript:;" class="clear">Clear</a>
+      </div>
+    </div>
+    </div>
+    <div class="col-md-3">
+      <div class="canvas-wrapper">
+        <canvas class="canvas" width="150" height="150"></canvas>
+        <pre class="output"></pre>
+      </div>
+    </div>
+  </div>
+</div>
+
+{% endmacro %}
+
+
 
 {% macro LiveCodeEditorJS(name, code) %}
 <script type="text/javascript" src="{{ livecode_url }}/static/livecode.js"></script>
@@ -27,7 +52,7 @@
   var livecodeEditors = [];
 
   $(function() {
-    $(".canvas-editor").each((i, e) => {
+    $(".livecode-editor").each((i, e) => {
       var editor = new LiveCodeEditor(e, {
         runtime: "python-canvas",
         base_url: "{{ livecode_url }}",
diff --git a/community/www/sketches/sketch.html b/community/www/sketches/sketch.html
index a0509ef1..137f383c 100644
--- a/community/www/sketches/sketch.html
+++ b/community/www/sketches/sketch.html
@@ -1,5 +1,5 @@
 {% extends "templates/base.html" %}
-{% from "www/macros/livecode.html" import LiveCodeEditor, LiveCodeEditorJS with context %}
+{% from "www/macros/livecode.html" import LiveCodeEditorLarge, LiveCodeEditorJS with context %}
 
 {% block title %}{{sketch.title}}{% endblock %}
 {% block head_include %}
@@ -47,7 +47,7 @@
   {% endif %}
 
     <div class="sketch-editor">
-      {{LiveCodeEditor(sketch.name, sketch.code) }}
+      {{LiveCodeEditorLarge(sketch.name, sketch.code) }}
     </div>
 </section>
 {% endblock %}