ynerant/plateforme-tfjm2
1
0
Fork 0
mirror of https://gitlab.com/animath/si/plateforme.git synced 2024-12-24 03:02:23 +00: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
Signed by: ynerant
GPG Key ID: 3A75C55819C8CF85
13 changed files with 75 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/participation/templates/participation/participation_detail.html
View File

@ -4,7 +4,7 @@
{% block content %}
{% trans "any" as any %}
<div class="card bg-light shadow">
<div class="card bg-body shadow">
<div class="card-header text-center">
<h4>{% trans "Participation of team" %} {{ participation.team.name }} ({{ participation.team.trigram }})</h4>
</div>

4
apps/participation/templates/participation/passage_detail.html
View File

@ -4,7 +4,7 @@
{% block content %}
{% trans "any" as any %}
<div class="card bg-light shadow">
<div class="card bg-body shadow">
<div class="card-header text-center">
<h4>{{ passage }}</h4>
</div>
@ -59,7 +59,7 @@
{% render_table notes %}
<div class="card bg-light shadow">
<div class="card bg-body shadow">
<div class="card-body">
<dl class="row">
<dt class="col-sm-8">{% trans "Average points for the defender writing:" %}</dt>

4
apps/participation/templates/participation/pool_detail.html
View File

@ -3,7 +3,7 @@
{% load django_tables2 i18n %}
{% block content %}
<div class="card bg-light shadow">
<div class="card bg-body shadow">
<div class="card-header text-center">
<h4>{{ pool }}</h4>
</div>
@ -36,7 +36,7 @@
<dd class="col-sm-9">{{ pool.bbb_url|urlize }}</dd>
</dl>
<div class="card bg-light shadow">
<div class="card bg-body shadow">
<div class="card-header text-center">
<h5>{% trans "Ranking" %}</h5>
</div>

2
apps/participation/templates/participation/team_detail.html
View File

@ -4,7 +4,7 @@
{% load crispy_forms_filters %}
{% block content %}
<div class="card bg-light shadow">
<div class="card bg-body shadow">
<div class="card-header text-center">
<h4>{{ team.name }}</h4>
</div>

4
apps/participation/templates/participation/tournament_detail.html
View File

@ -3,7 +3,7 @@
{% load getconfig i18n django_tables2 %}
{% block content %}
<div class="card bg-light shadow">
<div class="card bg-body shadow">
<div class="card-header text-center">
<h4>{{ tournament.name }}</h4>
</div>
@ -92,7 +92,7 @@
{% if notes %}
<hr>
<div class="card bg-light shadow">
<div class="card bg-body shadow">
<div class="card-header text-center">
<h5>{% trans "Ranking" %}</h5>
</div>

2
apps/registration/templates/registration/email_validation_complete.html
View File

@ -5,7 +5,7 @@ SPDX-License-Identifier: GPL-3.0-or-later
{% load i18n %}
{% block content %}
<div class="card bg-light">
<div class="card bg-body">
<h3 class="card-header text-center">
{{ title }}
</h3>

2
apps/registration/templates/registration/email_validation_email_sent.html
View File

@ -5,7 +5,7 @@ SPDX-License-Identifier: GPL-3.0-or-later
{% load i18n %}
{% block content %}
<div class="card bg-light">
<div class="card bg-body">
<h3 class="card-header text-center">
{% trans "Account activation" %}
</h3>

2
apps/registration/templates/registration/user_detail.html
View File

@ -5,7 +5,7 @@
{% block content %}
{% trans "any" as any %}
<div class="card bg-light shadow">
<div class="card bg-body shadow">
<div class="card-header text-center">
<h4>{{ user_object.first_name }} {{ user_object.last_name }}</h4>
</div>

15
tfjm/static/main.js Normal file
View File

@ -0,0 +1,15 @@
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
}
})
}

12
tfjm/static/tfjm.svg
View File

@ -14,8 +14,18 @@
sodipodi:docname="logo.svg"
width="30.311995"
height="9.7779999"
style="fill:black"
inkscape:version="0.92.2 2405546, 2018-03-11">
<style>
path {
fill: black;
}
@media (prefers-color-scheme: dark) {
path {
fill: white;
}
}
</style>
<metadata
id="metadata31">
<rdf:RDF>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.1 KiB

After

Width:  |  Height:  |  Size: 7.3 KiB

27
tfjm/static/theme.js Normal file
View File

@ -0,0 +1,27 @@
/*!
* Color mode toggler for Bootstrap's docs (https://getbootstrap.com/)
* Copyright 2011-2022 The Bootstrap Authors
* Licensed under the Creative Commons Attribution 3.0 Unported License.
*/
(() => {
'use strict'
const getPreferredTheme = () => {
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
}
const setTheme = function (theme) {
if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
document.documentElement.setAttribute('data-bs-theme', 'dark')
} else {
document.documentElement.setAttribute('data-bs-theme', theme)
}
}
setTheme(getPreferredTheme())
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
setTheme(getPreferredTheme())
})
})()

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" %}")

8
tfjm/templates/index.html
View File

@ -14,7 +14,7 @@
</p>
</div>
<div class="jumbotron bg-white p-5">
<div class="jumbotron p-5">
<div class="row text-center">
<h1 class="display-4">
Bienvenue sur le site d'inscription au <a href="https://tfjm.org/" target="_blank">𝕋𝔽𝕁𝕄²</a> !
@ -22,7 +22,7 @@
</div>
</div>
<div class="row bg-white p-5">
<div class="row p-5">
<div class="col-sm">
<h3>
Tu souhaites participer au 𝕋𝔽𝕁𝕄² ?
@ -33,12 +33,12 @@
<div class="col-sm text-end">
<div class="btn-group-vertical">
<a class="btn btn-primary btn-lg" href="{% url "registration:signup" %}" role="button">Inscris-toi maintenant !</a>
<a class="btn btn-light btn-lg" href="{% url "login" %}" role="button">J'ai déjà un compte</a>
<a class="btn btn-light text-dark btn-lg" href="{% url "login" %}" role="button">J'ai déjà un compte</a>
</div>
</div>
</div>
<div class="jumbotron p-5 border rounded-5 bg-light">
<div class="jumbotron p-5 border rounded-5">
<h5 class="display-4">Comment ça marche ?</h5>
<p>
Pour participer au 𝕋𝔽𝕁𝕄², il suffit de créer un compte sur la rubrique <strong><a href="{% url "registration:signup" %}">Inscription</a></strong>.