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:
parent
062d49c367
commit
1beb53568c
4 changed files with 40 additions and 6 deletions
|
|
@ -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.
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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
|
||||||
|
|
||||||
|
|
|
||||||
21
src/client/public/js/mobile_menu.js
Normal file
21
src/client/public/js/mobile_menu.js
Normal 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;
|
||||||
|
});
|
||||||
|
})();
|
||||||
|
|
@ -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' })
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue