diff --git a/src/client/assets/themes/OasisMobile.css b/src/client/assets/themes/OasisMobile.css index a086704..e4fca55 100644 --- a/src/client/assets/themes/OasisMobile.css +++ b/src/client/assets/themes/OasisMobile.css @@ -1044,3 +1044,77 @@ button, input[type="submit"], input[type="button"], .oasis-bottombar-fixed .bb-item { padding: 2px 0; gap: 2px; } .oasis-bottombar-fixed .bb-ico { font-size: 17px; } .oasis-bottombar-fixed .bb-lbl { font-size: 8.5px; } + +/* ========================================================================== + FORK_IA_UX — navegación thumb-zone: hive en HOJA INFERIOR + FAB de publicar + barra reordenada. + Respaldo real: Hoober 2013 (49% una mano), Bergstrom-Lehtovirta CHI 2011 (área del pulgar = arco), + Parhi 2006 (diana ≥9mm → ≥48px), NN/g 2016 (nav visible > oculta), Von Restorff (FAB destacado). + Sin JS (checkbox-hack), gateado por OASIS_MOBILE. + ========================================================================== */ + +/* el hive salió del header → el contenido empieza justo bajo la topbar fija (libera espacio arriba) */ +body { padding-top: 66px; } + +/* --- barra inferior FORK (thumb-zone): 5 huecos con FAB central elevado --- */ +.oasis-bottombar-fork { align-items: flex-end; gap: 2px; } +.oasis-bottombar-fork .bb-item, +.oasis-bottombar-fork .bb-explore { + min-height: 52px; /* diana táctil holgada (≥48px, Parhi 2006 / Material 48dp) */ + justify-content: center; + cursor: pointer; text-decoration: none; +} +/* FAB central de publicar: círculo dorado destacado y elevado (Von Restorff + Jakob) */ +.oasis-bottombar-fork .bb-fab-btn { + flex: 0 0 auto; + display: flex; align-items: center; justify-content: center; + width: 58px; height: 58px; margin: 0 4px; + border-radius: 50%; + background: #FFD700; color: #121212; + box-shadow: 0 3px 10px rgba(0,0,0,.55); + text-decoration: none; + transform: translateY(-16px); /* lo levanta por encima de la barra */ +} +.oasis-bottombar-fork .bb-fab-glyph { font-size: 32px; font-weight: 700; line-height: 1; } +.oasis-bottombar-fork .bb-fab-btn:active { filter: brightness(.9); } + +/* --- HOJA INFERIOR del hive (bottom-sheet, sin JS) --- */ +.fork-sheet-wrap { display: contents; } /* no genera caja: el checkbox y la hoja quedan hermanos */ +.fork-sheet-toggle { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; margin: 0; } + +.hive-sheet { + position: fixed; inset: 0; z-index: 1200; pointer-events: none; + background-color: transparent; box-shadow: none; border-radius: 0; /* anula el div{#222} global */ +} +.hive-sheet-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.6); opacity: 0; transition: opacity .25s ease; } +.hive-sheet-panel { + position: absolute; left: 0; right: 0; bottom: 0; margin: 0; + max-height: 82vh; overflow-y: auto; + background: #121212; border-top: 1px solid #333; border-radius: 18px 18px 0 0; + padding: 6px 10px calc(20px + env(safe-area-inset-bottom, 0px)); + transform: translateY(100%); transition: transform .28s ease; + box-shadow: 0 -6px 24px rgba(0,0,0,.5); +} +/* abierto */ +.fork-sheet-toggle:checked ~ .hive-sheet { pointer-events: auto; } +.fork-sheet-toggle:checked ~ .hive-sheet .hive-sheet-backdrop { opacity: 1; } +.fork-sheet-toggle:checked ~ .hive-sheet .hive-sheet-panel { transform: translateY(0); } + +/* asa/grip para cerrar */ +.hive-sheet-grip { display: block; width: 44px; height: 5px; margin: 4px auto 10px; border-radius: 3px; background: #444; cursor: pointer; } +/* fila de accesos que NO están en el hive (red y estado) */ +.hive-sheet-quick { + display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; + margin: 2px 0 10px; padding: 0 0 8px; border-bottom: 1px solid #262626; + background-color: transparent; box-shadow: none; border-radius: 0; /* anula div{#222} */ +} +.hive-sheet-quick .hsq-item { + display: flex; flex-direction: column; align-items: center; gap: 4px; + min-height: 48px; justify-content: center; + text-decoration: none; color: #FFD700; + background: #161616; border: 1px solid #333; border-radius: 12px; padding: 6px 2px; +} +.hive-sheet-quick .hsq-ico { font-size: 20px; line-height: 1; } +.hive-sheet-quick .hsq-lbl { font-size: 10px; } +/* el hive dentro de la hoja */ +.hive-sheet .hive-nav { margin: 2px auto 0; max-width: 360px; } +.hive-sheet .hive-mods { background-color: transparent; box-shadow: none; border-radius: 0; } /* por si el div{#222} lo alcanza */ diff --git a/src/views/main_views.js b/src/views/main_views.js index f60cbea..2f61df4 100644 --- a/src/views/main_views.js +++ b/src/views/main_views.js @@ -1169,26 +1169,29 @@ exports.PINNABLE_MODULES = PINNABLE_MODULES; const renderBottomBar = () => { if (process.env.OASIS_MOBILE !== '1') return ""; const inboxN = sharedState.getInboxCount(); - const cfg = getConfig(); - const modOn = (m) => !m || cfg.modules[m] === 'on' || cfg.modules[m] === undefined; - const bbLink = (href, ico, label, badge) => a( + const bbLink = (href, ico, lbl, badge) => a( { class: "bb-item", href }, span({ class: "bb-ico" }, ico), (badge && badge > 0) ? span({ class: "bb-badge" }, String(badge)) : "", - span({ class: "bb-lbl" }, label) + span({ class: "bb-lbl" }, lbl) + ); + // FORK_IA_UX (thumb-zone): Explorar (abre el hive en hoja inferior) · PM · (+) publicar FAB · Search · Inbox + const exploreBtn = label( + { class: "bb-item bb-explore", for: "fork-explore-toggle", "aria-label": "Explore" }, + span({ class: "bb-ico" }, "☰"), + span({ class: "bb-lbl" }, "Explore") + ); + const fab = a( + { class: "bb-fab-btn", href: "/publish", "aria-label": "Write" }, + span({ class: "bb-fab-glyph" }, "+") ); - // barra inferior FIJA (estilo epsylon): Inbox · PM · Write · Search · Graphos · Peers - const items = [ - bbLink("/inbox", "☂", "Inbox", inboxN), - bbLink("/pm", "✉", "PM"), - bbLink("/publish", "✎", "Write"), - bbLink("/search", "ꔅ", "Search"), - bbLink("/graphos", "◈", "Graphos"), - bbLink("/peers", "⧖", "Peers"), - ]; return nav( - { class: "oasis-bottombar oasis-bottombar-fixed", "aria-label": i18n.bbQuickActions || "Quick actions" }, - ...items + { class: "oasis-bottombar oasis-bottombar-fixed oasis-bottombar-fork", "aria-label": i18n.bbQuickActions || "Quick actions" }, + exploreBtn, + bbLink("/pm", "✉", "PM"), + fab, + bbLink("/search", "ꔅ", "Search"), + bbLink("/inbox", "☂", "Inbox", inboxN) ); }; @@ -1258,6 +1261,33 @@ const renderHiveNav = () => { }; exports.renderHiveNav = renderHiveNav; +// FORK_IA_UX: el hive vive en una HOJA INFERIOR (bottom-sheet) alcanzable con el pulgar; sin JS (checkbox-hack). +// Un checkbox oculto (#fork-explore-toggle) y la hoja son hermanos dentro de .fork-sheet-wrap (display:contents), +// así `#fork-explore-toggle:checked ~ .hive-sheet` la despliega; el botón "Explore" de la barra es su