From bf2d07ee5bd3b658a61719af96a6230196cd5c74 Mon Sep 17 00:00:00 2001
From: mystie <oivan2401@gmail.com>
Date: Sat, 28 Sep 2024 00:39:23 +0300
Subject: [PATCH] small improvements in single question view, indentation fix

---
 templates/view_question.html | 92 ++++++++++++++++++++----------------
 1 file changed, 52 insertions(+), 40 deletions(-)

diff --git a/templates/view_question.html b/templates/view_question.html
index e4506a0..163808d 100644
--- a/templates/view_question.html
+++ b/templates/view_question.html
@@ -1,5 +1,5 @@
 {% extends 'base.html' %}
-{% block title %}"{{ trimContent(question.content, 15) }}" - "{{ trimContent(answer.content, 15) }}"{% endblock %}
+{% block title %}{{ trimContent(question.content, 30) }} - {{ trimContent(answer.content, 30) }}{% endblock %}
 {% block content %}
 <div class="row">
 	<div class="col-sm-8 m-auto">
@@ -15,10 +15,10 @@
 				<div class="markdown-content">{{ answer.content | render_markdown }}</div>
 			</div>
 			<div class="card-footer pt-0 pb-0 ps-3 pe-1 text-body-secondary d-flex justify-content-between align-items-center">
-				<span class="fs-6" data-bs-toggle="tooltip" data-bs-title="{{ answer.creation_date.strftime("%B %d, %Y %H:%M") }}">{{ formatRelativeTime(str(answer.creation_date)) }}</span>
+				<span class="fs-6" data-bs-toggle="tooltip" data-bs-title="{{ answer.creation_date.strftime('%B %d, %Y %H:%M') }}">{{ formatRelativeTime(str(answer.creation_date)) }}</span>
 <div class="d-flex align-items-center">
 					<div class="dropdown">
-						<button class="btn pt-2 pb-2 no-arrow text-body-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"><i class="bi bi-share"></i></button>
+						<button class="btn btn-basic pt-2 pb-2 no-arrow text-body-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"><i class="bi bi-share"></i></button>
 						<ul class="dropdown-menu">
 							<li><button class="dropdown-item" onclick="copyFull(`{{ trimContent(question.content, 30) + ' — ' + trimContent(answer.content, 30) }} {{ cfg.instance.fullBaseUrl + url_for('viewQuestion',question_id=question.id) }}`)"><i class="bi bi-copy me-1"></i> Copy to clipboard</button></li>
 							<li>
@@ -63,7 +63,7 @@
 						</ul>
 					</div>
 					<div class="dropdown">
-						<button class="btn pt-2 pb-2 no-arrow text-body-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"><i class="bi bi-three-dots"></i></button>
+						<button class="btn btn-basic pt-2 pb-2 no-arrow text-body-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"><i class="bi bi-three-dots"></i></button>
 						<ul class="dropdown-menu">
 							<li><button class="dropdown-item" onclick="copy({{ question.id }})"><i class="bi bi-copy me-1"></i> Copy link</button></li>
 							{% if logged_in %}
@@ -76,26 +76,26 @@
 		</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">
-											<h1 class="modal-title fs-5" id="q-{{ question.id }}-modal-label">Share on Fediverse</h1>
-											<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-										</div>
-										<div class="modal-body">
-											<div class="form-group mb-3">
-												<label for="fediInstance">Fediverse instance domain:</label>
-												<input type="text" id="fediInstance-{{question.id}}" name="fediInstance" class="form-control">
-											</div>
-										</div>
-										<div class="modal-footer">
-											<button type="button" class="btn" data-bs-dismiss="modal">Cancel</button>
-											<button type="button" class="btn btn-primary" data-bs-dismiss="modal" onclick="shareOnFediverse('{{ question.id }}', `{{ urllib.parse.quote(trimContent(question.content, 30) + ' — ' + trimContent(answer.content, 30),safe='') }}%20{{ urllib.parse.quote(cfg.instance.fullBaseUrl + '/q/' + str(question.id) + '/',safe='') }}`)">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">
+				<h1 class="modal-title fs-5" id="q-{{ question.id }}-modal-label">Share on Fediverse</h1>
+				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+			</div>
+			<div class="modal-body">
+				<div class="form-group mb-3">
+					<label for="fediInstance">Fediverse instance domain:</label>
+					<input type="text" id="fediInstance-{{question.id}}" 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('{{ question.id }}', `{{ urllib.parse.quote(trimContent(question.content, 30) + ' — ' + trimContent(answer.content, 30),safe='') }}%20{{ urllib.parse.quote(cfg.instance.fullBaseUrl + '/q/' + str(question.id) + '/',safe='') }}`)">Share</button>
+			</div>
+		</div>
+	</div>
+</div>
 {% endblock %}
 {% block scripts %}
 <script>
@@ -114,29 +114,41 @@ function shareOnFediverse(questionId, contentToShare) {
 
 </script>
 <script>
-		const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
+	const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
 	const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl));
 
-	const appendAlert = (elementId, message, type) => {
-		const alertPlaceholder = document.getElementById(elementId);
-		const alertHtml = `
-		<div class="alert alert-${type} alert-dismissible" role="alert">
-		<div>${message}</div>
-		<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-		</div>
-		`;
-
-		alertPlaceholder.outerHTML = alertHtml;
-	}
-
 	document.addEventListener('htmx:afterRequest', function(event) {
+		if (event.detail.target.id != "question-count") {
+			document.getElementById('ask-btn').removeAttribute('disabled');
+		}
 		const jsonResponse = event.detail.xhr.response;
 		if (jsonResponse) {
 			const parsed = JSON.parse(jsonResponse);
-			const msgType = event.detail.successful ? 'success' : 'error';
+			const alertType = event.detail.successful ? 'success' : 'danger';
+			msgType = event.detail.successful ? parsed.message : parsed.error;
 			const targetElementId = event.detail.target.id;
-			appendAlert(targetElementId, parsed.message, msgType);
+			if (targetElementId != "question-count") {
+				if (document.getElementById(targetElementId) && targetElementId.includes("question-")) {
+					document.getElementById(targetElementId).outerHTML = '';
+				}
+				if (msgType) {
+					Toastify({
+						text: msgType,
+						duration: 3000,
+						gravity: "top",
+						position: "right",
+						stopOnFocus: true,
+						className: `alert alert-${alertType} shadow alert-dismissible`,
+						close: true
+					}).showToast();
+				}
+				console.log(event.detail.requestConfig.elt);
+				if (event.detail.requestConfig.elt.id == 'question-form') {
+					document.getElementById('question-form').reset();
+					document.getElementById('charCount').textContent = "{{ cfg.charLimit }}";
+				}
+			}
 		}
-	})
+	});
 </script>
 {% endblock %}