diff --git a/CONTEXT/00_INDICE.txt b/CONTEXT/00_INDICE.txt index d9a85128..f45d446d 100644 --- a/CONTEXT/00_INDICE.txt +++ b/CONTEXT/00_INDICE.txt @@ -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 diff --git a/CONTEXT/03_GIT_ESTADO.txt b/CONTEXT/03_GIT_ESTADO.txt index 04826db8..2d335427 100644 --- a/CONTEXT/03_GIT_ESTADO.txt +++ b/CONTEXT/03_GIT_ESTADO.txt @@ -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
/ + + 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 diff --git a/CONTEXT/05_PROXIMOS_PASOS.txt b/CONTEXT/05_PROXIMOS_PASOS.txt index 59f726ff..1fa50231 100644 --- a/CONTEXT/05_PROXIMOS_PASOS.txt +++ b/CONTEXT/05_PROXIMOS_PASOS.txt @@ -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
/: 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 (
/) +[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 -------------------------------------------------------------- diff --git a/CONTEXT/cambio_hamburger_nav.txt b/CONTEXT/cambio_hamburger_nav.txt new file mode 100644 index 00000000..7036d7d9 --- /dev/null +++ b/CONTEXT/cambio_hamburger_nav.txt @@ -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
/ 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