From 8cbafc412f4cc23ff7a86f6a13343aa41a4d3a0f Mon Sep 17 00:00:00 2001
From: Dorian Lesbre <dorian.lesbre@gmail.com>
Date: Wed, 10 Mar 2021 17:14:42 +0100
Subject: [PATCH] Navbar toggle on small screen
---
accounts/templates/profile.html | 2 +-
home/static/css/style.css | 32 ++++++++++++++++++++++++++++++++
home/templates/base.html | 16 +++++++++++++++-
interludes/settings.py | 2 +-
4 files changed, 49 insertions(+), 3 deletions(-)
diff --git a/accounts/templates/profile.html b/accounts/templates/profile.html
index 1900100..fe7c571 100644
--- a/accounts/templates/profile.html
+++ b/accounts/templates/profile.html
@@ -55,7 +55,7 @@
<br><br>
{% endif %}
-<div class="flex">
+<div class="flex wrap">
{% if user.profile.is_registered %}
{% if settings.inscriptions_open %}
<a class="button" href="{% url 'desinscription' %}">Me désinscrire</a>
diff --git a/home/static/css/style.css b/home/static/css/style.css
index fd39839..47c2ae6 100644
--- a/home/static/css/style.css
+++ b/home/static/css/style.css
@@ -102,6 +102,38 @@ nav a:hover {
nav a.current {
background-color: var(--color_bg_1);
}
+nav a.icon {
+ display: none;
+ width: 40px;
+}
+ /* hide all links except home and display menu icon */
+@media (max-width: 600px) {
+ nav {
+ padding: 0;
+ }
+ nav a:not(:first-child) {display: none;}
+ nav a.icon {
+ float: right;
+ display: block;
+ }
+ /* The "responsive" class is added bu JS when the user click the menu icon */
+ nav.responsive {
+ position: relative;
+ flex-direction: column;
+ justify-content: start;
+ }
+ nav.responsive a.icon {
+ position: absolute;
+ right: 0px;
+ top: 0;
+ }
+ nav.responsive a {
+ float: none;
+ display: block;
+ }
+
+}
+
main {
background-color: var(--color-bg);
diff --git a/home/templates/base.html b/home/templates/base.html
index 42874c0..f883b0c 100644
--- a/home/templates/base.html
+++ b/home/templates/base.html
@@ -33,7 +33,18 @@
</div>
</header>
- <nav>
+ <script type="text/javascript">
+ function toggle_menu() {
+ var nav = document.getElementById("nav");
+ if (nav.className === "") {
+ nav.className += "responsive";
+ } else {
+ nav.className = "";
+ }
+ }
+ </script>
+
+ <nav id="nav">
<a href="{% url 'home' %}" rel="text/html"
class="{% block nav_home %}{% endblock %}">
Accueil
@@ -67,6 +78,9 @@
Administration
</a>
{% endif %}
+ <a href="javascript:void(0);" class="icon" onclick="toggle_menu()">
+ <i class="fa fa-bars"></i>
+ </a>
</nav>
<main>
diff --git a/interludes/settings.py b/interludes/settings.py
index 25e9b60..70d9fed 100644
--- a/interludes/settings.py
+++ b/interludes/settings.py
@@ -27,7 +27,7 @@ DEBUG = True
ADMINS = [("respos", "respointerludes2021@ens.psl.eu"),]
-ALLOWED_HOSTS = []
+ALLOWED_HOSTS = ['localhost', '192.168.43.13']
# Application definition
--
GitLab