72ca759d1f
- 03_GIT_ESTADO.txt: updated with 8 new commits from this session, full list of modified files including modules_view.js and style.css - 05_PROXIMOS_PASOS.txt: all session 2 items marked done, hamburger architecture section added for next session reference - cambio_hamburger_nav.txt: new file documenting the hamburger menu implementation (HTML structure, CSS mechanism, theming, accordion) - 00_INDICE.txt: added entry for cambio_hamburger_nav.txt Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
157 lines
6.3 KiB
Text
157 lines
6.3 KiB
Text
===============================================================
|
|
CAMBIO: MENU HAMBURGER + NAVEGACION MOVIL
|
|
Fecha: 2026-05-01
|
|
===============================================================
|
|
|
|
--------------------------------------------------------------
|
|
PROBLEMA QUE SE RESOLVIA
|
|
--------------------------------------------------------------
|
|
En movil las dos sidebars (izquierda y derecha) ocupaban espacio
|
|
y hacian el layout inutilizable. El contenido principal quedaba
|
|
comprimido o directamente fuera de pantalla.
|
|
|
|
Ademas los links de navegacion (inbox, PM, publicar, buscar)
|
|
estaban en el header pero sin espacio para verse bien.
|
|
|
|
--------------------------------------------------------------
|
|
SOLUCION: MENU HAMBURGER PURO CSS
|
|
--------------------------------------------------------------
|
|
Sin JavaScript. Mecanismo: checkbox oculto + selector CSS ~
|
|
|
|
input#mobile-menu-toggle (primer hijo de body)
|
|
#mobile-menu-toggle:checked ~ .main-content .sidebar-panel {
|
|
display: block; position: fixed; ...
|
|
}
|
|
|
|
El checkbox esta antes de .main-content en el DOM, por lo que
|
|
el selector general sibling (~) puede alcanzarlo.
|
|
|
|
--------------------------------------------------------------
|
|
ESTRUCTURA HTML (main_views.js ~linea 693)
|
|
--------------------------------------------------------------
|
|
|
|
body
|
|
input#mobile-menu-toggle.mobile-menu-checkbox <- oculto siempre
|
|
div.header
|
|
div.top-bar-left
|
|
a.logo-icon (logo 38px)
|
|
label.mobile-menu-btn [☰/✕] <- toggle
|
|
nav > ul (inbox, PM, publicar) <- oculto en movil
|
|
div.top-bar-right
|
|
nav > ul (tags, search) <- oculto en movil
|
|
div.panel-quicklinks <- VISIBLE en movil (2a fila header)
|
|
a.panel-quicklink [☂ Inbox]
|
|
a.panel-quicklink [ꕕ PM]
|
|
a.panel-quicklink [❂ Publicar]
|
|
a.panel-quicklink [ꔅ Buscar]
|
|
div.main-content
|
|
div.sidebar-panel <- DRAWER hamburger
|
|
label.mobile-menu-close [✕ Cerrar]
|
|
div.sidebar-left
|
|
nav > ul > navGroups:
|
|
Personal (perfil, cv, agenda, wallet, modules, settings)
|
|
Content (mentions, latest, threads, topics, popular, multiverse)
|
|
Governance (inhabitants, tribes, parliament, courts)
|
|
Office (votations, events, tasks, reports)
|
|
Tools (AI, stats, blockexplorer, cipher, legacy)
|
|
div.sidebar-right
|
|
nav > ul > navGroups:
|
|
Network (activity, trending, opinions, forum, invites, peers)
|
|
Creative (feed, pixelia)
|
|
Economy (banking, market, jobs...) <- solo si modulos activos
|
|
Media (audios, bookmarks, docs, images, videos)
|
|
main.main-column <- contenido principal
|
|
label.mobile-menu-backdrop <- capa oscura cierra el menu al tocar
|
|
|
|
--------------------------------------------------------------
|
|
CSS DESKTOP (style.css)
|
|
--------------------------------------------------------------
|
|
.sidebar-panel { display: contents; }
|
|
/* display:contents hace que el div sea transparente —
|
|
sus hijos actuan como flex items directos de .main-content */
|
|
|
|
/* Orden visual: izquierda | contenido | derecha */
|
|
.sidebar-left { order: 1; }
|
|
.main-column { order: 2; }
|
|
.sidebar-right { order: 3; }
|
|
|
|
.panel-quicklinks { display: none; } /* oculto en desktop */
|
|
|
|
--------------------------------------------------------------
|
|
CSS MOVIL (mobile.css)
|
|
--------------------------------------------------------------
|
|
/* Header: una sola fila */
|
|
.header { flex-wrap: wrap; }
|
|
.top-bar-left { flex: 1; flex-wrap: nowrap; }
|
|
.top-bar-left nav, .top-bar-right { display: none; }
|
|
|
|
/* Segunda fila del header: quick links */
|
|
.panel-quicklinks {
|
|
flex: 0 0 100%; /* fila completa */
|
|
display: flex; flex-wrap: nowrap; overflow-x: auto;
|
|
}
|
|
.panel-quicklink {
|
|
border-radius: 20px; padding: 7px 12px;
|
|
border: 1px solid #555; white-space: nowrap;
|
|
}
|
|
|
|
/* Sidebars ocultas por defecto */
|
|
.sidebar-panel { display: none; }
|
|
.sidebar-panel .sidebar-left,
|
|
.sidebar-panel .sidebar-right { display: block; background: none; border: none; }
|
|
|
|
/* Panel abierto */
|
|
#mobile-menu-toggle:checked ~ .main-content .sidebar-panel {
|
|
display: block; position: fixed;
|
|
top: 0; left: 0;
|
|
width: 82vw; max-width: 320px; height: 100vh;
|
|
overflow-y: auto; z-index: 200;
|
|
}
|
|
|
|
/* Botones de grupo en el panel */
|
|
.sidebar-panel .oasis-nav-header {
|
|
border-radius: 12px; padding: 11px 14px;
|
|
font-weight: 700; font-size: 0.92rem;
|
|
}
|
|
|
|
--------------------------------------------------------------
|
|
THEMING (OasisMobile.css)
|
|
--------------------------------------------------------------
|
|
.panel-quicklink -> background #2a2a2a, color #FFD700
|
|
.sidebar-panel .oasis-nav-header -> background #252500, color #FFD700
|
|
#mobile-menu-toggle:checked ~ .main-content .sidebar-panel
|
|
-> background #1A1A1A
|
|
|
|
--------------------------------------------------------------
|
|
COMPORTAMIENTO ACORDEON EN EL PANEL
|
|
--------------------------------------------------------------
|
|
Los grupos de nav usan el mismo mecanismo de acordeon que
|
|
el desktop (input[type=checkbox] + label). En movil:
|
|
- Grupos colapsados por defecto al abrir el panel
|
|
- Tap en el header del grupo lo expande
|
|
- Flecha ▾ rota 180° cuando esta abierto
|
|
- No hay forzado de expansion (se elimino el override de max-height)
|
|
|
|
CSS nativo (style.css):
|
|
.oasis-nav-list { max-height: 0; overflow: hidden; }
|
|
.oasis-nav-toggle:checked + .oasis-nav-header + .oasis-nav-list {
|
|
max-height: 1000px;
|
|
}
|
|
|
|
--------------------------------------------------------------
|
|
QR EN PUBS (invites_view.js)
|
|
--------------------------------------------------------------
|
|
renderPubTable convertida a async.
|
|
Por cada pub: QRCode.toString(pubItem.key, {type:'svg'})
|
|
Mostrado con <details>/<summary> igual que el perfil y tribes.
|
|
Solo visible cuando hay pubs conectados (gossip.json no vacio).
|
|
|
|
--------------------------------------------------------------
|
|
NOTAS
|
|
--------------------------------------------------------------
|
|
- Economy group no aparece -> modulos banking/market/jobs desactivados
|
|
Se activan en /modules -> aparecen automaticamente
|
|
- El selector ~ funciona porque el checkbox es el primer hijo de body
|
|
y .main-content es su sibling (hermano) posterior
|
|
- display:contents tiene soporte 96%+ (todos los navegadores modernos)
|
|
- Sin JavaScript en ninguna parte del menu hamburger ni acordeon
|