diff --git a/app/web/templates/base.html b/app/web/templates/base.html index c7b7eda..07fa994 100644 --- a/app/web/templates/base.html +++ b/app/web/templates/base.html @@ -34,6 +34,11 @@ [data-theme="light"] { --bg:#f6f7f9; --card:#ffffff; --ink:#1a1d24; --muted:#5c6473; --line:#e2e5ea; --ok:#15803d; --warn:#b45309; --err:#dc2626; --accent:#2563eb; } * { box-sizing:border-box; } + /* PRD 5.9 US-006 — CONVENTIE BREAKPOINT: un singur prag mobil la 768px. + CSS custom properties NU functioneaza in `@media`, deci pragul nu poate fi o + variabila; folosim consecvent `@media (max-width:767px)` peste tot (mobil) si + `@media (max-width:1024px)` doar pentru densitatea tabelului. >=1024px = layout + desktop neschimbat (fara regresie). Orice regula mobila noua reutilizeaza 767px. */ body { margin:0; font:15px/1.5 ui-sans-serif,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; background:var(--bg); color:var(--ink); -webkit-font-smoothing:antialiased; } header { padding:16px 24px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:12px; } @@ -197,7 +202,8 @@ } /* === Modal detaliu (PRD 5.9 US-003): fereastra modala globala, in afara zonei de poll (#submissions-wrap). Backdrop + dialog centrat pe desktop; focus-trap + - scroll-lock + inert pe
sunt in JS. Varianta full-screen mobil vine in US-006. === */ + scroll-lock + inert pe
sunt in JS. Varianta full-screen mobil: vezi blocul + `@media (max-width:767px)` US-006 de mai jos. === */ .modal-overlay { position:fixed; inset:0; z-index:1100; display:flex; align-items:flex-start; justify-content:center; padding:40px 16px; overflow-y:auto; } .modal-overlay[hidden] { display:none; } @@ -214,8 +220,12 @@ body.modal-open { overflow:hidden; } .modal-eroare { padding:16px 4px; } .modal-eroare .actiuni { margin-top:12px; display:flex; gap:10px; flex-wrap:wrap; } - /* <768px: card per rand (eticheta:valoare stivuit), nu tabel -> fara scroll orizontal */ + /* === PRD 5.9 US-006: fundatie responsive mobil (<768px) === + Breakpoint unic 767px (vezi conventia de sus). Cuprinde: card per rand pe tabelul + de trimiteri (5.8, pastrat), modal full-screen, header/nav colapsat cu tinte touch + >=44px. Desktop (>=1024px) ramane neschimbat — regulile de baza nu se modifica. */ @media (max-width:767px) { + /* Tabel trimiteri: card per rand (eticheta:valoare stivuit) -> fara scroll orizontal */ .tabel-trimiteri table { table-layout:auto; } .tabel-trimiteri thead { display:none; } .tabel-trimiteri table, .tabel-trimiteri tbody, .tabel-trimiteri tr, .tabel-trimiteri td { display:block; width:auto; } @@ -224,6 +234,25 @@ .tabel-trimiteri td::before { content:attr(data-eticheta); color:var(--muted); font-size:12px; flex:0 0 auto; min-width:120px; } .tabel-trimiteri td.col-chk { display:none; } + + /* Modal full-screen: ocupa tot ecranul, fara backdrop lateral (overlay fara + padding, dialog la latime/inaltime pline, fara colturi/umbra). Scroll intern + pe dialog; butonul `x` la >=44px (tinta touch). Desktop pastreaza varianta + centrata cu `max-width:680px` din regula de baza de mai sus. */ + .modal-overlay { padding:0; align-items:stretch; justify-content:stretch; } + .modal-dialog { width:100vw; max-width:none; min-height:100vh; max-height:100vh; + border:none; border-radius:0; box-shadow:none; + padding:16px; padding-top:56px; overflow-y:auto; } + .modal-close { width:44px; height:44px; top:8px; right:8px; font-size:24px; } + + /* Header + nav colapsate: header se rupe pe linii, fara scroll orizontal de pagina; + tintele touch (toggle tema/cont, taburi, itemi meniu cont) cresc la >=44px. */ + header { padding:12px 16px; flex-wrap:wrap; gap:8px; } + header h1 { font-size:17px; } + main { padding:16px; } + .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; } } diff --git a/scripts/ralph/prd.json b/scripts/ralph/prd.json index 795e4b5..8ea6d02 100644 --- a/scripts/ralph/prd.json +++ b/scripts/ralph/prd.json @@ -93,12 +93,12 @@ ], "requiresBrowserCheck": true, "requiresDesignReview": true, - "passes": false, + "passes": true, "failed": false, "blocked": false, "retries": 0, "failureReason": "", - "notes": "" + "notes": "Atins: app/web/templates/base.html (conventie breakpoint unic 767px documentata; bloc `@media (max-width:767px)` US-006 extins cu: modal full-screen — overlay fara padding/align-stretch, dialog 100vw/100vh fara border-radius/umbra, modal-close 44x44px, scroll intern; header colapsat flex-wrap + main padding redus; tinte touch >=44px pe .icon-btn/.tab-link/.cont-menu items; comentariu desktop modal actualizat), tests/test_web_responsive.py NOU (3 teste: test_viewport_meta_prezent, test_modal_fullscreen_clasa_mobil, test_nav_colapsabil_sub_breakpoint). meta viewport deja prezent (confirmat, neatins). Nav colapsabil (hamburger cont + tab-bar overflow-x) deja livrat de PRD-uri anterioare; US-006 a adaugat doar tintele touch 44px sub breakpoint. Gates: pytest PASS (fisier 3/3; suita completa 829 passed, 1 deselected — fata de 826 inainte). DEFERAT la VERIFY: requiresBrowserCheck + requiresDesignReview (gstack browser la 375px pe / — fara scroll orizontal, hamburger deschide meniul, modal full-screen + inchidere din x) NErulate in loop fara browser." }, { "id": "US-002", diff --git a/scripts/ralph/progress.txt b/scripts/ralph/progress.txt index f8753f1..f662be9 100644 --- a/scripts/ralph/progress.txt +++ b/scripts/ralph/progress.txt @@ -68,3 +68,31 @@ Note: PRD APROBAT 2026-06-24 cu revizii obligatorii R1-R12 (raport AUTOPLAN). R1 - US-004 (detaliu editabil in-place + butoane in modal), US-005 (poll nu inchide modalul), US-006/007/008 (responsive). - VERIFY: ruleaza gstack E2E pe `/` pentru AC requiresBrowserCheck (eticheta sub pill, fara chevron, cod fara prefix, click deschide modal). --- + +## US-006: Fundatie responsive — viewport, header/nav, modal full-screen mobil, breakpoint-uri + +### Ce s-a livrat: +- app/web/templates/base.html: CONVENTIE breakpoint unic 768px documentata (CSS custom props nu + merg in @media -> folosim consecvent `@media (max-width:767px)` pentru mobil; >=1024px = desktop + neschimbat). Blocul `@media (max-width:767px)` extins cu: + - Modal full-screen pe mobil: overlay fara padding + align/justify:stretch (fara backdrop lateral); + dialog 100vw/100vh, fara border-radius/umbra, padding-top:56px, scroll intern; modal-close 44x44px. + - Header colapsat: flex-wrap + gap + padding redus; h1 mai mic; main padding 16px. + - Tinte touch >=44px: .icon-btn (toggle tema/cont hamburger), .tab-link, itemii .cont-menu. + - Comentariul CSS desktop al modalului actualizat (full-screen mobil livrat, nu „vine in US-006"). +- tests/test_web_responsive.py NOU: test_viewport_meta_prezent, test_modal_fullscreen_clasa_mobil, + test_nav_colapsabil_sub_breakpoint (markup/CSS in HTML randat prin TestClient). + +### Learnings: +- meta viewport era DEJA prezent (base.html:5) -> AC „confirmat/adaugat" = confirmat, neatins. +- Nav colapsabil (hamburger cont #cont-menu-toggle ☰ + dropdown hidden; tab-bar cu overflow-x:auto) + era deja livrat de PRD-uri anterioare (5.5 US-006, 5.3 tab-bar). US-006 5.9 a adaugat DOAR + tratamentul touch 44px sub breakpoint + modalul full-screen (modalul e nou din US-003 5.9). +- Desktop nefatat: regula de baza `.modal-dialog { max-width:680px }` ramane; doar media mobil o + suprascrie. Test asigura ambele (max-width:680px prezent + media 767px cu 100vw/100vh/44px). + +### Next: +- US-007 (responsive pagini continut), US-008 (responsive Acasa + login/signup) — depind de US-006 (gata). +- VERIFY: gstack browser la 375px pe `/` — fara scroll orizontal de pagina; ☰ deschide meniul cont; + modal deschis ocupa tot ecranul si se inchide din `x` (requiresBrowserCheck + requiresDesignReview). +--- diff --git a/tests/test_web_responsive.py b/tests/test_web_responsive.py new file mode 100644 index 0000000..7c7056a --- /dev/null +++ b/tests/test_web_responsive.py @@ -0,0 +1,112 @@ +"""Teste PRD 5.9 US-006: fundatie responsive — viewport, header/nav colapsabil, +modal full-screen pe mobil, breakpoint-uri consistente. + +Verificam markup-ul + CSS server-side randat (TestClient): prezenta meta viewport, +existenta unei reguli `@media (max-width:767px)` care trece modalul pe full-screen +(`.modal-dialog`) cu buton `x` >=44px, si structura de nav colapsabil (meniul de cont +hamburger + tinte touch >=44px). Verificarile vizuale efective (375px, fara scroll +orizontal) sunt deferate la VERIFY (gstack browser). +""" + +from __future__ import annotations + +import os +import re +import tempfile + +import pytest +from starlette.testclient import TestClient + + +def _create_account_user(email: str, name: str = "Service", password: str = "parolasecreta10"): + from app.accounts import create_account + from app.users import create_user + from app.db import get_connection + + conn = get_connection() + try: + acct_id = create_account(conn, name, active=True) + create_user(conn, acct_id, email, password) + return acct_id + finally: + conn.close() + + +def _login(client, email: str, password: str = "parolasecreta10") -> None: + resp = client.get("/login") + m = re.search(r'name="csrf_token"\s+value="([^"]+)"', resp.text) or \ + re.search(r'value="([^"]+)"\s+name="csrf_token"', resp.text) + assert m + resp = client.post("/login", data={"email": email, "parola": password, "csrf_token": m.group(1)}) + assert resp.status_code == 303 + + +@pytest.fixture() +def client(monkeypatch): + tmp = tempfile.mkdtemp() + monkeypatch.setenv("AUTOPASS_DB_PATH", os.path.join(tmp, "responsive.db")) + monkeypatch.setenv("AUTOPASS_WEB_AUTH_REQUIRED", "true") + from app.config import get_settings + get_settings.cache_clear() + from app.web import ratelimit + ratelimit._hits.clear() + from app.main import app + with TestClient(app, follow_redirects=False) as c: + yield c + ratelimit._hits.clear() + get_settings.cache_clear() + + +def test_viewport_meta_prezent(client): + """`` cu width=device-width prezent in base.html.""" + _create_account_user("vp@test.com") + _login(client, "vp@test.com") + html = client.get("/?tab=acasa").text + assert 'name="viewport"' in html + assert "width=device-width" in html + assert "initial-scale=1" in html + + +def test_modal_fullscreen_clasa_mobil(client): + """Sub 768px modalul devine full-screen: o regula `@media (max-width:767px)` + pune `.modal-dialog` la latime/inaltime pline (fara latimea marginita de desktop) + si butonul `x` la >=44px. Desktop pastreaza regula centrata (`max-width:680px`).""" + _create_account_user("mf@test.com") + _login(client, "mf@test.com") + html = client.get("/?tab=acasa").text + + # Regula de baza (desktop) ramane: dialog centrat cu latime marginita. + assert "max-width:680px" in html + + # Exista un bloc media mobil care vizeaza modalul. + assert "@media (max-width:767px)" in html + # Markerul US-006 pentru modalul full-screen pe mobil. + assert "US-006" in html + # Dialogul ocupa tot ecranul pe mobil (latime/inaltime pline, fara border-radius lateral). + mobil = html[html.find("@media (max-width:767px)"):] + assert "100vw" in mobil or "width:100%" in mobil + assert "100vh" in mobil + # Butonul de inchidere >=44px pe mobil (tinta touch). + assert "44px" in mobil + + +def test_nav_colapsabil_sub_breakpoint(client): + """Nav colapsabil: meniul de cont e un buton hamburger (☰) ascuns intr-un dropdown, + iar tintele touch (icon-btn, tab-link, itemi meniu) ajung la >=44px sub breakpoint.""" + _create_account_user("nav@test.com") + _login(client, "nav@test.com") + html = client.get("/?tab=acasa").text + + # Hamburger-ul de cont exista si dropdown-ul e colapsat (hidden) implicit. + assert 'id="cont-menu-toggle"' in html + assert "☰" in html # pictograma hamburger + assert 'id="cont-menu"' in html + assert 'class="cont-menu"' in html + + # Tab-bar-ul (nav principal) exista si e scrollabil orizontal (nu deborda pagina). + assert "tab-bar" in html + assert "overflow-x:auto" in html + + # Sub breakpoint, tintele touch din header/nav cresc la >=44px. + mobil = html[html.find("@media (max-width:767px)"):] + assert "44px" in mobil