flechas en las filas de fichas, avisos con teclado, botones de descarga en el README
- filas de cuatro fichas o mas: una fila con flechas a los lados (carrusel de CSS, sin JS); tambien las fichas de Gobierno de la tribu. En WebView viejo, rejilla - avisos de abajo: se esconden con el teclado; EMPEZAR se queda arriba - telefono de otra persona en una fila, Parlamento y Gobierno sin sangrados, imagen del metodo a 160 px, una sola caja de vacio, pads sin relleno doble, texto de autora legible, zonas tactiles de 44 px que faltaban - README: botones de descarga de la APK arriba; fuera los tres esquemas blancos - PENDIENTE y guia al dia con las pruebas del 24/10
This commit is contained in:
hacklab
parent
2d79e6779c
commit
1a52ab60a3
9 changed files with 211 additions and 101 deletions
|
|
@ -198,8 +198,11 @@ Aquí se puede hacer lo que haga falta.
|
|||
trazo para todos: 24x24, línea de 2, puntas redondas. Los del menú y la barra de
|
||||
abajo están en `views/mobile_icons.js` y no se tocan desde aquí. Nada de emoji ni de
|
||||
logotipos (tampoco el robot de las sugerencias del dev).
|
||||
- `android/scripts/sobre_oficial.sh`: monta la APK sobre la oficial del dev. El resto
|
||||
de `android/` (el proyecto Gradle propio) queda como estaba, sin uso.
|
||||
- `android/scripts/sobre_oficial.sh`: monta la APK sobre la oficial del dev. Es lo
|
||||
único de Android que hay en la rama; el proyecto Gradle propio se quitó.
|
||||
- `docs/botones/`: los botones de descarga de arriba del README. Enlazan a la APK de
|
||||
la versión publicada `apk-<versión>` en forgejo y en gitea; con APK nueva, se publica
|
||||
otra versión y se cambian el número y los enlaces.
|
||||
- `android/icono/`: el icono adaptativo (la isla del logo de Oasis sobre su fondo).
|
||||
`sobre_oficial.sh` lo copia encima del de la APK oficial, que solo trae un PNG
|
||||
cuadrado y el lanzador lo encoge dentro de un círculo blanco.
|
||||
|
|
@ -211,8 +214,12 @@ Desde la 1.3.5 el dev monta en el móvil una cabecera por módulo (`apkModbar` e
|
|||
`main_views.js`): se lleva a su barra el título, la primera caja de fichas, el buscador y
|
||||
los contadores, y pone los avisos en `.apk-banners`. Su CSS está en `OasisMobile.css`, que
|
||||
con el skin Activista no se carga, así que su estilo va en `mobile_ux.css` (bloque
|
||||
«cabecera de modulo de la 1.3.5»). Las fichas, en rejilla de tres columnas: en el móvil no
|
||||
se desliza de lado. Filtrar de Actividad es una casilla con su etiqueta dentro de la propia
|
||||
«cabecera de modulo de la 1.3.5»). Hasta tres fichas, en rejilla de tres columnas. Con
|
||||
cuatro o más van en una fila con una flecha a cada lado (bloque «filas de fichas que no
|
||||
caben»): un carrusel de CSS puro con `::scroll-button` y anclas (`anchor-name`,
|
||||
`anchor-scope`), sin JS y sin tocar su HTML. Lo mismo para las fichas de Gobierno de la
|
||||
tribu. Un WebView anterior al 135 no lo entiende y deja la rejilla. Otra fila de fichas
|
||||
que no quepa: añadir su selector a ese bloque. Filtrar de Actividad es una casilla con su etiqueta dentro de la propia
|
||||
caja de fichas, para que viaje con ella a la cabecera.
|
||||
|
||||
Los colores de serie (paleta Estándar) son los de la APK oficial, medidos con el inspector
|
||||
|
|
@ -292,9 +299,8 @@ nombre es el de la ruta: `/tribes` es `tribes`.
|
|||
En emulador x86 la APK no arranca por debajo de Android 12 (el traductor ARM no
|
||||
sabe ejecutar el node del dev), así que el viejo se prueba con el servidor local y
|
||||
el navegador de pruebas del WebView.
|
||||
- Los textos nuevos, en los 13 idiomas. `node TESTS/idiomas/run.mjs` recorre todas las
|
||||
pantallas en todos los idiomas buscando scroll de lado, filas que se deslizan y textos
|
||||
rotos o sin traducir (está en `TESTS/`, que no se sube).
|
||||
- Los textos nuevos, en los 13 idiomas, y la pantalla mirada al menos en uno largo
|
||||
(de o ru) y uno de derecha a izquierda (ar): sin scroll de lado ni textos cortados.
|
||||
- Nada en línea, que la CSP lo bloquea.
|
||||
- Commit en castellano, sin coautorías de herramientas.
|
||||
- Sin claves, contraseñas ni nada de `.ssb`.
|
||||
|
|
|
|||
25
README.md
25
README.md
|
|
@ -1,5 +1,12 @@
|
|||
# OASIS_MOBILE — rama de desarrollo experimental
|
||||
|
||||
<p align="center">
|
||||
<a href="https://forgejo.acampada26s.net/sito/OASIS_MOBILE/releases/download/apk-1.3.7/oasis-1.3.7.apk"><img src="docs/botones/descargar-forgejo.svg" alt="Descargar la APK 1.3.7 desde forgejo" width="300"></a>
|
||||
<a href="https://gitea.laenre.net/hacklab/OASIS_MOBILE/releases/download/apk-1.3.7/oasis-1.3.7.apk"><img src="docs/botones/descargar-gitea.svg" alt="Descargar la APK 1.3.7 desde gitea" width="300"></a>
|
||||
</p>
|
||||
|
||||
Android 7 o superior, 64 bits. Se instala junto al Oasis oficial sin pisarlo.
|
||||
|
||||
> ## ⚠ ESTO NO ES OASIS OFICIAL
|
||||
>
|
||||
> Esta es una **rama de desarrollo experimental** mantenida por el hacklab, **no
|
||||
|
|
@ -24,9 +31,6 @@ Versión base: Oasis 1.3.5 · Rama: `PRUEBAS` ·
|
|||
|
||||
|
||||
|
||||
[⬇ Descargar la APK](https://gitea.laenre.net/hacklab/OASIS_MOBILE/releases) ·
|
||||
Android 7 o superior, 64 bits · se instala junto al Oasis oficial sin pisarlo
|
||||
|
||||
### Novedades de esta versión
|
||||
|
||||
- Al día con Oasis 1.3.5: cabecera por módulo, buscador con más opciones, avisos de
|
||||
|
|
@ -118,8 +122,6 @@ mensaje en tu nombre ni cambiar lo que dijiste.
|
|||
|
||||
## Llamadas y salas
|
||||
|
||||
|
||||
|
||||
El Teléfono (llamadas de uno a uno, con buzón de voz) y las Salas (hasta cincuenta
|
||||
personas, con vídeo, levantar la mano, grabación y emisión) son de Oasis. En Android
|
||||
el sonido y la cámara no los maneja Node: el servidor se conecta a un puente nativo de
|
||||
|
|
@ -137,8 +139,6 @@ En la barra de arriba, junto al avatar, está el botón de *No molestar* del Tel
|
|||
|
||||
## La interfaz
|
||||
|
||||
|
||||
|
||||
<p align="center">
|
||||
<img src="docs/capturas/01-actividad.png" width="200">
|
||||
<img src="docs/capturas/02-menu.png" width="200">
|
||||
|
|
@ -152,8 +152,7 @@ En la barra de arriba, junto al avatar, está el botón de *No molestar* del Tel
|
|||
|
||||
Lo que sale al instalarla: la actividad al abrir y la hoja de Menú con el perfil
|
||||
Mínimo. Después, con el perfil Activista: el menú completo, una tribu, un blog y
|
||||
Ajustes. Capturas a 412 px, en español, con los colores de serie. Cómo rehacerlas:
|
||||
`docs/capturas/generar_portada.py`.
|
||||
Ajustes. Capturas a 412 px, en español, con los colores de serie.
|
||||
|
||||
Casi sesenta módulos no caben en la pantalla de un teléfono. Al abrir la app se ve la
|
||||
actividad, lo que ha pasado en la red. Abajo hay cuatro atajos que eliges tú y una
|
||||
|
|
@ -169,8 +168,6 @@ la barra de abajo, no el aspecto: los colores van en *Ajustes → Colores*.
|
|||
|
||||
## Cómo está hecha la rama
|
||||
|
||||
|
||||
|
||||
Oasis lo desarrolla epsylon y saca versión casi cada día. Para no tener que rehacer la
|
||||
rama en cada una, lo nuestro va en ficheros propios: hojas de estilo, unas pocas
|
||||
vistas, un router que va delante del suyo y el envoltorio de Android. El backend, el
|
||||
|
|
@ -221,9 +218,6 @@ Sale en `android/build/sobre-oficial/oasis-<versión>-hacklab.apk`. Sin clave se
|
|||
con la de depuración y queda depurable, para poder inspeccionarla desde
|
||||
`chrome://inspect`.
|
||||
|
||||
El proyecto Gradle propio de `android/` (`release.sh`, Android Studio) sigue ahí, pero
|
||||
ya no es el camino: no tiene el puente de audio y en él no hay llamadas.
|
||||
|
||||
Qué hay dentro de la APK:
|
||||
|
||||
| Pieza | De quién | Qué hace |
|
||||
|
|
@ -245,7 +239,8 @@ Para desarrollar, en el propio repositorio:
|
|||
|---|---|
|
||||
| [GUIA_DE_DESARROLLO.md](GUIA_DE_DESARROLLO.md) | Qué se toca, qué no y cómo hacer cada cosa |
|
||||
| [docs/FRONTERA_UPSTREAM.md](docs/FRONTERA_UPSTREAM.md) | Cuánto cambia el dev en cada versión, medido |
|
||||
| [docs/USABILIDAD_PAD.txt](docs/USABILIDAD_PAD.txt) | Pruebas de usabilidad en el móvil |
|
||||
| [docs/ARQUITECTURA_APK.md](docs/ARQUITECTURA_APK.md) | Cómo está hecha la APK del dev por dentro |
|
||||
| [docs/PENDIENTE.md](docs/PENDIENTE.md) | Lo que queda por hacer y lo que hay que pedir al dev |
|
||||
|
||||
Todo lo de arriba, en detalle, está en la
|
||||
[wiki](https://gitea.laenre.net/hacklab/OASIS_MOBILE/wiki):
|
||||
|
|
|
|||
|
|
@ -12,55 +12,31 @@ Lo que queda por hacer en la rama del móvil. Apuntado el 20/10/2026, con la APK
|
|||
- Al integrar, rehacer `docs/FRONTERA_UPSTREAM.md` (ver "Antes de publicar").
|
||||
|
||||
|
||||
## Arreglar en la capa (pruebas del 20/10)
|
||||
## Arreglar en la capa (pruebas del 20/10): hecho el 24/10
|
||||
|
||||
Salen de `TESTS/perfiles` y `TESTS/contenido` (469/555 y 290/343). Todo en ficheros
|
||||
nuestros. Después, APK nueva con `sobre_oficial.sh` y repetir las pruebas.
|
||||
|
||||
Menú y perfiles:
|
||||
|
||||
- Hecho (23/10): Publicar va al primer sitio de escribir encendido (blog, feed, foro,
|
||||
wiki).
|
||||
|
||||
Medidas:
|
||||
|
||||
- Número de teléfono ilegible en `/profile`, `/inhabitants` y la tarjeta de habitante
|
||||
de la tribu (contraste 1,08-1,14). Chip "Tú" naranja sobre naranja (1,32).
|
||||
- Letra de 10-11 px en `/melody`, `/parliament` (`kpi__label`, también en Gobierno de
|
||||
la tribu) y `/banking`.
|
||||
- Filtros de `/inhabitants` de 26 px; botones de 27-28 px en graphos y larp.
|
||||
- Parlamento con sangrado y huecos grandes; Habitantes con fichas dentro de fichas.
|
||||
|
||||
Tribus:
|
||||
|
||||
- Hecho (23/10): ancla `#tribe-tabs` en las pestañas (desde `mobile_ui.tribeTabs`) y
|
||||
todas en mayúsculas. Queda: imagen enorme en Gobierno.
|
||||
|
||||
Blogs:
|
||||
|
||||
- Hecho (23/10): comentarios abiertos con la opción del dev
|
||||
(`comments_view.setCommentsOpen`, desde `mobile_layer.js`), salvo en el parlamento.
|
||||
- Input de 32 px en el formulario de crear.
|
||||
|
||||
Wiki y pads:
|
||||
|
||||
- Enlace `[[...]]` a página que no existe: 19 px de alto.
|
||||
- Ficha del pad: botones de enlace y fijar como óvalos de media pantalla; "Miembros" y
|
||||
"POR AUTORA" de 27 px y contraste 2.
|
||||
|
||||
Todas las listas:
|
||||
|
||||
- Mucha cabecera antes del contenido (aviso, título, filtros, crear, buscar): en Blogs
|
||||
y Wiki la primera ficha empieza al 70 % de la pantalla. Las tarjetas llevan cuatro
|
||||
iconos antes del título.
|
||||
Todo lo de esta lista está en la capa o ya no pasa con la 1.3.5: teléfono legible en
|
||||
perfil y habitantes (y el de otra persona en una fila, no apilado), letra de 12 px o más
|
||||
en melody, parlamento y banca, filtros y botones de 44 px, Parlamento y Gobierno de la
|
||||
tribu sin sangrados ni huecos, imagen del método de gobierno a 160 px, campos de 44 px,
|
||||
ficha del pad (texto de cada autora en negro sobre su color, "Por autora" y versiones de
|
||||
44 px), y la primera ficha de Blogs y Wiki ya no empieza al 70 % de la pantalla.
|
||||
|
||||
|
||||
## Probar en el móvil
|
||||
## Probar en el móvil: hecho en el emulador el 24/10
|
||||
|
||||
- Instalar la APK y repasar a mano: Actividad (fichas y tarjetas), Ajustes (los seis
|
||||
accesos y Colores), unirse a un pub de verdad (la barra de abajo, de principio a fin)
|
||||
y alguna paleta oscura.
|
||||
- Anotar lo que no guste para la siguiente vuelta.
|
||||
APK `1.3.5-hacklab` en `Oasis_Pruebas`. Lógica 40/40 (Ajustes, los seis accesos,
|
||||
Colores y que se conserva al reabrir, menú y atrás), usabilidad con las 8 paletas,
|
||||
perfiles (los 10), tribus 396/396 y contenido. Unirse a un pub de verdad (SNH La
|
||||
Plaza) de principio a fin con la barra del pub: "Descargando" y después "Guardando en
|
||||
tu móvil: N % · M mensajes", siempre encima de la barra de abajo.
|
||||
|
||||
Lo que se vio y es del dev (backend):
|
||||
|
||||
- Mientras baja la red del pub la app no contesta: más de un minuto sin cargar una
|
||||
pantalla, aunque la barra dice "Puedes seguir usando la app mientras tanto".
|
||||
- Mientras guarda, cada pantalla tarda de 3 a 10 segundos.
|
||||
|
||||
Queda: instalarla en un móvil de verdad y repasarla a mano.
|
||||
|
||||
|
||||
## Pedirle al dev (epsylon)
|
||||
|
|
@ -81,8 +57,7 @@ Todas las listas:
|
|||
|
||||
- Comprobador automático de las clases del dev que usa nuestro CSS (unas 424): avisar
|
||||
en cada versión nueva de las que desaparecen.
|
||||
- Capturas antes y después de cada integración, comparadas solas (ya está casi todo en
|
||||
`TESTS/`, que es local y no se sube).
|
||||
- Capturas antes y después de cada integración, comparadas solas.
|
||||
|
||||
|
||||
## Antes de publicar
|
||||
|
|
@ -107,18 +82,15 @@ Todas las listas:
|
|||
- `backend.js` apaga en el móvil `ai`, `aiNav`, `dev`, `games`, `logs`, `maps` y
|
||||
`pixelia`. Movimiento (`activists`) y Por defecto encienden alguno, así que en el
|
||||
móvil nunca salen como puestos y usan `bottomBarPins`. Pedir al dev que sus perfiles
|
||||
de móvil no los incluyan, o quitarlos de la cuenta en `fork_workflows.js`.
|
||||
- Con un filtro de módulo puesto (p. ej. Eventos) las sub-fichas ALL/RECENT/MINE/TOP
|
||||
del dev quedan fuera de Filtrar, una por fila: plegarlas también.
|
||||
- Bienvenida: el primer paso sigue siendo el nombre. Valorar abrirla con un EMPEZAR
|
||||
grande y el nombre después.
|
||||
- Rehacer la APK con `sobre_oficial.sh` y pasar `TESTS/perfiles` (ahora hay 10
|
||||
perfiles y la barra cambia con cada uno).
|
||||
de móvil no los incluyan, o quitarlos de la cuenta en `fork_workflows.js`. La prueba
|
||||
de perfiles lo sigue marcando con `dev`, que no tiene entrada en el menú.
|
||||
- Hecho: las sub-fichas de un módulo filtrado van en una fila, y EMPEZAR abre la
|
||||
bienvenida como botón grande (el nombre va después, en la propia bienvenida).
|
||||
|
||||
|
||||
## Tras las pruebas de tribus y mensajería (23/10)
|
||||
|
||||
`TESTS/tribus/` (local): dos identidades de usar y tirar, B ve desde fuera la tribu de
|
||||
Prueba con dos identidades de usar y tirar, B ve desde fuera la tribu de
|
||||
A, se une, recorre las 24 pestañas, escribe en el feed y el foro, y comenta un blog.
|
||||
Pasa entero salvo lo de abajo.
|
||||
|
||||
|
|
@ -142,16 +114,26 @@ Pedirle al dev:
|
|||
y sale "Votacion…".
|
||||
|
||||
|
||||
## Para la siguiente vuelta (23/10, tras a85aa24)
|
||||
## Vuelta del 24/10
|
||||
|
||||
- Pasar la batería entera sobre a85aa24 (idiomas, lógica, usabilidad con las 8
|
||||
paletas, perfiles y tribus); se paró a medias. Después, revisar a ojo cada pantalla
|
||||
del menú: el fallo de las fichas de Opiniones entró en 6f0e45e sin que lo viera
|
||||
ninguna prueba.
|
||||
- Filas de fichas que no caben: juntas y con flechas a izquierda y derecha para pasar
|
||||
de una a otra, en vez de deslizar o apretarlas. Sin JS (radios o `:target` y CSS).
|
||||
- Comprobar los avisos de abajo con teclado, menú y barra del pub a la vista, y en el
|
||||
WebView viejo (Android 9 y 11).
|
||||
Hecho:
|
||||
|
||||
- Batería entera sobre la APK nueva: idiomas (13 idiomas, 71 pantallas, 320/360/480
|
||||
px, 0 problemas), lógica, usabilidad con las 8 paletas, perfiles, tribus y
|
||||
contenido. Y repaso a ojo de las 66 pantallas del menú con capturas.
|
||||
- Filas de fichas que no caben: con cuatro o más, una fila con flechas a los lados
|
||||
(carrusel de CSS, sin JS). También las fichas de Gobierno de la tribu. Ver la guía.
|
||||
- Avisos de abajo: se esconden con el menú, con la barra del pub y con el teclado
|
||||
(antes se quedaban encima del teclado). EMPEZAR ya no baja con ellos: se queda arriba.
|
||||
En el WebView viejo (Android 9 con el 69 y Android 11 con el 83) van arriba y las
|
||||
fichas se quedan en rejilla.
|
||||
- Cajas de "no hay nada" una dentro de otra (Agenda, Calendarios, Encuestas), Pads
|
||||
con la tarjeta metida 40 px, el borde doble de OASIS/CLEARNET en la wiki y
|
||||
"GOBERNANDO" partido en L.A.R.P.
|
||||
|
||||
Queda:
|
||||
|
||||
- En Android 9, "INTRODUCIR INVITACIÓN" de la tribu sale de 36 px.
|
||||
- Las etiquetas cortas de la barra (`bbShort_*`): repasarlas con alguien de cada idioma.
|
||||
- Subir a gitea.laenre.net cuando vuelva (daba 502); forgejo está al día.
|
||||
- Volver a poner nota.
|
||||
- Botones de icono sin nombre del dev (la ✕ de EMPEZAR y otros): sin `title`, la prueba
|
||||
de idiomas los marca en todas las pantallas.
|
||||
|
|
|
|||
7
docs/botones/descargar-forgejo.svg
Normal file
7
docs/botones/descargar-forgejo.svg
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="52" viewBox="0 0 300 52" role="img" aria-label="Descargar APK 1.3.7 · forgejo">
|
||||
<rect x="1" y="1" width="298" height="50" rx="12" fill="#121212" stroke="#ffd700" stroke-width="2"/>
|
||||
<g fill="none" stroke="#ffd700" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" transform="translate(18 14)">
|
||||
<path d="M12 3v12M7 10l5 5 5-5M4 20h16"/>
|
||||
</g>
|
||||
<text x="52" y="32" font-family="system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif" font-size="16" font-weight="700" fill="#ffd700">Descargar APK 1.3.7 · forgejo</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 613 B |
7
docs/botones/descargar-gitea.svg
Normal file
7
docs/botones/descargar-gitea.svg
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="52" viewBox="0 0 300 52" role="img" aria-label="Descargar APK 1.3.7 · gitea">
|
||||
<rect x="1" y="1" width="298" height="50" rx="12" fill="#121212" stroke="#ffd700" stroke-width="2"/>
|
||||
<g fill="none" stroke="#ffd700" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" transform="translate(18 14)">
|
||||
<path d="M12 3v12M7 10l5 5 5-5M4 20h16"/>
|
||||
</g>
|
||||
<text x="52" y="32" font-family="system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif" font-size="16" font-weight="700" fill="#ffd700">Descargar APK 1.3.7 · gitea</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 609 B |
Binary file not shown.
|
Before Width: | Height: | Size: 61 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 55 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 54 KiB |
|
|
@ -422,6 +422,9 @@ body .main-content > .main-column { padding-top: 0 !important; }
|
|||
-webkit-mask: url("../images/ux-empty.svg") center / contain no-repeat; mask: url("../images/ux-empty.svg") center / contain no-repeat;
|
||||
}
|
||||
.main-column .no-content-box p { margin: 0 !important; color: inherit !important; }
|
||||
/* un .no-content dentro de un .no-content-box (calendarios, encuestas): una caja, no dos */
|
||||
.main-column .no-content-box :is(.no-content, .no-results) { display: block !important; margin: 0 !important; padding: 0 !important; border: 0 !important; }
|
||||
.main-column .no-content-box :is(.no-content, .no-results)::before { content: none !important; }
|
||||
|
||||
/* ---------- el pie abajo del todo aunque la pagina sea corta ---------- */
|
||||
body .main-content { min-height: calc(100dvh - 300px); }
|
||||
|
|
@ -529,7 +532,7 @@ body form.oasis-phone-state button.oasis-phone-state-btn.pm-exposition-hidden::b
|
|||
text-transform: none !important; letter-spacing: 0 !important; box-shadow: none !important;
|
||||
}
|
||||
.main-column .bb-manage-btn .bb-manage-lbl, .main-column .bb-pick-btn .bb-pick-lbl { flex: 1 1 auto; text-align: left; }
|
||||
.main-column .bb-manage-btn .bb-manage-x { color: var(--ux-danger) !important; font-size: 18px; }
|
||||
.main-column .bb-manage-btn .bb-manage-x { color: var(--ux-fg) !important; font-size: 18px; } /* el rojo de --ux-danger daba 3 de contraste sobre las paletas oscuras */
|
||||
.main-column .bb-manage h3, .main-column .bb-manage-add h3 { font-size: 20px !important; margin: 18px 0 10px !important; }
|
||||
.main-column a.bb-manage-done { display: block !important; width: 100% !important; margin-top: 18px !important; text-align: center; }
|
||||
.main-column div.bb-manage, .main-column div.bb-manage-add, .main-column div.bb-manage-list, .main-column div.bb-pick-grid { padding: 0 !important; margin: 0 !important; border: 0 !important; }
|
||||
|
|
@ -875,7 +878,7 @@ body .oasis-mobile-topbar .omt-logo img, body .oasis-mobile-topbar .omt-avatar i
|
|||
.main-column div.apk-modbar > .apk-strip:not(.mobile-filter) > *,
|
||||
.main-column div.apk-modbar > .apk-strip:not(.mobile-filter) > form > button {
|
||||
display: flex !important; align-items: center; justify-content: center; text-align: center;
|
||||
width: auto !important; min-width: 0 !important; min-height: 44px !important; margin: 0 !important; padding: 4px 6px !important;
|
||||
width: auto !important; min-width: 0 !important; min-height: 44px !important; margin: 0 !important; padding: 4px 4px !important; letter-spacing: 0 !important;
|
||||
font-size: 14px !important; line-height: 1.15 !important; white-space: normal !important; overflow-wrap: anywhere;
|
||||
}
|
||||
.main-column div.apk-modbar > .apk-strip:not(.mobile-filter) > form { padding: 0 !important; border: 0 !important; background: transparent !important; }
|
||||
|
|
@ -1004,6 +1007,11 @@ html[lang="ar"] .main-column input, html[lang="ar"] .main-column textarea { dire
|
|||
.main-column div.wallet-line { background: var(--ux-bg) !important; color: var(--ux-fg) !important; }
|
||||
.main-column div.wallet-line .wallet-address { color: var(--ux-fg) !important; }
|
||||
.main-column span.status.you { background: var(--ux-accent) !important; color: var(--ux-on-accent) !important; }
|
||||
/* el telefono de otra persona va dentro de un boton de llamar: sin esto el boton se
|
||||
ponia de bloque y el icono, el numero y la ficha quedaban uno debajo de otro */
|
||||
.main-column div.phone-number-line { flex-wrap: nowrap !important; align-items: center !important; }
|
||||
.main-column div.phone-number-line form.phone-chip-form { display: inline-flex !important; width: auto !important; margin: 0 !important; }
|
||||
.main-column div.phone-number-line button.phone-chip-btn { display: inline-flex !important; align-items: center !important; width: auto !important; min-height: 44px !important; padding: 0 4px !important; }
|
||||
|
||||
/* Actividad con un modulo filtrado: las fichas que llevan a ese modulo (todas,
|
||||
recientes, mias, top) en una fila, no una por fila. La flecha sobra */
|
||||
|
|
@ -1185,29 +1193,134 @@ body .main-column .chat-message-form button.filter-btn::before, body .main-colum
|
|||
/* ---------- avisos del dev abajo, como la barra del pub (23/10) ----------
|
||||
Version nueva y sugerencia salian arriba en todas las pantallas, antes del titulo.
|
||||
Ahora van fijos encima de la barra de abajo, de una linea cada uno, y si hay dos
|
||||
la sugerencia se apila encima. EMPEZAR se queda arriba: es lo primero que hay que
|
||||
la sugerencia se apila encima. EMPEZAR (.welcome-banner, que tambien es .update-banner) se queda arriba: es lo primero que hay que
|
||||
hacer. Con el teclado, el menu o la barra del pub a la vista, se esconden */
|
||||
.main-column > div.apk-banners > div.update-banner {
|
||||
.main-column > div.apk-banners > div.update-banner:not(.welcome-banner) {
|
||||
position: fixed !important; left: 8px; right: 8px; bottom: calc(76px + var(--inset-bottom)); z-index: 89;
|
||||
height: 52px; box-sizing: border-box; margin: 0 !important; overflow: hidden;
|
||||
background: var(--ux-bg) !important; color: var(--ux-fg) !important; border-radius: 12px !important;
|
||||
border: 1px solid var(--ux-line) !important; border-left: 6px solid var(--ux-accent) !important;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, .22) !important;
|
||||
}
|
||||
.main-column > div.apk-banners > div.update-banner + div.update-banner { bottom: calc(134px + var(--inset-bottom)); }
|
||||
.main-column > div.apk-banners > div.update-banner > .update-banner-text { white-space: normal; overflow: hidden; max-height: 34px; }
|
||||
.main-column > div.apk-banners > div.update-banner > a.update-banner-link { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
.main-column > div.apk-banners > div.update-banner:not(.welcome-banner) + div.update-banner:not(.welcome-banner) { bottom: calc(134px + var(--inset-bottom)); }
|
||||
.main-column > div.apk-banners > div.update-banner:not(.welcome-banner) > .update-banner-text { white-space: normal; overflow: hidden; max-height: 34px; }
|
||||
.main-column > div.apk-banners > div.update-banner:not(.welcome-banner) > a.update-banner-link { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
/* que no tapen lo ultimo de la pagina */
|
||||
body:has(.apk-banners > div.update-banner) { padding-bottom: calc(132px + var(--inset-bottom)) !important; }
|
||||
body:has(.apk-banners > div.update-banner + div.update-banner) { padding-bottom: calc(190px + var(--inset-bottom)) !important; }
|
||||
body:has(div.pub-bar) .main-column > div.apk-banners > div.update-banner,
|
||||
body:has(#oasis-menu:target) .main-column > div.apk-banners > div.update-banner { display: none !important; }
|
||||
body:has(.apk-banners > div.update-banner:not(.welcome-banner)) { padding-bottom: calc(132px + var(--inset-bottom)) !important; }
|
||||
body:has(.apk-banners > div.update-banner:not(.welcome-banner) + div.update-banner:not(.welcome-banner)) { padding-bottom: calc(190px + var(--inset-bottom)) !important; }
|
||||
body:has(div.pub-bar) .main-column > div.apk-banners > div.update-banner:not(.welcome-banner),
|
||||
body:has(#oasis-menu:target) .main-column > div.apk-banners > div.update-banner:not(.welcome-banner) { display: none !important; }
|
||||
body:has(div.pub-bar) { padding-bottom: calc(190px + var(--inset-bottom)) !important; }
|
||||
@media (max-height: 520px) { .main-column > div.apk-banners > div.update-banner { display: none !important; } }
|
||||
@media (max-height: 520px) { .main-column > div.apk-banners > div.update-banner:not(.welcome-banner) { display: none !important; } }
|
||||
/* con el teclado: la pantalla de un movil se queda en unos 530px y la regla de arriba no
|
||||
salta; se esconden mientras se escribe en un campo */
|
||||
body:has(.main-column :is(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="file"]), textarea, select):focus) .main-column > div.apk-banners > div.update-banner:not(.welcome-banner) { display: none !important; }
|
||||
/* WebView viejo (sin :has no se reserva el hueco): arriba, como antes */
|
||||
@supports not (inset: 0) {
|
||||
.main-column > div.apk-banners > div.update-banner { position: static !important; height: auto; margin: 0 0 6px !important; box-shadow: none !important; }
|
||||
.main-column > div.apk-banners > div.update-banner:not(.welcome-banner) { position: static !important; height: auto; margin: 0 0 6px !important; box-shadow: none !important; }
|
||||
}
|
||||
/* etiquetas de la barra de abajo: seminegrita y un pelin mas juntas; las que aun no
|
||||
caben llevan nombre corto (bbShort_* en i18n_fork). Medido en los 13 idiomas */
|
||||
.oasis-bottombar .bb-lbl { font-weight: 600 !important; letter-spacing: -0.2px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
|
||||
|
||||
/* ---------- filas de fichas que no caben: flechas (24/10) ----------
|
||||
Con cuatro fichas o mas la rejilla de tres partia palabras ("CANDIDAT-URAS") o dejaba
|
||||
una suelta. Van en una fila con una flecha a cada lado que pasa de ficha en ficha, y
|
||||
cada ficha con su palabra entera. Sin JS: carrusel de CSS (::scroll-button y anclas,
|
||||
WebView 135 o mas). En un WebView mas viejo se queda como estaba. Vale para la
|
||||
cabecera de modulo y para las fichas de Gobierno de la tribu (sus dos filas, juntas); anchor-scope hace que
|
||||
cada fila use sus flechas aunque haya dos en la pantalla */
|
||||
@supports selector(::scroll-button(right)) {
|
||||
.main-column div.apk-modbar, .main-column div.tribe-governance { position: relative !important; anchor-scope: --ux-fichas; }
|
||||
.main-column div.tribe-governance > div.filters:has(> div.mode-buttons-row) > div.mode-buttons-row { display: contents !important; }
|
||||
.main-column div.apk-modbar > .apk-strip:not(.mobile-filter) > form:only-child:has(> button:nth-of-type(4)),
|
||||
.main-column div.apk-modbar > .apk-strip:not(.mobile-filter):not(:has(> form:only-child)):has(> :nth-child(4)),
|
||||
.main-column div.apk-modbar > .apk-strip.mode-buttons:not(.mobile-filter):has(> div.column),
|
||||
.main-column div.tribe-governance > div.filters:has(> div.mode-buttons-row) {
|
||||
display: flex !important; flex-wrap: nowrap !important; justify-content: flex-start !important; grid-template-columns: none !important; gap: 8px !important; grid-gap: 8px !important;
|
||||
overflow-x: auto !important; overflow-y: hidden !important; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none;
|
||||
width: auto !important; margin: 0 40px 10px !important; padding: 0 !important; anchor-name: --ux-fichas;
|
||||
}
|
||||
.main-column div.apk-modbar > .apk-strip:not(.mobile-filter) > form:only-child:has(> button:nth-of-type(4)) > button,
|
||||
.main-column div.apk-modbar > .apk-strip:not(.mobile-filter):not(:has(> form:only-child)):has(> :nth-child(4)) > *,
|
||||
.main-column div.apk-modbar > .apk-strip.mode-buttons:not(.mobile-filter):has(> div.column) > div.column > form,
|
||||
.main-column div.tribe-governance > div.filters:has(> div.mode-buttons-row) > div.mode-buttons-row > * {
|
||||
flex: 0 0 auto !important; width: auto !important; min-width: calc((100% - 16px) / 3) !important; max-width: 100% !important; margin: 0 !important;
|
||||
scroll-snap-align: start; white-space: nowrap !important; overflow-wrap: normal !important;
|
||||
}
|
||||
.main-column div.apk-modbar > .apk-strip:not(.mobile-filter) > form:only-child:has(> button:nth-of-type(4)) > button,
|
||||
.main-column div.apk-modbar > .apk-strip:not(.mobile-filter):not(:has(> form:only-child)):has(> :nth-child(4)) > * > button,
|
||||
.main-column div.apk-modbar > .apk-strip:not(.mobile-filter):not(:has(> form:only-child)):has(> :nth-child(4)) > a,
|
||||
.main-column div.apk-modbar > .apk-strip.mode-buttons:not(.mobile-filter):has(> div.column) > div.column > form > button,
|
||||
.main-column div.tribe-governance > div.filters:has(> div.mode-buttons-row) > div.mode-buttons-row > form > button,
|
||||
.main-column div.tribe-governance > div.filters:has(> div.mode-buttons-row) > div.mode-buttons-row > a {
|
||||
margin: 0 !important; padding: 4px 14px !important; font-size: 14px !important; white-space: nowrap !important; overflow-wrap: normal !important;
|
||||
}
|
||||
/* el boton dentro de su formulario llena la ficha; el que es la ficha, a su medida */
|
||||
.main-column div.apk-modbar > .apk-strip:not(.mobile-filter):not(:has(> form:only-child)):has(> :nth-child(4)) > * > button,
|
||||
.main-column div.apk-modbar > .apk-strip.mode-buttons:not(.mobile-filter):has(> div.column) > div.column > form > button,
|
||||
.main-column div.tribe-governance > div.filters:has(> div.mode-buttons-row) > div.mode-buttons-row > form > button { width: 100% !important; }
|
||||
.main-column div.apk-modbar > .apk-strip:not(.mobile-filter) > form:only-child:has(> button:nth-of-type(4)) > button { width: auto !important; }
|
||||
.main-column div.apk-modbar > .apk-strip:not(.mobile-filter) > form:only-child:has(> button:nth-of-type(4))::scroll-button(*),
|
||||
.main-column div.apk-modbar > .apk-strip:not(.mobile-filter):not(:has(> form:only-child)):has(> :nth-child(4))::scroll-button(*),
|
||||
.main-column div.apk-modbar > .apk-strip.mode-buttons:not(.mobile-filter):has(> div.column)::scroll-button(*),
|
||||
.main-column div.tribe-governance > div.filters:has(> div.mode-buttons-row)::scroll-button(*) {
|
||||
position: absolute; position-anchor: --ux-fichas; top: anchor(top); width: 34px; height: 44px; padding: 0; box-sizing: border-box;
|
||||
border: 1px solid var(--ux-line); border-radius: 10px; background: var(--ux-bg); color: var(--ux-fg);
|
||||
font-size: 26px; line-height: 1; font-weight: 700; cursor: pointer;
|
||||
}
|
||||
.main-column div.apk-modbar > .apk-strip:not(.mobile-filter) > form:only-child:has(> button:nth-of-type(4))::scroll-button(left),
|
||||
.main-column div.apk-modbar > .apk-strip:not(.mobile-filter):not(:has(> form:only-child)):has(> :nth-child(4))::scroll-button(left),
|
||||
.main-column div.apk-modbar > .apk-strip.mode-buttons:not(.mobile-filter):has(> div.column)::scroll-button(left),
|
||||
.main-column div.tribe-governance > div.filters:has(> div.mode-buttons-row)::scroll-button(left) { content: "\2039" / ""; right: anchor(left); margin-right: 6px; }
|
||||
.main-column div.apk-modbar > .apk-strip:not(.mobile-filter) > form:only-child:has(> button:nth-of-type(4))::scroll-button(right),
|
||||
.main-column div.apk-modbar > .apk-strip:not(.mobile-filter):not(:has(> form:only-child)):has(> :nth-child(4))::scroll-button(right),
|
||||
.main-column div.apk-modbar > .apk-strip.mode-buttons:not(.mobile-filter):has(> div.column)::scroll-button(right),
|
||||
.main-column div.tribe-governance > div.filters:has(> div.mode-buttons-row)::scroll-button(right) { content: "\203A" / ""; left: anchor(right); margin-left: 6px; }
|
||||
.main-column div.apk-modbar > .apk-strip:not(.mobile-filter) > form:only-child:has(> button:nth-of-type(4))::scroll-button(*):disabled,
|
||||
.main-column div.apk-modbar > .apk-strip:not(.mobile-filter):not(:has(> form:only-child)):has(> :nth-child(4))::scroll-button(*):disabled,
|
||||
.main-column div.apk-modbar > .apk-strip.mode-buttons:not(.mobile-filter):has(> div.column)::scroll-button(*):disabled,
|
||||
.main-column div.tribe-governance > div.filters:has(> div.mode-buttons-row)::scroll-button(*):disabled { opacity: .3; cursor: default; }
|
||||
}
|
||||
|
||||
/* parlamento (y gobierno de la tribu): el ciclo, el hemiciclo y la tabla llevaban cada
|
||||
uno 20px de relleno dentro de la tarjeta y los datos quedaban a 52px del borde, con
|
||||
huecos de 60px entre filas */
|
||||
.main-column div.cycle-info { padding: 0 !important; margin: 0 0 12px !important; grid-gap: 4px 12px !important; }
|
||||
.main-column div.cycle-info > div.kpi { margin: 0 !important; padding: 6px 0 !important; }
|
||||
.main-column div.hemicycle { margin: 8px 0 !important; }
|
||||
.main-column div.hemicycle-zoom-wrap, .main-column div.hemicycle-canvas > div { padding: 0 !important; margin: 0 0 8px !important; }
|
||||
.main-column div.table-wrap { padding: 0 !important; margin: 0 0 12px !important; }
|
||||
.main-column div.table-wrap > table { margin: 8px 0 0 !important; }
|
||||
.main-column div.hemi-modes > a.filter-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; }
|
||||
/* Gobierno de la tribu: sin el relleno de 20px y la imagen del metodo (256x384) a 160px */
|
||||
.main-column div.tribe-governance { padding: 0 !important; }
|
||||
.main-column div.tribe-governance div.filters { padding: 0 !important; }
|
||||
.main-column div.method-image-centered > img { display: block; width: 160px !important; max-width: 50% !important; height: auto !important; margin: 0 auto !important; }
|
||||
/* Pads: la rejilla va dentro de un div sin clase y los dos llevaban 20px de relleno; la
|
||||
tarjeta perdia 40px por lado */
|
||||
.main-column > section > div:not([class]):has(> div[class$="-grid"]) { padding: 0 !important; margin: 0 !important; }
|
||||
.main-column > section > div > div[class$="-grid"] { padding: 0 !important; margin: 0 !important; }
|
||||
/* wiki: el formulario OASIS / CLEARNET llevaba su borde alrededor del de los botones */
|
||||
.main-column form.clearnet-switch { border: 0 !important; background: transparent !important; padding: 0 !important; }
|
||||
|
||||
/* zonas tactiles que faltaban (pruebas del 24/10): portada de wiki sin imagen aun
|
||||
(enlace de 8px), imagen sin cargar (23px), la clave GPG del perfil, etiquetas de dos
|
||||
letras y fichas cortas como FAQ */
|
||||
.main-column div.tribe-card-body > a:has(> img.wiki-card-cover) { display: block !important; min-height: 44px; }
|
||||
.main-column a.zoom-link { display: inline-block; min-height: 44px; min-width: 44px; }
|
||||
.main-column div.gpg-line a { display: inline-flex !important; align-items: center; min-height: 44px; }
|
||||
.main-column a[href^="/search?query=%23"] { min-width: 44px; justify-content: center; }
|
||||
.main-column .filter-btn, .main-column a.filter-btn { min-width: 44px !important; }
|
||||
/* ficha del pad: el texto de cada autora va sobre su color (rojo, azul, verde...) y con
|
||||
la letra de la paleta no se leia (2,7). En negro pasa de 4,5 con los diez colores.
|
||||
"Por autora" y la fecha de cada version, a 44px */
|
||||
.main-column span.pad-author-span[class*="pad-author-color-"] { color: #000 !important; }
|
||||
.main-column details.pad-attribution > summary, .main-column details.pad-members-details > summary { min-height: 44px; display: flex; align-items: center; }
|
||||
.main-column a.pad-version-link { display: inline-flex !important; align-items: center; min-height: 44px; }
|
||||
/* con contenido de verdad (pruebas tras unirse a un pub): el enlace de la sugerencia
|
||||
de abajo, los titulos de las tarjetas de Actividad (wikis, comisiones) y las
|
||||
categorias del foro, a 44px */
|
||||
.main-column > div.apk-banners > div.update-banner > a.update-banner-link { min-height: 44px; align-items: center; }
|
||||
.main-column div.card-field > a.card-value.card-value { min-height: 44px !important; align-items: center !important; }
|
||||
.main-column a.forum-category { display: inline-flex !important; align-items: center; min-height: 44px; }
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue