From cb0b7dde5fa5986eacf8d7d328527bc0e12034c8 Mon Sep 17 00:00:00 2001
From: mepiphana2023 <marvin.eph@gmail.com>
Date: Thu, 25 Apr 2024 17:00:30 +0200
Subject: [PATCH] front

---
 src/main/resources/static/css/style.css       |  7 ++-
 src/main/resources/templates/accueil.html     |  8 ++--
 src/main/resources/templates/modele-page.html | 44 ++++++++++++++++---
 3 files changed, 46 insertions(+), 13 deletions(-)

diff --git a/src/main/resources/static/css/style.css b/src/main/resources/static/css/style.css
index d57bd51..1fc8f6f 100644
--- a/src/main/resources/static/css/style.css
+++ b/src/main/resources/static/css/style.css
@@ -19,15 +19,14 @@
     transform: scale(1.05);
 }
 
-/* Positionne le bouton de langue en haut à droite */
 #languageButton {
     margin-right: 20px; /* Espacement du bouton par rapport à la droite */
 }
 
-/* Réduit l'espace entre le bouton de langue et les autres éléments de la barre de navigation */
+
 .navbar-nav {
-    margin-right: 10px; /* Espacement entre le bouton de langue et les autres éléments de la barre de navigation */
+    margin-right: 10px;
 }
 .navbar-nav .nav-item.active .nav-link {
-    color: white; /* Couleur du texte pour le lien actif */
+    color: white;
 }
diff --git a/src/main/resources/templates/accueil.html b/src/main/resources/templates/accueil.html
index ba83e86..1b3ffcf 100644
--- a/src/main/resources/templates/accueil.html
+++ b/src/main/resources/templates/accueil.html
@@ -15,7 +15,7 @@
                         <form th:action="@{/accueil}" method="post" class="mb-3">
                             <div class="row">
                                 <!-- Colonne pour la zone de recherche et Achats/Ventes -->
-                                <div class="col-md-6" th:if="${#authorization.expression('hasRole(''MEMBRE'')')}">
+                                <div class="col-md-6" th:if="${#authentication.principal != 'anonymousUser'}">
                                     <!-- Zone de recherche -->
                                     <div class="mb-3">
                                         <input type="text" class="form-control" th:attr="placeholder=#{home.search.title}" name="searchTitle">
@@ -44,7 +44,7 @@
 
                                 </div>
                                 <!-- Colonne pour le bouton de recherche -->
-                                <div class="col-md-6 d-flex justify-content-center align-items-center"th:if="${#authorization.expression('hasRole(''MEMBRE'')')}">
+                                <div class="col-md-6 d-flex justify-content-center align-items-center"th:if="${#authentication.principal != 'anonymousUser'}">
                                     <div class="card">
                                         <div class="card-body">
                                             <div class="row">
@@ -118,8 +118,8 @@
         </div>
         <div class="row">
             <div th:each="article : ${articles}" class="col-md-6 mb-4" >
-                <a  th:href="@{/article/show(id=${article.id})}" >
-                    <div  class="card shadow-sm h-100 ">
+                <a  th:href="@{/article/show(id=${article.id})}" class="text-decoration-none text-dark" id="article-card">
+                    <div class="card shadow-sm h-100 card-article">
                         <div class="row g-0">
                             <div class="col-md-4 d-flex align-items-center justify-content-center p-3">
                                 <img th:src="${'images/articles/' + article.id + '.jpg'}" alt="Image de l'article" class="img-fluid rounded">
diff --git a/src/main/resources/templates/modele-page.html b/src/main/resources/templates/modele-page.html
index 8c6e873..3f8d559 100644
--- a/src/main/resources/templates/modele-page.html
+++ b/src/main/resources/templates/modele-page.html
@@ -7,6 +7,15 @@
     <link href="/css/bootstrap/bootstrap.min.css" rel="stylesheet">
     <link rel="stylesheet" href="/assets/fontawesome/css/all.css">
     <link rel="stylesheet" href="/css/style.css">
+    <style>
+        /* Ajoutez une classe pour le footer non sticky */
+        .non-sticky-footer {
+            position: static !important; /* Annule la position sticky */
+            bottom: 0; /* Le place en bas de la page */
+            width: 100%; /* Prend toute la largeur */
+            background-color: #2a2b30;
+        }
+    </style>
 </head>
 <body>
     <header>
@@ -21,16 +30,16 @@
             </button>
             <div  class="collapse navbar-collapse " id="navbarNav">
                 <ul class="navbar-nav ml-auto">
-                    <li class="nav-item" th:if="${#authorization.expression('hasRole(''MEMBRE'')')}" th:classappend="${requestURI == '/accueil'} ? 'active'">
+                    <li class="nav-item" th:if="${#authentication.principal != 'anonymousUser'}" th:classappend="${requestURI == '/accueil'} ? 'active'">
                         <a class="nav-link" href="/accueil">Encheres <span class="sr-only" >(current)</span></a>
                     </li>
-                    <li class="nav-item" th:if="${#authorization.expression('hasRole(''MEMBRE'')')}" th:classappend="${requestURI == '/article/new'} ? 'active'">
+                    <li class="nav-item" th:if="${#authentication.principal != 'anonymousUser'}" th:classappend="${requestURI == '/article/new'} ? 'active'">
                         <a class="nav-link" href="/article/new">Vendre un article</a>
                     </li>
                     <li  class="nav-item" th:if="${#authentication.principal == 'anonymousUser'}">
                         <a class="btn btn-primary" href="/login" role="button" style="background-color: #1B4463;">S'inscrire / Se connecter</a>
                     </li>
-                    <li class="nav-item dropdown" th:if="${#authorization.expression('hasRole(''MEMBRE'')')}">
+                    <li class="nav-item dropdown" th:if="${#authentication.principal != 'anonymousUser'}">
                         <a class="nav-link dropdown-toggle"  id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                             <i class="fas fa-user"></i> <!-- Icône de profil -->
                         </a>
@@ -49,7 +58,7 @@
     <div th:insert="${content}"></div>
 
 
-    <footer class="text-center text-lg-start bg-body-tertiary text-muted mt-7 py-3">
+    <footer class="fixed-bottom text-center text-lg-start bg-body-tertiary text-muted py-3 non-sticky-footer">
         <section class="py-4 mb-0" style="background-color: #2a2b30;">
             <div class="container text-lg-left text-md-start mt-4 mb-5">
                 <div class="row">
@@ -77,7 +86,6 @@
                         </p>
                     </div>
 
-
                     <div class="col-md-4 col-lg-3 col-xl-3 mx-auto mb-md-0 mb-4">
                         <h6 class="text-uppercase fw-bold mb-4">Contact</h6>
                         <p><i class="fas fa-home me-3"></i> 2a Rue Benjamin Franklin, 44800 Saint-Herblain</p>
@@ -96,8 +104,34 @@
         </div>
     </footer>
 
+
+
     <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
     <script src="/js/bootstrap/bootstrap.min.js"></script>
     <script th:src="@{/js/toggleCheckbox.js}"></script>
+
+    <script>
+        // Script pour ajuster le footer en fonction de la hauteur du contenu
+        $(document).ready(function() {
+            adjustFooterPosition();
+
+            $(window).on('resize', function() {
+                adjustFooterPosition();
+            });
+
+            function adjustFooterPosition() {
+                var windowHeight = $(window).height();
+                var bodyHeight = $('body').height();
+
+                if (windowHeight >= bodyHeight) {
+                    // Si la fenêtre est plus grande que le contenu, le footer reste sticky
+                    $('.non-sticky-footer').removeClass('non-sticky-footer');
+                } else {
+                    // Si le contenu dépasse la fenêtre, le footer n'est plus sticky
+                    $('footer').addClass('non-sticky-footer');
+                }
+            }
+        });
+    </script>
 </body>
 </html>
\ No newline at end of file