From 47479268e0afd973c8e80d6637803d3660bac51f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Valentin=20Mogu=C3=A9rou?= <valentin@mp2i-vms.fr>
Date: Wed, 8 May 2024 04:21:21 +0200
Subject: [PATCH] Add navbar

---
 colloscope/templates/marketplace.html     |  2 -
 colloscope/templates/select_profile.html  |  8 +--
 colloscope/templates/table.html           |  8 +--
 colloscope/templates/unbound_profile.html |  8 +--
 static/main.css                           | 72 +++++++++++++++++++++-
 templates/base.html                       | 75 ++++++++++++++++++-----
 templates/registration/login.html         |  5 +-
 7 files changed, 141 insertions(+), 37 deletions(-)

diff --git a/colloscope/templates/marketplace.html b/colloscope/templates/marketplace.html
index 7ca8fbe..d830207 100644
--- a/colloscope/templates/marketplace.html
+++ b/colloscope/templates/marketplace.html
@@ -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.
diff --git a/colloscope/templates/select_profile.html b/colloscope/templates/select_profile.html
index c4bdfa2..ebbf7af 100644
--- a/colloscope/templates/select_profile.html
+++ b/colloscope/templates/select_profile.html
@@ -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>
diff --git a/colloscope/templates/table.html b/colloscope/templates/table.html
index 0a4aaaa..3c617fc 100644
--- a/colloscope/templates/table.html
+++ b/colloscope/templates/table.html
@@ -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>
diff --git a/colloscope/templates/unbound_profile.html b/colloscope/templates/unbound_profile.html
index cb6cc4f..f2033cf 100644
--- a/colloscope/templates/unbound_profile.html
+++ b/colloscope/templates/unbound_profile.html
@@ -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 %}
diff --git a/static/main.css b/static/main.css
index e0a11d4..84a1af8 100644
--- a/static/main.css
+++ b/static/main.css
@@ -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;
diff --git a/templates/base.html b/templates/base.html
index c01b6ba..a9e233f 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -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>
diff --git a/templates/registration/login.html b/templates/registration/login.html
index 7e9e882..f0e90d5 100644
--- a/templates/registration/login.html
+++ b/templates/registration/login.html
@@ -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>