[0.9.1] FORK_IA_UX: thumb-zone navigation — hive bottom-sheet + publish FAB + reordered bar
Mobile-usability experiment grounded in real studies (Hoober 2013, Bergstrom-Lehtovirta CHI 2011, Parhi 2006 target size, NN/g 2016 visible nav): - The hive (categories + modules) opens from the bottom bar as a thumb-reachable bottom-sheet (checkbox-hack, no JS), freeing the top for content. - Bottom bar reordered: Explore, PM, (+) publish FAB, Search, Inbox; the central FAB is the distinct, elevated primary action. - Network/status quick row (Peers, Graphos, Inbox, Settings) inside the sheet. - Tap targets >=48px. Additive and gated by OASIS_MOBILE (Linux untouched).
This commit is contained in:
s1to
parent
ed9f01e8e6
commit
745c340917
2 changed files with 122 additions and 18 deletions
|
|
@ -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 */
|
||||
|
|
|
|||
|
|
@ -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 <label>.
|
||||
const renderHiveSheet = () => {
|
||||
if (process.env.OASIS_MOBILE !== '1') return "";
|
||||
const q = (href, ico, lbl) => a({ class: "hsq-item", href },
|
||||
span({ class: "hsq-ico" }, ico), span({ class: "hsq-lbl" }, lbl));
|
||||
return div({ class: "fork-sheet-wrap" },
|
||||
input({ type: "checkbox", id: "fork-explore-toggle", class: "fork-sheet-toggle" }),
|
||||
div({ class: "hive-sheet" },
|
||||
label({ class: "hive-sheet-backdrop", for: "fork-explore-toggle", "aria-label": "Close" }),
|
||||
div({ class: "hive-sheet-panel" },
|
||||
label({ class: "hive-sheet-grip", for: "fork-explore-toggle", "aria-label": "Close" }),
|
||||
// accesos que no están en el hive (CATS): red y estado
|
||||
div({ class: "hive-sheet-quick" },
|
||||
q("/peers", "⧖", "Peers"),
|
||||
q("/graphos", "◈", "Graphos"),
|
||||
q("/inbox", "☂", "Inbox"),
|
||||
q("/settings", "⚙", "Settings")
|
||||
),
|
||||
renderHiveNav()
|
||||
)
|
||||
)
|
||||
);
|
||||
};
|
||||
exports.renderHiveSheet = renderHiveSheet;
|
||||
|
||||
const template = (titlePrefix, ...elements) => {
|
||||
const currentConfig = getConfig();
|
||||
const theme = currentConfig.themes.current || "Dark-SNH";
|
||||
|
|
@ -1290,10 +1320,10 @@ const template = (titlePrefix, ...elements) => {
|
|||
body(
|
||||
div(
|
||||
{ class: uxMode === "ainav" ? "header ainav-only" : "header" },
|
||||
renderMobileTopbar(),
|
||||
// hive global: los hexágonos salen en TODAS las páginas y SCROLLEAN bajo la topbar fija (antes solo en /activity)
|
||||
renderHiveNav()
|
||||
renderMobileTopbar()
|
||||
),
|
||||
// FORK_IA_UX: el hive se abre desde la barra inferior como HOJA alcanzable (thumb-zone), liberando el top para el contenido
|
||||
renderHiveSheet(),
|
||||
(() => {
|
||||
const updateFlagPath = path.join(__dirname, '../server/.update_required');
|
||||
if (fs.existsSync(updateFlagPath)) {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue