ynerant/plateforme-tfjm2
1
0
Fork 0
mirror of https://gitlab.com/animath/si/plateforme.git synced 2025-06-21 16:38:23 +02:00
Code Issues Releases Wiki Activity

Add dark theme based on browser preference

Browse Source
This commit is contained in:
Emmy D'Anello
2023-02-20 23:02:09 +01:00
parent 91d39b44a2
commit ff414ea046
13 changed files with 75 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
tfjm/templates/base.html
View File

@ -38,10 +38,10 @@
{% block extracss %}{% endblock %}
</head>
<body class="d-flex w-100 h-100 flex-column">
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-navbar shadow-sm">
<nav class="navbar navbar-expand-lg fixed-navbar shadow-sm">
<div class="container-fluid">
<a class="navbar-brand" href="https://tfjm.org/">
<img src="{% static "tfjm.svg" %}" style="width: 42px;" alt="Logo TFJM²" id="navbar-logo">
<img src="{% static "tfjm.svg" %}" style="height: 2em;" alt="Logo TFJM²" id="navbar-logo">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarNavDropdown"
@ -107,7 +107,7 @@
<div class="input-group">
<input type="text" class="form-control" placeholder="{% trans "Search…" %}" name="q" id="search-term" value="{{ request.GET.q }}">
<div class="input-group-btn">
<button class="btn btn-default" data-bs-toggle="modal" data-bs-target="#searchModal"><i class="fa fa-search"></i></button>
<button class="btn btn-default" data-bs-toggle="modal" data-bs-target="#searchModal"><i class="fa fa-search text-body"></i></button>
</div>
</div>
</form>
@ -174,7 +174,7 @@
{% endblock %}
</main>
<footer class="bg-light text-primary mt-auto py-2">
<footer class="text-primary mt-auto py-2">
<div class="container-fluid">
<div class="row">
<div class="col-sm-1">
@ -248,26 +248,13 @@
{% include "base_modal.html" with modal_id="login" %}
{% endif %}
<script src="{% static 'main.js' %}"></script>
<script src="{% static 'theme.js' %}"></script>
<script>
CSRF_TOKEN = "{{ csrf_token }}";
document.querySelectorAll(".invalid-feedback").forEach(elem => elem.classList.add('d-block'))
function initModal(target, url, content_id = 'form-content') {
document.querySelector('[data-bs-target="#' + target + 'Modal"]').addEventListener('click', () => {
let modalBody = document.querySelector("#" + target + "Modal div.modal-body")
if (!modalBody.innerHTML.trim()) {
if (url instanceof Function) url = url()
fetch(url, {headers: {'CONTENT-ONLY': '1'}})
.then(resp => resp.text())
.then(resp => new DOMParser().parseFromString(resp, 'text/html'))
.then(res => modalBody.innerHTML = res.getElementById(content_id).outerHTML)
.then(() => $('.selectpicker').selectpicker()) // TODO Update that when the library will be JQuery-free
}
})
}
document.addEventListener('DOMContentLoaded', () => {
initModal("tournamentList", "{% url "participation:tournament_list" %}")