fix: advanced editor styling on library authoring

open-craft · Jan 21, 2025 · aa0acf7 · aa0acf7
1 parent 824a766
commit aa0acf7
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 9 deletions.
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,22 @@ body {
   .modal-lg.modal-window.confirm.openassessment_modal_window {
     height: 635px;
   }
+
+  // Additions for the xblock editor on the Library Authoring
+  &.xblock-iframe-content .xblock-actions {
+    padding: ($baseline*0.75) 2% ($baseline/2) 2%;
+
+    .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
@@ -81,8 +81,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 +159,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 +221,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,
     }