From 68001714f0485e36c8816b577a0d723faa103a51 Mon Sep 17 00:00:00 2001
From: Jean-Marie PLACE <jean-marie.place@univ-lille1.fr>
Date: Tue, 12 Apr 2022 18:07:49 +0200
Subject: [PATCH] add folding on logo editor

---
 app/static/css/scodoc.css       |  52 +++++++++++-
 app/templates/config_logos.html | 142 ++++++++++++++++----------------
 2 files changed, 118 insertions(+), 76 deletions(-)

diff --git a/app/static/css/scodoc.css b/app/static/css/scodoc.css
index 9811b304..ba00717a 100644
--- a/app/static/css/scodoc.css
+++ b/app/static/css/scodoc.css
@@ -987,9 +987,34 @@ span.wtf-field ul.errors li {
   font-weight: bold;
 }
 
-.configuration_logo div.img {}
+.configuration_logo summary {
+  display: list-item !important;
+}
 
-.configuration_logo div.img-container {
+.configuration_logo h1 {
+  display: inline-block;
+}
+
+.configuration_logo h2 {
+  display: inline-block;
+}
+
+.configuration_logo h3 {
+  display: inline-block;
+}
+
+.configuration_logo details > *:not(summary) {
+  margin-left: 32px;
+}
+
+.configuration_logo .content {
+  display : grid;
+  grid-template-columns: auto auto 1fr;
+}
+
+.configuration_logo .image_logo {
+  vertical-align: top;
+  grid-column: 1/2;
   width: 256px;
 }
 
@@ -997,8 +1022,27 @@ span.wtf-field ul.errors li {
   max-width: 100%;
 }
 
-.configuration_logo div.img-data {
-  vertical-align: top;
+.configuration_logo .infos_logo {
+  grid-column: 2/3;
+}
+
+.configuration_logo .actions_logo {
+  grid-column: 3/5;
+  display:grid;
+  grid-template-columns: auto auto;
+  grid-column-gap: 10px;
+  align-self: start;
+  grid-row-gap: 10px;
+}
+
+.configuration_logo .actions_logo .action_label {
+  grid-column: 1/2;
+  grid-template-columns: auto auto;
+}
+
+.configuration_logo .actions_logo .action_button {
+  grid-column: 2/3;
+  align-self: start;
 }
 
 .configuration_logo logo-edit titre {
diff --git a/app/templates/config_logos.html b/app/templates/config_logos.html
index f4bd543c..a4974ca7 100644
--- a/app/templates/config_logos.html
+++ b/app/templates/config_logos.html
@@ -20,73 +20,70 @@
 {% endmacro %}
 
 {% macro render_add_logo(add_logo_form) %}
-<div class="logo-add">
-    <h3>Ajouter un logo</h3>
-    {{ add_logo_form.hidden_tag() }}
-    {{ render_field(add_logo_form.name) }}
-    {{ render_field(add_logo_form.upload) }}
-    {{ render_field(add_logo_form.do_insert, False, onSubmit="submit_form") }}
-</div>
+    <details>
+        <summary>
+            <h3>Ajouter un logo</h3>
+        </summary>
+        <div>
+            {{ render_field(add_logo_form.name) }}
+            {{ render_field(add_logo_form.upload) }}
+            {{ render_field(add_logo_form.do_insert, False, onSubmit="submit_form") }}
+        </div>
+    </details>
 {% endmacro %}
 
 {% macro render_logo(dept_form, logo_form) %}
-<div class="logo-edit">
-    {{ logo_form.hidden_tag() }}
-    {% if logo_form.titre %}
-    <tr class="logo-edit">
-        <td colspan="3" class="titre">
-            <div class="nom">
-                <h3>{{ logo_form.titre }}</h3>
-            </div>
-            <div class="description">{{ logo_form.description or "" }}</div>
-        </td>
-    </tr>
-    {% else %}
-    <tr class="logo-edit">
-        <td colspan="3" class="titre">
-            <span class="nom">
-                <h3>Logo personalisé: {{ logo_form.logo_id.data }}</h3>
-            </span>
-            <span class="description">{{ logo_form.description or "" }}</span>
-        </td>
-    </tr>
-    {% endif %}
-    <tr>
-        <td style="padding-right: 20px; ">
-            <div class="img-container">
+    <details>
+        {{ logo_form.hidden_tag() }}
+        <summary>
+            {% if logo_form.titre %}
+                <h3 class="titre_logo">{{ logo_form.titre }}</h3>
+                {% if logo_form.description %}
+                    <div class="sco_help">{{ logo_form.description }}</div>
+                {% endif %}
+            {% else %}
+                <h3 class="titre_logo">Logo personalisé: {{ logo_form.logo_id.data }}</h3>
+                {% if logo_form.description %}
+                    <div class="sco_help">{{ logo_form.description }}</div>
+                {% endif %}
+            {% endif %}
+        </summary>
+        <div class="content">
+            <div class="image_logo">
                 <img src="{{ logo_form.logo.get_url_small() }}" alt="pas de logo chargé" />
             </div>
-        </td>
-        <td class="img-data">
-            <h3>{{ logo_form.logo.logoname }} (Format: {{ logo_form.logo.suffix }})</h3>
-            Taille: {{ logo_form.logo.size }} px
-            {% if logo_form.logo.mm %} &nbsp; / &nbsp; {{ logo_form.logo.mm }} mm {% endif %}<br />
-            Aspect ratio: {{ logo_form.logo.aspect_ratio }}<br />
-            Usage: <span style="font-family: system-ui">{{ logo_form.logo.get_usage() }}</span>
-        </td>
-        <td class="" img-action">
-            <p>Modifier l'image</p>
-            <span class="wtf-field">{{ render_field(logo_form.upload, False, onchange="submit_form()") }}</span>
-            {% if logo_form.can_delete %}
-            <p>Supprimer l'image</p>
-            {{ render_field(logo_form.do_delete, False, onSubmit="submit_form()") }}
-            {% endif %}
-        </td>
-    </tr>
-</div>
+            <div class="infos_logo">
+                <h4>{{ logo_form.logo.logoname }} (Format: {{ logo_form.logo.suffix }})</h4>
+                Taille: {{ logo_form.logo.size }} px
+                {% if logo_form.logo.mm %} &nbsp; / &nbsp; {{ logo_form.logo.mm }} mm {% endif %}<br />
+                Aspect ratio: {{ logo_form.logo.aspect_ratio }}<br />
+                Usage: <span style="font-family: system-ui">{{ logo_form.logo.get_usage() }}</span>
+            </div>
+            <div class="actions_logo">
+                    <div class="action_label">Modifier l'image</div>
+                    <div class="action_button">
+                        <span class="wtf-field">{{ render_field(logo_form.upload, False, onchange="submit_form()") }}</span>
+                    </div>
+                    {% if logo_form.can_delete %}
+                        <div class="action_label">Supprimer l'image</div>
+                        <div class="action_button">
+                            {{ render_field(logo_form.do_delete, False, onSubmit="submit_form()") }}
+                        </div>
+                    {% endif %}
+            </div>
+        </div>
+    </details>
 {% endmacro %}
 
 {% macro render_logos(dept_form) %}
-<table>
     {% for logo_entry in dept_form.logos.entries %}
     {% set logo_form = logo_entry.form %}
     {{ render_logo(dept_form, logo_form) }}
     {% else %}
-    <p class="logo-edit">
-    <h3>Aucun logo défini en propre à ce département</h3>
+    <p class="logo-titre_logo">
+    <h3 class="titre_logo">Aucun logo défini en propre à ce département</h3>
     </p>
     {% endfor %}
-</table>
 {% endmacro %}
 
 {% block app_content %}
@@ -100,25 +97,26 @@
     <div class="configuration_logo">
         <h1>Bibliothèque de logos</h1>
         {% for dept_entry in form.depts.entries %}
-        {% set dept_form = dept_entry.form %}
-        {{ dept_entry.form.hidden_tag() }}
-        {% if dept_entry.form.is_local() %}
-        <div class="departement">
-            <h2>Département {{ dept_form.dept_name.data }}</h2>
-            <h3>Logos locaux</h3>
-            <div class="sco_help">Les paramètres donnés sont spécifiques à ce département.<br />
-                Les logos du département se substituent aux logos de même nom définis globalement:</div>
-        </div>
-        {% else %}
-        <div class="departement">
-            <h2>Logos généraux</h2>
-            <div class="sco_help">Les images de cette section sont utilisé pour tous les départements,
-                mais peuvent être redéfinies localement au niveau de chaque département
-                (il suffit de définir un logo local de même nom)</div>
-        </div>
-        {% endif %}
-        {{ render_logos(dept_form) }}
-        {{ render_add_logo(dept_form.add_logo.form) }}
+            <details>
+            {% set dept_form = dept_entry.form %}
+            {{ dept_entry.form.hidden_tag() }}
+            <summary>
+                {% if dept_entry.form.is_local() %}
+                        <h2>Département {{ dept_form.dept_name.data }}</h2>
+                        <div class="sco_help">Les paramètres donnés sont spécifiques à ce département.<br />
+                            Les logos du département se substituent aux logos de même nom définis globalement:</div>
+               {% else %}
+                        <h2>Logos généraux</h2>
+                        <div class="sco_help">Les images de cette section sont utilisé pour tous les départements,
+                            mais peuvent être redéfinies localement au niveau de chaque département
+                            (il suffit de définir un logo local de même nom)</div>
+               {% endif %}
+            </summary>
+            <div>
+                {{ render_logos(dept_form) }}
+                {{ render_add_logo(dept_form.add_logo.form) }}
+            </div>
+        </details>
         {% endfor %}
     </div>
 </form>