navegacion: al abrir, la actividad; los modulos en la pestaña Menu
docs/ESTUDIO_NAVEGACION.md compara cuatro formas de moverse por la app (lanzador en portada, boton de menu arriba, pestaña Menu abajo, hamburguesa) y se queda con la pestaña de abajo, el patron Mas de Android y de las apps grandes: al alcance del pulgar y en todas las pantallas. - la portada es la actividad; el lanzador ya no se pinta alli - quinta pestaña fija en la barra de abajo, Menu, que abre desde abajo una hoja con todos los modulos por secciones; se cierra con la X, tocando fuera o volviendo a tocar Menu. Sin JS: una casilla y CSS - textos en los 11 idiomas; caben cinco pestañas a 360px - capturas, portada y esquema de la interfaz al dia
This commit is contained in:
parent
6eafe5ee18
commit
382d903bc5
18 changed files with 192 additions and 34 deletions
|
|
@ -114,9 +114,26 @@ module.exports = ({ i18n }) => {
|
|||
const slots = pins.map(m => bbLink(
|
||||
m.href, m.glyph, i18n[m.labelKey] || m.key, m.key === 'inbox' ? inboxN : 0
|
||||
));
|
||||
// quinta pestaña fija: Menu abre desde abajo una hoja con todos los modulos (el
|
||||
// lanzador). Sin JS: una casilla y CSS. autocomplete=off para que al volver atras
|
||||
// el navegador no la deje abierta. Ver docs/ESTUDIO_NAVEGACION.md
|
||||
const menuLabel = i18n.bbMenu || 'Menu';
|
||||
return nav(
|
||||
{ class: "oasis-bottombar", attrs: { "aria-label": i18n.bbQuickActions || "Quick actions" } },
|
||||
...slots
|
||||
input({ type: 'checkbox', id: 'oasis-menu-toggle', class: 'menu-toggle', autocomplete: 'off', 'aria-label': menuLabel }),
|
||||
...slots,
|
||||
label({ class: 'bb-item bb-menu', for: 'oasis-menu-toggle' },
|
||||
iconNode('bb-ico', 'modules', '▦'),
|
||||
span({ class: 'bb-lbl' }, menuLabel)
|
||||
),
|
||||
label({ class: 'menu-sheet-backdrop', for: 'oasis-menu-toggle', 'aria-hidden': 'true' }),
|
||||
div({ class: 'menu-sheet', role: 'dialog', 'aria-label': menuLabel },
|
||||
div({ class: 'menu-sheet-head' },
|
||||
span({ class: 'menu-sheet-title' }, menuLabel),
|
||||
label({ class: 'menu-sheet-close', for: 'oasis-menu-toggle', 'aria-label': i18n.bbMenuClose || 'Close' }, '✕')
|
||||
),
|
||||
renderHiveNav()
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue