Amélioration de la présentation, notamment sur smartphone

Fix #10

src/agenda_culturel/static/style.scss

@@ -13,6 +13,10 @@ $enable-responsive-typography: true;
 // Import Pico
 @import "./pico/pico";
 
+[role="button"] {
+    margin: 0.1em 0;
+}
+
 :root {
     --spacing: 0.4rem;
     
@@ -222,9 +226,20 @@ article.day>ul {
     padding: 0;
     display: flex;
     flex-direction: row;
+    gap: 0.2em;
     div {
-        flex: auto;
+        width: 0;
+        flex: 1 1 0px;
+        a {
+            width: 100%;
+        }
+        @media only screen and (min-width: 992px) {
+            a {
+                width: 10em;
+            }
+        }
     }
+    
 }
 
 
@@ -403,3 +418,143 @@ $yellow-900: #616918 !default;
     margin-left: 0;
     padding-left: 3.7em;
 }
+
+nav>div {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+nav#main {
+    align-content: flex-start;
+
+    ul, div {
+        margin: 0 0 auto 0;
+    }
+
+    overflow: hidden;
+
+      /* header */
+      .header {
+        z-index: 3;  
+        text-align: right;    
+        display: block;
+      }
+      
+      .header ul {
+        margin: 0.2em 0 0.35em 0;
+        padding: 0;
+        list-style: none;
+        overflow: hidden;
+      }
+      .header ul li {
+        clear: both;
+        float: right;
+        padding: .4em .8em;
+      }
+            
+      .header .logo {
+        display: block;
+        float: left;
+        font-size: 2em;
+        padding: 10px 20px;
+        text-decoration: none;
+      }
+      
+      /* menu */
+      
+      .header .menu {
+        clear: both;
+        max-height: 0;
+        transition: max-height .2s ease-out;
+        display: block;
+        float: right;
+      }
+      
+      /* menu icon */
+      
+      .header .menu-icon {
+        cursor: pointer;
+        display: block;
+        float: right;
+        padding: 28px 20px;
+        position: relative;
+        user-select: none;
+      }
+      
+      .header .menu-icon .navicon {
+        background: #333;
+        display: block;
+        height: 2px;
+        position: relative;
+        transition: background .2s ease-out;
+        width: 18px;
+      }
+      
+      .header .menu-icon .navicon:before,
+      .header .menu-icon .navicon:after {
+        background: #333;
+        content: '';
+        display: block;
+        height: 100%;
+        position: absolute;
+        transition: all .2s ease-out;
+        width: 100%;
+      }
+      
+      .header .menu-icon .navicon:before {
+        top: 5px;
+      }
+      
+      .header .menu-icon .navicon:after {
+        top: -5px;
+      }
+      
+      /* menu btn */
+      
+      .header .menu-btn {
+        display: none;
+      }
+      
+      .header .menu-btn:checked ~ .menu {
+        max-height: 240px;
+      }
+      
+      .header .menu-btn:checked ~ .menu-icon .navicon {
+        background: transparent;
+      }
+      
+      .header .menu-btn:checked ~ .menu-icon .navicon:before {
+        transform: rotate(-45deg);
+      }
+      
+      .header .menu-btn:checked ~ .menu-icon .navicon:after {
+        transform: rotate(45deg);
+      }
+      
+      .header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
+      .header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
+        top: 0;
+      }
+      
+      
+      @media only screen and (min-width: 992px) {
+        .header li {
+          float: left;
+        }
+        .header .menu {
+          clear: none;
+          float: right;
+          max-height: none;
+        }
+        .header .menu-icon {
+          display: none;
+        }
+        .header ul li {
+            clear: none;
+            float: none;
+            display: inline-block;
+            padding: var(--nav-element-spacing-vertical) var(--nav-element-spacing-horizontal);
+        }
+        }
+}

src/agenda_culturel/templates/agenda_culturel/page-day.html

@@ -39,7 +39,7 @@
             {% endwith %}
             </div>
             <div class="right">
-            {% with day|shift_day:1 as next_day %}
+                {% with day|shift_day:1 as next_day %}
                 <a role="button" href="{% url 'day_view' next_day.year next_day.month next_day.day %}?{{ filter.get_url }}">suivant 
                     {% picto_from_name "chevron-right" %}
                 </a>

src/agenda_culturel/templates/agenda_culturel/page-month.html

@@ -37,7 +37,7 @@
                 {% picto_from_name "chevron-left" %} précédent</a>
             </div>
             <div class="right">
-            <a role="button" href="{% url 'month_view' calendar.next_month.year calendar.next_month.month %}?{{ filter.get_url }}">suivant 
+                <a role="button" href="{% url 'month_view' calendar.next_month.year calendar.next_month.month %}?{{ filter.get_url }}">suivant 
                 {% picto_from_name "chevron-right" %}
             </a>
             </div>

