From 1beb53568c980367f1a09855c2e74a522b8748d1 Mon Sep 17 00:00:00 2001 From: hacklab Date: Mon, 19 Oct 2026 14:29:07 +0200 Subject: [PATCH] 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. --- GUIA_DE_DESARROLLO.md | 5 +++-- docs/ESTUDIO_NAVEGACION.md | 14 ++++++++++++-- src/client/public/js/mobile_menu.js | 21 +++++++++++++++++++++ src/views/hive_views.js | 6 ++++-- 4 files changed, 40 insertions(+), 6 deletions(-) create mode 100644 src/client/public/js/mobile_menu.js diff --git a/GUIA_DE_DESARROLLO.md b/GUIA_DE_DESARROLLO.md index 887bea1..c4bb603 100644 --- a/GUIA_DE_DESARROLLO.md +++ b/GUIA_DE_DESARROLLO.md @@ -72,8 +72,9 @@ tiene o lo está haciendo. ## Navegación 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 -CSS). La barra tiene siempre cuatro atajos elegidos por cada cual más Menú. Por qué +que abre una hoja con el lanzador (`hive_views.js`: una casilla y CSS). Un script +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 justifique, no por gusto. diff --git a/docs/ESTUDIO_NAVEGACION.md b/docs/ESTUDIO_NAVEGACION.md index 3b6db73..8db15dc 100644 --- a/docs/ESTUDIO_NAVEGACION.md +++ b/docs/ESTUDIO_NAVEGACION.md @@ -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ú. 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, -y se hace sin JavaScript, solo con HTML y CSS (una casilla que abre la hoja). +pulgar y donde está el resto de la navegación. Funciona igual en todas las pantallas. +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 diff --git a/src/client/public/js/mobile_menu.js b/src/client/public/js/mobile_menu.js new file mode 100644 index 0000000..70dcee0 --- /dev/null +++ b/src/client/public/js/mobile_menu.js @@ -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; + }); +})(); diff --git a/src/views/hive_views.js b/src/views/hive_views.js index fc0923a..6d528f7 100644 --- a/src/views/hive_views.js +++ b/src/views/hive_views.js @@ -7,7 +7,7 @@ // cada integracion. Aqui solo depende de i18n, que se inyecta porque main_views // 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 sharedState = require("../configs/shared-state"); 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' }, '✕') ), renderHiveNav() - ) + ), + // atras cierra la hoja (sin este script el menu funciona igual) + script({ src: '/js/mobile_menu.js', defer: 'defer' }) ); };