fix(iframe): unify horizontal and vertical layout

uvapl · Apr 9, 2024 · b9e534e · b9e534e
1 parent 53f3ff9
commit b9e534e
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 14 deletions.
diff --git a/static/css/main.embed.css b/static/css/main.embed.css
@@ -7,7 +7,7 @@
 
 /* iframe-specific overwrites */
 
-.examide-embed .lm_splitter.lm_vertical {
+.examide-embed .lm_splitter {
   display: none;
 }
 
@@ -23,12 +23,12 @@
   border-width: 1px 1px 0 0;
 }
 
-.examide-embed .editor-component-container .lm_controls {
+.examide-embed .lm_controls {
   margin-top: -2px;
 }
 
 .examide-embed {
-  background: #fff;
+  background: var(--color-white);
   border: 1px solid var(--border-color);
   padding: 2px 0 0;
 }
diff --git a/static/js/layout-components.js b/static/js/layout-components.js
@@ -373,21 +373,23 @@ class Layout extends GoldenLayout {
       </div>
     `;
 
+    const $editorContainer = $('.editor-component-container');
+    const $terminalContainer = $('.terminal-component-container');
+
     if (this.iframe && this.vertical) {
-      $('.editor-component-container')
+      $editorContainer
         .find('.lm_controls')
         .append(runCodeButtonHtml)
         .append(settingsMenuHtml);
+    } else if (this.iframe) {
+      // Horizontal layout.
+      $terminalContainer.find('.lm_controls')
+        .append(runCodeButtonHtml)
+        .append(settingsMenuHtml);
     } else {
-      // horizontal layout (exam and iframe)
-      const $componentContainer = $('.terminal-component-container');
-      $componentContainer.find('.lm_header').append(runCodeButtonHtml);
-      $componentContainer.find('.lm_controls').append(settingsMenuHtml);
-
-      // Only add the clear-terminal button in the exam version.
-      if (!this.iframe) {
-        $componentContainer.find('.lm_header').append(clearTermButtonHtml);
-      }
+      // Exam layout.
+      $terminalContainer.find('.lm_header').append(runCodeButtonHtml).append(clearTermButtonHtml)
+      $terminalContainer.find('.lm_controls').append(settingsMenuHtml);
     }
 
     // Add custom buttons to the header.

diff --git a/static/js/main.shared.js b/static/js/main.shared.js
@@ -36,6 +36,7 @@ function generateConfigContent(tabs, fontSize) {
  * @returns {Layout} The layout instance.
  */
 function createLayout(content, proglang, fontSize, options = {}) {
+  const isIframe = $('body').hasClass('examide-embed');
   const defaultLayoutConfig = {
     settings: {
       showCloseIcon: false,
@@ -46,7 +47,7 @@ function createLayout(content, proglang, fontSize, options = {}) {
     },
     dimensions: {
       headerHeight: 30,
-      borderWidth: options.vertical ? 0 : 10,
+      borderWidth: isIframe ? 0 : 10,
     },
     content: [
       {