[BUG FIX] Sets turtle canvas width equal to output panel width (hedyo…

…rg#1952) * Set width dynamically to output width * Fix width bug * Visually centered turtle * Remove redundant empty line Co-authored-by: boryanagoncharenko <[email protected]>
aelhamah · Feb 15, 2022 · b02469c · b02469c
1 parent 2a10ff1
commit b02469c
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 14 deletions.
diff --git a/static/js/app.ts b/static/js/app.ts
@@ -847,15 +847,17 @@ function runPythonProgram(this: any, code: string, hasTurtle: boolean, hasSleep:
   Sk.pre = "output";
   const turtleConfig = (Sk.TurtleGraphics || (Sk.TurtleGraphics = {}));
   turtleConfig.target = 'turtlecanvas';
+  // If the adventures are not shown -> increase height of turtleConfig
   if ($('#adventures').is(":hidden")) {
       turtleConfig.height = 600;
       turtleConfig.worldHeight = 600;
   } else {
       turtleConfig.height = 300;
       turtleConfig.worldHeight = 300;
   }
-  turtleConfig.width = 400;
-  turtleConfig.worldWidth = 400;
+  // Always set the width to output panel width -> match the UI
+  turtleConfig.width = $( '#output' ).width();
+  turtleConfig.worldWidth = $( '#output' ).width();
 
   if (!hasTurtle) {
     // There might still be a visible turtle panel. If the new program does not use the Turtle,

diff --git a/static/js/appbundle.js b/static/js/appbundle.js
diff --git a/static/js/appbundle.js.map b/static/js/appbundle.js.map
diff --git a/templates/incl-editor-and-output.html b/templates/incl-editor-and-output.html
@@ -61,7 +61,7 @@
     <div class="flex flex-col order-3" id="code_output" style="height: 22rem;">
       <!-- tabindex=0 makes the div focusable -->
       <div id="output" tabindex=0 class="flex-1 rounded p-2 px-3 bg-gray-900 color-white w-full text-lg overflow-auto" style="min-height: 3rem"></div>
-      <div id="turtlecanvas" class="flex-0"></div>
+      <div id="turtlecanvas" class="flex-0 ltr:pl-4 rtl:pr-4"></div>
       <div id="inline-modal" class="flex-0" style="display: none">
         <div class="py-2 text-left px-3 border-4 border-teal-500 mt-3 rounded bg-green-100">
           <!--Title-->