docs: update CONTEXT with hamburger menu, nav and session 2 changes
- 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>
This commit is contained in:
SITO
parent
12acd6fd20
commit
72ca759d1f
4 changed files with 258 additions and 65 deletions
|
|
@ -57,7 +57,14 @@ FICHEROS DE CAMBIOS (documentan lo que se modifico y por que)
|
|||
- OasisMobile.css: por que se reescribio, que se quito
|
||||
- main_views.js: viewport-fit=cover y por que importa
|
||||
- style.css: que se añadio al final
|
||||
- Que puede gustar / que puede no gustar
|
||||
|
||||
cambio_hamburger_nav.txt
|
||||
Documentacion del menu hamburger movil y navegacion.
|
||||
- Estructura HTML completa del menu (sidebar-panel, quicklinks)
|
||||
- Mecanismo CSS puro: checkbox + selector ~ sin JS
|
||||
- display:contents en desktop para preservar layout izquierda|main|derecha
|
||||
- Botones de grupo redondeados, acordeon colapsado por defecto
|
||||
- QR en pubs de invites_view.js (renderPubTable async)
|
||||
|
||||
--------------------------------------------------------------
|
||||
NOTA PARA EL DEVELOPER
|
||||
|
|
|
|||
|
|
@ -10,6 +10,14 @@ RAMA ACTIVA: test
|
|||
--------------------------------------------------------------
|
||||
COMMITS (mas reciente primero)
|
||||
--------------------------------------------------------------
|
||||
12acd6f feat: add QR share button to each pub row in invites view
|
||||
16f9189 fix: hamburger panel groups collapsed by default, styled as rounded buttons
|
||||
17de510 feat: move quick links to header second row (inbox/PM/publish/search)
|
||||
6f813b2 fix: clean one-row mobile header, full nav panel with quick links
|
||||
f7f541a fix: hamburger menu shows all nav tabs, header logo+hamburger on same row
|
||||
0edf375 fix: mobile audit — expand nav groups, responsive tables/videos/layout
|
||||
e1df914 feat: collapsible hamburger menu for mobile — pure CSS, no JS
|
||||
8216283 fix: increase header logo size and reduce nav link spacing
|
||||
dad3871 feat: add QR share button to profile and fix mobile header layout
|
||||
9ee8fd6 fix: flatten filter buttons layout for mobile in activity, stats and trending
|
||||
07403d1 docs: add detailed change documentation per feature phase
|
||||
|
|
@ -21,26 +29,40 @@ b48944e feat: mobile visual improvements and CSS cleanup
|
|||
f88a179 oasis_mobile 6.9 (APK descompilada + source)
|
||||
9a96d77 first commit
|
||||
|
||||
ESTADO: Working tree clean
|
||||
ESTADO: Working tree clean (solo .idea/ y .update_required sin commitear)
|
||||
|
||||
--------------------------------------------------------------
|
||||
ARCHIVOS MODIFICADOS (todas las sesiones)
|
||||
--------------------------------------------------------------
|
||||
src/views/tribes_view.js -> async + QR invite code tribe
|
||||
src/views/invites_view.js -> async + QR pub invite
|
||||
src/views/invites_view.js -> async + QR pub invite + QR por cada pub
|
||||
renderPubTable ahora async con Promise.all
|
||||
src/views/inhabitants_view.js -> async + QR perfil SSB ID
|
||||
src/views/blockchain_view.js -> filtro invites + renderInviteExtra
|
||||
src/views/main_views.js -> viewport-fit=cover + async authorView
|
||||
+ QR Compartir ID con <details>/<summary>
|
||||
+ hamburger menu (checkbox puro CSS)
|
||||
+ sidebar-panel wrapper (ambas sidebars)
|
||||
+ panel-quicklinks en header (2a fila)
|
||||
src/views/activity_view.js -> mode-buttons aplanado (sin inline grid)
|
||||
src/views/stats_view.js -> mode-buttons sin inline style
|
||||
src/views/trending_view.js -> mode-buttons aplanado + trending-container clase
|
||||
src/views/modules_view.js -> preset-group usa clase mode-buttons (sin nowrap)
|
||||
src/models/tribes_model.js -> inviteLog trazabilidad completa
|
||||
src/models/main_models.js -> publica SSB msg type:pub-invite
|
||||
src/models/blockchain_model.js -> filtro invites en listBlockchain
|
||||
src/client/assets/themes/OasisMobile.css -> reescrito + qr-share-btn/panel theming
|
||||
src/client/assets/styles/mobile.css -> reescrito + header compacto + logo 38px
|
||||
src/client/assets/styles/style.css -> estilos QR, invites, qr-share, trending-container
|
||||
src/client/assets/themes/OasisMobile.css -> reescrito + qr-share + hamburger theming
|
||||
+ panel-quicklink + oasis-nav-header panel
|
||||
src/client/assets/styles/mobile.css -> reescrito completo:
|
||||
header 1 fila (logo+hamburger)
|
||||
panel-quicklinks fila 2 header
|
||||
sidebar-panel como drawer hamburger
|
||||
tablas/videos responsivos
|
||||
botones grupos redondeados en panel
|
||||
src/client/assets/styles/style.css -> estilos QR, invites, qr-share,
|
||||
sidebar-panel display:contents,
|
||||
order 1/2/3 para layout desktop,
|
||||
panel-quicklinks display:none desktop
|
||||
|
||||
--------------------------------------------------------------
|
||||
PROBLEMA DE CONECTIVIDAD AL REMOTO
|
||||
|
|
|
|||
|
|
@ -12,29 +12,49 @@ CRITICO — PENDIENTE
|
|||
-> Una vez resuelto: git push -u origin test
|
||||
|
||||
--------------------------------------------------------------
|
||||
IMPLEMENTADO EN ESTA SESION
|
||||
IMPLEMENTADO EN ESTA SESION (2026-05-01 sesion 2)
|
||||
--------------------------------------------------------------
|
||||
[x] Botones activity/stats/trending aplanados (sin inline grid)
|
||||
activity_view.js, stats_view.js, trending_view.js
|
||||
-> mode-buttons ahora es fila CSS sin estilos inline
|
||||
-> En movil: scroll horizontal correcto
|
||||
[x] Menu hamburger movil — CSS puro, sin JS
|
||||
main_views.js -> checkbox + label, sidebar-panel wrapper
|
||||
-> Header fila 1: [logo][hamburger] — una sola fila limpia
|
||||
-> Header fila 2: [Inbox][PM][Publicar][Buscar] — pills con scroll
|
||||
-> Panel hamburger: slide-in izquierda con TODA la navegacion
|
||||
(sidebar-left: Personal/Content/Governance/Office/Tools
|
||||
sidebar-right: Network/Creative/Media — todos los grupos)
|
||||
-> Grupos colapsados por defecto, tap para expandir
|
||||
-> Backdrop oscuro al fondo cierra el panel
|
||||
-> Mecanismo: #mobile-menu-toggle:checked ~ .main-content .sidebar-panel
|
||||
|
||||
[x] QR "Compartir ID" en pagina de perfil/avatar
|
||||
main_views.js -> authorView() ahora async
|
||||
-> Elemento <details>/<summary>: boton nativo HTML, sin JS
|
||||
-> Muestra QR grande del SSB ID + texto del ID debajo
|
||||
-> CSS en style.css (.qr-share-*) y OasisMobile.css (colores)
|
||||
[x] Botones del panel hamburger rediseñados
|
||||
mobile.css -> .sidebar-panel .oasis-nav-header
|
||||
-> border-radius: 12px, padding 11px 14px
|
||||
-> Flecha rota al expandir (CSS accordion, sin JS)
|
||||
-> Links del grupo con borde vertical izquierdo y padding amplio
|
||||
-> OasisMobile.css -> fondo #252500 + texto #FFD700
|
||||
|
||||
[x] Header movil compacto
|
||||
mobile.css -> reescrito sin display:contents
|
||||
-> Logo 38px, links con padding 3px 4px, font 0.72rem
|
||||
-> top-bar-left: flex row flex:1
|
||||
-> top-bar-right: flex row flex-shrink:0
|
||||
-> Todo en una fila sin conflictos
|
||||
[x] QR en cada pub de la tabla de invites
|
||||
invites_view.js -> renderPubTable ahora async
|
||||
-> Promise.all genera QR SVG por cada pubItem.key
|
||||
-> details/summary colapsable (mismo patron que perfil y tribe)
|
||||
-> Solo visible cuando hay pubs conectados (ahora 0)
|
||||
|
||||
[x] Audit movil completo — sin scroll horizontal
|
||||
mobile.css -> videos/iframes max-width:100%
|
||||
-> Tablas info (block-info-table, bank-info-table, etc.) overflow-x:auto
|
||||
-> pre/code con white-space:pre-wrap
|
||||
-> Atributos width="640" y style="width:640" sobreescritos
|
||||
|
||||
[x] sidebar-panel como contenedor para desktop
|
||||
style.css -> .sidebar-panel { display: contents }
|
||||
-> order: 1/2/3 para sidebar-left | main-column | sidebar-right
|
||||
-> panel-quicklinks hidden en desktop
|
||||
|
||||
--------------------------------------------------------------
|
||||
IMPLEMENTADO EN SESIONES ANTERIORES
|
||||
--------------------------------------------------------------
|
||||
[x] Botones activity/stats/trending aplanados (sin inline grid)
|
||||
[x] QR "Compartir ID" en pagina de perfil/avatar (<details>/<summary>)
|
||||
[x] Header movil compacto (logo 38px, links compactos)
|
||||
[x] QR en invite de tribe (tribes_view.js)
|
||||
[x] QR en invite de pub SSB (invites_view.js)
|
||||
[x] QR del ID SSB en lista de inhabitants (inhabitants_view.js)
|
||||
|
|
@ -44,7 +64,7 @@ IMPLEMENTADO EN SESIONES ANTERIORES
|
|||
[x] renderInviteExtra() con tabla detallada en blockchain_view.js
|
||||
[x] viewport-fit=cover para notch Android/iOS (main_views.js)
|
||||
[x] mobile.css completo (safe-area, touch targets, QR lightbox)
|
||||
[x] OasisMobile.css limpio (solo theming, sin duplicar mobile.css)
|
||||
[x] OasisMobile.css limpio (solo theming)
|
||||
|
||||
--------------------------------------------------------------
|
||||
COMO CORRER EL PROYECTO
|
||||
|
|
@ -54,58 +74,45 @@ COMO CORRER EL PROYECTO
|
|||
Abre: http://localhost:3000
|
||||
|
||||
En Chrome: F12 -> icono movil (Ctrl+Shift+M) -> Pixel 7 o similar
|
||||
Esto muestra mobile.css y todos los cambios visuales.
|
||||
|
||||
npm install solo si es la primera vez o cambias dependencias.
|
||||
|
||||
--------------------------------------------------------------
|
||||
PORQUE NO SE PUEDE EJECUTAR EN ANDROID STUDIO (explicacion)
|
||||
ARQUITECTURA DEL MENU HAMBURGER (para proxima sesion)
|
||||
--------------------------------------------------------------
|
||||
Lo que hay en el repo es una APK DESCOMPILADA, no el proyecto fuente.
|
||||
Concretamente:
|
||||
- classes.dex -> bytecode Dalvik COMPILADO (no codigo fuente)
|
||||
- AndroidManifest.xml -> codificado en binario (no XML legible)
|
||||
- lib/arm64-v8a/ -> libnative-lib.so, libnode.so, libc++_shared.so
|
||||
(binarios nativos, no fuente Kotlin)
|
||||
- No hay build.gradle, settings.gradle, ni archivos .kt/.java
|
||||
HTML (main_views.js):
|
||||
body
|
||||
input#mobile-menu-toggle.mobile-menu-checkbox <- checkbox oculto
|
||||
div.header
|
||||
div.top-bar-left (logo + label.mobile-menu-btn)
|
||||
div.top-bar-right (tags + search — oculto en movil)
|
||||
div.panel-quicklinks (inbox/PM/pub/search — visible en movil)
|
||||
div.main-content
|
||||
div.sidebar-panel <- DRAWER del hamburger
|
||||
label.mobile-menu-close
|
||||
div.sidebar-left (Personal/Content/Governance/Office/Tools)
|
||||
div.sidebar-right (Network/Creative/Media)
|
||||
main.main-column
|
||||
label.mobile-menu-backdrop <- backdrop cierra el menu
|
||||
|
||||
PARA COMPILAR LA APK SE NECESITA:
|
||||
1. El proyecto Android original (Kotlin + Gradle)
|
||||
que estaria en el servidor del dev o en el repo completo de krakenslab
|
||||
2. El ZIP del nodejs-project actualizado se pondria en assets/
|
||||
3. Con el proyecto fuente: Build -> Generate APK en Android Studio
|
||||
CSS clave (mobile.css):
|
||||
.sidebar-panel { display: none }
|
||||
#mobile-menu-toggle:checked ~ .main-content .sidebar-panel {
|
||||
display: block; position: fixed; top:0; left:0;
|
||||
width: 82vw; max-width: 320px; height: 100vh; z-index: 200;
|
||||
}
|
||||
|
||||
LO QUE SI PUEDES HACER HOY:
|
||||
- Correr el servidor Node.js local (node main.js)
|
||||
- Ver en Chrome con emulacion movil (F12 -> toggle device)
|
||||
- Instalar la APK original en el emulador:
|
||||
adb install /home/sito/Downloads/oasis-v0.6.8.apk
|
||||
(esto instala la version sin tus cambios, solo para referencia)
|
||||
|
||||
PARA TENER UN APK CON TUS CAMBIOS:
|
||||
- Necesitas el proyecto Kotlin fuente
|
||||
- Actualizar assets/nodejs-project.zip con el Node.js modificado
|
||||
- Compilar desde Android Studio
|
||||
|
||||
--------------------------------------------------------------
|
||||
CLAUDE CODE EN ANDROID STUDIO
|
||||
--------------------------------------------------------------
|
||||
OPCION 1 (recomendada): JetBrains Plugin
|
||||
- Android Studio -> Settings -> Plugins -> Marketplace
|
||||
- Buscar: "Claude Code" o "Anthropic"
|
||||
- Instalar y reiniciar -> panel lateral en el IDE
|
||||
|
||||
OPCION 2: Terminal integrada
|
||||
- View -> Tool Windows -> Terminal
|
||||
- Ejecutar: claude (si Claude Code CLI esta instalado)
|
||||
CSS desktop (style.css):
|
||||
.sidebar-panel { display: contents } <- transparente, hijos = flex items
|
||||
.sidebar-left { order: 1 }
|
||||
.main-column { order: 2 }
|
||||
.sidebar-right { order: 3 }
|
||||
|
||||
--------------------------------------------------------------
|
||||
POSIBLES MEJORAS FUTURAS
|
||||
--------------------------------------------------------------
|
||||
[ ] Activar modulos economy (banking/market/jobs) para que aparezcan en el panel
|
||||
[ ] QR para cada pub activo al conectarse a la red
|
||||
[ ] Boton "Copiar codigo" junto al QR de invite (tribe/pub)
|
||||
[ ] QR en vista individual de cada tribe (para compartir URL)
|
||||
[ ] QR para cada pub activo en la tabla de pubs
|
||||
[ ] Obtener proyecto Kotlin fuente para poder compilar APK con cambios
|
||||
[ ] Obtener proyecto Kotlin fuente para compilar APK con cambios
|
||||
[ ] Comprobar que inviteLog se persiste correctamente al reiniciar SSB
|
||||
|
||||
--------------------------------------------------------------
|
||||
|
|
|
|||
157
CONTEXT/cambio_hamburger_nav.txt
Normal file
157
CONTEXT/cambio_hamburger_nav.txt
Normal file
|
|
@ -0,0 +1,157 @@
|
|||
===============================================================
|
||||
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
|
||||
Loading…
Add table
Add a link
Reference in a new issue