some slight ui improvements

templates/admin/categories/emojis.html

@@ -3,7 +3,7 @@
 {% set emojis_link = 'active' %}
 {% block _content %}
 	<h2 id="customEmojis" class="mb-3 fw-normal">Custom emojis</h2>
-	<h3 class="fw-light">Upload</h3>
+	<h3 class="fw-light mb-3">Upload</h3>
 	<form hx-post="{{ url_for('api.uploadEmoji') }}" hx-target="#response-container" hx-swap="none" hx-encoding="multipart/form-data">
 		<div>
 			<label for="emoji" class="form-label">Upload an emoji</label>
@@ -18,13 +18,13 @@
 		</div>
 	</form>
 	<hr>
-	<form hx-post="{{ url_for('api.uploadEmojiPack') }}" hx-target="#response-container" hx-swap="none" hx-encoding="multipart/form-data">
+	<form id="pack-form" hx-post="{{ url_for('api.uploadEmojiPack') }}" hx-target="#response-container" hx-swap="none" hx-encoding="multipart/form-data">
 		<div>
 			<label for="emoji_archive" class="form-label">Upload emoji pack</label>
 			<input class="form-control" type="file" id="emoji_archive" name="emoji_archive">
 			<p class="form-text mb-0">Supported archive formats: <strong>.zip, .tar, .tar.gz, .tar.bz2, .tar.xz</strong></p>
 		</div>
-		<div class="mb-4">
+		<div class="mb-5">
 			<button type="submit" class="btn btn-primary mt-3" id="uploadEmojiPack">
 				<span class="spinner-border spinner-border-sm htmx-indicator" aria-hidden="true"></span>
 				<span class="visually-hidden" role="status">Loading...</span>
@@ -32,8 +32,9 @@
 			</button>
 		</div>
 	</form>
-	<h3 class="fw-light">Manage</h3>
+	<h3 class="fw-light mb-3">Manage</h3>
 	<h4 class="fw-light">Emojis</h4>
+	{% if emojis %}
 	<div class="table-responsive">
 		<table id="emojiTable" class="table align-middle">
 			<thead>
@@ -51,6 +52,9 @@
 			</tbody>
 		</table>
 	</div>
+	{% else %}
+	<p class="text-center">No emojis uploaded</p>
+	{% endif %}
 	<h4 class="fw-light mt-3">Emoji packs</h4>
 	<p class="text-body-secondary small">Please note that if meta.json is not found in the archive, preview images are selected by first emoji name to appear alphabetically, so they may not be accurate sometimes</p>
 	{% if packs %}
@@ -70,7 +74,7 @@
 			</thead>
 			<tbody id="packs">
 				{% for pack in packs %}
-				{% with json_pack = json_pack %}
+				{% with json_pack = json_pack, index = loop.index - 1 %}
 				{% include 'snippets/admin/packRow.html' %}
 				{% endwith %}
 				{% endfor %}

templates/admin/categories/general.html

@@ -14,47 +14,51 @@
 			<input type="text" id="anonName" name="anonName" value="{{ cfg.anonName }}" class="form-control">
 			<p class="form-text">This name will be used for questions asked to you by anonymous users</p>
 		</div>
-		<div class="form-check mb-2">
+		<div class="form-check form-switch mb-2">
 			<input
 			class="form-check-input"
 			type="checkbox"
 			name="_lockInbox"
 			id="_lockInbox"
 			value="{{ cfg.lockInbox }}"
-			{% if cfg.lockInbox == true %}checked{% endif %}>
+			role="switch"
+			{% if cfg.lockInbox %}checked{% endif %}>
 			<input type="hidden" id="lockInbox" name="lockInbox" value="{{ cfg.lockInbox }}">
 			<label for="_lockInbox" class="form-check-label">Lock inbox and don't allow new questions</label>
 		</div>
-		<div class="form-check mb-2">
+		<div class="form-check form-switch mb-2">
 			<input
 			class="form-check-input"
 			type="checkbox"
 			name="_allowAnonQuestions"
 			id="_allowAnonQuestions"
 			value="{{ cfg.allowAnonQuestions }}"
-			{% if cfg.allowAnonQuestions == true %}checked{% endif %}>
+			role="switch"
+			{% if cfg.allowAnonQuestions %}checked{% endif %}>
 			<input type="hidden" id="allowAnonQuestions" name="allowAnonQuestions" value="{{ cfg.allowAnonQuestions }}">
 			<label for="_allowAnonQuestions" class="form-check-label">Allow anonymous questions</label>
 		</div>
-		<div class="form-check mb-2">
+		<div class="form-check form-switch mb-2">
 			<input
 			class="form-check-input"
 			type="checkbox"
 			name="_noDeleteConfirm"
 			id="_noDeleteConfirm"
 			value="{{ cfg.noDeleteConfirm }}"
-			{% if cfg.noDeleteConfirm == true %}checked{% endif %}>
+			role="switch"
+			{% if cfg.noDeleteConfirm %}checked{% endif %}>
 			<input type="hidden" id="noDeleteConfirm" name="noDeleteConfirm" value="{{ cfg.noDeleteConfirm }}">
 			<label for="_noDeleteConfirm" class="form-check-label">Disable confirmation when deleting questions</label>
 		</div>
-		<div class="form-check mb-3">
+		<div class="form-check form-switch mb-3">
 			<input
 			class="form-check-input"
 			type="checkbox"
 			name="_showQuestionCount"
 			id="_showQuestionCount"
 			value="{{ cfg.showQuestionCount }}"
-			{% if cfg.showQuestionCount == true %}checked{% endif %}>
+			role="switch"
+			{% if cfg.showQuestionCount %}checked{% endif %}>
 			<input type="hidden" id="showQuestionCount" name="showQuestionCount" value="{{ cfg.showQuestionCount }}">
 			<label for="_showQuestionCount" class="form-check-label">Show question count in homepage</label>
 		</div>

templates/admin/login.html

@@ -1,5 +1,6 @@
 {% extends 'base.html' %}
 {% block title %}Admin Login{% endblock %}
+{% set loginLink = 'active' %}
 {% block content %}
 <div class="row">
 <div class="col-lg-4 m-auto mt-5">

templates/snippets/q-card-text.html

@@ -1,7 +1,7 @@
 <div class="card-text markdown-content">
 	{% if question.cw %}
 	<p class="text-center mb-2 fw-bold cw-text">{{ question.cw }}</p>
-	<div class="collapse question-cw" id="question-cw-{{ question.id }}">
+	<div class="collapse question-cw question-{{ question.id }}" id="question-cw-{{ question.id }}">
 		{{ question.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="#question-cw-{{ question.id }}" aria-expanded="false" aria-controls="question-cw-{{ question.id }}">
@@ -9,6 +9,8 @@
 		<span class="text-body-secondary cw-btn-chars">({{ len(question.content) }} characters)</span>
 	</button>
 	{% else %}
-	{{ question.content | render_markdown }}
+	<div class="question-{{ question.id }}">
+		{{ question.content | render_markdown }}
+	</div>
 	{% endif %}
 </div>