menu: el boton atras de Android cierra la hoja

En el emulador, con la hoja abierta, atras cambiaba de pagina. Un script
minimo (public/js/mobile_menu.js, servido desde /js como permite la CSP)
apunta una entrada en el historial al abrirla y la quita al cerrarla; sin
el script el menu funciona igual. El estudio de navegacion recoge lo que
salio en la prueba.
This commit is contained in:
hacklab 2026-10-19 14:29:07 +02:00
parent 062d49c367
commit 1beb53568c
4 changed files with 40 additions and 6 deletions

View file

@ -72,8 +72,9 @@ tiene o lo está haciendo.
## Navegación ## Navegación
Al abrir se ve la actividad. Los módulos están en la quinta pestaña de abajo, Menú, Al abrir se ve la actividad. Los módulos están en la quinta pestaña de abajo, Menú,
que abre una hoja con el lanzador (`hive_views.js`, sin JavaScript: una casilla y que abre una hoja con el lanzador (`hive_views.js`: una casilla y CSS). Un script
CSS). La barra tiene siempre cuatro atajos elegidos por cada cual más Menú. Por qué mínimo, `public/js/mobile_menu.js`, hace que el botón atrás de Android cierre la hoja;
sin él el menú funciona igual. La barra tiene siempre cuatro atajos elegidos por cada cual más Menú. Por qué
así: `docs/ESTUDIO_NAVEGACION.md`. Si se cambia, que sea con una prueba que lo así: `docs/ESTUDIO_NAVEGACION.md`. Si se cambia, que sea con una prueba que lo
justifique, no por gusto. justifique, no por gusto.

View file

@ -57,8 +57,18 @@ pestaña, "Menú", que abre desde abajo una hoja con todos los módulos agrupado
mismo lanzador de ahora). Se cierra tocando fuera, con la X o volviendo a tocar Menú. mismo lanzador de ahora). Se cierra tocando fuera, con la X o volviendo a tocar Menú.
Es la idea de B, un botón que despliega las opciones, pero puesto donde llega el Es la idea de B, un botón que despliega las opciones, pero puesto donde llega el
pulgar y donde está el resto de la navegación. Funciona igual en todas las pantallas, pulgar y donde está el resto de la navegación. Funciona igual en todas las pantallas.
y se hace sin JavaScript, solo con HTML y CSS (una casilla que abre la hoja). Está hecho con una casilla y CSS; un script mínimo hace que el botón atrás de Android
cierre la hoja en vez de cambiar de página.
## Lo que salió en la prueba (emulador, 19/10/2026)
- Portada a Tribus: dos toques (Menú, Tribus). Desde Foros a Votaciones: dos toques.
- En la primera versión la hoja dejaba ver 690 px y los módulos medían 1.200: Tribus
quedaba fuera. Con cinco iconos por fila y los grupos pequeños de dos en dos, los 20
módulos caben a 412 y a 360 px.
- Se cierra tocando fuera, con la X y volviendo a tocar Menú.
- Con la hoja abierta, atrás cambiaba de página. Ahora la cierra.
## Qué mirar en la prueba ## Qué mirar en la prueba

View file

@ -0,0 +1,21 @@
// Pestaña Menu del movil: que el boton atras de Android cierre la hoja en vez de
// salir de la pagina. Al abrirla se apunta una entrada en el historial; atras la
// quita y cierra la hoja. Sin este fichero el menu funciona igual (es una casilla
// y CSS), solo que atras cambia de pagina. Ver docs/ESTUDIO_NAVEGACION.md.
(function () {
var box = document.getElementById('oasis-menu-toggle');
if (!box || !window.history || !history.pushState) return;
// al volver atras a una pagina desde la que se abrio otra con el menu, la entrada
// del historial es la del menu abierto: se ensena abierto y el siguiente atras lo cierra
if (history.state && history.state.oasisMenu) box.checked = true;
box.addEventListener('change', function () {
if (box.checked) {
history.pushState({ oasisMenu: true }, '');
} else if (history.state && history.state.oasisMenu) {
history.back();
}
});
window.addEventListener('popstate', function () {
if (box.checked) box.checked = false;
});
})();

View file

@ -7,7 +7,7 @@
// cada integracion. Aqui solo depende de i18n, que se inyecta porque main_views // cada integracion. Aqui solo depende de i18n, que se inyecta porque main_views
// lo muta en cada peticion sin reasignarlo. // lo muta en cada peticion sin reasignarlo.
const { a, button, div, form, h2, h3, img, input, label, nav, p, section, span } = require("../server/node_modules/hyperaxe"); const { a, button, div, form, h2, h3, img, input, label, nav, p, script, section, span } = require("../server/node_modules/hyperaxe");
const { getConfig } = require("../configs/config-manager.js"); const { getConfig } = require("../configs/config-manager.js");
const sharedState = require("../configs/shared-state"); const sharedState = require("../configs/shared-state");
const { iconNode, iconKeyOf } = require("./mobile_icons"); const { iconNode, iconKeyOf } = require("./mobile_icons");
@ -133,7 +133,9 @@ module.exports = ({ i18n }) => {
label({ class: 'menu-sheet-close', for: 'oasis-menu-toggle', 'aria-label': i18n.bbMenuClose || 'Close' }, '✕') label({ class: 'menu-sheet-close', for: 'oasis-menu-toggle', 'aria-label': i18n.bbMenuClose || 'Close' }, '✕')
), ),
renderHiveNav() renderHiveNav()
) ),
// atras cierra la hoja (sin este script el menu funciona igual)
script({ src: '/js/mobile_menu.js', defer: 'defer' })
); );
}; };