feat: move toast parent into footer

Author: dodumosu

apollo/templates/admin/form_list.html

@@ -173,9 +173,10 @@ <h5 id="formImportModalLabel" class="modal-title">{{ _('Import Form') }}</h5>
     </div>
   </div>
 </form>
-{{ render_toast_parent(toast_app_id) }}
 {% endblock %}
-
+{% block footer %}
+{{ render_toast_parent(toast_app_id) }}
+{% endblock footer %}
 {%- block tail_js %}
 {{ super() }}
 {{ render_toast_template() }}

apollo/templates/admin/locations_list.html

@@ -128,10 +128,12 @@ <h3>{{ _('Finalize') }}</h3>
   <div class="card-footer">
     {{ render_pager(locations, 'locationset.locations_list', args) }}
   </div>
-  {{ render_toast_parent(toast_app_id) }}
 </div>
 {% endblock %}
 
+{% block footer %}
+{{ render_toast_parent(toast_app_id) }}
+{% endblock footer %}
 
 {%- block tail_js -%}
 {{ super() }}

apollo/templates/admin/participant_list.html

@@ -210,7 +210,6 @@
   {{ render_pager(participants, 'participants.participant_list', args) }}
   {%- endif %}
 </div>
-{{ render_toast_parent(toast_app_id) }}
 
 <div class="wizard" id="import-wizard" data-title="{{ _('Import Participants') }}">
   <div class="wizard-card" data-cardname="uploadFile">
@@ -248,6 +247,10 @@ <h3>{{ _('Finalize') }}</h3>
 </div>
 {%- endblock -%}
 
+{% block footer %}
+{{ render_toast_parent(toast_app_id) }}
+{% endblock footer %}
+
 {%- block tail_js -%}
 {{ super() }}
 {{ render_toast_template() }}

apollo/templates/admin/task_toast.html

@@ -39,7 +39,7 @@
 
 {% macro render_toast_parent(toast_app_id) %}
 <div aria-live="polite" aria-atomic="true" id="{{ toast_app_id }}">
-  <div style="position: absolute; bottom: 2rem; right: 2rem;">
+  <div style="position: relative; margin-bottom: 2rem; margin-right: 2rem;">
     <task-toast v-for="task in tasks" :key="task.id" :task-info="task"></task-toast>
   </div>
 </div>