From fa4024a91217048fac7b99b36e1a688e3dd33694 Mon Sep 17 00:00:00 2001
From: Jean-Marie Favreau <jean-marie.favreau@logiroad-center.com>
Date: Sat, 15 Mar 2025 22:07:53 +0100
Subject: [PATCH] Correction mise en page tableaux sur smartphone

Fix #87
---
 src/agenda_culturel/static/style.scss         |  18 +--
 .../agenda_culturel/categorisation_rules.html | 110 ++++++++--------
 .../templates/agenda_culturel/messages.html   | 118 +++++++++---------
 .../templates/agenda_culturel/rimports.html   |  96 +++++++-------
 .../templates/agenda_culturel/statistics.html |  34 ++---
 5 files changed, 193 insertions(+), 183 deletions(-)

diff --git a/src/agenda_culturel/static/style.scss b/src/agenda_culturel/static/style.scss
index 2253667..7e56ae7 100644
--- a/src/agenda_culturel/static/style.scss
+++ b/src/agenda_culturel/static/style.scss
@@ -680,13 +680,15 @@ header .remarque {
         margin-right: 2em;
     }
 }
-.form.recent {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    column-gap: .5em;
-    :last-child, :nth-last-child(4),
-    button {
-        grid-column: 1/3;
+@media only screen and (min-width: 800px) {
+    .form.recent {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        column-gap: .5em;
+        :last-child, :nth-last-child(4),
+        button {
+            grid-column: 1/3;
+        }
     }
 }
 .form.recent.moderation-events {
@@ -1636,7 +1638,7 @@ form.messages {
         display: block;
         fieldset div {
             display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+            //grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
             margin-right: 1em;
         }
     }
diff --git a/src/agenda_culturel/templates/agenda_culturel/categorisation_rules.html b/src/agenda_culturel/templates/agenda_culturel/categorisation_rules.html
index 561b2c3..b0303a9 100644
--- a/src/agenda_culturel/templates/agenda_culturel/categorisation_rules.html
+++ b/src/agenda_culturel/templates/agenda_culturel/categorisation_rules.html
@@ -34,62 +34,64 @@
           Les règles sont appliquées à l'import sur tous les événements, et à la demande sur tous les événements, avec confirmation dans le cas d'événements déjà catégorisés.
         </p>
       </header>
-      <table role="grid">
-        <thead>
-          <tr>
-            <th>Identifiant</th>
-            <th>Catégorie</th>
-            <th>Conditions</th>
-            <th>Poids</th>
-            <th>Actions</th>
-          </tr>
-        </thead>
-        <tbody>
-          {% for obj in paginator_filter %}
+      <div class="large-table">
+        <table role="grid">
+          <thead>
             <tr>
-              <td>{{ obj.pk }}</td>
-              <td>{{ obj.category }}</td>
-              <td>
-                <ul>
-                  {% if obj.title_contains %}
-                    <li>
-                      Le titre contient
-                      {% if obj.title_exact %}exactement{% endif %}
-                      «&nbsp;{{ obj.title_contains }}&nbsp;»
-                    </li>
-                  {% endif %}
-                  {% if obj.description_contains %}
-                    <li>
-                      La description contient
-                      {% if obj.desc_exact %}exactement{% endif %}
-                      «&nbsp;{{ obj.description_contains }}&nbsp;»
-                    </li>
-                  {% endif %}
-                  {% if obj.location_contains %}
-                    <li>
-                      La localisation contient
-                      {% if obj.loc_exact %}exactement{% endif %}
-                      «&nbsp;{{ obj.location_contains }}&nbsp;»
-                    </li>
-                  {% endif %}
-                  {% if obj.place %}
-                    <li>
-                      Le lieu est <a href="{{ obj.place.get_absolute_url }}">{{ obj.place.name }}</a>
-                    </li>
-                  {% endif %}
-                </ul>
-              </td>
-              <td>{{ obj.weight }}</td>
-              <td>
-                <div class="buttons">
-                  <a href="{% url 'edit_catrule' obj.pk %}" role="button">Modifier</a>
-                  <a href="{% url 'delete_catrule' obj.pk %}" role="button">Supprimer</a>
-                </div>
-              </td>
+              <th>Identifiant</th>
+              <th>Catégorie</th>
+              <th>Conditions</th>
+              <th>Poids</th>
+              <th>Actions</th>
             </tr>
-          {% endfor %}
-        </tbody>
-      </table>
+          </thead>
+          <tbody>
+            {% for obj in paginator_filter %}
+              <tr>
+                <td>{{ obj.pk }}</td>
+                <td>{{ obj.category }}</td>
+                <td>
+                  <ul>
+                    {% if obj.title_contains %}
+                      <li>
+                        Le titre contient
+                        {% if obj.title_exact %}exactement{% endif %}
+                        «&nbsp;{{ obj.title_contains }}&nbsp;»
+                      </li>
+                    {% endif %}
+                    {% if obj.description_contains %}
+                      <li>
+                        La description contient
+                        {% if obj.desc_exact %}exactement{% endif %}
+                        «&nbsp;{{ obj.description_contains }}&nbsp;»
+                      </li>
+                    {% endif %}
+                    {% if obj.location_contains %}
+                      <li>
+                        La localisation contient
+                        {% if obj.loc_exact %}exactement{% endif %}
+                        «&nbsp;{{ obj.location_contains }}&nbsp;»
+                      </li>
+                    {% endif %}
+                    {% if obj.place %}
+                      <li>
+                        Le lieu est <a href="{{ obj.place.get_absolute_url }}">{{ obj.place.name }}</a>
+                      </li>
+                    {% endif %}
+                  </ul>
+                </td>
+                <td>{{ obj.weight }}</td>
+                <td>
+                  <div class="buttons">
+                    <a href="{% url 'edit_catrule' obj.pk %}" role="button">Modifier</a>
+                    <a href="{% url 'delete_catrule' obj.pk %}" role="button">Supprimer</a>
+                  </div>
+                </td>
+              </tr>
+            {% endfor %}
+          </tbody>
+        </table>
+      </div>
       <footer>
         <span>{% include "agenda_culturel/paginator.html" %}</span>
       </footer>
diff --git a/src/agenda_culturel/templates/agenda_culturel/messages.html b/src/agenda_culturel/templates/agenda_culturel/messages.html
index ee87181..fb7f9d6 100644
--- a/src/agenda_culturel/templates/agenda_culturel/messages.html
+++ b/src/agenda_culturel/templates/agenda_culturel/messages.html
@@ -43,68 +43,70 @@
           <button type="submit">Filtrer</button>
         </form>
       </header>
-      <table role="grid">
-        <thead>
-          <tr>
-            <th>Date</th>
-            <th>Type</th>
-            <th>Sujet</th>
-            <th>Auteur</th>
-            <th>Événement</th>
-            <th>Fermé</th>
-            <th>Spam</th>
-          </tr>
-        </thead>
-        <tbody>
-          {% for obj in paginator_filter %}
+      <div class="large-table">
+        <table role="grid">
+          <thead>
             <tr>
-              <td>{{ obj.date }}</td>
-              <td>
-                {% if obj.message_type %}
-                  {{ obj.get_message_type_display }}
-                {% else %}
-                  -
-                {% endif %}
-              </td>
-              <td>
-                <a href="{% url 'message' obj.pk %}">{{ obj.subject }}</a>
-              </td>
-              <td>
-                {% if obj.user %}
-                  <em>{{ obj.user }}</em>
-                {% else %}
-                  {% if obj.name %}
-                    {{ obj.name }}
+              <th>Date</th>
+              <th>Type</th>
+              <th>Sujet</th>
+              <th>Auteur</th>
+              <th>Événement</th>
+              <th>Fermé</th>
+              <th>Spam</th>
+            </tr>
+          </thead>
+          <tbody>
+            {% for obj in paginator_filter %}
+              <tr>
+                <td>{{ obj.date }}</td>
+                <td>
+                  {% if obj.message_type %}
+                    {{ obj.get_message_type_display }}
                   {% else %}
                     -
                   {% endif %}
-                {% endif %}
-              </td>
-              <td>
-                {% if obj.related_event %}
-                  <a href="{{ obj.related_event.get_absolute_url }}">{{ obj.related_event.pk }}</a>
-                {% else %}
-                  -
-                {% endif %}
-              </td>
-              <td>
-                {% if obj.closed %}
-                  {% picto_from_name "check-square" "fermé" %}
-                {% else %}
-                  {% picto_from_name "square" "ouvert" %}
-                {% endif %}
-              </td>
-              <td>
-                {% if obj.spam %}
-                  {% picto_from_name "check-square" "spam" %}
-                {% else %}
-                  {% picto_from_name "square" "non spam" %}
-                {% endif %}
-              </td>
-            </tr>
-          {% endfor %}
-        </tbody>
-      </table>
+                </td>
+                <td>
+                  <a href="{% url 'message' obj.pk %}">{{ obj.subject }}</a>
+                </td>
+                <td>
+                  {% if obj.user %}
+                    <em>{{ obj.user }}</em>
+                  {% else %}
+                    {% if obj.name %}
+                      {{ obj.name }}
+                    {% else %}
+                      -
+                    {% endif %}
+                  {% endif %}
+                </td>
+                <td>
+                  {% if obj.related_event %}
+                    <a href="{{ obj.related_event.get_absolute_url }}">{{ obj.related_event.pk }}</a>
+                  {% else %}
+                    -
+                  {% endif %}
+                </td>
+                <td>
+                  {% if obj.closed %}
+                    {% picto_from_name "check-square" "fermé" %}
+                  {% else %}
+                    {% picto_from_name "square" "ouvert" %}
+                  {% endif %}
+                </td>
+                <td>
+                  {% if obj.spam %}
+                    {% picto_from_name "check-square" "spam" %}
+                  {% else %}
+                    {% picto_from_name "square" "non spam" %}
+                  {% endif %}
+                </td>
+              </tr>
+            {% endfor %}
+          </tbody>
+        </table>
+      </div>
       <footer>
         {% include "agenda_culturel/paginator_filter.html" %}
       </footer>
diff --git a/src/agenda_culturel/templates/agenda_culturel/rimports.html b/src/agenda_culturel/templates/agenda_culturel/rimports.html
index 8400c03..7ed3fb2 100644
--- a/src/agenda_culturel/templates/agenda_culturel/rimports.html
+++ b/src/agenda_culturel/templates/agenda_culturel/rimports.html
@@ -59,57 +59,59 @@
           <button type="submit">Filtrer</button>
         </form>
       </header>
-      <table role="grid">
-        <thead>
-          <tr>
-            <th>Id</th>
-            <th>Nom</th>
-            <th>Récurrence</th>
-            <th>Nb d'imports</th>
-            <th>Dernier</th>
-            <th>Actions</th>
-          </tr>
-        </thead>
-        <tbody>
-          {% for obj in paginator_filter %}
+      <div class="large-table">
+        <table role="grid">
+          <thead>
             <tr>
+              <th>Id</th>
+              <th>Nom</th>
+              <th>Récurrence</th>
+              <th>Nb d'imports</th>
+              <th>Dernier</th>
+              <th>Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            {% for obj in paginator_filter %}
+              <tr>
+                <td>
+                {{ obj.pk }}</a>
+              </td>
               <td>
-              {{ obj.pk }}</a>
+              {{ obj.name }}</a>
+            </td>
+            <td>{{ obj.get_recurrence_display }}</td>
+            <td>{{ obj.nb_imports }}</td>
+            <td>
+              {% if obj.nb_imports > 0 %}
+                {% with imp=obj.last_import %}
+                  <span {% if imp.status == "failed" %}data-tooltip="{{ imp.error_message }}"{% endif %}>
+                    {% if imp.status == "running" %}
+                      <em>{{ imp.status }}</em>
+                    {% else %}
+                      {{ imp.status }}
+                      {% if imp.status == "success" %}({{ imp.nb_initial }}){% endif %}
+                    {% endif %}
+                  </span>
+                {% endwith %}
+              {% endif %}
             </td>
             <td>
-            {{ obj.name }}</a>
-          </td>
-          <td>{{ obj.get_recurrence_display }}</td>
-          <td>{{ obj.nb_imports }}</td>
-          <td>
-            {% if obj.nb_imports > 0 %}
-              {% with imp=obj.last_import %}
-                <span {% if imp.status == "failed" %}data-tooltip="{{ imp.error_message }}"{% endif %}>
-                  {% if imp.status == "running" %}
-                    <em>{{ imp.status }}</em>
-                  {% else %}
-                    {{ imp.status }}
-                    {% if imp.status == "success" %}({{ imp.nb_initial }}){% endif %}
-                  {% endif %}
-                </span>
-              {% endwith %}
-            {% endif %}
-          </td>
-          <td>
-            <div class="buttons">
-              {% if not obj.last_import or obj.last_import.status != "running" %}
-                <a href="{% url 'run_rimport' obj.pk %}" role="button">Exécuter</a>
-              {% else %}
-                <a href="{% url 'cancel_import' obj.last_import.pk %}" role="button">Annuler</a>
-              {% endif %}
-              <a href="{% url 'view_rimport' obj.pk %}" role="button">Consulter</a>
-              <a href="{% url 'edit_rimport' obj.pk %}" role="button">Modifier</a>
-            </div>
-          </td>
-        </tr>
-      {% endfor %}
-    </tbody>
-  </table>
+              <div class="buttons">
+                {% if not obj.last_import or obj.last_import.status != "running" %}
+                  <a href="{% url 'run_rimport' obj.pk %}" role="button">Exécuter</a>
+                {% else %}
+                  <a href="{% url 'cancel_import' obj.last_import.pk %}" role="button">Annuler</a>
+                {% endif %}
+                <a href="{% url 'view_rimport' obj.pk %}" role="button">Consulter</a>
+                <a href="{% url 'edit_rimport' obj.pk %}" role="button">Modifier</a>
+              </div>
+            </td>
+          </tr>
+        {% endfor %}
+      </tbody>
+    </table>
+  </div>
   <footer>
     <span>{% include "agenda_culturel/paginator.html" %}</span>
   </footer>
diff --git a/src/agenda_culturel/templates/agenda_culturel/statistics.html b/src/agenda_culturel/templates/agenda_culturel/statistics.html
index dbee465..c7902ce 100644
--- a/src/agenda_culturel/templates/agenda_culturel/statistics.html
+++ b/src/agenda_culturel/templates/agenda_culturel/statistics.html
@@ -49,22 +49,24 @@
       On affiche cette information pour les imports depuis le début de leur
       intégration à l'agenda, mais aussi pour le dernier mois.
     </p>
-    <table>
-      <thead>
-        <th class="label"></th>
-        {% for v in stats_foresight %}<th>{{ v.0 }}</th>{% endfor %}
-      </thead>
-      <tbody>
-        <tr>
-          <th class="label">écart (en jours)</th>
-          {% for v in stats_foresight %}<th>{{ v.1 }}</th>{% endfor %}
-        </tr>
-        <tr>
-          <th class="label">écart du dernier mois (en jours)</th>
-          {% for v in stats_foresight %}<th>{{ v.2 }}</th>{% endfor %}
-        </tr>
-      </tbody>
-    </table>
+    <div class="large-table">
+      <table>
+        <thead>
+          <th class="label"></th>
+          {% for v in stats_foresight %}<th>{{ v.0 }}</th>{% endfor %}
+        </thead>
+        <tbody>
+          <tr>
+            <th class="label">écart (en jours)</th>
+            {% for v in stats_foresight %}<th>{{ v.1 }}</th>{% endfor %}
+          </tr>
+          <tr>
+            <th class="label">écart du dernier mois (en jours)</th>
+            {% for v in stats_foresight %}<th>{{ v.2 }}</th>{% endfor %}
+          </tr>
+        </tbody>
+      </table>
+    </div>
     <h2>Par ville</h2>
     <p>Nombre d'événements référencés par ville.</p>
     <ul>