Feat/responsivite: Prise en compte de la page de gestion de projet

SIRH/sso.py

@@ -1,9 +1,8 @@
 # SGL/sso.py
 from django.contrib.auth import get_user_model
 from django.contrib.auth.models import Group
-from simple_sso.sso_client.client import Client
-
 from gestion_employe.models import Departement, Employe
+from simple_sso.sso_client.client import Client
 
 User = get_user_model()
 

SIRH/templates/SIRH/BASE.html

@@ -17,7 +17,7 @@
             {% include 'parts/menu_application.html' %}
             <div class="row flex-nowrap">
                 {% include 'parts/menu_principal.html' %}
-                <div class="col p-4">
+                <div class="col p-1 p-sm-4">
                     {% block 'contenu' %} {% endblock %}
                 </div>
             </div>

SIRH/templates/SIRH/parts/menu_application.html

@@ -1,13 +1,12 @@
 {% load static %}
-<nav class="navbar navbar-expand-lg bg-body-tertiary">
+{% load tags_personnaliser %}
+
+<nav class="navbar d-none d-lg-block navbar-expand-lg bg-body-tertiary">
     <div class="container-fluid">
         <a class="navbar-brand" href="#">
             <img src="{% static 'img/cerfig.jpg' %}" alt="Logo" width="85" height="30" class="d-inline-block align-text-top">
         </a>
-        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
-            <span class="navbar-toggler-icon"></span>
-        </button>
-        <div class="collapse navbar-collapse" id="navbarNav">
+        <div class="collapse navbar-collapse">
             <ul class="nav nav-tabs justify-content-end w-100">
                 <li class="nav-item">
                     <a class="nav-link active" aria-current="page" href="{{ SIRH_LIEN }}">SIRH</a>
@@ -21,4 +20,80 @@
             </ul>
         </div>
     </div>
-</nav>
+</nav>
+
+<nav class="navbar d-lg-none navbar-expand-lg bg-body-tertiary">
+    <div class="container-fluid">
+        <a class="navbar-brand" href="#">
+            <img src="{% static 'img/cerfig.jpg' %}" alt="Logo" width="85" height="30" class="d-inline-block align-text-top">
+        </a>
+        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+        <div class="collapse navbar-collapse" id="navbarNavDropdown">
+            <ul class="navbar-nav">
+                <li class="nav-item">
+                    <a class="nav-link" aria-current="page" href="{% url 'gestion_employe:mon-profil' %}">
+                        <i class="bi bi-person-circle"></i> 
+                        Mon profil
+                    </a>
+                </li>
+                {% if user|has_group:"ressource_humaine" or user|has_group:"direction" %}
+                <li class="nav-item">
+                    <a class="nav-link" aria-current="page" href="{% url 'gestion_employe:index' %}">
+                        <i class="bi bi-speedometer2"></i>
+                        Tableau de bord
+                    </a>
+                </li>
+                {% endif %}
+                {% if user|has_group:"ressource_humaine" or user|has_group:"direction" %}
+                <li class="nav-item">
+                    <a class="nav-link" aria-current="page" href="{% url 'gestion_projet:index' %}">
+                        <i class="bi bi-speedometer2"></i>
+                        Gestion des projets
+                    </a>
+                </li>
+                {% endif %}
+                <li class="nav-item">
+                    <a class="nav-link" href="{% url 'gestion_conges:conge' %}">
+                        <i class="bi bi-airplane"></i> 
+                        Gestion des congés
+                    </a>
+                </li>
+                {% if user|is_chef_projet %}
+                <li class="nav-item">
+                    <a class="nav-link" href="{% url 'gestion_projet:activites-projet' %}">
+                        <i class="bi bi-list-task"></i> 
+                        Suivi des Activités
+                    </a>
+                </li>
+                {% endif %}
+                <li class="nav-item">
+                    <a class="nav-link" href="{% url 'gestion_salle:reservation-salle' %}">
+                        <i class="bi bi-calendar-check"></i> 
+                        Réservation
+                    </a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="{% url 'deconnexion' %}">
+                        <i class="bi bi-box-arrow-right"></i> Déconnexion
+                    </a>
+                </li>
+            </ul>
+        </div>
+    </div>
+</nav>
+
+<div class="container-fluid d-flex d-sm-none justify-content-center">
+    <ul class="nav nav-tabs">
+        <li class="nav-item">
+            <a class="nav-link active" aria-current="page" href="{{ SIRH_LIEN }}">SIRH</a>
+        </li>
+        <li class="nav-item">
+            <a class="nav-link" href="{{ SGL_LIEN }}">SGL</a>
+        </li>
+        <li class="nav-item">
+            <a class="nav-link" href="#">Laboratoire</a>
+        </li>
+    </ul>
+</div>

