feat(DevWeb): Update hero style and navbar

This commit is contained in:
Lucàs
2024-04-17 18:08:36 +02:00
parent bd81ba72d2
commit c95210ae65
7 changed files with 48 additions and 18 deletions
@@ -6,7 +6,7 @@
<layout:base>
<jsp:attribute name="title">CardRush - Mot de passe oublié</jsp:attribute>
<jsp:body>
<div class="hero is-light is-fullheight-with-navbar">
<div class="hero is-light is-fullheight">
<div class="hero-body">
<div class="container">
<div class="columns is-centered">
@@ -6,7 +6,7 @@
<layout:base>
<jsp:attribute name="title">Cards Rush - Connexion</jsp:attribute>
<jsp:body>
<div class="hero is-primary is-fullheight-with-navbar">
<div class="hero is-primary is-fullheight">
<div class="hero-body">
<div class="container">
<div class="columns is-centered">
@@ -6,7 +6,7 @@
<layout:base>
<jsp:attribute name="title">Menu principal</jsp:attribute>
<jsp:body>
<div class="hero is-primary is-fullheight-with-navbar">
<div class="hero is-primary is-fullheight">
<div class="hero-body">
<div class="container">
<div class="columns is-centered">
@@ -6,7 +6,7 @@
<layout:base>
<jsp:attribute name="title">Cards Rush - Inscription</jsp:attribute>
<jsp:body>
<div class="hero is-light is-fullheight-with-navbar">
<div class="hero is-light is-fullheight">
<div class="hero-body">
<div class="container">
<div class="columns is-centered">
@@ -4,7 +4,7 @@
<layout:base>
<jsp:attribute name="title">Cards Rush - Récuperation mot de passe</jsp:attribute>
<jsp:body>
<div class="hero is-light is-fullheight-with-navbar">
<div class="hero is-light is-fullheight">
<div class="hero-body">
<div class="container">
<div class="columns is-centered">
@@ -1,6 +1,7 @@
<%@ tag import="uppa.project.database.pojo.User" %>
<%@tag description="component/navbar" pageEncoding="UTF-8" %>
<nav class="navbar" role="navigation" aria-label="main navigation">
<nav class="navbar is-fixed-top" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item" href="${pageContext.request.contextPath}/">
<img src="${pageContext.request.contextPath}/static/img/CardsRushLogoBlack.svg" height="260">
@@ -17,19 +18,44 @@
<div id="navbarMenu" class="navbar-menu">
<div class="navbar-end">
<%if (session.getAttribute("user") != null) {
User user = (User) session.getAttribute("user");
%>
<div class="navbar-item">
<div class="buttons">
<%if (session.getAttribute("user") != null) {%>
<%-- TODO: Profil de l'utilisateur--%>
<a href="${pageContext.request.contextPath}/profile" class="button is-primary has-text-white"><strong>Profil</strong></a>
<a href="${pageContext.request.contextPath}/logout" class="button is-danger is-light">Déconnexion</a>
<% } else {%>
<a href="${pageContext.request.contextPath}/register" class="button is-primary has-text-white"><strong>Inscription</strong></a>
<a href="${pageContext.request.contextPath}/login" class="button is-light">Connexion</a>
<% } %>
</div>
<a href="${pageContext.request.contextPath}/profile" class="is-fullwidth button is-light"><%= user.getUsername() %></a>
</div>
<div class="navbar-item">
<a href="${pageContext.request.contextPath}/logout" class="is-fullwidth button is-light is-danger">Déconnexion</a>
</div>
<% } else {%>
<div class="navbar-item">
<a href="${pageContext.request.contextPath}/register" class="is-fullwidth button is-primary has-text-white">Inscription</a>
</div>
<div class="navbar-item">
<a href="${pageContext.request.contextPath}/login" class="is-fullwidth button is-light">Connexion</a>
</div>
<% } %>
</div>
</div>
</nav>
</nav>
<script type="module" defer>
// Get all "navbar-burger" elements
const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
// Add a click event on each of them
$navbarBurgers.forEach(el => {
el.addEventListener('click', () => {
// Get the target from the "data-target" attribute
const target = el.dataset.target;
const $target = document.getElementById(target);
// Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
el.classList.toggle('is-active');
$target.classList.toggle('is-active');
});
});
</script>
@@ -20,6 +20,10 @@
--bulma-primary-s: 70%;
--bulma-primary-l: 35%;
}
.hero {
background: url("${pageContext.request.contextPath}/static/img/Home.svg") lightgray 50% / cover no-repeat;
}
</style>
<jsp:invoke fragment="head"/>