stream_settings: Fix bugs with #stream-creation .modal-footer.

This commit addresses `#stream-creation .modal-footer` becoming
transparent after an error in creating a stream due to overlapping
with `.stream-creation-body`. Instead of adding data-simplebar on
.stream-creation-body, added it to a new div
`stream-creation-simplebar-container` which contains 3 divs:
stream_create_info,stream_creating_indicator and stream-creation-body.

Additionally, fixed the border-radius of the modal footer on the
bottom left side for device width > $md_min.

Fixes #25526
This commit is contained in:
Hardik Dharmani 2023-05-11 20:58:19 +05:30 committed by Tim Abbott
parent 5be7bc58fe
commit ede1e547ee
2 changed files with 55 additions and 44 deletions

View File

@ -685,12 +685,15 @@ h4.user_group_setting_subsection_title {
outline: none;
-webkit-overflow-scrolling: touch;
.stream-creation-simplebar-container {
/*
45px (.subscriptions-header) + 44px (.display-type) + 60px (.modal-footer)
*/
height: calc(95vh - 149px);
}
.user-group-creation-body,
.stream-creation-body {
/*
45px (.subscriptions-header) + 44px (.display-type) + 60px (.modal-footer) + 15px (padding for .simplebar-content)
*/
height: calc(95vh - 164px);
padding: 15px 15px 0;
}
@ -701,6 +704,12 @@ h4.user_group_setting_subsection_title {
padding-top: 9px;
}
@media (width > $md_min) {
.modal-footer {
border-radius: 0 0 6px;
}
}
.add_all_users_to_user_group,
.add_all_users_to_stream {
margin-left: 10px;

View File

@ -1,46 +1,48 @@
<div class="hide" id="stream-creation" tabindex="-1" role="dialog"
aria-label="{{t 'Stream creation' }}">
<form id="stream_creation_form">
<div class="alert stream_create_info"></div>
<div id="stream_creating_indicator"></div>
<div class="stream-creation-body" data-simplebar>
<section class="block">
<label for="create_stream_name">
{{t "Stream name" }}
</label>
<input type="text" name="stream_name" id="create_stream_name" class="settings_text_input"
placeholder="{{t 'Stream name' }}" value="" autocomplete="off" maxlength="{{ max_stream_name_length }}" />
<div id="stream_name_error" class="stream_creation_error"></div>
</section>
<section class="block">
<label for="create_stream_description">
{{t "Stream description" }}
{{> ../help_link_widget link="/help/change-the-stream-description" }}
</label>
<input type="text" name="stream_description" id="create_stream_description" class="settings_text_input"
placeholder="{{t 'Stream description' }}" value="" autocomplete="off" maxlength="{{ max_stream_description_length }}" />
</section>
{{#if ask_to_announce_stream}}
<div id="announce-new-stream">
{{>announce_stream_checkbox }}
</div>
{{/if}}
<section class="block" id="make-invite-only">
<div class="stream-types">
<h3 class="stream_setting_subsection_title">{{t "Stream permissions" }}</h3>
{{> stream_types
stream_post_policy=stream_post_policy_values.everyone.code
is_stream_edit=false
can_remove_subscribers_setting_widget_name="new_stream_can_remove_subscribers_group_id" }}
</div>
</section>
<section class="block">
<label for="people_to_add">
<h4 class="stream_setting_subsection_title">{{t "Choose subscribers" }}</h4>
</label>
<div id="stream_subscription_error" class="stream_creation_error"></div>
<div class="controls" id="people_to_add"></div>
</section>
<div class="stream-creation-simplebar-container" data-simplebar>
<div class="alert stream_create_info"></div>
<div id="stream_creating_indicator"></div>
<div class="stream-creation-body">
<section class="block">
<label for="create_stream_name">
{{t "Stream name" }}
</label>
<input type="text" name="stream_name" id="create_stream_name" class="settings_text_input"
placeholder="{{t 'Stream name' }}" value="" autocomplete="off" maxlength="{{ max_stream_name_length }}" />
<div id="stream_name_error" class="stream_creation_error"></div>
</section>
<section class="block">
<label for="create_stream_description">
{{t "Stream description" }}
{{> ../help_link_widget link="/help/change-the-stream-description" }}
</label>
<input type="text" name="stream_description" id="create_stream_description" class="settings_text_input"
placeholder="{{t 'Stream description' }}" value="" autocomplete="off" maxlength="{{ max_stream_description_length }}" />
</section>
{{#if ask_to_announce_stream}}
<div id="announce-new-stream">
{{>announce_stream_checkbox }}
</div>
{{/if}}
<section class="block" id="make-invite-only">
<div class="stream-types">
<h3 class="stream_setting_subsection_title">{{t "Stream permissions" }}</h3>
{{> stream_types
stream_post_policy=stream_post_policy_values.everyone.code
is_stream_edit=false
can_remove_subscribers_setting_widget_name="new_stream_can_remove_subscribers_group_id" }}
</div>
</section>
<section class="block">
<label for="people_to_add">
<h4 class="stream_setting_subsection_title">{{t "Choose subscribers" }}</h4>
</label>
<div id="stream_subscription_error" class="stream_creation_error"></div>
<div class="controls" id="people_to_add"></div>
</section>
</div>
</div>
<div class="modal-footer">
<button class="button small white rounded" data-dismiss="modal">{{t "Cancel" }}</button>