feat(5.9): US-006 - fundatie responsive (viewport, nav, modal full-screen mobil)
- base.html: conventie breakpoint unic 767px documentata + bloc @media mobil extins - modal full-screen pe mobil (100vw/100vh, fara backdrop lateral, x >=44px, scroll intern) - header/nav colapsat sub 768px + tinte touch >=44px (.icon-btn/.tab-link/.cont-menu) - tests/test_web_responsive.py NOU (3 teste) + prd.json/progress.txt US-006 passes Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Claude Agent
@@ -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 <main> sunt in JS. Varianta full-screen mobil vine in US-006. === */
|
||||
scroll-lock + inert pe <main> 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; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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).
|
||||
---
|
||||
|
||||
112
tests/test_web_responsive.py
Normal file
112
tests/test_web_responsive.py
Normal file
@@ -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):
|
||||
"""`<meta name=viewport>` 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
|
||||
Reference in New Issue
Block a user