From cb889df131f2184d199f865ea0ba9d84cb335ad0 Mon Sep 17 00:00:00 2001
From: Jean-Marie Favreau <j-marie.favreau@uca.fr>
Date: Wed, 21 Aug 2024 12:09:03 +0200
Subject: [PATCH] on affine la mise en page

---
 src/agenda_culturel/static/style.scss         | 46 ++++++++++++++----
 .../templates/agenda_culturel/filter-inc.html |  2 +-
 .../templates/agenda_culturel/page.html       | 47 ++++++++++---------
 3 files changed, 62 insertions(+), 33 deletions(-)

diff --git a/src/agenda_culturel/static/style.scss b/src/agenda_culturel/static/style.scss
index db6fb57..92b8cad 100644
--- a/src/agenda_culturel/static/style.scss
+++ b/src/agenda_culturel/static/style.scss
@@ -103,6 +103,9 @@ nav a:hover>.action {
 details {
     border-bottom: 0;
 }
+details summary[role="button"]  {
+    color: var(--primary-inverse);
+}
 
 details[role="list"] summary + ul li.selected>a{
     background: $primary-600;
@@ -344,6 +347,8 @@ article form label {
 article#filters {
     margin-bottom: 0;
     padding-bottom: 0.2em;
+    margin-top: 0.4em;
+    padding-top: 0.6em;
     
     .buttons-filter {
         float: right;
@@ -510,16 +515,41 @@ nav>div {
         float: left;
         top: 0;
         left: 0;
-        width: auto;
-        padding-right: 4em;
-        max-width: 80%;
-
+        padding-right: 0;
+        max-width: 70%;
+        padding-top: 0.2em;
         li {
-            padding: 0.7em;
+            font-size: 75%;
+            padding: 0.1em 0;
+            .soustitre {
+                font-size: 60%;
+                font-style: italic;
+            }
+    
             img {
+                font-size: 130%;
                 height: 2em;
             }
         }
+        li:first-child {
+            padding: 0.2em 0.5em;
+        }
+
+
+        @media only screen and (min-width: 380px) {
+            max-width: 80%;
+            li {
+                font-size: 85%;
+                img {
+                    font-size: 110%;
+                }
+            }
+        }
+        @media only screen and (min-width: 992px) {
+            li:first-child {
+                padding: 0.5em 0.5em;
+            }
+        }
     }
 
     ul, div {
@@ -584,7 +614,7 @@ nav>div {
         cursor: pointer;
         display: block;
         float: right;
-        padding: 10px 20px;
+        padding: 7px 10px 3px 20px;
         position: relative;
         user-select: none;
         font-size: 24px;
@@ -981,7 +1011,3 @@ table .buttons {
     }
 }
 
-.soustitre {
-    margin-top: -1.5em;
-    margin-left: 0.5em;
-}
\ No newline at end of file
diff --git a/src/agenda_culturel/templates/agenda_culturel/filter-inc.html b/src/agenda_culturel/templates/agenda_culturel/filter-inc.html
index 2f8adb7..2a42fd8 100644
--- a/src/agenda_culturel/templates/agenda_culturel/filter-inc.html
+++ b/src/agenda_culturel/templates/agenda_culturel/filter-inc.html
@@ -3,7 +3,7 @@
 
 <article id="filters">
     <details>
-<summary role="button" class="contrast outline">
+<summary role="button" class="outline secondary">
     {% if filter.is_active %}
         Filtre&nbsp;: 
         {% for c in filter.get_categories %}
diff --git a/src/agenda_culturel/templates/agenda_culturel/page.html b/src/agenda_culturel/templates/agenda_culturel/page.html
index d9864ef..6ae90f2 100644
--- a/src/agenda_culturel/templates/agenda_culturel/page.html
+++ b/src/agenda_culturel/templates/agenda_culturel/page.html
@@ -47,28 +47,31 @@
                     </a>
                 </li>
                 <li>
-                    {% if perms.agenda_culturel.add_event %}
-                    <a class="badge simple" href="{% url 'add_event_urls' %}">{% picto_from_name "plus-circle" %} {% picto_from_name "calendar" %}</a>
-                    {% endif %}
-                    {% if perms.agenda_culturel.view_recurrentimport %}
-                    {% show_badge_failed_rimports "bottom" %}
-                    {% endif %}
-                    {% if perms.agenda_culturel.change_event %}
-                    {% show_badges_events "bottom" %}
-                    {% endif %}
-                    {% if perms.agenda_culturel.change_duplicatedevents %}
-                    {% show_badge_duplicated "bottom" %}
-                    {% endif %}
-                    {% if perms.agenda_culturel.change_place and perms.agenda_culturel.change_event %}
-                    {% show_badge_unknown_places "bottom" %}
-                    {% endif %}
-                    {% if perms.agenda_culturel.view_contactmessage %}
-                    {% show_badge_contactmessages "bottom" %}
-                    {% endif %}
-                    {% if user.is_authenticated %}
-                    {{ user.username }} @
-                    {% endif %}
-                    <a href="{% url 'home' %}" aria-label="Retour accueil">Pommes de lune</a>
+                    <div>
+                        {% if perms.agenda_culturel.add_event %}
+                        <a class="badge simple" href="{% url 'add_event_urls' %}">{% picto_from_name "plus-circle" %} {% picto_from_name "calendar" %}</a>
+                        {% endif %}
+                        {% if perms.agenda_culturel.view_recurrentimport %}
+                        {% show_badge_failed_rimports "bottom" %}
+                        {% endif %}
+                        {% if perms.agenda_culturel.change_event %}
+                        {% show_badges_events "bottom" %}
+                        {% endif %}
+                        {% if perms.agenda_culturel.change_duplicatedevents %}
+                        {% show_badge_duplicated "bottom" %}
+                        {% endif %}
+                        {% if perms.agenda_culturel.change_place and perms.agenda_culturel.change_event %}
+                        {% show_badge_unknown_places "bottom" %}
+                        {% endif %}
+                        {% if perms.agenda_culturel.view_contactmessage %}
+                        {% show_badge_contactmessages "bottom" %}
+                        {% endif %}
+                        {% if user.is_authenticated %}
+                        {{ user.username }} @
+                        {% endif %}
+                        <a href="{% url 'home' %}" aria-label="Retour accueil">Pommes de lune</a>
+                        </div>
+                        <div class="soustitre">Événements culturels à Clermont-Ferrand et aux environs</div>
                     </li>
             </ul>
         </nav>