|
@@ -47,7 +47,7 @@
|
|
|
{{-- Все панели шагов — рендерит сервер, JS только скрывает/показывает --}}
|
|
{{-- Все панели шагов — рендерит сервер, JS только скрывает/показывает --}}
|
|
|
<div id="step-panel" style="transition:opacity .25s ease">
|
|
<div id="step-panel" style="transition:opacity .25s ease">
|
|
|
@foreach($steps as $i => $step)
|
|
@foreach($steps as $i => $step)
|
|
|
- <div class="step-content" data-step-panel="{{ $i }}"{{ $i !== 0 ? ' style="display:none"' : '' }}>
|
|
|
|
|
|
|
+ <div class="step-content" data-step-panel="{{ $i }}" @if($i !== 0) style="display:none" @endif>
|
|
|
<div class="step-left">
|
|
<div class="step-left">
|
|
|
<div class="step-badge">{{ $i + 1 }}</div>
|
|
<div class="step-badge">{{ $i + 1 }}</div>
|
|
|
<div class="step-title">{{ $step['title'] ?? '' }}</div>
|
|
<div class="step-title">{{ $step['title'] ?? '' }}</div>
|
|
@@ -79,9 +79,10 @@
|
|
|
current = idx;
|
|
current = idx;
|
|
|
panels[current].style.display = '';
|
|
panels[current].style.display = '';
|
|
|
wrapper.style.opacity = '1';
|
|
wrapper.style.opacity = '1';
|
|
|
|
|
+ /* dots/lines обновляем после current = idx, иначе подсветка отстаёт на шаг */
|
|
|
|
|
+ dots.forEach(function (d, i) { d.classList.toggle('active', i === current); });
|
|
|
|
|
+ lines.forEach(function (l, i) { l.classList.toggle('done', i < current); });
|
|
|
}, 150);
|
|
}, 150);
|
|
|
- dots.forEach(function (d, i) { d.classList.toggle('active', i === current); });
|
|
|
|
|
- lines.forEach(function (l, i) { l.classList.toggle('done', i < current); });
|
|
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
document.addEventListener('DOMContentLoaded', function () {
|