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

Merge pull request 'add folding on logo editor' (#360) from jmplace/ScoDoc-Lille:config_logo_foldable into dev92

Browse Source 
Reviewed-on: https://scodoc.org/git/ScoDoc/ScoDoc/pulls/360
This commit is contained in:
Emmanuel Viennet 2022-04-12 23:49:33 +02:00
commit 2673552389
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

@ -997,9 +997,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;
} }
@ -1007,8 +1032,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 {

84
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>
<summary>
<h3>Ajouter un logo</h3> <h3>Ajouter un logo</h3>
{{ add_logo_form.hidden_tag() }} </summary>
<div>
{{ render_field(add_logo_form.name) }} {{ render_field(add_logo_form.name) }}
{{ render_field(add_logo_form.upload) }} {{ render_field(add_logo_form.upload) }}
{{ render_field(add_logo_form.do_insert, False, onSubmit="submit_form") }} {{ render_field(add_logo_form.do_insert, False, onSubmit="submit_form") }}
</div> </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() }}
<summary>
{% if logo_form.titre %} {% if logo_form.titre %}
<tr class="logo-edit"> <h3 class="titre_logo">{{ logo_form.titre }}</h3>
<td colspan="3" class="titre"> {% if logo_form.description %}
<div class="nom"> <div class="sco_help">{{ logo_form.description }}</div>
<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 %} {% endif %}
<tr> {% else %}
<td style="padding-right: 20px; "> <h3 class="titre_logo">Logo personalisé: {{ logo_form.logo_id.data }}</h3>
<div class="img-container"> {% 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é" /> <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>
</td> </div>
<td class="" img-action"> <div class="actions_logo">
<p>Modifier l'image</p> <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> <span class="wtf-field">{{ render_field(logo_form.upload, False, onchange="submit_form()") }}</span>
</div>
{% if logo_form.can_delete %} {% if logo_form.can_delete %}
<p>Supprimer l'image</p> <div class="action_label">Supprimer l'image</div>
<div class="action_button">
{{ render_field(logo_form.do_delete, False, onSubmit="submit_form()") }} {{ render_field(logo_form.do_delete, False, onSubmit="submit_form()") }}
</div>
{% endif %} {% endif %}
</td> </div>
</tr> </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 %}
<details>
{% set dept_form = dept_entry.form %} {% set dept_form = dept_entry.form %}
{{ dept_entry.form.hidden_tag() }} {{ dept_entry.form.hidden_tag() }}
<summary>
{% if dept_entry.form.is_local() %} {% if dept_entry.form.is_local() %}
<div class="departement">
<h2>Département {{ dept_form.dept_name.data }}</h2> <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 /> <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 %}
<div class="departement">
<h2>Logos généraux</h2> <h2>Logos généraux</h2>
<div class="sco_help">Les images de cette section sont utilisé pour tous les départements, <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 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> (il suffit de définir un logo local de même nom)</div>
</div>
{% endif %} {% endif %}
</summary>
<div>
{{ 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>