Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

modal: Make the modal content scrollable instead of the whole modal. 

Earlier, if the content of the modal (apart from the header and footer)
overflowed, the whole modal would become scrollable which would hide
the modal header and footer on scrolling. This commit makes only
the modal content scrollable and keeps the modal header and
footer static.
This commit is contained in:
Ganesh Pawar 2022-09-09 12:53:38 +05:30 committed by Tim Abbott
parent 7f8f954897
commit c439b9d3af
2 changed files with 4 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
static/styles/modal.css
View File

@ -43,6 +43,7 @@
justify-content: flex-end; justify-content: flex-end;
align-items: center; align-items: center;
padding: 20px 24px; padding: 20px 24px;
border-top: 1px solid hsla(0, 0%, 100%, 0.2);
} }
.modal__title { .modal__title {
@ -71,6 +72,7 @@
} }
.modal__content { .modal__content {
display: flex;
font-size: 1rem; font-size: 1rem;
overflow-y: auto; overflow-y: auto;
padding: 0 24px; padding: 0 24px;

4
static/templates/dialog_widget.hbs
View File

@ -1,6 +1,6 @@
<div class="micromodal" id="dialog_widget_modal" aria-hidden="true"> <div class="micromodal" id="dialog_widget_modal" aria-hidden="true">
<div class="modal__overlay" tabindex="-1" data-micromodal-close> <div class="modal__overlay" tabindex="-1" data-micromodal-close>
<div {{#if id}}id="{{id}}" {{/if}}class="modal__container" role="dialog" aria-modal="true" aria-labelledby="dialog_title" data-simplebar> <div {{#if id}}id="{{id}}" {{/if}}class="modal__container" role="dialog" aria-modal="true" aria-labelledby="dialog_title">
<header class="modal__header"> <header class="modal__header">
<h1 class="modal__title dialog_heading"> <h1 class="modal__title dialog_heading">
{{{ heading_text }}} {{{ heading_text }}}
@ -10,7 +10,7 @@
</h1> </h1>
<button class="modal__close" aria-label="{{t 'Close modal' }}" data-micromodal-close></button> <button class="modal__close" aria-label="{{t 'Close modal' }}" data-micromodal-close></button>
</header> </header>
<main class="modal__content"> <main class="modal__content" data-simplebar>
<div class="alert" id="dialog_error"></div> <div class="alert" id="dialog_error"></div>
{{{ html_body }}} {{{ html_body }}}
</main> </main>