lehmann/ScoDoc-Front
1
0
Fork 0
forked from ScoDoc/ScoDoc
Code Pull Requests Activity

add folding on logo editor

Browse Source
This commit is contained in:
Jean-Marie PLACE 2022-04-12 18:07:49 +02:00
parent e51b09e7f6
commit 68001714f0
2 changed files with 118 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
app/static/css/scodoc.css
View File

@ -987,9 +987,34 @@ span.wtf-field ul.errors li {
font-weight: bold; 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; width: 256px;
} }
@ -997,8 +1022,27 @@ span.wtf-field ul.errors li {
max-width: 100%; max-width: 100%;
} }
.configuration_logo div.img-data { .configuration_logo .infos_logo {
vertical-align: top; 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 { .configuration_logo logo-edit titre {

142
app/templates/config_logos.html
View File

@ -20,73 +20,70 @@
{% endmacro %} {% endmacro %}
{% macro render_add_logo(add_logo_form) %} {% macro render_add_logo(add_logo_form) %}
<div class="logo-add"> <details>
<h3>Ajouter un logo</h3> <summary>
{{ add_logo_form.hidden_tag() }} <h3>Ajouter un logo</h3>
{{ render_field(add_logo_form.name) }} </summary>
{{ render_field(add_logo_form.upload) }} <div>
{{ render_field(add_logo_form.do_insert, False, onSubmit="submit_form") }} {{ render_field(add_logo_form.name) }}
</div> {{ render_field(add_logo_form.upload) }}
{{ render_field(add_logo_form.do_insert, False, onSubmit="submit_form") }}
</div>
</details>
{% endmacro %} {% endmacro %}
{% macro render_logo(dept_form, logo_form) %} {% macro render_logo(dept_form, logo_form) %}
<div class="logo-edit"> <details>
{{ logo_form.hidden_tag() }} {{ logo_form.hidden_tag() }}
{% if logo_form.titre %} <summary>
<tr class="logo-edit"> {% if logo_form.titre %}
<td colspan="3" class="titre"> <h3 class="titre_logo">{{ logo_form.titre }}</h3>
<div class="nom"> {% if logo_form.description %}
<h3>{{ logo_form.titre }}</h3> <div class="sco_help">{{ logo_form.description }}</div>
</div> {% endif %}
<div class="description">{{ logo_form.description or "" }}</div> {% else %}
</td> <h3 class="titre_logo">Logo personalisé: {{ logo_form.logo_id.data }}</h3>
</tr> {% if logo_form.description %}
{% else %} <div class="sco_help">{{ logo_form.description }}</div>
<tr class="logo-edit"> {% endif %}
<td colspan="3" class="titre"> {% endif %}
<span class="nom"> </summary>
<h3>Logo personalisé: {{ logo_form.logo_id.data }}</h3> <div class="content">
</span> <div class="image_logo">
<span class="description">{{ logo_form.description or "" }}</span>
</td>
</tr>
{% endif %}
<tr>
<td style="padding-right: 20px; ">
<div class="img-container">
<img src="{{ logo_form.logo.get_url_small() }}" alt="pas de logo chargé" /> <img src="{{ logo_form.logo.get_url_small() }}" alt="pas de logo chargé" />
</div> </div>
</td> <div class="infos_logo">
<td class="img-data"> <h4>{{ logo_form.logo.logoname }} (Format: {{ logo_form.logo.suffix }})</h4>
<h3>{{ logo_form.logo.logoname }} (Format: {{ logo_form.logo.suffix }})</h3> Taille: {{ logo_form.logo.size }} px
Taille: {{ logo_form.logo.size }} px {% if logo_form.logo.mm %} &nbsp; / &nbsp; {{ logo_form.logo.mm }} mm {% endif %}<br />
{% if logo_form.logo.mm %} &nbsp; / &nbsp; {{ logo_form.logo.mm }} mm {% endif %}<br /> Aspect ratio: {{ logo_form.logo.aspect_ratio }}<br />
Aspect ratio: {{ logo_form.logo.aspect_ratio }}<br /> Usage: <span style="font-family: system-ui">{{ logo_form.logo.get_usage() }}</span>
Usage: <span style="font-family: system-ui">{{ logo_form.logo.get_usage() }}</span> </div>
</td> <div class="actions_logo">
<td class="" img-action"> <div class="action_label">Modifier l'image</div>
<p>Modifier l'image</p> <div class="action_button">
<span class="wtf-field">{{ render_field(logo_form.upload, False, onchange="submit_form()") }}</span> <span class="wtf-field">{{ render_field(logo_form.upload, False, onchange="submit_form()") }}</span>
{% if logo_form.can_delete %} </div>
<p>Supprimer l'image</p> {% if logo_form.can_delete %}
{{ render_field(logo_form.do_delete, False, onSubmit="submit_form()") }} <div class="action_label">Supprimer l'image</div>
{% endif %} <div class="action_button">
</td> {{ render_field(logo_form.do_delete, False, onSubmit="submit_form()") }}
</tr> </div>
</div> {% endif %}
</div>
</div>
</details>
{% endmacro %} {% endmacro %}
{% macro render_logos(dept_form) %} {% macro render_logos(dept_form) %}
<table>
{% for logo_entry in dept_form.logos.entries %} {% for logo_entry in dept_form.logos.entries %}
{% set logo_form = logo_entry.form %} {% set logo_form = logo_entry.form %}
{{ render_logo(dept_form, logo_form) }} {{ render_logo(dept_form, logo_form) }}
{% else %} {% else %}
<p class="logo-edit"> <p class="logo-titre_logo">
<h3>Aucun logo défini en propre à ce département</h3> <h3 class="titre_logo">Aucun logo défini en propre à ce département</h3>
</p> </p>
{% endfor %} {% endfor %}
</table>
{% endmacro %} {% endmacro %}
{% block app_content %} {% block app_content %}
@ -100,25 +97,26 @@
<div class="configuration_logo"> <div class="configuration_logo">
<h1>Bibliothèque de logos</h1> <h1>Bibliothèque de logos</h1>
{% for dept_entry in form.depts.entries %} {% for dept_entry in form.depts.entries %}
{% set dept_form = dept_entry.form %} <details>
{{ dept_entry.form.hidden_tag() }} {% set dept_form = dept_entry.form %}
{% if dept_entry.form.is_local() %} {{ dept_entry.form.hidden_tag() }}
<div class="departement"> <summary>
<h2>Département {{ dept_form.dept_name.data }}</h2> {% if dept_entry.form.is_local() %}
<h3>Logos locaux</h3> <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 /> <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> Les logos du département se substituent aux logos de même nom définis globalement:</div>
</div> {% else %}
{% else %} <h2>Logos généraux</h2>
<div class="departement"> <div class="sco_help">Les images de cette section sont utilisé pour tous les départements,
<h2>Logos généraux</h2> mais peuvent être redéfinies localement au niveau de chaque département
<div class="sco_help">Les images de cette section sont utilisé pour tous les départements, (il suffit de définir un logo local de même nom)</div>
mais peuvent être redéfinies localement au niveau de chaque département {% endif %}
(il suffit de définir un logo local de même nom)</div> </summary>
</div> <div>
{% endif %} {{ render_logos(dept_form) }}
{{ render_logos(dept_form) }} {{ render_add_logo(dept_form.add_logo.form) }}
{{ render_add_logo(dept_form.add_logo.form) }} </div>
</details>
{% endfor %} {% endfor %}
</div> </div>
</form> </form>