1
0
mirror of https://gitlab.com/animath/si/plateforme.git synced 2025-06-21 12:38:26 +02:00

Use Bootstrap 5 instead of Bootstrap 4

This commit is contained in:
Emmy D'Anello
2023-02-20 14:52:25 +01:00
parent 5abca36498
commit ea00657405
20 changed files with 254 additions and 262 deletions

View File

@ -23,7 +23,7 @@
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.14.0-beta3/css/bootstrap-select.min.css">
{# JQuery and Bootstrap JavaScript #}
<script src="{% static 'jquery/jquery-3.6.0.min.js' %}"></script>
<script src="{% static 'jquery/jquery.min.js' %}"></script>
<script src="{% static 'bootstrap/js/bootstrap.bundle.min.js' %}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.14.0-beta3/js/bootstrap-select.min.js"></script>
@ -37,13 +37,13 @@
{% block extracss %}{% endblock %}
</head>
<body class="d-flex w-100 h-100 flex-column">
<main class="mb-auto">
<nav class="navbar navbar-expand-md navbar-light bg-light fixed-navbar shadow-sm">
<nav class="navbar navbar-expand-lg navbar-light bg-light 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">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarNavDropdown"
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarNavDropdown"
aria-controls="navbarNavDropdown" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
@ -54,7 +54,7 @@
<a href="{% url "index" %}" class="nav-link"><i class="fas fa-home"></i> {% trans "Home" %}</a>
</li>
<li class="nav-item active">
<a href="#" class="nav-link" data-toggle="modal" data-target="#tournamentListModal">
<a href="#" class="nav-link" data-bs-toggle="modal" data-bs-target="#tournamentListModal">
<i class="fas fa-calendar-day"></i> {% trans "Tournaments" %}
</a>
</li>
@ -63,17 +63,17 @@
<a href="{% url "registration:user_list" %}" class="nav-link"><i class="fas fa-user"></i> {% trans "Users" %}</a>
</li>
<li class="nav-item active">
<a href="#" class="nav-link" data-toggle="modal" data-target="#teamsModal"><i class="fas fa-users"></i> {% trans "Teams" %}</a>
<a href="#" class="nav-link" data-bs-toggle="modal" data-bs-target="#teamsModal"><i class="fas fa-users"></i> {% trans "Teams" %}</a>
</li>
{% elif user.is_authenticated and user.registration.participates %}
{% if not user.registration.team %}
<li class="nav-item active">
<a href="#" class="nav-link" data-toggle="modal" data-target="#createTeamModal">
<a href="#" class="nav-link" data-bs-toggle="modal" data-bs-target="#createTeamModal">
<i class="fas fa-users"></i> {% trans "Create team" %}
</a>
</li>
<li class="nav-item active">
<a href="#" class="nav-link" data-toggle="modal" data-target="#joinTeamModal">
<a href="#" class="nav-link" data-bs-toggle="modal" data-bs-target="#joinTeamModal">
<i class="fas fa-users"></i> {% trans "Join team" %}
</a>
</li>
@ -100,13 +100,13 @@
</li>
{% endif %}
</ul>
<ul class="navbar-nav ml-auto">
<ul class="navbar-nav ms-auto">
{% if user.registration.is_admin %}
<form class="navbar-form" role="search" onsubmit="event.preventDefault()">
<form class="navbar-form d-flex" role="search" onsubmit="event.preventDefault()">
<div class="input-group">
<input type="text" class="form-control" placeholder="{% trans "Search..." %}" name="q" id="search-term" value="{{ request.GET.q }}">
<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-toggle="modal" data-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"></i></button>
</div>
</div>
</form>
@ -121,38 +121,41 @@
<a class="nav-link" href="{% url "registration:signup" %}"><i class="fas fa-user-plus"></i> {% trans "Register" %}</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#" data-toggle="modal" data-target="#loginModal">
<a class="nav-link" href="#" data-bs-toggle="modal" data-bs-target="#loginModal">
<i class="fas fa-sign-in-alt"></i> {% trans "Log in" %}
</a>
</li>
{% else %}
<li class="dropdown">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-user"></i> {{ user.first_name }} {{ user.last_name }}
</a>
<div class="dropdown-menu dropdown-menu-right"
aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="{% url "registration:my_account_detail" %}">
<i class="fas fa-user"></i> {% trans "My account" %}
</a>
<a class="dropdown-item" href="{% url "logout" %}">
<i class="fas fa-sign-out-alt"></i> {% trans "Log out" %}
</a>
</div>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdownMenuLink">
<li>
<a class="dropdown-item" href="{% url "registration:my_account_detail" %}">
<i class="fas fa-user"></i> {% trans "My account" %}
</a>
</li>
<li>
<a class="dropdown-item" href="{% url "logout" %}">
<i class="fas fa-sign-out-alt"></i> {% trans "Log out" %}
</a>
</li>
</ul>
</li>
{% endif %}
</ul>
</div>
</div>
</nav>
<main class="mb-auto flex-shrink-0">
{% block fullcontent %}
<div class="{% block containertype %}container{% endblock %} my-3">
{% block contenttitle %}{% endblock %}
{% if user.is_authenticated and not user.registration.email_confirmed %}
<div class="alert alert-warning alert-dismissible">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
{% url "registration:email_validation_resend" pk=user.pk as send_email_url %}
{% blocktrans trimmed %}
Your email address is not validated. Please click on the link you received by email.
@ -173,13 +176,15 @@
<footer class="bg-light text-primary mt-auto py-2">
<div class="container-fluid">
<div class="row">
<div class="col-10">
<div class="col-sm-1">
<span class="text-muted mr-1">
<a target="_blank" href="mailto:&#99;&#111;&#110;&#116;&#97;&#99;&#116;&#64;&#116;&#102;&#106;&#109;&#46;&#111;&#114;&#103;"
class="text-muted"><i class="fas fa-envelope"></i> {% trans "Contact us" %}</a>
</span>
</div>
<div class="col-sm-1">
<form action="{% url 'set_language' %}" method="post"
class="form-inline">
<span class="text-muted mr-1">
<a target="_blank" href="mailto:&#99;&#111;&#110;&#116;&#97;&#99;&#116;&#64;&#116;&#102;&#106;&#109;&#46;&#111;&#114;&#103;"
class="text-muted"><i class="fas fa-envelope"></i> {% trans "Contact us" %}</a>
</span>
{% csrf_token %}
<select title="language" name="language"
class="form-control form-control-sm language"
@ -196,15 +201,18 @@
</select> &nbsp;
<noscript>
<input type="submit">
</noscript> &nbsp;
</noscript>
</form>
</div>
<div class="col-sm-9">
<a target="_blank" class="text-muted" href="{% url "about" %}">{% trans "About" %}</a> &nbsp; &mdash; &nbsp;
<a target="_blank" class="text-muted"
href="https://gitlab.com/animath/si/plateforme-tfjm">
<i class="fab fa-gitlab"></i>
</a>
</form>
</div>
<div class="col text-right">
<div class="col-sm-1 text-end">
<a href="#" class="text-muted">
<i class="fa fa-arrow-up" aria-hidden="true"></i>
</a>
@ -244,19 +252,19 @@
$(".invalid-feedback").addClass("d-block");
$(document).ready(function () {
$('a[data-target="#tournamentListModal"]').click(function() {
$('a[data-bs-target="#tournamentListModal"]').click(function() {
let modalBody = $("#tournamentListModal div.modal-body");
if (!modalBody.html().trim())
modalBody.load("{% url "participation:tournament_list" %} #form-content")
});
{% if user.is_authenticated and user.registration.is_admin %}
$('a[data-target="#teamsModal"]').click(function() {
$('a[data-bs-target="#teamsModal"]').click(function() {
let modalBody = $("#teamsModal div.modal-body");
if (!modalBody.html().trim())
modalBody.load("{% url "participation:team_list" %} #form-content")
});
$('button[data-target="#searchModal"]').click(function() {
$('button[data-bs-target="#searchModal"]').click(function() {
let modalBody = $("#searchModal div.modal-body");
let q = encodeURI($("#search-term").val());
modalBody.load("{% url "haystack_search" %}?q=" + q + " #search-results");
@ -264,7 +272,7 @@
{% endif %}
{% if not user.is_authenticated %}
$('a[data-target="#loginModal"]').click(function() {
$('a[data-bs-target="#loginModal"]').click(function() {
let modalBody = $("#loginModal div.modal-body");
if (!modalBody.html().trim())
modalBody.load("{% url "login" %} #form-content")
@ -272,12 +280,12 @@
{% endif %}
{% if user.is_authenticated and user.registration.participates and not user.registration.team %}
$('a[data-target="#createTeamModal"]').click(function() {
$('a[data-bs-target="#createTeamModal"]').click(function() {
let modalBody = $("#createTeamModal div.modal-body");
if (!modalBody.html().trim())
modalBody.load("{% url "participation:create_team" %} #form-content");
});
$('a[data-target="#joinTeamModal"]').click(function() {
$('a[data-bs-target="#joinTeamModal"]').click(function() {
let modalBody = $("#joinTeamModal div.modal-body");
if (!modalBody.html().trim())
modalBody.load("{% url "participation:join_team" %} #form-content");

View File

@ -6,9 +6,7 @@
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">{{ modal_title }}</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">{{ modal_content }}</div>
<div class="modal-footer">
@ -16,7 +14,7 @@
{% if modal_button %}
<button type="submit" class="btn btn-{{ modal_button_type|default:"primary" }}">{{ modal_button }}</button>
{% endif %}
<button type="button" class="btn btn-secondary" data-dismiss="modal">{% trans "Close" %}</button>
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% trans "Close" %}</button>
</div>
</div>
</form>

View File

@ -14,14 +14,15 @@
</p>
</div>
<div class="jumbotron bg-white">
<div class="row">
<h1 class="display-3">
<div class="jumbotron bg-white 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> !
</h1>
</div>
</div>
<div class="row jumbotron bg-white">
<div class="row bg-white p-5">
<div class="col-sm">
<h3>
Tu souhaites participer au 𝕋𝔽𝕁𝕄² ?
@ -29,7 +30,7 @@
Ton équipe est déjà formée ?
</h3>
</div>
<div class="col-sm text-right">
<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>
@ -37,7 +38,7 @@
</div>
</div>
<div class="jumbotron">
<div class="jumbotron p-5 border rounded-5 bg-light">
<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>.