From 3b19d27fad4b8aa15d2cfea63510f29bdaca524f Mon Sep 17 00:00:00 2001
From: mst <oivan2401@gmail.com>
Date: Fri, 28 Feb 2025 07:24:03 +0300
Subject: [PATCH] some question card style changes

---
 templates/snippets/layout/question_card.html | 49 +++++++++++---------
 1 file changed, 26 insertions(+), 23 deletions(-)

diff --git a/templates/snippets/layout/question_card.html b/templates/snippets/layout/question_card.html
index a4662da..b7c20a9 100644
--- a/templates/snippets/layout/question_card.html
+++ b/templates/snippets/layout/question_card.html
@@ -3,48 +3,51 @@
 <div class="card mt-3 mb-3{% if question.pinned %} border-2{% endif %}" id="question-{{ question.id }}">
 	<div class="card-header{% if question.pinned %} border-2{% endif %}">
 		<div class="d-flex justify-content-between align-items-center flex-wrap text-break">
-			<h3 class="h5 card-title my-1 markdown-content w-50">
+			<h3 class="{% if cfg.style.cardStyle == 'compact' %}mt-1 mb-0{% else %}my-1{% endif %} h5 card-title markdown-content w-50">
 				{% if question.from_who %}
 				{{ render_markdown(question.from_who, fromWho=True) }}
 				{% else %}
-				<i class="bi bi-incognito" data-bs-toggle="tooltip" data-bs-title="This question was asked anonymously" data-bs-placement="top"></i> {{ cfg.anonName }}
+				<i class="bi bi-incognito" data-bs-toggle="tooltip" data-bs-title="{{ _('This question was asked anonymously') }}" data-bs-placement="top"></i> {{ cfg.anonName }}
 				{% endif %}
 			</h3>
-			<h3 class="h6 card-subtitle fw-light text-body-secondary" data-bs-toggle="tooltip" data-bs-title="{{ question.creation_date.strftime('%B %d, %Y %H:%M') }}" data-bs-placement="top">{{ formatRelativeTime(str(question.creation_date)) }}</h3>
+			<h3 class="h6 card-subtitle mt-1 fw-light text-body-secondary" data-bs-toggle="tooltip" data-bs-title="{{ question.creation_date.strftime('%B %d, %Y %H:%M') }}" data-bs-placement="top">{{ formatRelativeTime(str(question.creation_date)) }}</h3>
 		</div>
 		{% with question=question %}
 		{% include 'snippets/q-card-text.html' %}
 		{% endwith %}
 	</div>
-	<div class="card-body markdown-content" id="a-{{ question.id }}-content">
+	<div class="card-body markdown-content {% if cfg.style.cardStyle == 'compact' %}pb-0 pt-2 mt-1{% endif %}" id="a-{{ question.id }}-content">
 		{% if answer.cw %}
 		<div class="text-center mb-2 fw-bold cw-text markdown-content">{{ answer.cw | render_markdown }}</div>
 		<div class="collapse question-cw markdown-content" id="answer-cw-{{ answer.id }}">
 			{{ answer.content | render_markdown }}
 		</div>
 		<button class="z-0 cw-btn btn btn-sm btn-secondary shadow text-center w-100 sticky-bottom" type="button" data-bs-toggle="collapse" data-bs-target="#answer-cw-{{ answer.id }}" aria-expanded="false" aria-controls="answer-cw-{{ answer.id }}">
-			<span class="fw-medium cw-btn-text">Show content</span>
-			<span class="text-body-secondary cw-btn-chars">({{ len(answer.content) }} characters)</span>
+			<span class="fw-medium cw-btn-text">{{ _('Show content') }}</span>
+			<span class="text-body-secondary cw-btn-chars">({{ _("{} characters").format(len(answer.content)) }})</span>
 		</button>
 		{% else %}
 		{{ answer.content | render_markdown }}
 		{% endif %}
 	</div>
-	<div class="card-footer pt-0 pb-0 ps-3 pe-1 text-body-secondary d-flex justify-content-between align-items-center{% if question.pinned %} border-2{% endif %}">
+	<div class="card-footer {% if cfg.style.cardStyle == 'compact' %}border-0 bg-transparent{% endif %} py-0 ps-3 pe-1 text-body-secondary d-flex justify-content-between align-items-center{% if question.pinned %} border-2{% endif %}">
 		<div>
