250 lines
9.8 KiB
Text
250 lines
9.8 KiB
Text
===============================================================
|
|
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.
|