SIRH/templates/SIRH/parts/menu_principal.html

@@ -1,7 +1,7 @@
 {% load static %}
 {% load tags_personnaliser %}
 
-<div class="col-3 bg-danger d-flex flex-column vh-100 pt-5 sticky-top">
+<div class="col-3 bg-danger d-none d-sm-flex flex-column vh-100 pt-5 sticky-top">
     <div class="text-center mb-4">
         {% if user.employe.photo %}
             <img src="{{ user.employe.photo.url }}" 
@@ -41,7 +41,6 @@
     <a href="{% url 'gestion_salle:reservation-salle' %}" class="text-white fw-bold text-decoration-none mb-4" style="font-size: 1.2em;">
         <i class="bi bi-calendar-check"></i> Réservation
     </a>
-    {% comment %} {% url 'deconnexion' %} {% endcomment %}
     <a href="{% url 'deconnexion' %}" class="text-white fw-bold text-decoration-none mb-4" style="font-size: 1.2em;">
         <i class="bi bi-box-arrow-right"></i> Déconnexion
     </a>

gestion_conge/templates/gestion_conge/index.html

@@ -8,7 +8,7 @@
         {% endfor %}
     {% endif %}    
 
-    <div class="row d-flex justify-content-center mb-4">              
+    <div class="row d-flex flex-column flex-lg-row justify-content-center mb-4">              
         <div class="col text-white bg-danger d-flex flex-column justify-content-center align-items-center border rounded p-4">
             <div class="card-header fw-bold">
                 <i class="bi bi-x-circle me-2"></i> Congés refusés
@@ -17,7 +17,7 @@
                 <h5 class="fw-bold">{{ nombre_conges_refuse }}</h5>
             </div>
         </div>
-        <div class="col text-white bg-warning d-flex flex-column justify-content-center align-items-center border rounded p-4 mx-2">
+        <div class="col my-2 my-lg-0 text-white bg-warning d-flex flex-column justify-content-center align-items-center border rounded p-4 mx-0 mx-lg-2">
             <div class="card-header fw-bold">
                 <i class="bi bi-hourglass-split me-2"></i> Congés en attente
             </div>
@@ -36,7 +36,7 @@
     </div>
 
     <div class="row mb-3">
-        <div class="col d-flex justify-content-between align-items-center">
+        <div class="col d-flex flex-column flex-lg-row justify-content-between align-items-center">
             <h3><i class="bi bi-list-ul"></i> Liste des demandes de congé</h3>
             <button class='btn btn-primary' id="bouton-demande-conge">Demande de congé</button>
         </div>

gestion_employe/models.py

@@ -123,4 +123,4 @@ class Formation(models.Model):
     date_fin = models.DateField(blank=True, null=True, verbose_name="Date de fin de validité")
     certificat = models.FileField(upload_to='documents/formations/', blank=True, null=True, verbose_name="Certificat (PDF/Image)")
     def __str__(self):
-        return self.titre
+        return self.titre

gestion_employe/static/gestion_employe/js/index.js

@@ -10,8 +10,8 @@ const tableau_liste_employe = new Tabulator("#tableau_liste_employe", {
         {"title": "Téléphone", "field": "telephone"},
     ],
     pagination: true,
-    paginationSize: 10,
-    responsiveLayout : "hide"
+    paginationSize: 10
+    // responsiveLayout : "hide"
 })
 
 fetch(url_liste_employe)
@@ -29,7 +29,6 @@ tableau_liste_employe.on("rowClick", function (row, rowData) {
     const data = rowData.getData(); 
     
     document.getElementById('detail-id').value = data.id;
-    document.querySelector("#modalContratsEmploye").dataset.employeId = data.id;
     document.getElementById('detail-matricule').value = data.matricule;
     document.getElementById('detail-employe').value = data.employe;
     document.getElementById('detail-fonction').value = data.fonction;
@@ -271,86 +270,68 @@ const listeContratExpirant = new Tabulator("#listeContratExpirant", {
     ajaxURL: $("boutonContratExpirants").dataset.urlexpirants,
 })
 
-let tabContrats = null;
+/* let tabContrats = null;
+
+document.getElementById("modalContratsEmploye").addEventListener("show.bs.modal", function () {
+
+    const employeId = document.getElementById("detail-id").value;
 
-$("boutonVoirContrats").addEventListener("click", function () {
-    const employeId = $("detail-id").value;
     if (!employeId) {
-        $("nom-employe-contrat").textContent = "Aucun employé sélectionné.";
+        alert("Aucun employé sélectionné");
         return;
     }
 
-    $("modalContratsEmploye").dataset.employeId = employeId;
-
-    const modalDetail = $("modalDetailEmploye");
-    modalDetail.addEventListener(
-        "hidden.bs.modal",
-        () => bootstrap.Modal.getOrCreateInstance($("modalContratsEmploye")).show(),
-        {once: true}
-    );
-    bootstrap.Modal.getOrCreateInstance(modalDetail).hide();
-});
-
-$("modalContratsEmploye").addEventListener("shown.bs.modal", function () {
-    const employeId = this.dataset.employeId;
-    const urlTemplate = this.dataset.urlTemplate;
-    const tableElement = $("table-contrats-tabulator");
-
-    if (tabContrats) {
-        tabContrats.destroy();
-        tabContrats = null;
-    }
-
-    if (!employeId) {
-        $("nom-employe-contrat").textContent = "Aucun employé sélectionné.";
-        return;
-    }
-
-    tableElement.replaceChildren();
-    $("nom-employe-contrat").textContent = "Chargement...";
-    const url = urlTemplate.replace("123456789", employeId);
-
-    fetch(url)
+    fetch(`/employé/employe/${employeId}/contrats/`)
         .then(response => {
             if (!response.ok) {
-                throw new Error(`Erreur HTTP ${response.status}`);
+                throw new Error("Erreur HTTP " + response.status);
             }
             return response.json();
         })
         .then(data => {
-            $("nom-employe-contrat").textContent = data.employe;
 
-            tabContrats = new Tabulator(tableElement, {
-                data: data.contrats,
-                layout: "fitColumns",
-                pagination: true,
-                paginationSize: 10,
-                placeholder: "Aucun contrat",
-                columns: [
-                    {title: "Numéro", field: "numero_contrat"},
-                    {title: "Type", field: "type_contrat"},
-                    {title: "Date début", field: "date_debut"},
-                    {title: "Date fin", field: "date_fin"},
-                    {title: "Salaire", field: "salaire_mensuel"},
-                    {title: "Statut", field: "statut"},
-                    {
-                        title: "Contrat",
-                        field: "fichier",
-                        formatter: "link",
-                        formatterParams: {target: "_blank"},
-                    },
-                ],
-            });
+            document.getElementById("nom-employe-contrat").innerText =
+                data.employe;
+
+            if (tabContrats) {
+                tabContrats.destroy();
+            }
+
+            tabContrats = new Tabulator(
+                "#table-contrats-tabulator",
+                {
+                    data: data.contrats,
+                    layout: "fitColumns",
+                    placeholder: "Aucun contrat",
+
+                    columns: [
+                        { title: "Numéro", field: "numero_contrat" },
+                        { title: "Type", field: "type_contrat" },
+                        { title: "Date début", field: "date_debut" },
+                        { title: "Date fin", field: "date_fin" },
+                        { title: "Salaire", field: "salaire_mensuel" },
+                        { title: "Statut", field: "statut" },
+
+                        {
+                            title: "Contrat",
+                            field: "fichier",
+                            formatter: function(cell) {
+                                const url = cell.getValue();
+
+                                if (!url) {
+                                    return "<span class='text-danger'>Aucun fichier</span>";
+                                }
+
+                                return `<a href="${url}" target="_blank" class="btn btn-sm btn-primary">
+                                            <i class="bi bi-file-earmark-pdf"></i> Ouvrir
+                                        </a>`;
+                            }
+                        }
+                    ]
+                }
+            );
         })
         .catch(error => {
-            console.error("Erreur lors du chargement des contrats :", error);
-            $("nom-employe-contrat").textContent =
-                "Impossible de charger les contrats.";
-            tableElement.textContent =
-                "Une erreur est survenue lors du chargement des contrats.";
+            console.error("Erreur :", error);
         });
-});
-
-$("modalContratsEmploye").addEventListener("hidden.bs.modal", function () {
-    bootstrap.Modal.getOrCreateInstance($("modalDetailEmploye")).show();
-});
+}); */

gestion_employe/templates/gestion_employe/index.html

@@ -15,12 +15,12 @@
             {% endfor %}
         {% endif %}
 
-        <div class="row">
+        <div class="row d-flex flex-column flex-lg-row">
             <div class="col text-white bg-success d-flex flex-column justify-content-center align-items-center border rounded p-4">
                 <span class="fs-5">Nombre d'employés</span>
                 <h3>{{ nombre_employes }}</h3>
             </div>
-            <div class="col text-white bg-info d-flex flex-column justify-content-center align-items-center border rounded p-4 mx-3">
+            <div class="col text-white bg-info d-flex flex-column justify-content-center align-items-center border rounded p-4 mx-0 mx-lg-3 my-1 my-lg-0">
                 <span class="fs-5">Nombre de prestataires</span>
                 <h3>{{ nombre_cps }}</h3>
             </div>
@@ -30,7 +30,7 @@
             </div>
         </div>
         <div class="row mt-4">
-            <div class="col d-flex justify-content-between mb-3">
+            <div class="col d-flex flex-column flex-lg-row justify-content-between mb-3">
                 <h3> 
                     <i class="bi bi-people"></i>
                     La liste des employés
@@ -58,7 +58,6 @@
 {% block 'modal' %}
     {% include "gestion_employe/parts/modalDetailEmploye.html" %}
     {% include "gestion_employe/parts/modalCreationContrat.html" %}
-    {% include "gestion_employe/parts/modalContratsEmploye.html" %}
     {% include "gestion_employe/parts/modalAffectationProjet.html" %}
     {% include "gestion_employe/parts/modalDocument.html" %}
     {% include "gestion_employe/parts/modalListeContratExpirants.html" %}

gestion_employe/templates/gestion_employe/monprofil.html

@@ -2,7 +2,7 @@
 {% load static %}     
 {% block 'titre_page' %} Gestion des employés - Mon profil {% endblock %}
 {% block 'contenu' %}  
-<div class="d-flex justify-content-between">
+<div class="d-flex flex-column flex-lg-row justify-content-between">
     <h5 class="fw-bold">
         <i class="bi bi-pencil-square me-2"></i> Les informations de mon profil
     </h5> 
@@ -41,7 +41,7 @@
             <div class="accordion-body">
                 <form class="row" action = "{% url 'gestion_employe:modifier-employe' %}" method = "POST" enctype = "multipart/form-data" id="information-personnelles" data-url="{% url 'gestion_employe:modifier-employe' %}">
                     {% csrf_token %}
-                    <div class="col">
+                    <div class="col-12 col-sm-6">
                         <div class="form-group mb-2">
                             <label>Photo</label>
                             {% if employe.photo %}
@@ -70,7 +70,7 @@
                         </div>
                         
                     </div>
-                    <div class="col">
+                    <div class="col-12 col-sm-6">
                         <div class="form-group mb-2">
                             <label>Date de naissance :</label>
                             <input type="date" class="form-control" id="date_naissance" name = 'date_naissance' value="{{ employe.date_naissance|date:'Y-m-d' }}">                            
@@ -172,9 +172,9 @@
                 <form method="POST" action="{% url 'gestion_employe:enregistrement-document-rh' %}" enctype="multipart/form-data">
                     {% csrf_token %}
                     <div class="row">
-                        <div class="col">
+                        <div class="col-12 col-sm-6">
                             <div class="form-group mb-2">
-                                <label>photo</label>
+                                <label>Photo</label>
                                 {% if employe.photo %}
                                     <span>Fichier actuel : <a href="{{ employe.photo.url }}">{{employe.photo}}</a></span>
                                 {% endif %}
@@ -195,7 +195,7 @@
                                 <input type="file" class="form-control" name="diplome">
                             </div>
                         </div>
-                        <div class="col">
+                        <div class="col-12 col-sm-6">
                             <div class="form-group mb-2">
                                 <label>Casier judiciaire</label>
                                 {% if employe.casier_judiciaire %}

gestion_employe/templates/gestion_employe/parts/modalContratsEmploye.html

@@ -1,4 +1,4 @@
-<div class="modal fade" id="modalContratsEmploye" data-url-template="{% url 'gestion_employe:contrats-employe' 123456789 %}" tabindex="-1">
+<div class="modal fade" id="modalContratsEmploye" tabindex="-1">
     <div class="modal-dialog modal-xl">
         <div class="modal-content">
 
@@ -14,3 +14,4 @@
         </div>
     </div>
 </div>
+

gestion_employe/templates/gestion_employe/parts/modalDetailEmploye.html

@@ -97,15 +97,11 @@
                                 <i class="bi bi-file-earmark-text me-2"></i> Liste des Contrats
                             </h5>
                             {% if user|has_group:"ressource_humaine"  %}
-                                <div class="d-flex gap-2">
-                                    <button type="button" class="btn btn-outline-primary" id="boutonVoirContrats">
-                                        <i class="bi bi-files"></i> Voir tous les contrats
-                                    </button>
-                                    <button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#modalContrat">
+                                <div>
+                                    <button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#modalContrat{{ item.employe.id }}">
                                         <i class="bi bi-file-earmark-text"></i> Créer contrat
                                     </button>
                                 </div>
-                               
                             {% endif %}
                         </div>
                         {% csrf_token %}

gestion_employe/urls.py

@@ -90,10 +90,5 @@ urlpatterns = [
         "liste-contrat-expirants",
         views.liste_contrat_expirants,
         name='liste-contrat-expirants'
-    ),
-   path(
-           "liste-contrats-employe/<int:id_employe>/",
-           views.liste_contrats_employe,
-           name="liste-contrats-employe"       
-       )
+    )
 ]

