Skip to content

Commit

Permalink
[#6951]*/modal: adjusting other markup that uses bootstrap modal and …
Browse files Browse the repository at this point in the history 
…preserve their appearances.
  • Loading branch information
Kha committed Jan 25, 2023
1 parent 054a8b4 commit dc836c6
Show file tree
Hide file tree
Showing 7 changed files with 112 additions and 51 deletions.
115 changes: 71 additions & 44 deletions meinberlin/apps/contrib/templates/meinberlin_contrib/component_library.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -136,6 +136,9 @@
<li class="dashboard-nav__page">
<a href="#cl-moderation-info" class="dashboard-nav__item dashboard-nav__item--interactive">Item Detail: Moderation Info</a>
</li>
<li class="dashboard-nav__page">
<a href="#cl-modal" class="dashboard-nav__item dashboard-nav__item--interactive">Modal</a>
</li>
<li class="dashboard-nav__page">
<a href="#cl-module" class="dashboard-nav__item dashboard-nav__item--interactive">Module</a>
</li>
Expand Down Expand Up @@ -638,7 +641,7 @@ <h2 id="cl-category_formset">Category Formset</h2>
</div>
</div>

<h2 id="cl-commenting">Comments</h2>
<h2 id="cl-comments">Comments</h2>

<div class="cl-example">
<div>
Expand Down Expand Up @@ -684,49 +687,6 @@ <h2 id="cl-commenting">Comments</h2>
<div>
<div>
<div class="a4-comments__comment a4-comments__comment-owner"><a class="a4-comments__anchor" id="comment_20" href="./?comment=20">Comment 20</a>
<div class="modal fade" id="report_comment_20" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header"><button class="close" aria-label="Abbrechen" data-bs-dismiss="modal"><i class="fa fa-times"></i></button></div>
<div class="modal-body undefined">
<h3 class="modal-title u-first-heading">Sie möchten diesen Beitrag melden? Ihre Nachricht wird an die Moderation weitergeleitet. Diese prüft den gemeldeten Beitrag. Er wird gelöscht, wenn er
nicht unseren
Diskussionsregeln (Netiquette) entspricht.</h3>
<div class="form-group"><textarea rows="5" class="form-control report-message" placeholder="Ihre Nachricht"></textarea></div>
</div>
<div class="modal-footer">
<div class="row"><button class="submit-button" data-bs-dismiss="false">Meldung senden</button></div>
<div class="row"><button class="cancel-button" data-bs-dismiss="modal">Abbrechen</button></div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="share_comment_20" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header"><button class="close" aria-label="Abbrechen" data-bs-dismiss="modal"><i class="fa fa-times"></i></button></div>
<div class="modal-body undefined">
<h3 class="modal-title u-first-heading"></h3>
<div class="input-group"><input id="share-url-20" type="text" class="form-control" readonly="" value="http://localhost:8003/budgeting/2022-00012/?comment=20"><button
class="btn btn--light input-group-append modal-url-bar-button" data-bs-toggle="button" aria-pressed="false" autocomplete="off">Kopieren</button></div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="comment_delete_20" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header"><button class="close" aria-label="Abbrechen" data-bs-dismiss="modal"><i class="fa fa-times"></i></button></div>
<div class="modal-body undefined">
<h3 class="modal-title u-first-heading">Möchten Sie diesen Kommentar wirklich löschen?</h3>
</div>
<div class="modal-footer">
<div class="row"><button class="submit-button" data-bs-dismiss="modal">Löschen</button></div>
<div class="row"><button class="cancel-button" data-bs-dismiss="modal">Abbrechen</button></div>
</div>
</div>
</div>
</div>
<div class="a4-comments__box">
<div class="a4-comments__box--user">
<div class="row">
Expand Down Expand Up @@ -1798,6 +1758,73 @@ <h3 class="detail-info__section-title">Remark</h3>
</div>
</div>

<h2 id="cl-modal">Modal</h2>

<button class="btn btn--default" data-bs-toggle="modal" data-bs-target="#report_comment_20">Open Report Modal</button>
<div class="modal fade" id="report_comment_20" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h1>Send Report</h1>
<button class="close" aria-label="Abbrechen" data-bs-dismiss="modal">
<i class="fa fa-times"></i>
</button>
</div>
<div class="modal-body">
<div class="u-spacer-bottom">Sie möchten diesen Beitrag melden? Ihre Nachricht wird an die Moderation weitergeleitet. Diese prüft den gemeldeten Beitrag. Er wird gelöscht, wenn er
nicht unseren
Diskussionsregeln (Netiquette) entspricht.</div>
<div class="form-group"><textarea rows="5" class="form-control report-message" placeholder="Ihre Nachricht"></textarea></div>
</div>
<div class="modal-footer">
<button class="submit-button" data-bs-dismiss="false">Meldung senden</button>
<button class="cancel-button" data-bs-dismiss="modal">Abbrechen</button>
</div>
</div>
</div>
</div>

<button class="btn btn--default" data-bs-toggle="modal" data-bs-target="#share_comment_20">Open Url Modal</button>
<div class="modal fade" id="share_comment_20" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h1>Share</h1>
<button class="close" aria-label="Abbrechen" data-bs-dismiss="modal">
<i class="fa fa-times"></i>
</button>
</div>
<div class="modal-body">
<div class="input-group"><input id="share-url-20" type="text" class="form-control" readonly="" value="http://localhost:8003/budgeting/2022-00012/?comment=20"><button
class="btn btn--primary input-group-append" data-bs-toggle="button" aria-pressed="false" autocomplete="off">Kopieren</button></div>
</div>
</div>
</div>
</div>

<button class="btn btn--default" data-bs-toggle="modal" data-bs-target="#comment_delete_20">Open Delete Modal</button>
<div class="modal fade" id="comment_delete_20" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h1>Delete</h1>
<button class="close" aria-label="Abbrechen" data-bs-dismiss="modal">
<i class="fa fa-times"></i>
</button>
</div>
<div class="modal-body">
<div class="u-spacer-bottom">
Möchten Sie diesen Kommentar wirklich löschen?
</div>
</div>
<div class="modal-footer">
<button class="submit-button" data-bs-dismiss="modal">Löschen</button>
<button class="cancel-button" data-bs-dismiss="modal">Abbrechen</button>
</div>
</div>
</div>
</div>

<h2 id="cl-module">Module</h2>

<div class="cl-example">
Expand Down
11 changes: 9 additions & 2 deletions meinberlin/apps/plans/templates/meinberlin_plans/plan_update_form.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,15 +90,22 @@ <h1 class="u-first-heading">{% translate 'Edit plan' %}</h1>
</div>

<div class="modal" tabindex="-1" role="dialog" id="plan-publish-modal" aria-labelledby="plan-publish-label" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title u-first-heading" id="plan-publish-label">{% translate "Are you sure you want to publish your plan?" %}</h2>
{% if plan.is_draft %}
<h1>{% translate 'Publish' %}</h1>
{% else %}
<h1>{% translate 'Unpublish' %}</h1>
{% endif %}
<button type="button" class="close" data-bs-dismiss="modal" aria-label="{% translate 'Close'%}">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<div class="u-spacer-bottom">
{% translate "Are you sure you want to publish your plan?" %}
</div>
<div class="u-spacer-bottom">
<form action="{% url 'a4dashboard:plan-publish' pk=plan.pk %}" method="post" data-ignore-submit="true" class="u-inline">
{% csrf_token %}
Expand Down
3 changes: 3 additions & 0 deletions meinberlin/assets/scss/components/_filter_bar.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -341,6 +341,9 @@ $divider-margin: 1.25rem;
}

