fix: advanced editor styling on library authoring [FC-0076] (#36146)

Fixes the styles for the advanced editors (poll, survey, LTI Provider, etc). Updated the code if `xblock_v2/xblock_iframe.html` to use `course-unit-mfe-iframe-bundle.scss`
openedx · Jan 30, 2025 · 4f13ee0 · 4f13ee0
1 parent 672ce2d
commit 4f13ee0
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 10 deletions.
diff --git a/cms/envs/common.py b/cms/envs/common.py
@@ -843,6 +843,7 @@
 
 # Public domain name of Studio (should be resolvable from the end-user's browser)
 CMS_BASE = 'localhost:18010'
+CMS_ROOT_URL = "https://localhost:18010"
 
 LOG_DIR = '/edx/var/log/edx'
 

diff --git a/cms/envs/production.py b/cms/envs/production.py
@@ -163,6 +163,7 @@ def get_env_setting(setting):
 CMS_BASE = ENV_TOKENS.get('CMS_BASE')
 LMS_BASE = ENV_TOKENS.get('LMS_BASE')
 LMS_ROOT_URL = ENV_TOKENS.get('LMS_ROOT_URL')
+CMS_ROOT_URL = ENV_TOKENS.get('CMS_ROOT_URL')
 LMS_INTERNAL_ROOT_URL = ENV_TOKENS.get('LMS_INTERNAL_ROOT_URL', LMS_ROOT_URL)
 ENTERPRISE_API_URL = ENV_TOKENS.get('ENTERPRISE_API_URL', LMS_INTERNAL_ROOT_URL + '/enterprise/api/v1/')
 ENTERPRISE_CONSENT_API_URL = ENV_TOKENS.get('ENTERPRISE_CONSENT_API_URL', LMS_INTERNAL_ROOT_URL + '/consent/api/v1/')

diff --git a/cms/envs/test.py b/cms/envs/test.py
@@ -136,6 +136,9 @@
 LMS_ROOT_URL = f"http://{LMS_BASE}"
 FEATURES['PREVIEW_LMS_BASE'] = "preview.localhost"
 
+CMS_BASE = "localhost:8001"
+CMS_ROOT_URL = f"http://{CMS_BASE}"
+
 COURSE_AUTHORING_MICROFRONTEND_URL = "http://course-authoring-mfe"
 DISCUSSIONS_MICROFRONTEND_URL = "http://discussions-mfe"
 

diff --git a/cms/static/sass/course-unit-mfe-iframe-bundle.scss b/cms/static/sass/course-unit-mfe-iframe-bundle.scss
@@ -200,7 +200,7 @@ body {
     }
   }
 
-  .modal-window.modal-editor {
+  .modal-window.modal-editor, &.xblock-iframe-content {
     background-color: $white;
     border-radius: 6px;
 
@@ -381,6 +381,37 @@ body {
   .modal-lg.modal-window.confirm.openassessment_modal_window {
     height: 635px;
   }
+
+  // Additions for the xblock editor on the Library Authoring
+  &.xblock-iframe-content {
+    // Reset the max-height to allow the settings list to grow
+    .wrapper-comp-settings .list-input.settings-list {
+      max-height: unset;
+    }
+
+    // For Google Docs and Google Calendar xblock editor
+    .google-edit-wrapper .xblock-inputs {
+      position: unset;
+      overflow-y: unset;
+    }
+
+    .xblock-actions {
+      padding: ($baseline*0.75) 2% ($baseline/2) 2%;
+      position: sticky;
+      bottom: 0;
+
+      .action-item {
+        @extend %t-action3;
+
+        display: inline-block;
+        margin-right: ($baseline*0.75);
+
+        &:last-child {
+          margin-right: 0;
+        }
+      }
+    }
+  }
 }
 
 .view-container .content-primary {

diff --git a/common/templates/xblock_v2/xblock_iframe.html b/common/templates/xblock_v2/xblock_iframe.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 
-<html>
+<!-- Set the height of the iframe to 100% of the viewport height to avoid an extra scrollbar -->
+<html style="height: 100vh;">
 <head>
   <!-- Open links in a new tab, not this iframe -->
   <base target="_blank">
@@ -81,8 +82,11 @@
         href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
   <!-- Capa Problem Editing requires CodeMirror -->
   <link rel="stylesheet" href="{{ lms_root_url }}/static/js/vendor/CodeMirror/codemirror.css">
-  <!-- Built-in XBlocks (and some plugins) depends on LMS CSS -->
-  <link rel="stylesheet" href="{{ lms_root_url }}/static/css/lms-course.css">
+  <!-- Additional CSS for the XBlock Editor on the Library Authoring -->
+  <link rel="stylesheet" href="{{ cms_root_url }}/static/studio/css/vendor/normalize.css">
+  <link rel="stylesheet" href="{{ cms_root_url }}/static/studio/css/studio-main-v1.css" />
+  <link rel="stylesheet" href="{{ cms_root_url }}/static/studio/css/course-unit-mfe-iframe-bundle.css" />
+
   <!-- Configure and load MathJax -->
   <script type="text/x-mathjax-config">
     MathJax.Hub.Config({
@@ -156,11 +160,13 @@
 <!-- The default stylesheet will set the body min-height to 100% (a common strategy to allow for background
   images to fill the viewport), but this has the undesireable side-effect of causing an infinite loop via the onResize
   event listeners below, in certain situations.  Resetting it to the default "auto" skirts the problem.-->
-<body style="min-height: auto; background-color: white;">
-  <!-- fragment body -->
-  {{ fragment.body_html | safe }}
-  <!-- fragment foot -->
-  {{ fragment.foot_html | safe }}
+<body style="min-height: auto; background-color: white;" class="view-container">
+  <div class="wrapper xblock-iframe-content">
+      <!-- fragment body -->
+      {{ fragment.body_html | safe }}
+      <!-- fragment foot -->
+      {{ fragment.foot_html | safe }}
+  </div>
   <script>
     /**
      * Map of all URL handlers for this block and its children, keyed by usage
@@ -216,7 +222,7 @@
                 return url;
             },
             notify: (eventName, data) => {
-                /** 
+                /**
                  * Used in `studio_view` to notify events and errors
                  **/
                 window.parent.postMessage({

diff --git a/openedx/core/djangoapps/xblock/rest_api/views.py b/openedx/core/djangoapps/xblock/rest_api/views.py
@@ -118,10 +118,12 @@ def embed_block_view(request, usage_key: UsageKeyV2, view_name: str):
     #     for key in itertools.chain([block.scope_ids.usage_id], getattr(block, 'children', []))
     # }
     lms_root_url = configuration_helpers.get_value('LMS_ROOT_URL', settings.LMS_ROOT_URL)
+    cms_root_url = configuration_helpers.get_value('CMS_ROOT_URL', settings.CMS_ROOT_URL)
     context = {
         'fragment': fragment,
         'handler_urls_json': json.dumps(handler_urls),
         'lms_root_url': lms_root_url,
+        'cms_root_url': cms_root_url,
         'view_name': view_name,
         'is_development': settings.DEBUG,
     }