gestion_employe/views.py

@@ -1,8 +1,9 @@
 import json
 from datetime import datetime, timedelta
 
+import requests
 from dateutil.relativedelta import relativedelta
-from django.contrib.auth import update_session_auth_hash
+from decouple import config
 from django.contrib import messages
 from django.contrib.auth.decorators import login_required
 from django.contrib.auth.models import User
@@ -299,8 +300,6 @@ def creation_contrat(request):
 
 @login_required
 def contrats_employe(request, employe_id):
-    if not request.user.groups.filter(name="ressource_humaine").exists():
-        return JsonResponse({"error": "Accès non autorisé"}, status=403)
 
     try:
         employe = Employe.objects.get(id=employe_id)
@@ -384,8 +383,8 @@ def liste_employe(request):
             projets =  [
                 ", ".join([
                     a.projet.nom_projet for a in Affectation.objects.filter(
-                        employe=employe, 
-                        date_fin_daffectation__gte=timezone.now().date()
+                        employe=employe
+                        #, date_fin_daffectation__gte=timezone.now().date()
                     )
                 ])
             ] 
@@ -409,14 +408,14 @@ def liste_employe(request):
                     "salaire_mensuel": contrat.salaire_mensuel,
                     "statut": contrat.statut,
                     "fichier_contrat": contrat.fichier_contrat.url if contrat.fichier_contrat else "",
