alpes-maritimes-2022: don't display steps informations if only one step (#72118)

This commit is contained in:
Thomas Jund 2023-01-04 15:36:36 +01:00
parent a632f26e7c
commit ccb0cf7a72
1 changed files with 35 additions and 33 deletions

View File

@ -1,40 +1,42 @@
{% extends "wcs/front/formdata_steps.html" %}
{% block steps-list %}
<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>
{{ block.super }}
{% 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>
{{ block.super }}
</div>
<div class="theme-steps--panel-mask"></div>
</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')
<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>
closeStepsBtn.addEventListener('click', function(){
openStepsBtn.click()
});
stepsMask.addEventListener('click', function(){
openStepsBtn.click()
});
</script>
{% endif %}
{% endblock%}