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-23 20:22:55 +05:30 committed by Tim Abbott
parent 6e19fe0ad1
commit 5a5203144d
3 changed files with 11 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web/styles/dark_theme.css
View File

@ -37,6 +37,10 @@
background-color: hsla(0, 0%, 83%, 0.5);
}
.modal__content.simplebar-scrollable-y + .modal__footer {
border-top: 1px solid hsla(0, 0%, 100%, 0.2);
}
.modal-bg,
.modal__container {
background-color: hsl(212, 28%, 18%);

5
web/styles/modal.css
View File

@ -83,10 +83,15 @@
}
.modal__content {
display: flex;
font-size: 1rem;
overflow-y: auto;
padding: 0 24px;
line-height: 1.5;
&.simplebar-scrollable-y + .modal__footer {
border-top: 1px solid hsl(0, 0%, 87%);
}
}
.modal__btn {

4
web/templates/dialog_widget.hbs
View File

@ -1,6 +1,6 @@
<div class="micromodal" id="dialog_widget_modal" aria-hidden="true">
<div class="modal__overlay" tabindex="-1">
<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">
<h1 class="modal__title dialog_heading">
{{{ heading_text }}}
@ -10,7 +10,7 @@
</h1>
<button class="modal__close" aria-label="{{t 'Close modal' }}" data-micromodal-close></button>
</header>
<main class="modal__content">
<main class="modal__content" data-simplebar>
<div class="alert" id="dialog_error"></div>
{{{ html_body }}}
</main>