-                } for contrat in Contrat.objects.filter(employe=employe, statut='actif')
+                } for contrat in Contrat.objects.filter(employe=employe)#, statut='actif')
             ]
 
             affectations = [
                 {**model_to_dict(affectation), "projet": affectation.projet.nom_projet}
                 for affectation in Affectation.objects.filter(
-                    employe=employe, 
-                    date_fin_daffectation__gte=timezone.now().date()
+                    employe=employe
+                    #, date_fin_daffectation__gte=timezone.now().date()
                 )
             ]
 
@@ -507,55 +506,42 @@ def supprimer_formation(request, id_formation):
 def modifier_mot_passe(request):
     """Vue pour permettre à un employé de modifier son mot de passe"""
     if request.method == "POST":
+        username = request.user.username
         ancien_mdp = request.POST.get("ancien-mdp")
         nouveau_mdp = request.POST.get("nouveau-mdp")
         confirmation_mdp = request.POST.get("confirmation-mdp")
 
-        if not request.user.check_password(ancien_mdp):
-            messages.error(request, "L'ancien mot de passe est incorrect.")
-            return redirect("gestion_employe:mon-profil")
-
-        if nouveau_mdp != confirmation_mdp:
-            messages.error(request, "Les nouveaux mots de passe ne correspondent pas.")
-            return redirect("gestion_employe:mon-profil")
-
         try:
             validate_password(nouveau_mdp, user=request.user)
         except ValidationError as e:
             messages.error(request, f"Erreur : {' '.join(e.messages)}")
             return redirect("gestion_employe:mon-profil")
 
