diff --git a/static/css/main.embed.css b/static/css/main.embed.css index 41a3a87..9e9703a 100644 --- 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 index 0cf149d..555edee 100644 --- a/static/js/layout-components.js +++ b/static/js/layout-components.js @@ -373,21 +373,23 @@ class Layout extends GoldenLayout { `; + 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 index 7e5a797..dbdd0ac 100644 --- 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: [ {