theming refactor

moved server side for a better page loading experience and less javascript mess
This commit is contained in:
vabene1111
2020-02-13 23:47:24 +01:00
parent c08e30c5a9
commit cc7422a503
10 changed files with 160 additions and 80 deletions

View File

@@ -1,5 +1,6 @@
{% extends "base.html" %}
{% load i18n %}
{% load crispy_forms_tags %}
{% load static %}
{% block title %}{% trans 'Settings' %}{% endblock %}
@@ -40,57 +41,13 @@
<h4><i class="fas fa-palette"></i>{% trans 'Style' %}</h4>
<div class="row">
<div class="col col-md-12">
<label>
{% trans 'Choose Theme' %}
<select class="form-control" id="id_select_theme" onchange="changeTheme()">
<option value="{% static 'themes/bootstrap.min.css' %}">{% trans 'Default' %}</option>
<option value="{% static 'themes/flatly.min.css' %}">Flatly</option>
<!--<option value="{% static 'themes/darkly.min.css' %}">Darkly</option>-->
<option value="{% static 'themes/superhero.min.css' %}">Superhero</option>
</select>
</label>
</div>
</div>
<form action="." method="post">
{% csrf_token %}
{{ form|crispy }}
<button class="btn btn-success" type="submit"><i class="fas fa-save"></i> {% trans 'Save' %}</button>
</form>
<div class="row">
<div class="col col-md-12">
<label>
{% trans 'Choose Navigation Color' %}
<select class="form-control" id="id_select_color" onchange="changeNavColor()">
<option value="primary">Primary</option>
<option value="secondary">Secondary</option>
<option value="info">Info</option>
<option value="success">Success</option>
<option value="warning">Warning</option>
<option value="danger">Danger</option>
</select>
</label>
</div>
</div>
<br/>
<br/>
<script type="text/javascript">
if (theme !== "") {
$('#id_select_theme').val(theme)
}
if (nav_color !== "") {
$('#id_select_color').val(nav_color)
}
function changeTheme() {
let theme = $('#id_select_theme').val();
document.cookie = "theme=" + theme + "; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=/";
location.reload();
}
function changeNavColor() {
let color = $('#id_select_color').val();
document.cookie = "color=" + color + "; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=/";
location.reload();
}
</script>
{% endblock %}