hacklab/OASIS_MOBILE
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions 1

[0.9.1] FORK_IA_UX: thumb-zone navigation — hive bottom-sheet + publish FAB + reordered bar

Browse source 
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 2026-08-06 12:00:18 +02:00
parent ed9f01e8e6
commit 745c340917
2 changed files with 122 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

74
src/client/assets/themes/OasisMobile.css
View file

@ -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 */