44 lines
1.6 KiB
HTML
44 lines
1.6 KiB
HTML
{% extends "wcs/front/formdata_steps.html" %}
|
|
{% block steps-list %}
|
|
{% if page_labels|length > 1 %}
|
|
<div class="theme-steps">
|
|
{% for page_label in page_labels %}
|
|
{% if forloop.counter == current_page_no %}
|
|
<strong class="theme-steps--page-nb">Étape {{ forloop.counter }} sur {{ page_labels|length }}</strong>
|
|
<h2 class="theme-steps--title">
|
|
{{ page_label }}
|
|
</h2>
|
|
<div class="theme-steps--progress-bar" style="--gradient-stop: calc(1% * {{ forloop.counter }} * 100 / {{ page_labels|length }})"></div>
|
|
{% endif%}
|
|
{% endfor%}
|
|
<p class="theme-steps--voir-etapes togglable">
|
|
<span class="theme-steps--voir" aria-label="Voir"></span>
|
|
<a class="theme-steps--panel-open" role="button">Toutes les étapes</a>
|
|
</p>
|
|
<div class="theme-steps--panel" >
|
|
<a class="theme-steps--panel-close" role="button">
|
|
FERMER
|
|
<span class="theme-steps--panel-close-icon"></span>
|
|
</a>
|
|
<h3 class="theme-steps--panel-title">Toutes les étapes</h3>
|
|
{{ block.super }}
|
|
</div>
|
|
<div class="theme-steps--panel-mask"></div>
|
|
</div>
|
|
<script>
|
|
const openStepsBtn = document.querySelector('.theme-steps--panel-open')
|
|
const closeStepsBtn = document.querySelector('.theme-steps--panel-close')
|
|
const stepsMask = document.querySelector('.theme-steps--panel-mask')
|
|
|
|
closeStepsBtn.addEventListener('click', function(){
|
|
openStepsBtn.click()
|
|
});
|
|
stepsMask.addEventListener('click', function(){
|
|
openStepsBtn.click()
|
|
});
|
|
</script>
|
|
{% endif %}
|
|
{% endblock%}
|
|
|
|
|