From 6617d4fe29918edef166848f156ad60e37c13fa9 Mon Sep 17 00:00:00 2001
From: mst <oivan2401@gmail.com>
Date: Tue, 26 Nov 2024 14:53:06 +0300
Subject: [PATCH] stop flooding the DOM with modals

---
 templates/snippets/layout/questions_list.html | 43 +++++++++++++------
 1 file changed, 29 insertions(+), 14 deletions(-)

diff --git a/templates/snippets/layout/questions_list.html b/templates/snippets/layout/questions_list.html
index 248b2e8..c863401 100644
--- a/templates/snippets/layout/questions_list.html
+++ b/templates/snippets/layout/questions_list.html
@@ -3,27 +3,42 @@
 {% include 'snippets/layout/question_card.html' %}
 {% endwith %}
 {% endfor %}
-{% for item in combined %}
-{% for answer in item.answers %}
-<div class="modal fade" id="question-{{ item.question.id }}-modal" tabindex="-1" aria-labelledby="q-{{ item.question.id }}-modal-label" aria-hidden="true">
+<div class="modal fade" id="question-modal" tabindex="-1" aria-labelledby="q-modal-label" aria-hidden="true">
 	<div class="modal-dialog modal-dialog-centered">
 		<div class="modal-content">
-			<div class="modal-header">
-				<h1 class="modal-title fs-5" id="q-{{ item.question.id }}-modal-label">Share on Fediverse</h1>
-				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+			<div class="modal-header border-0">
+				<h1 class="modal-title fs-5 fw-normal" id="q-modal-label">Share on Fediverse</h1>
+				<button type="button" class="btn-close d-flex align-items-center fs-5" data-bs-dismiss="modal" aria-label="Close"><i class="bi bi-x-lg"></i></button>
 			</div>
-			<div class="modal-body">
+			<div class="modal-body py-0">
 				<div class="form-group mb-3">
-					<label for="fediInstance">Fediverse instance domain:</label>
-					<input type="text" id="fediInstance-{{item.question.id}}" name="fediInstance" class="form-control">
+					<label for="fediInstance" class="form-label">Fediverse instance domain:</label>
+					<input type="text" id="fediInstance" name="fediInstance" class="form-control">
 				</div>
 			</div>
-			<div class="modal-footer">
-				<button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
-				<button type="button" class="btn btn-primary" data-bs-dismiss="modal" onclick="shareOnFediverse('{{ item.question.id }}', `{{ urllib.parse.quote(trimContent(item.question.content, cfg.trimContentAfter) + ' — ' + trimContent(answer.content, cfg.trimContentAfter),safe='') }}%20{{ urllib.parse.quote(cfg.instance.fullBaseUrl + '/q/' + str(item.question.id),safe='') }}`)">Share</button>
+			<div class="modal-footer pt-1 flex-row align-items-stretch w-100 border-0">
+				<button type="button" class="btn btn-outline-secondary flex-fill flex-lg-grow-0" data-bs-dismiss="modal">Cancel</button>
+				<button type="button" class="btn btn-primary flex-fill flex-lg-grow-0" data-bs-dismiss="modal" id="q-modal-submit">Share</button>
 			</div>
 		</div>
 	</div>
 </div>
-{% endfor %}
-{% endfor %}
\ No newline at end of file
+{#
+		<div class="modal fade" id="question-{{ question.id }}-modal" tabindex="-1" aria-labelledby="q-{{ question.id }}-modal-label" aria-hidden="true">
+			<div class="modal-dialog modal-dialog-centered">
+				<div class="modal-content">
+					<div class="modal-header border-0">
+						<h1 class="modal-title fs-5 fw-normal" id="q-{{ question.id }}-modal-label">Confirmation</h1>
+						<button type="button" class="btn-close d-flex align-items-center fs-5" data-bs-dismiss="modal" aria-label="Close"><i class="bi bi-x-lg"></i></button>
+					</div>
+					<div class="modal-body pt-0">
+						<p class="mb-0">Are you sure you want to delete this question?</p>
+					</div>
+					<div class="modal-footer pt-1 border-0">
+						<button type="button" class="btn btn-outline-secondary flex-fill flex-md-grow-0" data-bs-dismiss="modal">Cancel</button>
+						<button type="button" class="btn btn-danger flex-fill flex-md-grow-0" data-bs-dismiss="modal" hx-delete="{{ url_for('api.deleteQuestion', question_id=question.id) }}" hx-target="#question-{{ question.id }}" hx-swap="none">Confirm</button>
+					</div>
+				</div>
+			</div>
+		</div>
+#}