johanleroy/ENI-enchere
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

front

Browse Source
This commit is contained in:
mepiphana2023
2024-04-25 17:00:30 +02:00
parent 85f4f52960
commit cb0b7dde5f
3 changed files with 46 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/main/resources/static/css/style.css
View File

@@ -19,15 +19,14 @@
transform: scale(1.05); transform: scale(1.05);
} }
/* Positionne le bouton de langue en haut à droite */
#languageButton { #languageButton {
margin-right: 20px; /* Espacement du bouton par rapport à la droite */ 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 { .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 { .navbar-nav .nav-item.active .nav-link {
color: white; /* Couleur du texte pour le lien actif */ color: white;
} }

8
src/main/resources/templates/accueil.html
View File

@@ -15,7 +15,7 @@
<form th:action="@{/accueil}" method="post" class="mb-3"> <form th:action="@{/accueil}" method="post" class="mb-3">
<div class="row"> <div class="row">
<!-- Colonne pour la zone de recherche et Achats/Ventes --> <!-- 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 --> <!-- Zone de recherche -->
<div class="mb-3"> <div class="mb-3">
<input type="text" class="form-control" th:attr="placeholder=#{home.search.title}" name="searchTitle"> <input type="text" class="form-control" th:attr="placeholder=#{home.search.title}" name="searchTitle">
@@ -44,7 +44,7 @@
</div> </div>
<!-- Colonne pour le bouton de recherche --> <!-- 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">
<div class="card-body"> <div class="card-body">
<div class="row"> <div class="row">
@@ -118,8 +118,8 @@
</div> </div>
<div class="row"> <div class="row">
<div th:each="article : ${articles}" class="col-md-6 mb-4" > <div th:each="article : ${articles}" class="col-md-6 mb-4" >
<a th:href="@{/article/show(id=${article.id})}" > <a th:href="@{/article/show(id=${article.id})}" class="text-decoration-none text-dark" id="article-card">
<div class="card shadow-sm h-100 "> <div class="card shadow-sm h-100 card-article">
<div class="row g-0"> <div class="row g-0">
<div class="col-md-4 d-flex align-items-center justify-content-center p-3"> <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"> <img th:src="${'images/articles/' + article.id + '.jpg'}" alt="Image de l'article" class="img-fluid rounded">

44
src/main/resources/templates/modele-page.html
View File

@@ -7,6 +7,15 @@
<link href="/css/bootstrap/bootstrap.min.css" rel="stylesheet"> <link href="/css/bootstrap/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="/assets/fontawesome/css/all.css"> <link rel="stylesheet" href="/assets/fontawesome/css/all.css">
<link rel="stylesheet" href="/css/style.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> </head>
<body> <body>
<header> <header>
@@ -21,16 +30,16 @@
</button> </button>
<div class="collapse navbar-collapse " id="navbarNav"> <div class="collapse navbar-collapse " id="navbarNav">
<ul class="navbar-nav ml-auto"> <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> <a class="nav-link" href="/accueil">Encheres <span class="sr-only" >(current)</span></a>
</li> </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> <a class="nav-link" href="/article/new">Vendre un article</a>
</li> </li>
<li class="nav-item" th:if="${#authentication.principal == 'anonymousUser'}"> <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> <a class="btn btn-primary" href="/login" role="button" style="background-color: #1B4463;">S'inscrire / Se connecter</a>
</li> </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"> <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 --> <i class="fas fa-user"></i> <!-- Icône de profil -->
</a> </a>
@@ -49,7 +58,7 @@
<div th:insert="${content}"></div> <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;"> <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="container text-lg-left text-md-start mt-4 mb-5">
<div class="row"> <div class="row">
@@ -77,7 +86,6 @@
</p> </p>
</div> </div>
<div class="col-md-4 col-lg-3 col-xl-3 mx-auto mb-md-0 mb-4"> <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> <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> <p><i class="fas fa-home me-3"></i> 2a Rue Benjamin Franklin, 44800 Saint-Herblain</p>
@@ -96,8 +104,34 @@
</div> </div>
</footer> </footer>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="/js/bootstrap/bootstrap.min.js"></script> <script src="/js/bootstrap/bootstrap.min.js"></script>
<script th:src="@{/js/toggleCheckbox.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> </body>
</html> </html>