fix: description cuted button on top of the description container and smarter cut

This commit is contained in:
Matthieu Bessat 2020-08-27 12:10:00 +02:00
parent 10b3b74e78
commit 841a8610b1
5 changed files with 43 additions and 9 deletions

View file

@ -104,13 +104,16 @@
{% if data.descriptionLong is not null and data.descriptionLong|length > 7 and not data.cutDescription %}
{{ data.descriptionLong|raw }}
{% elseif data.cutDescription %}
<div class="description-btn-container">
<button class="btn with-icon description-btn">
<svg id="description-btn-icon" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="angle-double-down" class="btn-icon svg-inline--fa fa-angle-double-down fa-w-10" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M143 256.3L7 120.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0L313 86.3c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.4 9.5-24.6 9.5-34 .1zm34 192l136-136c9.4-9.4 9.4-24.6 0-33.9l-22.6-22.6c-9.4-9.4-24.6-9.4-33.9 0L160 352.1l-96.4-96.4c-9.4-9.4-24.6-9.4-33.9 0L7 278.3c-9.4 9.4-9.4 24.6 0 33.9l136 136c9.4 9.5 24.6 9.5 34 .1z"></path></svg>
<span id="description-btn-text">Ouvrir la description</span>
</button>
</div>
<div class="description-cutted">
{{ data.descriptionLong|raw }}
</div>
<div class="description-actions-container closed">
<button class="btn description-btn">
Ouvrir la description
</button>
</div>
{% else %}
{{ data.descriptionShort|e }}