a316c0ded1
Excluido .claude (config local de Claude Code) para no subir el settings.json al repo público. Untracked también .idea, node_modules y artefactos de build. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
211 lines
8 KiB
Text
211 lines
8 KiB
Text
===============================================================
|
||
TAREAS DE USABILIDAD — Oasis Mobile
|
||
Creado: 2026-05-09
|
||
===============================================================
|
||
|
||
Lista de mejoras pendientes de UX/usabilidad en la app móvil.
|
||
Estado actual y especificacion de cada tarea.
|
||
|
||
===============================================================
|
||
TAREA 1 — PAGINADOR MÓVIL EN TODAS LAS BARRAS DE FILTROS
|
||
===============================================================
|
||
|
||
OBJETIVO
|
||
--------
|
||
Aplicar el mismo paginador CSS-only (.actpager) que ya está en
|
||
activity/agenda/trending/etc al resto de submenús con filtros.
|
||
|
||
El paginador muestra 2 botones por página con flechas ‹ › que
|
||
permiten navegar 2 en 2. Sin scroll del dedo, sin JS, sin
|
||
problemas de CSP ni caché.
|
||
|
||
POR QUÉ
|
||
-------
|
||
Actualmente las vistas sin paginador tienen los botones en
|
||
flex-wrap (multilinea), ocupando muchas filas y obligando al
|
||
usuario a hacer scroll vertical para ver toda la pantalla.
|
||
Con el paginador queda compacto: 1 fila + flechas.
|
||
|
||
CÓMO IMPLEMENTAR (patrón replicable)
|
||
------------------------------------
|
||
Para cada vista:
|
||
|
||
1. Importar el helper:
|
||
const { renderMobilePager } = require('./mobile_pager')
|
||
|
||
2. Construir el array de items:
|
||
const items = FILTERS.map(f => ({
|
||
type: f,
|
||
label: i18n[`${prefijo}Filter${capitalize(f)}`] || f.toUpperCase()
|
||
}))
|
||
|
||
3. Generar el paginador:
|
||
const mobilePager = renderMobilePager({
|
||
items,
|
||
idPrefix: 'XXp', // único en la página (3-4 letras)
|
||
formAction: '/ruta',
|
||
currentFilter: filter,
|
||
pageSize: 2
|
||
})
|
||
|
||
4. Insertar el paginador ANTES del contenedor desktop:
|
||
mobilePager,
|
||
div({ class: '<clase-original> actpager-desktop-only' },
|
||
...filtros originales
|
||
)
|
||
|
||
5. La regla CSS .actpager-desktop-only { display: none } en
|
||
mobile.css ya oculta el contenedor desktop en móvil.
|
||
|
||
ARCHIVOS DE REFERENCIA
|
||
----------------------
|
||
src/views/mobile_pager.js <- helper renderMobilePager
|
||
src/views/activity_view.js <- ejemplo más completo (36 filtros)
|
||
src/views/banking_views.js <- ejemplo con extraHidden / search
|
||
src/client/assets/styles/mobile.css <- reglas del paginador
|
||
|
||
===============================================================
|
||
INVENTARIO COMPLETO DE SUBMENÚS
|
||
===============================================================
|
||
|
||
YA TIENEN PAGINADOR (8 vistas)
|
||
------------------------------
|
||
Submenú Ruta Filtros Páginas
|
||
-------------------------------------------------
|
||
activity /activity 36 18
|
||
agenda /agenda 13 7
|
||
trending /trending 13 7
|
||
blockexplorer /blockexplorer ~31 16
|
||
banking /banking 10 5
|
||
inhabitants /inhabitants 9 5
|
||
calendars /calendars 6 3
|
||
logs /logs 5 3
|
||
|
||
PENDIENTES DE PAGINADOR (24 vistas)
|
||
-----------------------------------
|
||
|
||
Prioridad ALTA (>=8 filtros):
|
||
market /market ~12 filters
|
||
transfer /transfers ~10 filters
|
||
image /images ~8 filters
|
||
event /events ~8 filters
|
||
tribes /tribes 8 tribe-mode-buttons
|
||
opinions /opinions 8 mode-buttons
|
||
|
||
Prioridad MEDIA (5-7 filtros):
|
||
audio /audios ~6 filters
|
||
video /videos ~6 filters
|
||
document /docs ~6 filters
|
||
bookmark /bookmarks ~6 filters
|
||
torrents /torrents ~6 filters
|
||
task /tasks ~6 filters
|
||
favorites /favorites ~6 filters
|
||
maps /maps 6 filters
|
||
vote /votations 5 filters
|
||
pads /pads 5 tribe-mode-buttons
|
||
jobs /jobs 5 filters
|
||
projects /projects 5 filters
|
||
reports /reports 5 filters
|
||
forum /forum 5+ filter-group + mode-buttons-cols
|
||
|
||
Prioridad BAJA (4 filtros):
|
||
chats /chats 4 tribe-mode-buttons
|
||
shops /shops 4 tribe-mode-buttons
|
||
games /games 4 filter-group
|
||
feed /feed 4 mode-buttons-row
|
||
|
||
NO NECESITAN PAGINADOR (caben en una fila)
|
||
------------------------------------------
|
||
modules /modules 4 presets (minimal/social/economy/full)
|
||
stats /stats 3 modos
|
||
tags /tags 3
|
||
parliament /parliament 1
|
||
courts /courts 2
|
||
|
||
SIN FILTROS / CASOS ESPECIALES
|
||
------------------------------
|
||
peers, wallet, AI, invites, settings, search, pixelia,
|
||
legacy, cipher, pm, cv
|
||
|
||
===============================================================
|
||
PATRONES ESPECIALES A TENER EN CUENTA
|
||
===============================================================
|
||
|
||
1. tribe-mode-buttons (chats/pads/shops/tribes)
|
||
Tienen un botón "Create" al final del array. Hay que
|
||
decidir si meterlo en el paginador o dejarlo fuera.
|
||
Recomendación: dejar el Create FUERA, antes o despues
|
||
del paginador, como botón propio destacado.
|
||
|
||
2. mode-buttons-cols / filter-group (forum)
|
||
Tiene múltiples columnas con filtros agrupados.
|
||
Aplanar todo en un solo array para el paginador.
|
||
|
||
3. Filtros con parámetros extra (sort, q, etc)
|
||
Algunos forms inyectan hidden inputs (sort, page, etc).
|
||
Usar `extraHidden: { sort, q }` en renderMobilePager.
|
||
Ya lo soporta el helper, ver banking_views.js como
|
||
ejemplo.
|
||
|
||
4. Vistas con filter-btn en otras secciones
|
||
filter-btn se usa también para botones "View details",
|
||
"Visit", etc. Importante NO tocar esos. Solo modificar
|
||
la barra de filtros principal del listado.
|
||
|
||
===============================================================
|
||
TAREA 2 — REVISAR mode-buttons-cols Y mode-buttons-row
|
||
===============================================================
|
||
|
||
En vistas como forum, feed y blockchain hay clases
|
||
mode-buttons-cols y mode-buttons-row que en móvil hacen
|
||
flex-wrap (multilinea) por la regla en mobile.css.
|
||
|
||
Decidir si:
|
||
a) Aplicar paginador y dejar la versión desktop intacta
|
||
b) Solo aplicar flex-wrap (lo actual)
|
||
c) Otro layout específico
|
||
|
||
===============================================================
|
||
TAREA 3 — UNIFORMAR EL HEADER MÓVIL EN VISTAS DE DETALLE
|
||
===============================================================
|
||
|
||
Cuando entras al detalle (ej: /tribe/X, /event/Y), el header
|
||
puede comportarse distinto. Revisar que el hamburger nav y
|
||
quicklinks siempre se muestren correctamente.
|
||
|
||
===============================================================
|
||
TAREA 4 — REVISAR FORMULARIOS LARGOS EN MÓVIL
|
||
===============================================================
|
||
|
||
Vistas con formularios largos (create tribe, edit profile, etc):
|
||
- tribes_view (create/edit form)
|
||
- cv_view
|
||
- settings_view
|
||
|
||
Verificar que los inputs se vean bien en móvil, sin overflow.
|
||
|
||
===============================================================
|
||
TAREA 5 — CONSIDERAR DESACTIVAR PAGINADOR EN TABLET
|
||
===============================================================
|
||
|
||
El media query actual es @media (max-width: 768px). En tablets
|
||
estrechas en vertical (orientación portrait) puede ser que
|
||
caben más botones. Considerar punto de quiebre 600px y dejar
|
||
el desktop layout >600px.
|
||
|
||
===============================================================
|
||
NOTA SOBRE PRIORIZACIÓN
|
||
===============================================================
|
||
|
||
El usuario quiere uniformidad pero hay que sopesar:
|
||
- Vistas con 4 botones: el flex-wrap actual ya queda en
|
||
una sola fila normalmente. Poner paginador NO mejora
|
||
mucho (4 botones quedan en 2 páginas de 2).
|
||
- Vistas con 5-7 botones: ahora ocupan 2-3 filas en móvil.
|
||
El paginador las compacta a 1 fila.
|
||
- Vistas con 8+ botones: claramente necesitan paginador.
|
||
|
||
Decisión recomendada: empezar por prioridad ALTA (6 vistas)
|
||
y MEDIA (14 vistas) — 20 vistas en total. La prioridad BAJA
|
||
(4 vistas con 4 botones cada una) se puede dejar para más
|
||
adelante.
|