From d3433015ad62675482dfacba2ce751a59739dfc9 Mon Sep 17 00:00:00 2001 From: Claude Agent Date: Thu, 25 Jun 2026 09:17:47 +0000 Subject: [PATCH] feat(5.9): US-007 - responsive pagini de continut (card Mapari, scroll contained Jurnal/Nomenclator/Admin, formulare stivate) - base.html @media(max-width:767px): clasa .tabel-card (card per rand) scopata SEPARAT de .tabel-trimiteri 5.8; reguli formular full-width + butoane >=44px scopate pe #card-cont / #form-test-cheie / #filtre-jurnal (marker US-007) - _mapari.html: tabel-card + data-eticheta pe toate 4 tabelele; override select in card local (evita batalia de specificitate cu stilul inline) - _integrare.html: id=form-test-cheie (ancora de scope pe formularul de test) - R12 per-tabel: Mapari=card; Jurnal/Nomenclator/Admin=.tablewrap scroll contained; Cont/Integrare=fara tabele (doar formulare) - tests: +3 (tabele clasa responsive, formulare full-width, regresie carduri 5.8) - suita: 838 passed, 1 deselected - prd.json US-007 passes=true + notes; progress.txt Co-Authored-By: Claude Opus 4.8 (1M context) --- app/web/templates/_integrare.html | 3 +- app/web/templates/_mapari.html | 46 +++++++------ app/web/templates/base.html | 34 ++++++++++ scripts/ralph/prd.json | 6 +- scripts/ralph/progress.txt | 52 +++++++++++++++ tests/test_web_responsive.py | 104 ++++++++++++++++++++++++++++++ 6 files changed, 220 insertions(+), 25 deletions(-) diff --git a/app/web/templates/_integrare.html b/app/web/templates/_integrare.html index 8e75de8..488f905 100644 --- a/app/web/templates/_integrare.html +++ b/app/web/templates/_integrare.html @@ -229,7 +229,8 @@ {# Formular test conexiune #}

Testeaza conexiunea

-
diff --git a/app/web/templates/_mapari.html b/app/web/templates/_mapari.html index dc6ba30..31c02ac 100644 --- a/app/web/templates/_mapari.html +++ b/app/web/templates/_mapari.html @@ -4,6 +4,10 @@ /* Selectul de cod RAR e principalul vinovat de latimea tabelelor de mapari. Il limitam ca tabelul sa incapa in card fara scroll orizontal -> coloana Actiuni (kebab) ramane vizibila. */ #mapari-section td select { width:100%; max-width:240px; min-width:150px; } + /* US-007 (R12): in card per rand (sub 767px) selectul/inputurile umplu cardul. */ + @media (max-width:767px) { + #mapari-section td select, #mapari-section td input[type=text] { max-width:none; min-width:0; } + } {% if message %} @@ -42,7 +46,7 @@
-
+
@@ -58,7 +62,7 @@ {# data-dt-row = haystack de cautare (randul contine un - - - -
Operatie
+ @@ -67,14 +71,14 @@ {{ e.blocked }} blocate
{{ e.denumire or '(fara denumire)' }}
 + {% if e.suggestions %} {% for s in e.suggestions[:3] %} {{ s.cod_prestatie }} ({{ s.score|round|int }}%){% if not loop.last %}, {% endif %} {% endfor %} {% else %}—{% endif %} + + {{ ui.autosend_toggle(form_id="map-rez-" ~ loop.index, checked=True) }} @@ -120,7 +124,7 @@ -
+
@@ -132,7 +136,7 @@ {% for m in saved_mappings %} {# data-dt-row = haystack de cautare (randul contine un - - - -
Operatie
+ @@ -147,7 +151,7 @@ acum: {{ m.cod_prestatie }}{% if m.nume_prestatie %} — {{ m.nume_prestatie }}{% endif %} + + {{ ui.autosend_toggle(form_id="map-salv-" ~ loop.index, checked=m.auto_send) }} + {# Salveaza/Sterge in meniu contextual (kebab) — randul ramane ingust. Butoanele se leaga prin form= de cele doua form-uri hx-post definite in prima celula a randului. #}
@@ -203,7 +207,7 @@ -
+
@@ -214,15 +218,15 @@ {% for f in column_formats %} - - -
Coloane
+ {{ f.columns | length }} coloane + {% for col, camp in f.mappings.items() %} {{ col }} → {{ camp }}{% if not loop.last %}; {% endif %} {% endfor %} + @@ -274,7 +278,7 @@ {% endif %} -
+
@@ -285,7 +289,7 @@ {% for r in text_rules %} - - - - - -
Daca operatia contine
+ @@ -294,10 +298,10 @@
contine «{{ r.pattern }}»
 + {{ r.cod_prestatie }} + {% if r.auto_send %}Auto (in coada){% else %}Manual (verificare){% endif %} @@ -310,7 +314,7 @@ {% endfor %} {# Rand de adaugare (mereu prezent ca placeholder, inclusiv in empty state). #}
+
+ + {{ ui.autosend_toggle(form_id="rt-add", checked=False) }} diff --git a/app/web/templates/base.html b/app/web/templates/base.html index 5459bae..8a255a2 100644 --- a/app/web/templates/base.html +++ b/app/web/templates/base.html @@ -256,6 +256,40 @@ .icon-btn { min-height:44px; min-width:44px; } .tab-link { min-height:44px; padding:10px 14px; } .cont-menu a, .cont-menu button { min-height:44px; } + + /* === PRD 5.9 US-007 (R12): paginile de continut pe mobil === + Tabele ACTIONABILE (Mapari) -> card per rand. Clasa proprie `.tabel-card`, + scopata SEPARAT de `.tabel-trimiteri` (5.8) ca sa NU strice cardurile de + trimiteri. Tabele DENSE read-only (Jurnal, Nomenclator) + Admin raman in + `.tablewrap` (scroll orizontal CONTAINED, definit global mai sus). */ + .tabel-card table { table-layout:auto; } + .tabel-card thead { display:none; } + .tabel-card table, .tabel-card tbody, .tabel-card tr, .tabel-card td { display:block; width:auto; } + .tabel-card tr { border:1px solid var(--line); border-radius:8px; padding:10px 12px; margin-bottom:10px; } + .tabel-card td { border-bottom:none; padding:5px 0; } + .tabel-card td::before { content:attr(data-eticheta); display:block; color:var(--muted); + font-size:12px; margin-bottom:3px; } + /* Celulele fara eticheta (doar actiuni) nu primesc antet gol. */ + .tabel-card td:not([data-eticheta])::before, + .tabel-card td[data-eticheta=""]::before { display:none; } + /* Controale full-width in card; butoanele primesc tinta touch >=44px. */ + .tabel-card td select, .tabel-card td input[type=text], + .tabel-card td input[type=search] { width:100%; max-width:none; } + .tabel-card td button { width:100%; min-height:44px; } + + /* Formulare de continut: o coloana, inputuri/selecturi full-width, butoane >=44px. + Scopat strict pe controalele de formular din sectiunile de continut (nu atinge + tabelul de trimiteri, modalul, taburile ARIA sau butoanele de copiere absolute). */ + #card-cont input[type=email], #card-cont input[type=password], + #form-test-cheie input[type=password], + #jurnal-section select, #jurnal-section input[type=date], + #jurnal-section input[type=number] { + /* !important fiindca aceste inputuri au latimi inline (ex. width:280px / max-width:100px) + pe desktop; le suprascriem DOAR sub 767px, deci desktop ramane neschimbat. */ + width:100% !important; max-width:none !important; box-sizing:border-box; } + #jurnal-section #filtre-jurnal > div { width:100%; } + #card-cont button, #form-test-cheie button, + #jurnal-section #filtre-jurnal button { min-height:44px; width:100%; } } diff --git a/scripts/ralph/prd.json b/scripts/ralph/prd.json index 6167854..98e98a4 100644 --- a/scripts/ralph/prd.json +++ b/scripts/ralph/prd.json @@ -190,12 +190,12 @@ ], "requiresBrowserCheck": true, "requiresDesignReview": false, - "passes": false, + "passes": true, "failed": false, "blocked": false, "retries": 0, "failureReason": "", - "notes": "" + "notes": "Implementat. R12 per-tabel: Mapari=CARD (clasa .tabel-card scopata separat de .tabel-trimiteri 5.8, data-eticheta pe td-uri in toate 4 tabelele); Jurnal/Nomenclator/Admin=.tablewrap scroll contained (deja existau; dense/admin-only, risc minim). Cont/Integrare=fara tabele, doar formulare stivate. CSS card+formulare in blocul @media(max-width:767px) din base.html (marker US-007). Formulare: inputuri full-width (!important doar pe mobil ca sa invinga latimile inline desktop), butoane >=44px, filtre jurnal pe o coloana. id=form-test-cheie adaugat la integrare pt scope. Override select mapari in card local in _mapari.html (evita batalia de ordine/specificitate cu stilul inline). Teste: test_tabele_continut_au_clasa_responsive, test_formulare_full_width_mobil, test_carduri_trimiteri_5_8_supravietuiesc (regresie). Suita: 838 passed, 1 deselected. E2E ramas pt browser (375px fara scroll orizontal de pagina pe fiecare pagina)." }, { "id": "US-008", @@ -259,4 +259,4 @@ "notes": "" } ] -} +} \ No newline at end of file diff --git a/scripts/ralph/progress.txt b/scripts/ralph/progress.txt index 4b6c184..809632b 100644 --- a/scripts/ralph/progress.txt +++ b/scripts/ralph/progress.txt @@ -142,3 +142,55 @@ Note: PRD APROBAT 2026-06-24 cu revizii obligatorii R1-R12 (raport AUTOPLAN). R1 fiecare camp o data (nr. rand propriu, VIN dedesubt), corectez data, „Salveaza si retrimite" -> queued; error arata „Re-pune in coada"; „Sterge" clar separat, rosu, full-width pe mobil. --- + +## US-007: Responsive — paginile de continut (Mapari, Cont, Nomenclator, Integrare, Jurnal, Admin) + +### Decizia per-tabel (R12): +- Mapari = CARD per rand sub 767px (tabele actionabile: selecturi nomenclator + butoane + + kebab). Toate cele 4 tabele (De rezolvat, Mapari salvate, Formate coloane, Reguli text) + primesc `data-eticheta` pe ``-uri + clasa `tabel-card` pe `.tablewrap`. +- Jurnal = .tablewrap (scroll orizontal contained). Dens read-only, multe coloane (Cand/Sursa/ + Tip/Nivel/Cont/Cod/Mesaj) — cardul ar fi lung si zgomotos; scroll contained pastreaza tabularitatea. +- Nomenclator = .tablewrap (scroll contained). Dens read-only (Cod/Denumire/Actualizat). +- Admin = .tablewrap (scroll contained). Actionabil DAR admin-only, dens (8 coloane), actiunile sunt + deja in kebab compact + bulk-bar; cardul ar fi cost mare pe o pagina low-traffic pe mobil. Risc minim. +- Cont / Integrare = fara tabele (doar formulare + blocuri de cod). Formularele stivate; blocurile + `
` de cod si tab-bar-urile aveau deja `overflow-x:auto` (contained).
+
+### Ce s-a livrat:
+- app/web/templates/base.html: in blocul `@media (max-width:767px)` (marker US-007):
+  - `.tabel-card` — card per rand SCOPAT separat de `.tabel-trimiteri` (5.8 intact). thead ascuns,
+    tr=card, td=block cu `::before` din `data-eticheta`; celulele fara eticheta (doar actiuni) nu
+    afiseaza antet gol; selecturi/inputuri full-width, butoane in card width:100% + min-height:44px.
+  - Formulare de continut pe o coloana: inputuri full-width (`width:100% !important` DOAR pe mobil,
+    ca sa invinga latimile inline de desktop — desktop neschimbat), butoane >=44px + full-width,
+    filtrele de jurnal stivuite (`#filtre-jurnal > div { width:100% }`). Scopat strict pe
+    `#card-cont`, `#form-test-cheie`, `#jurnal-section #filtre-jurnal` (nu atinge taburile ARIA,
+    butoanele de copiere absolute, tabelul de trimiteri sau modalul).
+- app/web/templates/_mapari.html: `tabel-card` pe cele 4 `.tablewrap`; `data-eticheta` pe td-uri;
+  override local in `