src/agenda_culturel/templates/agenda_culturel/page.html

@@ -25,7 +25,7 @@
 {% load event_extra %}
 {% load utils_extra %}
 <body>
-    <nav class="container-fluid">
+    <nav id="main" class="container-fluid">
         <ul>
             <li>
                 <a href="{% url 'home' %}" aria-label="Retour accueil">
@@ -37,34 +37,16 @@
                 
             </li>
         </ul>
-        <ul>
+        <div class="header">
-            <li>
+            <input class="menu-btn" type="checkbox" id="menu-btn" />
-                <a href="{% url 'event_search' %}">Rechercher {% picto_from_name "search" %}</a>
+            <label class="menu-icon" for="menu-btn">{% picto_from_name "menu" %}</label>
-            </li>
+            <ul class="menu">
-            <li>
+                <li><a href="{% url 'event_search' %}">Rechercher {% picto_from_name "search" %}</a></li>
-                <details role="list" dir="rtl">
+                <li><a href="{% url 'aujourdhui' %}">Aujourd'hui</a></li>
-                    <summary aria-haspopup="listbox" role="link">Maintenant</summary>
+                <li><a href="{% url 'cette_semaine' %}">Cette semaine</a></li>
-                    <ul role="listbox">
+                <li><a href="{% url 'ce_mois_ci' %}">Ce mois-ci</a></li>
-                        <li><a href="{% url 'aujourdhui' %}">Aujourd'hui</a></li>
+            </ul>
-                        <li><a href="{% url 'cette_semaine' %}">Cette semaine</a></li>
+        </div>
-                        <li><a href="{% url 'ce_mois_ci' %}">Ce mois-ci</a></li>
-                    </ul>
-                  </details>
-                </li>
-            <li>
-            <details role="list" dir="rtl">
-                <summary aria-haspopup="listbox" role="link">Événements</summary>
-                <ul role="listbox">
-                    <li><a href="{% url 'event_import_form' %}">Importer</a></li>
-                    <li><a href="{% url 'add_event' %}">Créer</a></li>
-                    <li><a>Exporter</a></li>
-                    {% if user.is_authenticated %}
-                    <li><a href="{% url 'view_all_events' %}">Gérer</a></li>
-                    {% endif %}
-                </ul>
-              </details>
-            </li>
-        </ul>
     </nav>
     <main class="container{% block main-fluid %}{% endblock %}">
       {% if messages %}
@@ -78,20 +60,34 @@
     
     <footer class="container{% block footer-fluid %}{% endblock %}">
         <div class="grid">
-            <ul>
+            <div>
-                <li><a href="{% url 'view_all_tags' %}">Toutes les étiquettes</a></li>
+                <h3>Informations</h3>
-                <li><a href="{% url 'mentions_legales' %}">Mentions légales</a></li>
+                <ul>
-            </ul>
+                    <li><a href="{% url 'view_all_tags' %}">Toutes les étiquettes</a></li>
-            <ul>
+                    <li><a href="{% url 'mentions_legales' %}">Mentions légales</a></li>
-                {% if user.is_authenticated %}
+                    <li><a>Exporter</a></li>
-                <li><a href="{% url 'admin:index' %}">administration</a></li>
+                </ul>
-                <li><a href="{% url 'logout' %}?next={% url 'home' %}">déconnexion</a></li>
+            </div>
-                <li>vous êtes connecté(e) en tant que {{ user }}</li>
+            <div>
-                {% else %}
+                <h3>Contribuer</h3>
-                <li><a href="{% url 'login' %}?next={% url 'view_all_events' %}">connexion</a></li>
+                <ul>
-                  {% endif %}
+                    <li><a href="{% url 'event_import_form' %}">Importer un événement</a></li>
-            </ul>
+                    <li><a href="{% url 'add_event' %}">Créer un événement</a></li>
-    
+                </ul>
+            </div>
+            <div>
+                <h3>Administrer</h3>
+                <ul>
+                    {% if user.is_authenticated %}
+                    <li><a href="{% url 'view_all_events' %}">Gérer les événements</a></li>
+                    <li><a href="{% url 'admin:index' %}">Administration</a></li>
+                    <li><a href="{% url 'logout' %}?next={% url 'home' %}">Déconnexion</a></li>
+                    <li>Vous êtes connecté(e) en tant que {{ user }}</li>
+                    {% else %}
+                    <li><a href="{% url 'login' %}?next={% url 'view_all_events' %}">Connexion</a></li>
+                    {% endif %}
+                </ul>
+            </div>
         </div>
     
     </footer>