catask/templates/admin/categories/customize.html

{% extends 'admin/base.html' %}
{% block _title %}Customize{% endblock %}
{% set custom_link = 'active' %}
{% block _content %}
	<h2 id="customize" class="mb-3 fw-normal">Customize</h2>
	<h3 class="fw-light">Favicon</h3>
	<form 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 class="mt-2">
			<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>
				<i class="bi bi-file-earmark-arrow-up me-1"></i> Upload
			</button>
		</div>
	</form>
	<form 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 title="Click to open the color picker">
			<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 title="Click to open the color picker">
			<p class="form-text">Default: <b>#7a63e3</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="btn-group mb-4 w-100" role="group" aria-label="Navbar link style group">
			<input class="btn-check" type="radio" name="style.navStyle" id="style.navStyle.underline" value="underline" {% if cfg.style.navStyle == 'underline' %}checked{% endif %}>
			<label class="btn btn-outline-secondary w-50" for="style.navStyle.underline">
				Underline
			</label>
			<input class="btn-check" type="radio" name="style.navStyle" id="style.navStyle.pills" value="pills" {% if cfg.style.navStyle == 'pills' %}checked{% endif %}>
			<label class="btn btn-outline-secondary w-50" for="style.navStyle.pills">
				Pills
			</label>
		</div>
		<h3 class="fw-light">Homepage layout</h3>
		<div class="btn-group mb-4 w-100" role="group" aria-label="General layout group">
			<input class="btn-check" type="radio" name="style.homepageLayout" id="style.homepageLayout.catask" value="catask" {% if cfg.style.homepageLayout == 'catask' %}checked{% endif %}>
			<label class="btn btn-outline-secondary w-50" for="style.homepageLayout.catask">
				CatAsk
			</label>
			<input class="btn-check" type="radio" name="style.homepageLayout" id="style.homepageLayout.retrospring" value="retrospring" {% if cfg.style.homepageLayout == 'retrospring' %}checked{% endif %}>
			<label class="btn btn-outline-secondary w-50" for="style.homepageLayout.retrospring">
				Retrospring
			</label>
		</div>
		<h3 class="fw-light">Info box layout</h3>
		<div class="btn-group mb-4 w-100" role="group" aria-label="Info box layout group">
			<input class="btn-check" type="radio" name="style.infoBoxLayout" id="style.infoBoxLayout.column" value="column" {% if cfg.style.infoBoxLayout == 'column' %}checked{% endif %}>
			<label class="btn btn-outline-secondary w-50" for="style.infoBoxLayout.column">
				Column
			</label>
			<input class="btn-check" type="radio" name="style.infoBoxLayout" id="style.infoBoxLayout.row" value="row" {% if cfg.style.infoBoxLayout == 'row' %}checked{% endif %}>
			<label class="btn btn-outline-secondary w-50" 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>
		<div class="form-group">
			<button type="submit" class="btn btn-primary mt-3" 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>
{% endblock %}
{% block _scripts %}
<script src="{{ url_for('static', filename='js/coloris.min.js') }}"></script>
<script>
	Coloris({
		theme: 'square',
		themeMode: 'auto',
		formatToggle: true,
		alpha: false,
		swatches: [
			'#c70f0f',  // Red
		    '#db5d0e',  // Orange
		    '#968829',  // Yellow
		    '#217d1a',  // Green
		    '#28b59b',  // Turquoise
		    '#338FFF',  // Blue
		    '#3358ff',
		    '#7a63e3',  // Indigo
		    '#A833FF',  // Purple
		    '#d1298b'   // Pink
		    ],
	});
</script>
<script>
	// 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>
{% endblock %}