From 42459b0c74bfed2c6ebeae78b9bd36b40e04b618 Mon Sep 17 00:00:00 2001
From: mst <oivan2401@gmail.com>
Date: Fri, 28 Feb 2025 07:23:33 +0300
Subject: [PATCH] auto-pagination

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

diff --git a/templates/snippets/layout/questions_list.html b/templates/snippets/layout/questions_list.html
index c863401..c5f6bf2 100644
--- a/templates/snippets/layout/questions_list.html
+++ b/templates/snippets/layout/questions_list.html
@@ -1,44 +1,40 @@
-{% for item in combined %}
-{% with question=item.question, answers=item.answers, showViewQuestionBtn=True, multipleAnswers=True %}
-{% include 'snippets/layout/question_card.html' %}
-{% endwith %}
-{% endfor %}
+<div id="question-list">
+  {% for item in combined %}
+    {% with question=item.question, answers=item.answers, showViewQuestionBtn=True, multipleAnswers=True %}
+      {% include 'snippets/layout/question_card.html' %}
+    {% endwith %}
+  {% endfor %}
+</div>
+
+  {% if combined|length == per_page %}
+  <div class="spinner spinner-border mx-auto d-block my-2"
+          hx-trigger="intersect"
+          hx-get="{{ url_for('api.load_more_questions', page=page+1) }}"
+          hx-target="#question-list"
+          hx-swap="beforeend"
+          hx-on::after-request="this.remove(); initTooltips()">
+    <span class="visually-hidden">Loading...</span>
+  </div>
+  {% endif %}
+
+
 <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 border-0">
-				<h1 class="modal-title fs-5 fw-normal" id="q-modal-label">Share on Fediverse</h1>
+				<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 py-0">
 				<div class="form-group mb-3">
-					<label for="fediInstance" class="form-label">Fediverse instance domain:</label>
+					<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 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 class="modal-footer pt-1 border-0 flex-column flex-sm-row justify-content-sm-between align-items-stretch align-items-sm-center">
+				<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" id="q-modal-submit">{{ _('Share') }}</button>
 			</div>
 		</div>
 	</div>
 </div>
-{#
-		<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>
-#}