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.
This commit is contained in:
Navin Karkera
2025-01-10 21:00:58 +05:30
committed by GitHub
parent 5ae71873a3
commit e6ddd9c7c1
4 changed files with 20 additions and 13 deletions

View File

@@ -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() {

View File

@@ -17,6 +17,7 @@ function($, _, gettext, BaseModal) {
viewSpecificClasses: 'modal-add-component-picker confirm',
titleFormat: gettext('Add library content'),
addPrimaryActionButton: false,
showEditorModeButtons: false,
}),
events: {

View File

@@ -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);
}
}
}

View File

@@ -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">