Fix output under RevealJS scrollable class (#108)

* Fixes spacing on output * Remove JS set of editor border. * Add another test case * Bump patch version
coatless · Nov 18, 2023 · 8e1b8b5 · 8e1b8b5
1 parent 2ce7a4e
commit 8e1b8b5
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 9 deletions.
diff --git a/_extensions/webr/_extension.yml b/_extensions/webr/_extension.yml
@@ -1,7 +1,7 @@
 name: webr
 title: Embedded webr code cells
 author: James Joseph Balamuta
-version: 0.4.0-dev
+version: 0.4.0-dev.1
 quarto-required: ">=1.2.198"
 contributes:
   filters:

diff --git a/_extensions/webr/webr-context-interactive.html b/_extensions/webr/webr-context-interactive.html
@@ -17,9 +17,6 @@
   const editorDiv = document.getElementById("qwebr-editor-{{WEBRCOUNTER}}");
   const outputGraphDiv = document.getElementById("qwebr-output-graph-area-{{WEBRCOUNTER}}");
 
-  // Add a light grey outline around the code editor
-  editorDiv.style.border = "1px solid #eee";
-
   // Load the Monaco Editor and create an instance
   let editor;
   require(['vs/editor/editor.main'], function () {

diff --git a/_extensions/webr/webr-init.html b/_extensions/webr/webr-init.html
@@ -21,6 +21,10 @@
     color: #db4133;
   }
 
+  .qwebr-editor {
+    border: 1px solid #EEEEEE;
+  }
+
   .qwebr-button-run {
     background-color: #EEEEEE;
     border-bottom-left-radius: 0;
@@ -61,7 +65,6 @@
 
   /* Reset the style of the interactive area */
   .reveal div.qwebr-interactive-area {
-    width: 100%;
     display: block;
     box-shadow: none;
     max-width: 100%;
@@ -70,9 +73,9 @@
     padding: 0;
   } 
 
-  /* Pad the right side by 10 px to avoid rubbing the border */
-  .reveal div.qwebr-output-code-area pre {
-    padding: 0px 0px 0px 10px;
+  /* Provide space to entries */
+  .reveal div.qwebr-output-code-area pre div {
+    margin: 1px 2px 1px 10px;
   }
 
   /* Collapse the inside code tags to avoid extra space between line outputs */

diff --git a/docs/qwebr-release-notes.qmd b/docs/qwebr-release-notes.qmd
@@ -14,7 +14,7 @@ format:
 
 ## Bugfixes
 
-- Fix text added after code cell in RevealJS appearing off the page ([#102](https://github.com/coatless/quarto-webr/issues/102))
+- Fix text added after code cell in RevealJS appearing off the page ([#102](https://github.com/coatless/quarto-webr/issues/102), [#106](https://github.com/coatless/quarto-webr/issues/106))
 
 ## Documentation 
 

diff --git a/tests/qwebr-test-revealjs.qmd b/tests/qwebr-test-revealjs.qmd
@@ -41,3 +41,12 @@ message("Hello World!")
 ```
 
 Sample text after
+
+## Scrollable Class Enabled
+
+```{webr-r}
+2 + 3
+```
+
+The default webR block should not make the slide too wide 
+(no scrollbar at the bottom).