-        request.user.set_password(nouveau_mdp)
-        request.user.save(update_fields=["password"])
-        update_session_auth_hash(request, request.user)
-        messages.success(request, "Mot de passe modifié avec succès.")
+        donnees = {
+            "username": username,
+            "ancien_mdp": ancien_mdp,
+            "nouveau_mdp": nouveau_mdp,
+            "confirmation_mdp": confirmation_mdp
+        }
+
+        headers = {
+            "Content-Type": "application/json",
+            "Accept": "application/json",
+        }
+
+        response = requests.post(
+            f"{config('SERVEUR_AUTHENTIFICATION')}modifier-mot-de-passe/",
+            json=donnees,
+            headers=headers
+        )
+
+        data = response.json()
+        cle = next(iter(data.keys()))
+        valeur = next(iter(data.values()))
+
+        if cle == "success":
+            messages.success(request, valeur)
+        else:
+            messages.error(request, valeur)
 
         return redirect("gestion_employe:mon-profil")
-
-def liste_contrats_employe(request, id_employe):
-    """Vue pour retourner la liste des contrats d'un employé spécifique"""
-    try:
-        employe = Employe.objects.get(id=id_employe)
-    except Employe.DoesNotExist:
-        return JsonResponse({"error": "Employé non trouvé"}, status=404)
-
-    contrats = Contrat.objects.filter(employe=employe).order_by("-date_debut")
-
-    data = [
-        {
-            "id": contrat.id,
-            "numero_contrat": contrat.numero_contrat,
-            "type_contrat": dict(Contrat.TYPE_CONTRAT).get(contrat.type_contrat),
-            "date_debut": contrat.date_debut.strftime("%Y-%m-%d"),
-            "date_fin": contrat.date_fin.strftime("%Y-%m-%d") if contrat.date_fin else "",
-            "salaire_mensuel": contrat.salaire_mensuel,
-            "statut": dict(Contrat.STATUT_CONTRAT).get(contrat.statut),
-            "fichier_contrat": contrat.fichier_contrat.url if contrat.fichier_contrat else "",
-        }
-        for contrat in contrats
-    ]
-
-    return JsonResponse({
-        "employe": f"{employe.user.first_name} {employe.user.last_name}",
-        "contrats": data
-    })