+			{% if cfg.username %}
+			<span class="text-body">{{ cfg.username }}</span><span> · </span>
+			{% endif %}
 			<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>
 			{% if question.pinned %}
-			<span class="ms-1 fw-medium"><i class="bi bi-pin"></i> Pinned</span>
+			<span class="ms-1 fw-medium"><i class="bi bi-pin"></i> {{ _('Pinned') }}</span>
 			{% endif %}
 		</div>
 		<div class="d-flex align-items-center">
 			{% if showViewQuestionBtn %}
-			<a href="{{ url_for('viewQuestion', question_id=question.id) }}" class="btn btn-basic pt-2 pb-2 text-body-secondary" data-bs-toggle="tooltip" data-bs-title="View question" aria-label="View question"><i class="bi bi-box-arrow-up-right"></i></a>
+			<a href="{{ url_for('viewQuestion', question_id=question.id) }}" class="btn btn-basic pt-2 pb-2 text-body-secondary" data-bs-toggle="tooltip" data-bs-title="{{ _('View question') }}" aria-label="View question"><i class="bi bi-box-arrow-up-right"></i></a>
 			{% endif %}
 			<div class="dropdown">
-				<button class="btn btn-basic pt-2 pb-2 no-arrow text-body-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" aria-label="Share question"><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" aria-label="{{ _('Share question') }}"><i class="bi bi-share"></i></button>
 				<ul class="dropdown-menu">
-					<li><button class="dropdown-item" onclick="copyFull(`{{ trimContent(question.content, cfg.trimContentAfter) + ' — ' + trimContent(answer.content, cfg.trimContentAfter) }} {{ cfg.instance.fullBaseUrl + url_for('viewQuestion',question_id=question.id) }}`)"><i class="bi bi-copy me-1"></i> Copy to clipboard</button></li>
+					<li><button class="dropdown-item" onclick="copyFull(`{{ trimContent(question.content, cfg.trimContentAfter) + ' — ' + trimContent(answer.content, cfg.trimContentAfter) }} {{ cfg.instance.fullBaseUrl + url_for('viewQuestion',question_id=question.id) }}`)"><i class="bi bi-copy me-1"></i> {{ _('Copy to clipboard') }}</button></li>
 					<li>
 						<button class="dropdown-item d-flex align-items-center gap-1" data-bs-toggle="modal" data-q-id="{{ question.id }}" data-bs-target="#question-modal">
 							<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 64 64" class="me-1">
@@ -119,11 +122,11 @@
 	<div class="position-relative">
 		<div class="card-header{% if question.pinned %} border-2{% endif %}">
 			<div class="d-flex justify-content-between align-items-center flex-wrap text-break">
-				<h3 class="h5 card-title mt-1 mb-1 markdown-content w-75">
+				<h3 class="{% if cfg.style.cardStyle == 'compact' %}mt-1 mb-0{% else %}my-1{% endif %} h5 card-title markdown-content w-50">
 					{% if question.from_who %}
-					{{ question.from_who | render_markdown }}
+					{{ render_markdown(question.from_who, fromWho=True) }}
 					{% else %}
-					<i class="bi bi-incognito" data-bs-toggle="tooltip" data-bs-title="This question was asked anonymously" data-bs-placement="top"></i> {{ cfg.anonName }}
+					<i class="bi bi-incognito" data-bs-toggle="tooltip" data-bs-title="{{ _('This question was asked anonymously') }}" data-bs-placement="top"></i> {{ cfg.anonName }}
 					{% endif %}
 				</h3>
 				<h3 class="h6 card-subtitle fw-light text-body-secondary" data-bs-toggle="tooltip" data-bs-title="{{ question.creation_date.strftime('%B %d, %Y %H:%M') }}" data-bs-placement="top">{{ formatRelativeTime(str(question.creation_date)) }}</h3>
@@ -133,35 +136,35 @@
 			{% endwith %}
 		</div>
 	</div>
