4a1d28749a
Reorganizeaza interfata web pe trei principii, fara a atinge backend-ul de trimitere (worker, mapping, idempotency, masina de stari neatinse): - US-001 app/web/labels.py: modul pur stari tehnice -> text uman + clasa CSS - US-002 bara status /_fragments/status: microcopy uman, defalcare blocate, scoped cont - US-003 shell 6 tab-uri (Acasa/Import/Coada/Mapari/Cont/Nomenclator): deep-link ?tab=, panou activ randat server-side, fragmente inactive lazy, ARIA real - US-004 stepper import 4 pasi (pur vizual; hx-target + csrf pastrate) - US-005 Acasa onboarding checklist auto-bifat + colaps + empty states prietenoase Reparat in cursul VERIFY/CLOSE: izolare teste (reset ratelimit._hits in fixturi), regresie avertisment "cont in asteptare de activare" (re-introdus in bara status), culori hardcodate -> variabile paleta. 434 teste pass. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
97 lines
3.1 KiB
HTML
97 lines
3.1 KiB
HTML
{#
|
|
_stepper.html — Antet wizard import (PUR vizual, fara logica de rutare).
|
|
|
|
Parametru: `pas` (integer 1-4) — pasul curent.
|
|
Utilizare in template-uri care mostenesc contextul Jinja2:
|
|
{% set pas = 1 %}{% include '_stepper.html' %}
|
|
sau cu `with`:
|
|
{% with pas=2 %}{% include '_stepper.html' %}{% endwith %}
|
|
|
|
Cei 4 pasi ficsi:
|
|
1. Incarca fisier
|
|
2. Potriveste coloanele
|
|
3. Verifica
|
|
4. Confirma trimiterea
|
|
|
|
Stari vizuale:
|
|
- index < pas → "facut" (bulina plina, text bifat)
|
|
- index == pas → "activ" (evidentiat, aria-current="step")
|
|
- index > pas → "viitor" (estompat)
|
|
#}
|
|
{%- set _pasi_import = [
|
|
(1, "Incarca fisier", "Trage un fisier xlsx/csv aici sau foloseste butonul de alegere."),
|
|
(2, "Potriveste coloanele", "Spune-ne ce coloana din fisier corespunde cu ce camp RAR."),
|
|
(3, "Verifica", "Verifica randurile inainte sa le trimiti la RAR."),
|
|
(4, "Confirma trimiterea", "Confirma numarul de prezentari — actiunea e ireversibila."),
|
|
] -%}
|
|
<nav class="stepper-import" aria-label="Pasii importului" style="
|
|
display:flex;
|
|
gap:0;
|
|
align-items:stretch;
|
|
margin-bottom:20px;
|
|
border:1px solid var(--line);
|
|
border-radius:8px;
|
|
overflow:hidden;
|
|
background:var(--card);
|
|
">
|
|
{% for nr, titlu, ajutor in _pasi_import %}
|
|
{%- if nr < pas %}
|
|
{%- set cls = "facut" -%}
|
|
{%- set aria = "" -%}
|
|
{%- elif nr == pas %}
|
|
{%- set cls = "activ" -%}
|
|
{%- set aria = ' aria-current="step"' -%}
|
|
{%- else %}
|
|
{%- set cls = "viitor" -%}
|
|
{%- set aria = "" -%}
|
|
{%- endif %}
|
|
<div class="stepper-pas stepper-pas--{{ cls }}"{{ aria | safe }}
|
|
style="
|
|
flex:1;
|
|
padding:10px 14px;
|
|
border-right:{% if not loop.last %}1px solid var(--line){% else %}none{% endif %};
|
|
{% if cls == 'activ' %}
|
|
background:rgba(91,141,239,.10);
|
|
{% elif cls == 'facut' %}
|
|
opacity:1;
|
|
{% else %}
|
|
opacity:.4;
|
|
{% endif %}
|
|
">
|
|
<div style="display:flex; align-items:center; gap:6px; margin-bottom:2px;">
|
|
<span class="stepper-nr" style="
|
|
display:inline-flex;
|
|
align-items:center;
|
|
justify-content:center;
|
|
width:20px;
|
|
height:20px;
|
|
border-radius:50%;
|
|
font-size:11px;
|
|
font-weight:700;
|
|
flex-shrink:0;
|
|
{% if cls == 'activ' %}
|
|
background:var(--accent);
|
|
color:#fff;
|
|
{% elif cls == 'facut' %}
|
|
background:var(--ok);
|
|
color:#fff;
|
|
{% else %}
|
|
background:var(--line);
|
|
color:var(--muted);
|
|
{% endif %}
|
|
">
|
|
{% if cls == 'facut' %}✓{% else %}{{ nr }}{% endif %}
|
|
</span>
|
|
<span style="
|
|
font-size:13px;
|
|
font-weight:{% if cls == 'activ' %}600{% else %}400{% endif %};
|
|
color:{% if cls == 'activ' %}var(--ink){% elif cls == 'facut' %}var(--ink){% else %}var(--muted){% endif %};
|
|
">{{ titlu }}</span>
|
|
</div>
|
|
{% if cls == 'activ' %}
|
|
<p class="muted" style="margin:0; font-size:12px; padding-left:26px;">{{ ajutor }}</p>
|
|
{% endif %}
|
|
</div>
|
|
{% endfor %}
|
|
</nav>
|