Add navbar

This commit is contained in:
Valentin Moguérou 2024-05-08 04:21:21 +02:00
parent 4d4b83f4d4
commit 1cde62b74d
7 changed files with 141 additions and 37 deletions

View File

@ -6,8 +6,6 @@
{% block title %}Marketplace{% endblock title %}
{% block main %}
<a href="{% url "colloscope.dashboard" %}">Retour au tableau de bord</a>
<h1>Marketplace</h1>
Bienvenue sur le marketplace.

View File

@ -2,12 +2,10 @@
{% block title %}Sélection du profil{% endblock title %}
{% block header %}
<h1>Sélection du profil</h1>
{% endblock header %}
{% block main %}
<h1>Sélection du profil</h1>
Vous êtes connecté. Votre compte correspond à deux profils :
<ul>
<li>en tant que colleur : {{ profil.colleur }}&nbsp;; Classes : {{ profil.colleur.get_classes|join:"; " }}</li>

View File

@ -9,13 +9,9 @@
<link href="{% static 'table.css' %}" rel="stylesheet" type="text/css">
{% endblock head %}
{% block header %}
<h1>Colloscope</h1>
{% endblock header %}
{% block main %}
<h1>Colloscope</h1>
<p>
Lycée : {{ term.cls.school.description }}. Classe : {{ term.cls.description }}. <a href="dashboard.html">Retour au tableau de bord</a>
</p>

View File

@ -2,12 +2,10 @@
{% block title %}Sélection du profil{% endblock title %}
{% block header %}
<h1>Sélection du profil</h1>
{% endblock header %}
{% block main %}
<h1>Sélection du profil</h1>
Vous êtes connecté, mais votre compte n'est associé à aucun profil. Veuillez contacter le webmestre à l'adresse <a href="mailto:valentin@mp2i-vms.fr">valentin@mp2i-vms.fr</a>.
{% endblock main %}

View File

@ -4,7 +4,6 @@
body {
font-family: sans-serif;
background-color: #fafafa;
margin: 0;
}
@ -36,6 +35,49 @@ header .bandeau button:active {
background-color: darkgoldenrod;
}
.navbar {
background-color: #eee;
display: flex;
flex-direction: column;
}
.navbar .block {
display: flex;
flex-direction: column;
text-align: center;
}
@media screen and (min-width: 400px)
{
.navbar {
padding: 0 10px;
flex-direction: row;
justify-content: space-between;
}
.navbar .block {
flex-direction: row;
gap: 0 10px;
}
}
.navbar a:link, .navbar a:visited {
color: black;
text-decoration: none;
}
.navbar .link {
background: none;
border: none;
font: inherit;
padding: 10px;
cursor: pointer;
}
.navbar .link:hover {
background-color: #ddd;
}
main {
margin: 20px auto;
width: clamp(350px, 60%, 1200px);
@ -47,6 +89,34 @@ h1 {
text-align: center;
}
form.login table {
margin: auto;
}
form.login input[type=text], form.login input[type=password] {
padding: 5px;
border: none;
background-color: #eee;
}
form.login button {
border: none;
padding: 10px;
background-color: dodgerblue;
border-radius: 5px;
color: white;
display: block;
margin: 15px auto;
}
form.login button:hover {
background-color: #0483ff;
}
form.login button:active {
background-color: #0077ea;
}
nav.semaine {
width: 100%;
display: flex;

View File

@ -5,28 +5,73 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{% block title %}{% endblock title %}</title>
<link href="{% static 'unified-navigator/navigator.css' %}" rel="stylesheet" type="text/css">
<link href="{% static 'main.css' %}" rel="stylesheet" type="text/css">
<script src="https://kit.fontawesome.com/0fd87250ec.js" crossorigin="anonymous"></script>
{% block head %}{% endblock head %}
</head>
<body>
<header>
{% if request.user.is_authenticated %}
<div class="bandeau">
Vous êtes connecté avec le compte <b>{{ user.username }}</b>.
{% if request.session.profile == "student" %}
Profil actuel : étudiant.
{% elif request.session.profile == "colleur" %}
Profil actuel : colleur.
{% else %}
Pas de profil.
{% endif %}
<form action="{% url 'logout' %}" method="post">
{% csrf_token %}
<button type="submit">Se déconnecter</button>
</form>
<script>
function navigator_toggleMenu() {
if (document.body.clientWidth > 600)
return document.location = "https://mp2i-vms.fr"
if (document.getElementById("menu-sec").classList.contains("hidden")) {
document.getElementById("menu-sec").classList.remove("hidden");
document.getElementById("navigator-dropdown-indicator").className = "fa-solid fa-caret-up";
} else {
document.getElementById("menu-sec").classList.add("hidden");
document.getElementById("navigator-dropdown-indicator").className = "fa-solid fa-caret-down";
}
}
</script>
<div class="unified_navigator">
<div class="nav-container">
<div class="logo-wrapper" onclick="navigator_toggleMenu();">
<a class="logo">
<img src="{% static 'unified-navigator/icon.png' %}" alt="logo"><strong>mp2i-vms.fr</strong>
</a>
<i id="navigator-dropdown-indicator" class="fa-solid fa-caret-down"></i>
</div>
<div class="menu-wrapper hidden" id="menu-sec">
<div class="link"><a href="https://mp2i-vms.fr/pages.html"><i class="fa-solid fa-house"></i> Pages personnelles</a></div>
<div class="link"><a href="https://git.mp2i-vms.fr"><i class="fa-brands fa-git-alt"></i> Git</a></div>
<div class="link"><a href="https://play.mp2i-vms.fr"><i class="fa-solid fa-cubes"></i> Minecraft</a></div>
<div class="link"><a href="{% url "home" %}"><i class="fa-solid fa-book"></i> Colles</a></div>
</div>
</div>
</div>
<div class="navbar">
<div class="block">
{% if request.user.is_authenticated %}
<a href="{% url "colloscope.dashboard" %}">
<div class="link"><i class="fa-solid fa-rocket"></i> Tableau de bord</div>
</a>
<a href="{% url "colloscope.table" %}">
<div class="link"><i class="fa-solid fa-calendar"></i> Colloscope</div>
</a>
<a href="{% url "colloscope.marketplace" %}">
<div class="link"><i class="fa-solid fa-shop"></i> Marketplace</div>
</a>
{% endif %}
</div>
<div class="block">
{% if request.user.is_authenticated %}
<form action="{% url 'logout' %}" method="post">
{% csrf_token %}
<button class="link" type="submit" href="{% url "login" %}">
<i class="fa-solid fa-right-from-bracket"></i> Se déconnecter
</button>
</form>
{% else %}
<a href="{% url "login" %}">
<div class="link right"><i class="fa-solid fa-right-from-bracket"></i> Se connecter</div>
</a>
{% endif %}
</div>
</div>
{% endif %}
{% block header %}{% endblock header %}
</header>

View File

@ -19,7 +19,7 @@
{% endif %}
{% endif %}
<form method="post" action="{% url 'login' %}">
<form class="login" method="post" action="{% url 'login' %}">
{% csrf_token %}
<table>
<tr>
@ -31,8 +31,7 @@
<td>{{ form.password }}</td>
</tr>
</table>
<input type="submit" value="Se connecter">
<button type="submit">Se connecter</button>
<input type="hidden" name="next" value="{{ next }}">
</form>