gurix/application-form-7
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add navigation bar with progress indicator and backward navigation

Browse Source 
- Created _navigation.html component with 5-step progress indicator
- Added German labels (E-Mail, Persönliche Daten, Motivation, Dokumente, Bestätigung)
- Implemented can_access_page() validation in routes.py
- Users can navigate backward to completed pages (data preserved)
- Sequential forward progression enforced (cannot skip ahead)
- Visual states: completed (green checkmark), current (blue), future (gray)
- Added comprehensive CSS styling with responsive design
- Updated base.html to include navigation component
- Updated page templates to pass current_page context
- Navigation appears on pages 2-5 only
- All 102 tests passing with no regressions
This commit is contained in:
gurix
2025-12-27 23:12:21 +01:00
parent c0cca71b74
commit ef5ccc18f7
7 changed files with 504 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/_navigation.html
+80
View File
@@ -0,0 +1,80 @@
{% if session_id and current_page and current_page >= 2 %}
<nav class="progress-navigation" aria-label="Bewerbungsfortschritt">
<ol class="progress-steps">
<!-- Step 1: Email -->
<li class="progress-step {% if current_page == 1 %}active{% elif current_page > 1 %}completed{% else %}disabled{% endif %}">
{% if current_page >= 1 %}
<a href="{{ url_for('page1_email') }}" class="progress-link">
<span class="progress-icon">{% if current_page > 1 %}✓{% else %}1{% endif %}</span>
<span class="progress-label">E-Mail</span>
</a>
{% else %}
<span class="progress-link">
<span class="progress-icon">1</span>
<span class="progress-label">E-Mail</span>
</span>
{% endif %}
</li>
<!-- Step 2: Personal Info -->
<li class="progress-step {% if current_page == 2 %}active{% elif current_page > 2 %}completed{% else %}disabled{% endif %}">
{% if current_page >= 2 %}
<a href="{{ url_for('page2_personal', session_id=session_id) }}" class="progress-link">
<span class="progress-icon">{% if current_page > 2 %}✓{% else %}2{% endif %}</span>
<span class="progress-label">Daten</span>
</a>
{% else %}
<span class="progress-link">
<span class="progress-icon">2</span>
<span class="progress-label">Daten</span>
</span>
{% endif %}
</li>
<!-- Step 3: Motivation -->
<li class="progress-step {% if current_page == 3 %}active{% elif current_page > 3 %}completed{% else %}disabled{% endif %}">
{% if current_page >= 3 %}
<a href="{{ url_for('page3_motivation', session_id=session_id) }}" class="progress-link">
<span class="progress-icon">{% if current_page > 3 %}✓{% else %}3{% endif %}</span>
<span class="progress-label">Motivation</span>
</a>
{% else %}
<span class="progress-link">
<span class="progress-icon">3</span>
<span class="progress-label">Motivation</span>
</span>
{% endif %}
</li>
<!-- Step 4: Upload -->
<li class="progress-step {% if current_page == 4 %}active{% elif current_page > 4 %}completed{% else %}disabled{% endif %}">
{% if current_page >= 4 %}
<a href="{{ url_for('page4_upload', session_id=session_id) }}" class="progress-link">
<span class="progress-icon">{% if current_page > 4 %}✓{% else %}4{% endif %}</span>
<span class="progress-label">Dokumente</span>
</a>
{% else %}
<span class="progress-link">
<span class="progress-icon">4</span>
<span class="progress-label">Dokumente</span>
</span>
{% endif %}
</li>
<!-- Step 5: Confirmation -->
<li class="progress-step {% if current_page == 5 %}active{% elif current_page > 5 %}completed{% else %}disabled{% endif %}">
{% if current_page >= 5 %}
<a href="{{ url_for('page5_confirmation', session_id=session_id) }}" class="progress-link">
<span class="progress-icon">{% if current_page > 5 %}✓{% else %}5{% endif %}</span>
<span class="progress-label">Bestätigung</span>
</a>
{% else %}
<span class="progress-link">
<span class="progress-icon">5</span>
<span class="progress-label">Bestätigung</span>
</span>
{% endif %}
</li>
</ol>
</nav>
{% endif %}