REFERINȚĂ · MOBIL
Două shell-uri, un telefon.
Sub 1024px fiecare ecran din Dublin pornește dintr-unul din două shell-uri, după ce e ecranul. Produs — acasă, liste, setări, detalii — stă în .app-mobile: header voalat sus, .tabbar jos, restul navigării în spatele itemului Meniu. Flux — wizard, semnare, onboarding — stă în .flow-chrome: înapoi sus, un singur CTA jos. Aceeași foaie .sheet urcă de jos în amândouă. Mai jos, ecrane Dublin reale în fiecare shell.
MOBILE ONLY. Layout-ul și regulile din această pagină se aplică exclusiv în banda mobile (<1024px), tablete incluse. Pe desktop perechile sunt
.app-shell + .sidebar / .topbar (produs) și .app-top + .app-footer (flux) — vezi references/referinta-dublin-aligned.html. Nu importa .app-mobile sau .flow-chrome într-o pagină desktop și nu pune .tabbar într-un flux.
Produs · .app-mobile — header voalat + tabbar
Bună, Andrei
TVA · scadent 25 sept
2.184Lei
pregătit de Alina · 9 zile
Încasat · septembrie
42.180Lei
↑ 12% vs august
De făcut
Rădăcină · logo · .tabbar Acasă · De făcut · Cameră · Banii tăi · Meniu
Bună, Andrei
TVA · scadent 25 sept
2.184Lei
pregătit de Alina · 9 zile
Încasat · septembrie
42.180Lei
↑ 12% vs august
De făcut
YBYoungblood SRLCUI 47281930 · Andrei Popescu
Contabilitate
Cont
.mobile-menu · restul rail-ului · ieșirea pinată jos
Detaliu .no-bar · .list-row.control · salvează instant, fără CTA
Detaliu · rânduri .value / .link / static · CTA în conținut
Termene
TVA · trimestrul 3
Secțiune · titlu + o acțiune · .sheet.attached deschisă din rând
Flux · .flow-chrome — înapoi sus, un singur CTA jos
FACTURĂ NOUĂ · PAS 2 DIN 4
Ce ai livrat?
Total cu TVA4.998,00 Lei
Wizard multi-step · titlu pas cu chevron · CTA „Continuă"
FACTURĂ NOUĂ · PAS 2 DIN 4
Ce ai livrat?
Total cu TVA4.998,00 Lei
Meniu
Meniul fluxului · aceeași .sheet.attached · „Ieși din flux" rând simplu
Cum alegi shell-ul — și ce decurge din alegere
1
Produs sau flux? Ecranul are navigare globală și niciun „înainte" — acasă, o listă, setările, detaliul unui client →
.app-mobile. Ecranul are un singur „înainte" și un sfârșit — wizard, semnare, onboarding → .flow-chrome. Niciodată amândouă pe același ecran: nu .tabbar într-un flux, nu .flow-bar pe un ecran de produs.2
Navigarea se desparte după frecvență. Rail-ul de pe desktop devine
.tabbar (Acasă · De făcut · Banii tăi, plus camera ridicată la mijloc — pe telefon jobul principal e să încarci o cheltuială) plus .mobile-menu pentru restul, deschis de Meniu, ultimul item din bară. Fără FAB. Activul e icon --c-accent-deep + etichetă 700, fără fill; contorul e .badge.sm.filled.pink, doar numere. Un ecran de detaliu e .app-mobile.no-bar: navigarea globală e în urmă (înapoi în header), nu jos.3
Header-ul are trei configurări. Root: doar logo — meniul e în bară. Secțiune: titlu · o singură acțiune (mai multe →
.sheet.attached deschisă din ea). Detaliu (.detail): înapoi · titlu centrat · .spacer. Titlul din header e chrome — un div.title; h1.t-h1 al paginii stă în conținut. Voalul e cel din .flow-bar: bej-0 @ 85% + blur(7px).4
Tot ce e listă e
.list-row în .list-group, sub o etichetă .t12. .link merge undeva (chevron), .value ține o cifră, .control ține un .switch care salvează instant — de aceea ecranul de setări n-are CTA — iar .danger e ink 600, niciodată roșu, singur în grupul lui. Contorul pe un rând de pagină e .badge.sm.neutral. Nicio clasă locală de rând.5
Tot ce urcă de jos e
.sheet. Un meniu deschis dintr-un buton sau rând → .sheet.attached cu rânduri de 44 (.list-group.sm); o explicație → .sheet.floating; cel mult două câmpuri → .sheet.form. Sugestiile de sub un câmp în care scrii rămân .popover, o decizie rămâne .modal. Scrimul e cel canonic (.sheet-scrim), fără grabber. Aceeași foaie în ambele shell-uri — .flow-sheet și .doc-sheet sunt aliasuri deprecate.6
Fluxul rămâne fluxul. Back-ul stă în stânga sus (
disabled pe primul pas, nu ascuns), .flow-footer ține un singur .btn.primary.lg, header și footer sunt voal + blur peste .flow-chrome-scroll. Titlul pasului deschide lista pașilor doar în wizards multi-step, iar ieșirea din flux e un rând simplu (nu .danger), singur în al doilea grup al foii. Un ecran pur informativ, fără acțiune (rar), ascunde .flow-bar.bottom și păstrează back-ul.