▲ PromNET

SÚGÓ › Kezdési útmutató

Mobile-tip banner — "asztali nézet ajánlott" jelzés

Klasszikus 3-oszlopos dashboard mobil-on: a banner figyelmeztet, hogy érdemes asztali eszközre váltani vagy mobil-optimalizált nézetre.

A PromNET-dashboard egyes oldalai (pl. a klasszikus 3-oszlopos áttekintő, a fájl-szerkesztő, a desktop-mode) asztali eszközre vannak optimalizálva. Ha mobil-on (telefonon, max ~600px-széles képernyőn) próbálod használni, egy mobile-tip banner figyelmeztet: érdemes asztali eszközre váltani vagy egy mobil-barát alternatívát választani.

1. Hol látszik?

A banner automatikusan megjelenik, ha:

  • a böngésző-szélesség <768px (Tailwind md-breakpoint alatt)
  • az aktuális oldal a 3-col klasszikus-dashboard (pl. /app/cloud, /app/desktop, vagy a fájl-szerkesztő)
  • nincs még az adott munkamenetben dismiss-elve

Pozíció: a tartalom felett, sárgás-fekete (warning-stílusú) sávban, 1-2 sornyi szöveggel + “Bezárás” gombbal.

2. Tipikus szövege

⚠ Asztali nézet ajánlott
Ez az oldal nagyobb képernyőre van optimalizálva.
Mobil-on néhány funkció kényelmetlen lehet.
[Bezárás]   [Mobile-friendly nézet]

3. Mit tehetsz?

3 lehetőséged van:

a) “Bezárás” — folytatod mobilon

A banner becsukódik a session-re (sessionStorage-ben tároljuk a “dismissed” flag-et), és újra-betöltésig nem zavar. A jelenlegi oldalon mobile-on dolgozol — kissé körülményes, de működik.

b) “Mobile-friendly nézet” — átirányít

Egy klikk-és átkerülsz a mobil-optimalizált egyszerűsített verzióra (csak a fő-funkciók: project-lista, kredit-egyenleg, profile, kijelentkezés). Mobil-on kényelmes ez a nézet — desktop-ra már nem váltja vissza automatikusan, ha tovább böngészel.

c) Asztali eszközre váltás

A legjobb élmény — laptop / asztali gép / tabletre váltasz, és újra-betöltöd az oldalt. A banner eltűnik, a teljes funkcionalitás elérhető.

4. Mikor NEM jelenik meg?

A banner NEM jön elő:

  • ha a képernyő-szélesség >=768px (tablet-landscape, asztal)
  • a már dismiss-elt oldalon (session-szinten)
  • mobil-optimalizált oldalakon (pl. /app/billing, /app/profil — ezek mobile-friendly natívan)
  • a publikus / marketing-oldalakon (csak az /app/*-on)

5. Hogyan dönt: “ez asztali nézet”?

A banner-komponens egy szabály-listából dolgozik. A MOBILE_NOT_OPTIMAL_PATHS konstans tartalmazza, mely path-ek-en jelenjen meg:

const MOBILE_NOT_OPTIMAL_PATHS = [
  '/app/cloud',           // 3-col áttekintő
  '/app/cloud/uj',        // wizard, nehéz mobilra
  '/app/desktop',         // ablakos UI
  '/app/admin',           // teljes admin-felület
  '/app/plugins',         // plugin-katalógus
  // ...
];

A pathname.startsWith(...) ellenőrzéssel történik. Ha valamelyiken zavaró vagy hiányzik, írj support-ticket-et.

6. Mobile-friendly alternatíva

Egy egyszerűsített dashboard-nézet a /app/m-on (vagy a fő-oldal automatikus fallback-je) mobilon:

  • Projekt-lista — kompakt kártyákkal
  • Kredit-egyenleg — nagy számmal
  • Számla / fizetés — gomb a teljesítéshez
  • Profil + kijelentkezés — alapok

Komplex feature-ek (fájl-szerkesztő, plugin-konfiguráció, AI Site Builder) asztal-only maradnak — túl bonyolult lenne mobile-en.

7. Mire NEM helyettesíti?

A mobile-tip banner figyelmeztetés, nem letiltás. Ha mobile-en mindenképp dolgoznál egy desktop-only oldalon (pl. fájl-szerkesztő), folytathatod — csak tudd, hogy:

  • A Monaco-Editor mobil-on nem érintőképernyő-barát (apró gombok)
  • A 3-col layout összepréselődik 1-col-ra (eltűnnek a mellék-paneek)
  • A drag/resize ablakok érintőképernyőn szétesnek

Ha gyors-fixet kell csinálnod (“egy szót át kell írni a blogban”), a Markdown-content-szerkesztő mobil-on megy — komplex projekt-szerkezet viszont nem.

8. Hogyan dismiss-eled véglegesen?

Ha soha többé nem akarod látni:

  1. /app/profil → “Preferenciák” szekció
  2. “Mobile-tip banner kikapcsolása” checkbox
  3. Mentés

Innentől a banner soha nem jelenik meg, függetlenül az eszközödtől.

Megjegyzés: Ha új-eszközről jelentkezel be (új böngésző, új sessionre), a kikapcsolás mégis-megmarad (server-oldali profil-mező), nem kell újra.

9. Akadálymentesítés

A banner szerepe screen-reader-en is él:

  • role="alert" — szóbeli felolvasáskor figyelemfelhívó
  • aria-label="Mobil eszköz figyelmeztetés" — jelzi a célt
  • tab-index — billentyűzettel “Bezárás”-ra ugrik

10. Szervetlen-jelzések

A bannert tudatosan nem invasive:

  • Nem fed le a tartalomon — csak felül egy sáv
  • Nem blokkolja az interakciót — átláthatsz rajta
  • Nem dark-pattern — bezárod, nincs popup-csapda
  • Egy session-en belül egyszer jön elő, ha ott vagy

A cél: figyelem-felhívás, nem akadályozás.

← Kezdési útmutató Frissítve: 2026. 05. 08.