refactor: remove unnecessary padding from lib component picker (#36073)

Library component picker and Problem bank picker iframe had unnecessary padding resulting in multiple border/shadow in the modal.
openedx · Jan 10, 2025 · e6ddd9c · e6ddd9c
1 parent 5ae7187
commit e6ddd9c
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 13 deletions.
diff --git a/cms/static/js/views/components/add_library_content.js b/cms/static/js/views/components/add_library_content.js
@@ -22,6 +22,7 @@ function($, _, gettext, BaseModal) {
             // Translators: "title" is the name of the current component being edited.
             titleFormat: gettext('Add library content'),
             addPrimaryActionButton: false,
+            showEditorModeButtons: false,
         }),
 
         initialize: function() {

diff --git a/cms/static/js/views/modals/select_v2_library_content.js b/cms/static/js/views/modals/select_v2_library_content.js
@@ -17,6 +17,7 @@ function($, _, gettext, BaseModal) {
             viewSpecificClasses: 'modal-add-component-picker confirm',
             titleFormat: gettext('Add library content'),
             addPrimaryActionButton: false,
+            showEditorModeButtons: false,
         }),
 
         events: {

diff --git a/cms/static/sass/views/_container.scss b/cms/static/sass/views/_container.scss
@@ -585,13 +585,16 @@
 // cms/static/js/views/components/add_library_content_with_picker.js
 .modal-add-component-picker {
   top: 10%;
+  padding: 0px !important;
   .modal-content {
     padding: 0 !important;
+    border-radius: ($baseline/5);
 
     & > iframe {
       width: 100%;
       min-height: 80vh;
       background: url('#{$static-path}/images/spinner.gif') center center no-repeat;
+      border-radius: ($baseline/5);
     }
   }
 }

diff --git a/cms/templates/js/basic-modal.underscore b/cms/templates/js/basic-modal.underscore
@@ -4,20 +4,22 @@
     <div class="modal-window-overlay"></div>
     <div class="modal-window <%- viewSpecificClasses %> modal-<%- size %> modal-type-<%- type %>" tabindex="-1" aria-labelledby="modal-window-title">
         <div class="<%- name %>-modal">
-            <div class="modal-header">
-                <h2 id="modal-window-title" class="title modal-window-title">
-                    <%- title %>
-                    <% if (modalSRTitle) { %>
-                        <span class="sr modal-sr-title">
-                            <%- modalSRTitle %>
-                        </span>
+            <% if (title || modalSRTitle || showEditorModeButtons) { %>
+                <div class="modal-header">
+                    <h2 id="modal-window-title" class="title modal-window-title">
+                        <%- title %>
+                        <% if (modalSRTitle) { %>
+                            <span class="sr modal-sr-title">
+                                <%- modalSRTitle %>
+                            </span>
+                        <% } %>
+                    </h2>
+                    <% if (showEditorModeButtons) { %>
+                        <ul class="editor-modes action-list action-modes">
+                        </ul>
                     <% } %>
-                </h2>
-                <% if (showEditorModeButtons) { %>
-                    <ul class="editor-modes action-list action-modes">
-                    </ul>
-                <% } %>
-            </div>
+                </div>
+            <% } %>
             <div class="modal-content">
             </div>
             <div class="modal-actions">