mirror of
https://codeberg.org/catask-org/catask.git
synced 2025-04-19 13:23:41 -05:00
many admin panel changes
This commit is contained in:
mystie
parent
207c4dd842
commit
5bea0ff24b
1 changed files with 299 additions and 173 deletions
|
|
@ -3,17 +3,21 @@
|
|||
{% set adminLink = 'active' %}
|
||||
{% block additionalHeadItems %}
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/toastify.css') }}">
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/coloris.min.css') }}">
|
||||
{% endblock %}
|
||||
{% block content %}
|
||||
<h1 class="mb-3">Admin panel</h1>
|
||||
<!-- this is actually not used anymore, but htmx requires a valid target so we have to use it -->
|
||||
<div id="response-container"></div>
|
||||
<a class="btn d-lg-none mb-2" href="#preview">Skip to preview</a>
|
||||
<form hx-trigger="click from:#saveConfig, keyup[ctrlKey&&key=='Enter']" hx-post="{{ url_for('api.updateConfig') }}" hx-target="#response-container" hx-swap="none">
|
||||
<a class="visually-hidden-focusable" href="#preview">Skip to preview</a>
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<h2 id="instance">Instance</h2>
|
||||
<div class="col mw-100">
|
||||
<form hx-post="{{ url_for('api.updateConfig') }}" hx-target="#response-container" hx-swap="none">
|
||||
<h2 id="instance" class="mb-3 fw-normal d-flex align-items-center justify-content-between">
|
||||
Instance
|
||||
<button type="button" class="btn btn-outline-secondary btn-sm" data-bs-toggle="collapse" data-bs-target="#preview-collapse" aria-expanded="true" aria-controls="preview-collapse"><i class="bi bi-arrows-expand-vertical me-1"></i> Toggle preview</button>
|
||||
</h2>
|
||||
<div class="form-group mb-3">
|
||||
<label class="form-label" for="instance.title">Title <small class="text-body-secondary">(e.g. My question box)</small></label>
|
||||
<input type="text" id="instance.title" name="instance.title" value="{{ cfg.instance.title }}" oninput="updateText('instance.title', 'title')" class="form-control">
|
||||
|
|
@ -40,12 +44,118 @@
|
|||
<input type="text" id="instance.image" name="instance.image" value="{{ cfg.instance.image }}" class="form-control">
|
||||
<p class="form-text">Image that's going to be used in a link preview</p>
|
||||
</div>
|
||||
<div class="form-group mb-4">
|
||||
<div class="form-group mb-2">
|
||||
<label class="form-label" for="instance.fullBaseUrl">Base URL <small class="text-body-secondary">(e.g. https://ask.example.com)</small></label>
|
||||
<input type="text" id="instance.fullBaseUrl" name="instance.fullBaseUrl" value="{{ cfg.instance.fullBaseUrl }}" class="form-control">
|
||||
<p class="form-text">Full URL to homepage of this CatAsk instance without a trailing slash</p>
|
||||
</div>
|
||||
<h2 id="general">General</h2>
|
||||
<div class="form-group mb-4">
|
||||
<button type="submit" class="btn btn-primary" id="saveConfig">
|
||||
<span class="spinner-border spinner-border-sm htmx-indicator" aria-hidden="true"></span>
|
||||
<span class="visually-hidden" role="status">Loading...</span>
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<h2 id="customize" class="mb-3 fw-normal">Customize</h2>
|
||||
<h3 class="fw-light">Favicon</h3>
|
||||
<form hx-trigger="click from:#saveFavicon, keyup[ctrlKey&&key=='Enter']" hx-post="{{ url_for('api.uploadFavicon') }}" hx-target="#response-container" hx-swap="none" hx-encoding="multipart/form-data">
|
||||
<p class="m-0">Current favicon: <img src="{{ url_for('static', filename='icons/favicon/apple-touch-icon.png') }}" width="32" height="32" alt="{{ cfg.instance.title }}'s icon" class="rounded"></p>
|
||||
<div>
|
||||
<label for="favicon" class="form-label">Upload favicon</label>
|
||||
<input class="form-control" type="file" id="favicon" name="favicon">
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<button type="submit" class="btn btn-primary mt-3" id="saveFavicon">
|
||||
<span class="spinner-border spinner-border-sm htmx-indicator" aria-hidden="true"></span>
|
||||
<span class="visually-hidden" role="status">Loading...</span>
|
||||
Upload
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<form hx-trigger="click from:#saveConfig, keyup[ctrlKey&&key=='Enter']" hx-post="{{ url_for('api.updateConfig') }}" hx-target="#response-container" hx-swap="none">
|
||||
<h3 class="fw-light">Accent color</h3>
|
||||
{# <h4 class="fw-light">Color</h4> #}
|
||||
<div class="form-group d-flex flex-column">
|
||||
<label class="form-label" for="style.accentLight">Light theme</label>
|
||||
<input type="text" name="style.accentLight" id="style.accentLight" value="{{ cfg.style.accentLight }}" class="form-control" data-coloris>
|
||||
<p class="form-text">Default: <b>#6345d9</b></p>
|
||||
</div>
|
||||
<div class="form-group d-flex flex-column">
|
||||
<label class="form-label" for="style.accentDark">Dark theme</label>
|
||||
<input type="text" name="style.accentDark" id="style.accentDark" value="{{ cfg.style.accentDark }}" class="form-control" data-coloris>
|
||||
<p class="form-text">Default: <b>#7259d9</b></p>
|
||||
</div>
|
||||
{# brain doesn't feel like implementing this rn (9/27/24)
|
||||
<h4 class="fw-light mt-2">Background</h4>
|
||||
<div class="form-group d-flex flex-column">
|
||||
<label class="form-label" for="style.bgLight">Light theme</label>
|
||||
<input type="text" name="style.bgLight" id="style.bgLight" value="{{ cfg.style.bgLight }}" class="form-control" data-coloris>
|
||||
<p class="form-text">Default: <b>#ffffff</b></p>
|
||||
</div>
|
||||
<div class="form-group d-flex flex-column">
|
||||
<label class="form-label" for="style.bgDark">Dark theme</label>
|
||||
<input type="text" name="style.bgDark" id="style.bgDark" value="{{ cfg.style.bgDark }}" class="form-control" data-coloris>
|
||||
<p class="form-text">Default: <b>#202020</b></p>
|
||||
</div>
|
||||
#}
|
||||
<div class="form-check mb-3">
|
||||
<input
|
||||
class="form-check-input"
|
||||
type="checkbox"
|
||||
name="_style.tintColors"
|
||||
id="_style.tintColors"
|
||||
value="{{ cfg.style.tintColors }}"
|
||||
{% if cfg.style.tintColors == true %}checked{% endif %}>
|
||||
<input type="hidden" id="style.tintColors" name="style.tintColors" value="{{ cfg.style.tintColors }}">
|
||||
<label for="_style.tintColors" class="form-check-label">Tint all colors with accent color</label>
|
||||
</div>
|
||||
{#
|
||||
<div class="form-check mb-3">
|
||||
<input
|
||||
class="form-check-input"
|
||||
type="checkbox"
|
||||
name="_style.tintBackground"
|
||||
id="_style.tintBackground"
|
||||
value="{{ cfg.style.tintBackground }}"
|
||||
{% if cfg.style.tintBackground == true %}checked{% endif %}>
|
||||
<input type="hidden" id="style.tintBackground" name="style.tintBackground" value="{{ cfg.style.tintBackground }}">
|
||||
<label for="_style.tintBackground" class="form-check-label">Tint background with accent color</label>
|
||||
</div>
|
||||
#}
|
||||
<h3 class="fw-light">Navbar link style</h3>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="radio" name="style.navStyle" id="style.navStyle.underline" value="underline" {% if cfg.style.navStyle == 'underline' %}checked{% endif %}>
|
||||
<label class="form-check-label" for="style.navStyle.underline">
|
||||
Underline <span class="text-body-secondary">(default)</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check mb-4">
|
||||
<input class="form-check-input" type="radio" name="style.navStyle" id="style.navStyle.pills" value="pills" {% if cfg.style.navStyle == 'pills' %}checked{% endif %}>
|
||||
<label class="form-check-label" for="style.navStyle.pills">
|
||||
Pills
|
||||
</label>
|
||||
</div>
|
||||
<h3 class="fw-light">Info box layout</h3>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="radio" name="style.infoBoxLayout" id="style.infoBoxLayout.column" value="column" {% if cfg.style.infoBoxLayout == 'column' %}checked{% endif %}>
|
||||
<label class="form-check-label" for="style.infoBoxLayout.column">
|
||||
Column <span class="text-body-secondary">(default)</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check mb-4">
|
||||
<input class="form-check-input" type="radio" name="style.infoBoxLayout" id="style.infoBoxLayout.row" value="row" {% if cfg.style.infoBoxLayout == 'row' %}checked{% endif %}>
|
||||
<label class="form-check-label" for="style.infoBoxLayout.row">
|
||||
Row
|
||||
</label>
|
||||
</div>
|
||||
<h3 class="fw-light">Trimmed content</h3>
|
||||
<div class="form-group mb-3">
|
||||
<label class="form-label" for="trimContentAfter">Trim content after (characters)</label>
|
||||
<input type="number" id="trimContentAfter" name="trimContentAfter" value="{{ cfg.trimContentAfter }}" class="form-control">
|
||||
<p class="form-text">Maximum length of content before it gets trimmed (used in sharing options); set to 0 to disable</p>
|
||||
</div>
|
||||
<h2 id="general" class="mb-3 fw-normal">General</h2>
|
||||
<div class="form-group mb-3">
|
||||
<label class="form-label" for="charLimit">Question character limit</label>
|
||||
<input type="number" id="charLimit" name="charLimit" value="{{ cfg.charLimit }}" class="form-control">
|
||||
|
|
@ -57,16 +167,6 @@
|
|||
<p class="form-text">This name will be used for questions asked to you by anonymous users</p>
|
||||
</div>
|
||||
|
||||
<!-- reserved for 1.5.0 or later -->
|
||||
<!-- <h3>Info block layout</h3> -->
|
||||
<!-- <div class="btn-group mb-4 w-100" role="group" aria-label="Info block layout toggle button group"> -->
|
||||
<!-- <input type="radio" class="btn-check" name="infoBlockLayout" id="columnLayout" autocomplete="off" checked> -->
|
||||
<!-- <label class="btn btn-outline-secondary w-100" for="columnLayout">Column</label> -->
|
||||
<!-- -->
|
||||
<!-- <input type="radio" class="btn-check" name="infoBlockLayout" id="rowLayout" autocomplete="off"> -->
|
||||
<!-- <label class="btn btn-outline-secondary w-100" for="rowLayout">Row</label> -->
|
||||
<!-- </div> -->
|
||||
|
||||
<div class="form-check mb-2">
|
||||
<input
|
||||
class="form-check-input"
|
||||
|
|
@ -123,7 +223,7 @@
|
|||
<form hx-trigger="click from:#save-blacklist, keyup[ctrlKey&&key=='Enter']" hx-post="{{ url_for('admin.index') }}" hx-target="#response-container" hx-swap="none">
|
||||
<input type="hidden" name="action" value="update_word_blacklist">
|
||||
<div class="form-group mb-3">
|
||||
<label class="form-label" for="blacklist_cat"><h2 id="blacklist">Word blacklist</h2></label>
|
||||
<label class="form-label" for="blacklist_cat"><h2 id="blacklist" class="fw-normal">Word blacklist</h2></label>
|
||||
<p class="text-body-secondary">Blacklisted words for questions; one word per line</p>
|
||||
<textarea id="blacklist_cat" name="blacklist" style="height: 300px; resize: vertical;" class="form-control">{{ blacklist }}</textarea>
|
||||
<button type="submit" class="btn btn-primary mt-3" id="save-blacklist">
|
||||
|
|
@ -134,12 +234,15 @@
|
|||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="col-sm-6" id="preview">
|
||||
<h2>Preview</h2>
|
||||
<button class="text-warning-emphasis d-inline-flex align-items-center btn btn-sm mw-100" type="button" data-bs-toggle="collapse" data-bs-target="#preview-warning"><i class="bi bi-exclamation-triangle fs-5 me-2"></i> The preview might not always be accurate</button>
|
||||
<div class="collapse" id="preview-warning">
|
||||
<div class="collapse show collapse-horizontal col" id="preview-collapse">
|
||||
<div>
|
||||
<div id="preview">
|
||||
<h2 class="mb-3 fw-normal">Preview</h2>
|
||||
<button class="text-warning-emphasis d-inline-flex align-items-center btn btn-sm btn-outline-secondary mw-100" type="button" data-bs-toggle="collapse" data-bs-target="#preview-warning"><i class="bi bi-exclamation-triangle me-2"></i> The preview might not be accurate <i class="bi bi-chevron-down ms-1 small"></i></button>
|
||||
<div class="collapse" id="preview-warning">
|
||||
<small class="mt-2 text-body-secondary">The preview is not guaranteed to render the same as on other pages, because it uses a different renderer (<b>marked (js)</b> while everything else uses <b>mistune (python)</b>)<br>The reason for this is live markdown rendering support</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 class="h1 text-center fw-bold mt-4" id="title">{{ cfg.instance.title }}</h3>
|
||||
{% autoescape off %}
|
||||
|
|
@ -162,32 +265,54 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
{% block scripts %}
|
||||
<script src="{{ url_for('static', filename='js/toastify.min.js') }}"></script>
|
||||
<script src="{{ url_for('static', filename='js/marked.min.js') }}"></script>
|
||||
<script src="{{ url_for('static', filename='js/coloris.min.js') }}"></script>
|
||||
<script>
|
||||
marked.use({
|
||||
Coloris({
|
||||
theme: 'square',
|
||||
themeMode: 'auto',
|
||||
formatToggle: true,
|
||||
alpha: false,
|
||||
swatches: [
|
||||
'#c70f0f', // Red
|
||||
'#db5d0e', // Orange
|
||||
'#968829', // Yellow
|
||||
'#217d1a', // Green
|
||||
'#28b59b', // Turquoise
|
||||
'#338FFF', // Blue
|
||||
'#3358ff',
|
||||
'#6345d9', // Indigo
|
||||
'#A833FF', // Purple
|
||||
'#d1298b' // Pink
|
||||
],
|
||||
});
|
||||
marked.use({
|
||||
breaks: true,
|
||||
gfm: true,
|
||||
});
|
||||
function updateText(input, element) {
|
||||
});
|
||||
function updateText(input, element) {
|
||||
const inputEl = document.getElementById(input);
|
||||
const replaceEl = document.getElementById(element);
|
||||
replaceEl.innerHTML = marked.parse(inputEl.value);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<script>
|
||||
// fix handling checkboxes and radios
|
||||
document.querySelectorAll('.form-check-input, .btn-check').forEach(function(checkbox) {
|
||||
// fix handling checkboxes
|
||||
document.querySelectorAll('.form-check-input[type=checkbox]').forEach(function(checkbox) {
|
||||
checkbox.addEventListener('change', function() {
|
||||
checkbox.nextElementSibling.value = this.checked ? 'True' : 'False';
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<script>
|
||||
document.addEventListener('htmx:afterRequest', function(event) {
|
||||
const forms = document.querySelectorAll('form');
|
||||
forms.forEach((form) => {
|
||||
form.addEventListener('htmx:afterRequest', function(event) {
|
||||
console.log("reached event listener");
|
||||
const jsonResponse = event.detail.xhr.response;
|
||||
if (jsonResponse) {
|
||||
|
|
@ -207,5 +332,6 @@ function updateText(input, element) {
|
|||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue