diff --git a/GUIA_DE_DESARROLLO.md b/GUIA_DE_DESARROLLO.md index fba6442..d99dd2f 100644 --- a/GUIA_DE_DESARROLLO.md +++ b/GUIA_DE_DESARROLLO.md @@ -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-` 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`. diff --git a/README.md b/README.md index 06a5991..4064c70 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,12 @@ # OASIS_MOBILE — rama de desarrollo experimental +

+ Descargar la APK 1.3.7 desde forgejo + Descargar la APK 1.3.7 desde gitea +

+ +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` · ![Oasis Mobile: actividad, menú con los perfiles Mínimo y Activista, y una tribu](docs/capturas/00-portada.png) -[⬇ 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 -![Llamadas: las del dev, con el móvil enchufado](docs/capturas/esquema-llamadas.png) - 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 -![La interfaz por dentro](docs/capturas/esquema-interfaz.png) -

@@ -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 -![Cómo va la rama encima de Oasis](docs/capturas/esquema-rama.png) - 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--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): diff --git a/docs/PENDIENTE.md b/docs/PENDIENTE.md index ba8f7f4..47d43a2 100644 --- a/docs/PENDIENTE.md +++ b/docs/PENDIENTE.md @@ -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. diff --git a/docs/botones/descargar-forgejo.svg b/docs/botones/descargar-forgejo.svg new file mode 100644 index 0000000..f88b28e --- /dev/null +++ b/docs/botones/descargar-forgejo.svg @@ -0,0 +1,7 @@ + + + + + + Descargar APK 1.3.7 · forgejo + diff --git a/docs/botones/descargar-gitea.svg b/docs/botones/descargar-gitea.svg new file mode 100644 index 0000000..62f99f9 --- /dev/null +++ b/docs/botones/descargar-gitea.svg @@ -0,0 +1,7 @@ + + + + + + Descargar APK 1.3.7 · gitea + diff --git a/docs/capturas/esquema-interfaz.png b/docs/capturas/esquema-interfaz.png deleted file mode 100644 index 46c713b..0000000 Binary files a/docs/capturas/esquema-interfaz.png and /dev/null differ diff --git a/docs/capturas/esquema-llamadas.png b/docs/capturas/esquema-llamadas.png deleted file mode 100644 index 45709c0..0000000 Binary files a/docs/capturas/esquema-llamadas.png and /dev/null differ diff --git a/docs/capturas/esquema-rama.png b/docs/capturas/esquema-rama.png deleted file mode 100644 index 6ff6027..0000000 Binary files a/docs/capturas/esquema-rama.png and /dev/null differ diff --git a/src/client/assets/styles/mobile_ux.css b/src/client/assets/styles/mobile_ux.css index c202beb..da3d1f6 100644 --- a/src/client/assets/styles/mobile_ux.css +++ b/src/client/assets/styles/mobile_ux.css @@ -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; }