-	<div class="card-body">
+	<div class="card-body markdown-content {% if cfg.style.cardStyle == 'compact' %}pb-0 pt-2 mt-1{% endif %}" id="a-{{ question.id }}-content">
 		{% if answer.cw %}
 		<div class="text-center mb-2 fw-bold cw-text markdown-content">{{ answer.cw | render_markdown }}</div>
 		<div class="collapse question-cw markdown-content" id="answer-cw-{{ answer.id }}">
 			{{ answer.content | render_markdown }}
 		</div>
 		<button class="z-0 cw-btn btn btn-sm btn-secondary shadow text-center w-100 sticky-bottom" type="button" data-bs-toggle="collapse" data-bs-target="#answer-cw-{{ answer.id }}" aria-expanded="false" aria-controls="answer-cw-{{ answer.id }}">
-			<span class="fw-medium cw-btn-text">Show content</span>
-			<span class="text-body-secondary cw-btn-chars">({{ len(answer.content) }} characters)</span>
+			<span class="fw-medium cw-btn-text">{{ _('Show content') }}</span>
+			<span class="text-body-secondary cw-btn-chars">({{ _("{} characters").format(len(answer.content)) }})</span>
 		</button>
 		{% else %}
-		<div class="markdown-content" id="a-{{ question.id }}-content">{{ answer.content | render_markdown }}</div>
+		{{ answer.content | render_markdown }}
 		{% endif %}
 	</div>
-	<div class="card-footer pt-0 pb-0 ps-3 pe-1 text-body-secondary d-flex justify-content-between align-items-center{% if question.pinned %} border-2{% endif %}">
+	<div class="card-footer {% if cfg.style.cardStyle == 'compact' %}border-0 bg-transparent{% endif %} py-0 ps-3 pe-1 text-body-secondary d-flex justify-content-between align-items-center{% if question.pinned %} border-2{% endif %}">
 		<div>
 			<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>
 			{% if question.pinned %}
-			<span class="ms-1"><i class="bi bi-pin"></i> <span class="fw-medium">Pinned</span></span>
+			<span class="ms-1"><i class="bi bi-pin"></i> <span class="fw-medium">{{ _('Pinned') }}</span></span>
 			{% endif %}
 		</div>
 		<div class="d-flex align-items-center">
 			{% if showViewQuestionBtn %}
-			<a href="{{ url_for('viewQuestion', question_id=question.id) }}" class="btn btn-basic pt-2 pb-2 text-body-secondary" data-bs-toggle="tooltip" data-bs-title="View question" aria-label="View question"><i class="bi bi-box-arrow-up-right"></i></a>
+			<a href="{{ url_for('viewQuestion', question_id=question.id) }}" class="btn btn-basic pt-2 pb-2 text-body-secondary" data-bs-toggle="tooltip" data-bs-title="{{ _('View question') }}" aria-label="View question"><i class="bi bi-box-arrow-up-right"></i></a>
 			{% endif %}
 			<div class="dropdown">
-				<button class="btn btn-basic pt-2 pb-2 no-arrow text-body-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" aria-label="Share question"><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" aria-label="{{ _('Share question') }}"><i class="bi bi-share"></i></button>
 				<ul class="dropdown-menu">
-					<li><button class="dropdown-item" onclick="copyFull(`{{ trimContent(question.content, cfg.trimContentAfter) + ' — ' + trimContent(answer.content, cfg.trimContentAfter) }} {{ cfg.instance.fullBaseUrl + url_for('viewQuestion',question_id=question.id) }}`)"><i class="bi bi-copy me-1"></i> Copy to clipboard</button></li>
+					<li><button class="dropdown-item" onclick="copyFull(`{{ trimContent(question.content, cfg.trimContentAfter) + ' — ' + trimContent(answer.content, cfg.trimContentAfter) }} {{ cfg.instance.fullBaseUrl + url_for('viewQuestion',question_id=question.id) }}`)"><i class="bi bi-copy me-1"></i> {{ _('Copy to clipboard') }}</button></li>
 					<li>
 						<button class="dropdown-item d-flex align-items-center gap-1" data-bs-toggle="modal" data-q-id="{{ question.id }}" data-bs-target="#question-modal">
 							<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 64 64" class="me-1">