.filter-secondary__modal-content {
@extend .modal-content--rounded;
@extend .modal-content--padding;

background-color: $bg-secondary;
font-size: $font-size-base;

Expand Down
12 changes: 12 additions & 0 deletions meinberlin/assets/scss/components/_modal.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,3 +46,15 @@
.modal-open {
padding-right: 0 !important;
}

// used to preserve arbitrary* modal's appearances.
// *arbitrary: e.g. modals that do not look and behave like our usual modals,
// but also uses Bootstrap's modal classes.
// example: blueprint tiles or mobile secondary filter navigation.
.modal-content--rounded {
border-radius: $border-radius-lg;
}

.modal-content--padding {
padding: $spacer !important;
}
2 changes: 1 addition & 1 deletion meinberlin/templates/a4dashboard/includes/nav_modules.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ <h4 class="dashboard-nav__header">

<div class="modal" tabindex="-1" role="dialog" id="module-blueprint-list">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-content modal-content--rounded modal-content--padding">
<div class="modal-header">
<h2 class="modal-title u-first-heading">{% translate "Choose Participation Module" %}</h2>
<button type="button" class="close btn--close" data-bs-dismiss="modal" aria-label="{% translate 'Close' %}">
Expand Down
9 changes: 7 additions & 2 deletions meinberlin/templates/a4dashboard/includes/nav_modules_item.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,15 +62,20 @@
</div>

<div class="modal" tabindex="-1" role="dialog" id="delete-modal{{ module_menu.module.pk }}" aria-labelledby="delete-modal-label">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title u-first-heading" id="delete-modal-label">{% translate "Are you sure you want to delete your module?" %}</h2>
<h1 class="modal-title u-first-heading" id="delete-modal-label">{% translate 'Delete' %}</h1>
<button type="button" class="close" data-bs-dismiss="modal" aria-label="{% translate 'Close'%}">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<div class="u-spacer-bottom">
{% translate "Are you sure you want to delete your module?" %}
</div>
</div>
<div class="modal-footer">
<div class="u-spacer-bottom">
<form enctype="multipart/form-data" action="{% url 'a4dashboard:module-delete' slug=module_menu.module.slug %}" method="post" class="u-inline">
{% csrf_token %}
Expand Down
11 changes: 9 additions & 2 deletions meinberlin/templates/a4dashboard/includes/progress.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,15 +23,22 @@
{% endif %}

<div class="modal" tabindex="-1" role="dialog" id="publish-modal">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title u-first-heading">{% translate "Are you sure you want to publish your project?" %}</h2>
{% if project.is_draft %}
<h1>{% translate 'Publish' %}</h1>
{% else %}
<h1>{% translate 'Unpublish' %}</h1>
{% endif %}
<button type="button" class="close" data-bs-dismiss="modal" aria-label="{% translate 'Close'%}">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<div class="u-spacer-bottom">
{% translate "Are you sure you want to publish your project?" %}
</div>
{% if project.unpublished_modules %}
<p>
{% blocktranslate count counter=project.unpublished_modules.count %}One module has not been added to the project.{% plural %}{{ counter }} modules have not been added to the project.{% endblocktranslate %}
Expand Down

0 comments on commit dc836c6

Please sign in to comment.