=============================================================== CAMBIO VISUAL MOVIL — CSS Y LAYOUT (commit b48944e) =============================================================== OBJETIVO: Mejorar la experiencia en pantallas moviles (<=768px). El proyecto estaba diseñado principalmente para escritorio. Los cambios afectan tres archivos CSS. -------------------------------------------------------------- ARCHIVO 1 — mobile.css (reescrito completo, ~480 lineas) -------------------------------------------------------------- RUTA: src/client/assets/styles/mobile.css Este archivo se aplica solo en pantallas moviles via media attribute. Antes tenia estilos dispersos y faltaban muchas cosas. Se reescribio completamente. SAFE AREA (notch / home indicator Android e iOS): html { -webkit-text-size-adjust: 100%; } body { padding-bottom: env(safe-area-inset-bottom); } .header { padding-top: env(safe-area-inset-top); padding-left/right: env(safe-area-inset-left/right); } footer { padding-bottom: calc(12px + env(safe-area-inset-bottom)); } Estas variables CSS solo tienen valor si el meta viewport tiene viewport-fit=cover (ver cambio en main_views.js mas abajo). FONT SIZE BASE: body { font-size: 14px; } Cabeceras: h1 1.25em, h2 1.1em, h3 1em Textos pequeños (.small, .time, .created-at): 0.78rem LAYOUT: .main-content -> flex column (sidebars debajo del contenido) .sidebar-left -> order: 1 .sidebar-right -> order: 2 .main-column -> order: 3 (el contenido principal queda arriba, sidebars debajo) Todos los anchos al 100%, min-width: 0 para evitar overflow. HEADER: .header -> flex row wrap, padding minimo (4px 2px) .top-bar-left, .top-bar-right -> display: contents (los hijos directos participan en el flex del header) nav ul li a -> padding 5px, font-size 0.82rem BOTONES Y TOUCH TARGETS: min-height: 44px (minimo recomendado por Apple HIG / Material) font-size: 15px :active { opacity: 0.75; transform: scale(0.97); } -> feedback tactil INPUTS: width: 100%, font-size: 16px (16px evita el zoom automatico en iOS al enfocar un input) FILTROS (scroll horizontal): .mode-buttons, .filter-group, .filters, .tribe-mode-buttons: flex-direction: row flex-wrap: nowrap overflow-x: auto scrollbar-width: none (oculta la scrollbar en Firefox) ::-webkit-scrollbar { display: none } (oculta en Chrome/WebKit) Cada form dentro: flex-shrink: 0 (no se comprimen) Los botones de filtro: white-space: nowrap, padding 8px 14px ANTES: los filtros aparecian en columna vertical, ocupando media pantalla. DESPUES: fila horizontal scrollable invisible. IMAGENES DE POSTS: .post img, .feed-card img, .post-image: max-height: 60vh (no ocupan toda la pantalla) width: auto, max-width: 100% border-radius: 8px FOTOS DE USUARIO (circulares): .inhabitant-photo, .inhabitant-photo-details: width: 160px, height: 160px border-radius: 50% object-fit: cover margin: 0 auto GALERIA: .gallery -> grid 2 columnas (1fr 1fr) TRIBES: .tribe-card-image -> height: 160px, object-fit: cover .tribe-section-nav -> overflow-x auto, nowrap (scroll horizontal) .tribe-section-btn -> font-size 11px, white-space nowrap .tribe-details -> flex column .tribe-inhabitants-grid -> 2 columnas .tribe-media-grid -> 2 columnas .tribe-content-grid / .tribe-overview-grid -> 1 columna FORUM: .forum-card -> flex column .forum-comment -> margin-left: 0 (no hay espacio para sangria en movil) .comment-body-row -> flex column TABLAS: .feed-row, table -> overflow-x auto (scroll horizontal si es ancha) QR LIGHTBOX (CSS puro, sin JS): .qr-lightbox-anchor -> display block, width fit-content .qr-lightbox-overlay -> display: none por defecto .qr-lightbox-anchor:target ~ .qr-lightbox-overlay -> display: flex El overlay es position: fixed, fondo negro 88% opacidad, z-index 9999 El SVG dentro: max-width min(85vw, 85vh) NOTA: este lightbox usa el selector CSS :target, que se activa cuando el hash de la URL coincide con el id del elemento. No requiere JavaScript. Para que funcione, el HTML debe tener el ancla con href="#id" y el overlay con id="id". OVERRIDES DE GRID INLINE: Hay vistas del proyecto que ponen grid-template-columns directamente en el atributo style del HTML. Para sobreescribir en movil: [style*="grid-template-columns: repeat(6"] { grid-template-columns: 1fr } [style*="grid-template-columns: repeat(3"] { grid-template-columns: 1fr } [style*="width:50%"] { width: 100% } -------------------------------------------------------------- ARCHIVO 2 — OasisMobile.css (reescrito, solo theming) -------------------------------------------------------------- RUTA: src/client/assets/themes/OasisMobile.css Antes tenia el CSS de mobile.css entero copiado dentro + el theming. Era ~700 lineas con mucha duplicacion y conflictos. Se reescribio dejando SOLO el theming de colores. PALETA DEL TEMA: body: background #121212, color #FFD700 header/footer: background #1F1F1F sidebars: background #1A1A1A, border #333 inputs/select/textarea: background #333, color #FFD700, border #555 buttons: background #444, color #FFD700 links: color #FFD700, hover #FFDD44 tables: background #222, th #333, even rows #2A2A2A SELECTORES ESPECIFICOS (en vez de div generico): Antes habia: div { background-color: #1A1A1A; border: 1px solid #333; } Eso pintaba absolutamente TODOS los divs de la pagina de oscuro, rompiendo layouts con divs transparentes o con otro fondo. Se reemplazo por: .block, .post, .card, .tribe-card, .inhabitant-card, .action-container, .feed-card, .block-single, .invite-page, .wallet-section, .pubs-section, .invites-tribes, .snh-invite-box, .invite-log-block SCROLLBAR: ::-webkit-scrollbar -> width/height 6px thumb: #555, border-radius 10px track: #1A1A1A user-link (badge de usuario): background #FFA500, color #000, bold hover: background #FFD700 active: background #cc8400, scale(0.97) focus: background #007B9F (accesibilidad) overflow hidden + text-overflow ellipsis (para IDs largos) QR en tema oscuro: .qr-code svg rect -> fill #1A1A1A .qr-code svg path -> fill #FFD700 (por defecto la libreria genera QR con fondo blanco y puntos negros) -------------------------------------------------------------- ARCHIVO 3 — main_views.js (una linea cambiada) -------------------------------------------------------------- RUTA: src/views/main_views.js ANTES: meta({ name: 'viewport', content: toAttributes({ width: 'device-width', 'initial-scale': 1 }) }) DESPUES: meta({ name: 'viewport', content: 'width=device-width, initial-scale=1, viewport-fit=cover' }) POR QUE IMPORTA viewport-fit=cover: Sin esta directiva, env(safe-area-inset-*) siempre devuelve 0. Es decir, los paddings de safe area del mobile.css no tienen efecto a menos que el viewport tenga viewport-fit=cover. Solo afecta a dispositivos con notch, agujero de camara o barra de gestos de Android. En dispositivos normales no cambia nada visible. -------------------------------------------------------------- ARCHIVO 4 — style.css (añadidos al final) -------------------------------------------------------------- RUTA: src/client/assets/styles/style.css Se añadieron estilos al FINAL del archivo (no se modifico lo existente): - Fotos circulares (border-radius 50%, object-fit cover) - .invite-page: flex column, align-items center, max-width 500px - .user-id-qr: flex column, align-items center, gap 8px - .invite-code-text: font-family monospace, fondo sutil, padding - .invite-log-block: padding, border-left 3px solido - .invite-status--pending: color naranja - .invite-status--used: color verde - Transiciones en botones: 0.15s ease -------------------------------------------------------------- QUE PUEDE GUSTAR -------------------------------------------------------------- - Filtros de scroll horizontal: gran mejora UX en movil. Los filtros ya no ocupan media pantalla. - Safe area funciona correctamente con viewport-fit=cover. - OasisMobile.css limpio: ya no sobreescribe todos los divs del DOM. - Touch targets de 44px: botones faciles de pulsar con el dedo. - Font-size 16px en inputs: evita el zoom automatico de Safari iOS. - Fotos circulares consistentes en toda la app. - El lightbox QR no necesita JavaScript adicional. - Los cambios son aditivos en style.css (no se toco lo anterior). -------------------------------------------------------------- QUE PUEDE NO GUSTAR / PUNTOS DE DISCUSION -------------------------------------------------------------- 1. El orden de los sidebars (left=1, main=3, right=2) puede parecer raro. La logica es: sidebar izquierda con navegacion primero, luego sidebar derecha con info secundaria, luego el feed principal. Es discutible, podria ser: left=2, main=1, right=3. 2. display:contents en .top-bar-left y .top-bar-right: Hace que el div desaparezca visualmente y sus hijos participen en el flex del padre. Es un truco para no reescribir el HTML. Tiene soporte amplio en browsers modernos pero puede ser confuso al depurar el layout con las devtools. 3. Los overrides de grid inline ([style*="grid-template-columns: repeat(6"]) son fragiles: dependen de que el string del style en el HTML sea exactamente ese. Si hay un espacio de mas o menos, no aplica. La solucion correcta seria eliminar los estilos inline del HTML y moverlos a clases CSS, pero eso requiere tocar muchas vistas. 4. El header en movil con flex-wrap puede quedar diferente segun cuantos elementos de navegacion tenga cada pagina. No hay una maqueta fija, el header se adapta al contenido. 5. El cambio de viewport-fit=cover afecta a todas las paginas de la app. En dispositivos con notch grande podria mostrar contenido bajo el notch si alguna pagina no tiene los paddings de safe area bien configurados. Hay que verificar en dispositivo real.