gestion_projet/templates/gestion_projet/index.html

@@ -12,12 +12,12 @@
         </div>
     {% endfor %}
 {% endif %}
-<div class="row">
+<div class="row d-flex flex-column flex-lg-row">
     <div class="col text-white bg-success d-flex flex-column justify-content-center align-items-center border rounded p-4">
         <span class="fs-5">Projets en cours</span>
         <h3>{{projet_en_cours}}</h3>
     </div>
-    <div class="col text-white bg-success d-flex flex-column justify-content-center align-items-center border rounded p-4 mx-2">
+    <div class="col text-white bg-success d-flex flex-column justify-content-center align-items-center border rounded p-4 my-1 my-lg-0 mx-0 mx-lg-2">
         <span class="fs-5">Budget Total (GNF)</span>
         <h3>{{budget_total}}</h3>
     </div>
@@ -27,11 +27,11 @@
     </div>
 </div>
 <div class="row mt-4">
-    <div class="col d-flex justify-content-between align-items-center mb-3">
+    <div class="col d-flex flex-lg-row flex-column justify-content-between align-items-center mb-3">
         <h5 class="mb-4" >La liste des projets </h5>
         {% if user|has_group:"ressource_humaine"  %}
-            <div>
-                <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalProjet">    
+            <div class="d-flex flex-lg-column flex-row justify-content-between align-items-center">
+                <button class="btn btn-primary me-2 me-lg-0" data-bs-toggle="modal" data-bs-target="#modalProjet">    
                     <i class="bi bi-plus-circle"></i> Ajouter un projet
                 </button>
                 <button class="btn btn-info" data-bs-toggle="modal" data-bs-target="#modalBailleur">

gestion_salle/templates/gestion_salle/index.html

@@ -18,12 +18,12 @@
         <div class="col py-2 px-4">
             <h1 class="text-center">Réservation de salle</h1>
             <hr>
-            <div class="row d-flex justify-content-around">
-                <div class="form-group col-5 me-2">
+            <div class="row d-flex flex-column flex-lg-row justify-content-around">
+                <div class="form-group col col-lg-5 me-2">
                     <label>Selectionner le jour concerné :</label>
                     <input type="date" class="form-control" id="semaineDate" />
                 </div>
-                <div class="form-group col-5 me-2">
+                <div class="form-group col col-lg-5 me-2">
                     <label>Selectionner une salle :</label>
                     <select class = "form-select" id="liste-salle">
                         <option value='Salle de formation'>Salle de formation</option>
@@ -33,9 +33,9 @@
                 </div>
             </div>
             <div class="row mt-2">
-                <div class="col d-flex justify-content-center">
-                    <button class="btn btn-lg btn-primary me-2" data-bs-toggle="modal" data-bs-target="#modalReservation">Nouvelle réservation</button>
-                    <button type="button" class="btn btn-warning" data-bs-toggle="modal" data-bs-target="#modalReservationAttente">
+                <div class="col d-flex flex-column flex-lg-row justify-content-center">
+                    <button class="btn btn-lg btn-primary me-0 me-lg-2" data-bs-toggle="modal" data-bs-target="#modalReservation">Nouvelle réservation</button>
+                    <button type="button" class="btn mt-2 mt-lg-0 btn-warning" data-bs-toggle="modal" data-bs-target="#modalReservationAttente">
                         Validation en attente <span class="badge badge-light">{{ nb_reservation_attente }}</span>
                     </button>
                 </div>