fichas de Opiniones en su rejilla, avisos abajo, nombres cortos en la barra y pantallas de dentro

- Opiniones y Tendencias: las cuatro primeras fichas se montaban en una columna de 122px; cada ficha es ya una casilla de la rejilla (display: contents en sus columnas) - avisos de version y sugerencia fijos abajo, encima de la barra, como el del pub; se esconden con el teclado, el menu y la barra del pub; arriba en el WebView viejo - barra de abajo: nombre corto (bbShort_* en i18n_fork) donde el del dev no cabe, medido en los 13 idiomas a 412 y 360px; el entero queda como aria-label - parlamento, banca, etiquetas, habitantes, fediverso y blogs: letra y zonas tactiles
2026-10-23 20:39:33 +02:00 · 2026-10-23 20:39:33 +02:00 · a85aa24b82
commit a85aa24b82
parent 894f7b24a2
4 changed files with 173 additions and 5 deletions
--- a/GUIA_DE_DESARROLLO.md
+++ b/GUIA_DE_DESARROLLO.md
@ -181,7 +181,15 @@ Aquí se puede hacer lo que haga falta.
  Ojo: `backend.js` apaga a la fuerza en el móvil `ai`, `aiNav`, `dev`, `games`, `logs`,
  `maps` y `pixelia`. Un perfil que encienda alguno de esos no se reconoce nunca como
  puesto (le pasa a Movimiento, el `activists` del dev, y a Por defecto).
- `src/client/assets/translations/i18n_fork.js`: nuestros textos.
+- `src/client/assets/translations/i18n_fork.js`: nuestros textos. Las claves
+  `bbShort_<modulo>` son el nombre corto de la barra de abajo cuando el del dev no cabe
+  en una de las cinco pestañas (medido a 412 y 360 px en los 13 idiomas); sin clave se
+  usa el nombre entero, que queda siempre como nombre accesible. Si un perfil nuevo
+  mete otro módulo en la barra, medirlo.
+- Los avisos del dev (versión nueva y sugerencia, `.apk-banners .update-banner`) van
+  fijos abajo, encima de la barra, como la del pub: `mobile_ux.css`, sin tocar su HTML.
+  Se esconden con el teclado, con el menú y con la barra del pub; en el WebView viejo
+  se quedan arriba.
 - `src/client/assets/images/ux-*.svg`: nuestras imágenes.
 - `src/client/assets/images/mobile-*.svg`: iconos de línea que `mobile_ux.css` pinta
  con `mask` en sitios del dev que llevan emoji o un carácter (avisos de arriba, fichas
--- a/src/client/assets/styles/mobile_ux.css
+++ b/src/client/assets/styles/mobile_ux.css
@ -1159,3 +1159,55 @@ body .main-column .chat-message-form button.filter-btn::before, body .main-colum
 /* titulos de tarjeta (videos, audios) y categorias de opinion (Amor, Interesante): 26px y 10,5px */
 .main-column a.card-title-link { display: inline-flex !important; align-items: center; min-height: 44px; }
 .main-column span.vote-category { font-size: 12px !important; }
+
+/* ---------- pantallas de dentro (perfiles, 23/10) ---------- */
+/* parlamento: las etiquetas del hemiciclo (umbral, cuorum) a 11px */
+.main-column svg.hemicycle-svg text.hemi-threshold-label { font-size: 12px !important; }
+/* banca: el saldo es un enlace de 21px y los ejes de la grafica van a 10px */
+.main-column td.card-value > a { display: inline-flex !important; align-items: center; min-height: 44px; }
+.main-column svg.bank-eco-chart-svg text.bank-eco-chart-axis, .main-column svg.bank-eco-chart-svg text.bank-eco-chart-legend-text { font-size: 12px !important; }
+/* etiquetas: la nube eran enlaces de 15px pegados; fichas que se aciertan */
+.main-column td > a[href^="/search"] { display: inline-flex !important; align-items: center; min-height: 44px; padding: 0 6px !important; }
+/* habitantes y perfil: "GPG: no configurada" y la huella, enlaces de 22px en su linea */
+.main-column span.gpg-line > a { padding-top: 2px !important; padding-bottom: 2px !important; }
+/* enlaces sueltos en un parrafo (p. ej. "tus ajustes" en Fediverso): 19px. Relleno
+   arriba y abajo, que en una caja en linea no mueve el texto */
+.main-column p a:not([class]) { padding-top: 3px; padding-bottom: 3px; }
+/* etiquetas de una tarjeta de blog: se tocan como fichas (30px) */
+.main-column div.card-tags > a.tag-link { display: inline-flex !important; align-items: center; min-height: 44px; box-sizing: border-box; border-top: 7px solid transparent !important; border-bottom: 7px solid transparent !important; background-clip: padding-box !important; }
+/* opiniones y tendencias: el dev agrupa las fichas en columnas (todo/recientes/mias/top
+   en la primera, una por categoria en las demas, y columnas vacias). En la rejilla de
+   tres, las cuatro primeras se apretaban en 122px: que cada ficha sea una casilla */
+.main-column div.apk-modbar > .apk-strip.mode-buttons > div.column { display: contents !important; }
+.main-column div.apk-modbar > .apk-strip.mode-buttons > div.column > form { min-width: 0; margin: 0 !important; }
+.main-column div.apk-modbar > .apk-strip.mode-buttons > div.column > form > button { width: 100% !important; min-width: 0 !important; margin: 0 !important; }
+
+/* ---------- 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
+   hacer. Con el teclado, el menu o la barra del pub a la vista, se esconden */
+.main-column > div.apk-banners > div.update-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; }
+/* 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(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; } }
+/* 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; }
+}
+/* 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; }
--- a/src/client/assets/translations/i18n_fork.js
+++ b/src/client/assets/translations/i18n_fork.js
@ -20,6 +20,12 @@ module.exports = {
    // usabilidad (19/10/2026): votaciones, borrar, modulos, pie
    bbMenu: "Menu",
    bbMenuClose: "Close",
+    // barra de abajo: nombre corto cuando el del dev no cabe en una de las cinco
+    // pestañas (medido a 412 y 360 px). Sin clave, el nombre entero
+    bbShort_emergencies: "SOS",
+    bbShort_documents: "Docs",
+    bbShort_bookmarks: "Saved",
+    bbShort_inhabitants: "People",
    uxPickHint: "Tap one and it is saved. You can change it any time in Settings.",
    uxPickCurrent: "In use",
    pubBarDownload: "Downloading the network from {pub} ({tier})…",
@ -161,6 +167,17 @@ module.exports = {
    // usabilidad (19/10/2026): votaciones, borrar, modulos, pie
    bbMenu: "Menú",
    bbMenuClose: "Cerrar",
+    bbShort_data: "Afines",
+    bbShort_emergencies: "SOS",
+    bbShort_calendars: "Fechas",
+    bbShort_documents: "Docs",
+    bbShort_bookmarks: "Guardado",
+    bbShort_trending: "Popular",
+    bbShort_transfers: "Pagos",
+    bbShort_parliament: "Congreso",
+    bbShort_fediverse: "Fedi",
+    bbShort_inhabitants: "Gente",
+    bbShort_stats: "Cifras",
    uxPickHint: "Toca uno y queda guardado. Puedes cambiarlo cuando quieras en Ajustes.",
    uxPickCurrent: "En uso",
    pubBarDownload: "Descargando la red de {pub} ({tier})…",
@ -307,6 +324,14 @@ module.exports = {
  ca: {
    bbMenu: "Menú",
    bbMenuClose: "Tanca",
+    bbShort_data: "Afins",
+    bbShort_events: "Actes",
+    bbShort_emergencies: "SOS",
+    bbShort_documents: "Docs",
+    bbShort_trending: "Popular",
+    bbShort_transfers: "Pagar",
+    bbShort_fediverse: "Fedi",
+    bbShort_stats: "Xifres",
    uxPickHint: "Toca'n un i queda desat. El pots canviar quan vulguis a Configuració.",
    uxPickCurrent: "En ús",
    pubBarDownload: "Descarregant la xarxa de {pub} ({tier})…",
@ -443,6 +468,17 @@ module.exports = {
  gl: {
    bbMenu: "Menú",
    bbMenuClose: "Pechar",
+    bbShort_data: "Afíns",
+    bbShort_emergencies: "SOS",
+    bbShort_calendars: "Datas",
+    bbShort_documents: "Docs",
+    bbShort_bookmarks: "Gardado",
+    bbShort_trending: "Popular",
+    bbShort_transfers: "Pagos",
+    bbShort_parliament: "Congreso",
+    bbShort_fediverse: "Fedi",
+    bbShort_inhabitants: "Xente",
+    bbShort_stats: "Cifras",
    uxPickHint: "Toca un e queda gardado. Podes cambialo cando queiras en Axustes.",
    uxPickCurrent: "En uso",
    pubBarDownload: "Descargando a rede de {pub} ({tier})…",
@ -580,6 +616,15 @@ module.exports = {
    // usabilidad (19/10/2026): votaciones, borrar, modulos, pie
    bbMenu: "Menu",
    bbMenuClose: "Fermer",
+    bbShort_search: "Chercher",
+    bbShort_data: "Affinités",
+    bbShort_events: "Agenda",
+    bbShort_calendars: "Dates",
+    bbShort_documents: "Docs",
+    bbShort_bookmarks: "Favoris",
+    bbShort_jobs: "Emplois",
+    bbShort_wallet: "Monnaie",
+    bbShort_stats: "Stats",
    uxPickHint: "Touchez-en un et c'est enregistré. Vous pouvez le changer à tout moment dans les Paramètres.",
    uxPickCurrent: "Actuel",
    pubBarDownload: "Téléchargement du réseau depuis {pub} ({tier})…",
@ -721,6 +766,18 @@ module.exports = {
    // usabilidad (19/10/2026): votaciones, borrar, modulos, pie
    bbMenu: "Menua",
    bbMenuClose: "Itxi",
+    bbShort_inbox: "Sarrera",
+    bbShort_data: "Parekoak",
+    bbShort_events: "Ekintzak",
+    bbShort_documents: "Agiriak",
+    bbShort_bookmarks: "Gogokoak",
+    bbShort_transfers: "Ordainak",
+    bbShort_votes: "Bozkak",
+    bbShort_parliament: "Biltzarra",
+    bbShort_cipher: "Zifratu",
+    bbShort_fediverse: "Fedi",
+    bbShort_inhabitants: "Jendea",
+    bbShort_stats: "Datuak",
    uxPickHint: "Bat ukitu eta gordeta geratzen da. Nahi duzunean alda dezakezu Ezarpenetan.",
    uxPickCurrent: "Erabiltzen",
    pubBarDownload: "{pub}-ren sarea deskargatzen ({tier})…",
@ -862,6 +919,15 @@ module.exports = {
    // usabilidad (19/10/2026): votaciones, borrar, modulos, pie
    bbMenu: "Menü",
    bbMenuClose: "Schließen",
+    bbShort_inbox: "Post",
+    bbShort_data: "Treffer",
+    bbShort_banking: "Bank",
+    bbShort_documents: "Doku",
+    bbShort_bookmarks: "Gemerkt",
+    bbShort_transfers: "Zahlung",
+    bbShort_votes: "Wahlen",
+    bbShort_opinions: "Meinung",
+    bbShort_cipher: "Krypto",
    uxPickHint: "Tippe eins an und es ist gespeichert. Du kannst es jederzeit in den Einstellungen ändern.",
    uxPickCurrent: "Aktiv",
    pubBarDownload: "Netzwerk wird von {pub} geladen ({tier})…",
@ -1003,6 +1069,13 @@ module.exports = {
    // usabilidad (19/10/2026): votaciones, borrar, modulos, pie
    bbMenu: "Menu",
    bbMenuClose: "Chiudi",
+    bbShort_inbox: "Posta",
+    bbShort_data: "Affini",
+    bbShort_emergencies: "SOS",
+    bbShort_wallet: "Soldi",
+    bbShort_transfers: "Bonifici",
+    bbShort_parliament: "Camera",
+    bbShort_cipher: "Cifra",
    uxPickHint: "Toccane uno ed è salvato. Puoi cambiarlo quando vuoi nelle Impostazioni.",
    uxPickCurrent: "In uso",
    pubBarDownload: "Scaricamento della rete da {pub} ({tier})…",
@ -1144,6 +1217,20 @@ module.exports = {
    // usabilidad (19/10/2026): votaciones, borrar, modulos, pie
    bbMenu: "Menu",
    bbMenuClose: "Fechar",
+    bbShort_inbox: "Caixa",
+    bbShort_polls: "Enquetes",
+    bbShort_data: "Afins",
+    bbShort_emergencies: "SOS",
+    bbShort_calendars: "Datas",
+    bbShort_documents: "Docs",
+    bbShort_bookmarks: "Guardado",
+    bbShort_trending: "Popular",
+    bbShort_transfers: "Pagos",
+    bbShort_parliament: "Congresso",
+    bbShort_cipher: "Cifra",
+    bbShort_fediverse: "Fedi",
+    bbShort_inhabitants: "Pessoas",
+    bbShort_stats: "Números",
    uxPickHint: "Toque num e fica guardado. Pode mudá-lo quando quiser nas Definições.",
    uxPickCurrent: "Em uso",
    pubBarDownload: "A descarregar a rede de {pub} ({tier})…",
@ -1426,6 +1513,14 @@ module.exports = {
    // usabilidad (19/10/2026): votaciones, borrar, modulos, pie
    bbMenu: "القائمة",
    bbMenuClose: "إغلاق",
+    bbShort_inbox: "الوارد",
+    bbShort_polls: "استطلاع",
+    bbShort_audios: "صوتيات",
+    bbShort_bookmarks: "المحفوظ",
+    bbShort_pads: "مستندات",
+    bbShort_ai: "ذكاء",
+    bbShort_fediverse: "خطوط",
+    bbShort_cv: "السيرة",
    uxPickHint: "المس واحدًا ويُحفظ. يمكنك تغييره في أي وقت من الإعدادات.",
    uxPickCurrent: "قيد الاستخدام",
    pubBarDownload: "جارٍ تنزيل الشبكة من {pub} ({tier})…",
@ -1708,6 +1803,17 @@ module.exports = {
    // usabilidad (19/10/2026): votaciones, borrar, modulos, pie
    bbMenu: "Меню",
    bbMenuClose: "Закрыть",
+    bbShort_activity: "Новое",
+    bbShort_data: "Схожие",
+    bbShort_emergencies: "SOS",
+    bbShort_calendars: "Даты",
+    bbShort_images: "Фото",
+    bbShort_documents: "Доки",
+    bbShort_agenda: "Планы",
+    bbShort_votes: "Голоса",
+    bbShort_parliament: "Дума",
+    bbShort_cipher: "Шифр",
+    bbShort_stats: "Цифры",
    uxPickHint: "Нажмите на вариант, и он сохранится. Изменить можно в любой момент в Настройках.",
    uxPickCurrent: "Сейчас",
    pubBarDownload: "Загрузка сети с {pub} ({tier})…",
--- a/src/views/hive_views.js
+++ b/src/views/hive_views.js
@ -96,11 +96,13 @@ module.exports = ({ i18n }) => {
    let here = '';
    try { here = (require('../models/typed_log').requestScope.getStore() || {}).path || ''; } catch (_) {}
    const isHere = (href) => here === href || (href !== '/' && here.startsWith(href + '/')) || (href === '/activity' && here === '/');
-    const bbLink = (href, ico, label, badge) => a(
-      { class: isHere(href) ? "bb-item current" : "bb-item", href, ...(isHere(href) ? { 'aria-current': 'page' } : {}) },
+    // short: nombre corto de i18n_fork si el entero no cabe; el entero queda de nombre
+    // accesible
+    const bbLink = (href, ico, label, badge, short) => a(
+      { class: isHere(href) ? "bb-item current" : "bb-item", href, ...(isHere(href) ? { 'aria-current': 'page' } : {}), ...(short ? { 'aria-label': label } : {}) },
      iconNode("bb-ico", iconKeyOf(href), ico),
      (badge && badge > 0) ? span({ class: "bb-badge" }, String(badge)) : "",
-      span({ class: "bb-lbl" }, label)
+      span({ class: "bb-lbl" }, short || label)
    );
    // barra PERSONALIZABLE: solo los pins (max 4). Editarla y Peers estan en el
    // lanzador (Herramientas): 7 botones abajo eran demasiados para un pulgar.
@ -114,7 +116,7 @@ module.exports = ({ i18n }) => {
    const WRITE_TO = [['blogsMod', '/blogs?filter=CREATE'], ['feedMod', '/feed/create'], ['forumMod', '/forum?filter=create'], ['wikiMod', '/wiki?filter=create']];
    const writeTo = (WRITE_TO.find(([mod]) => modOn(mod)) || [null, '/publish'])[1];
    const slots = pins.map(m => bbLink(
-      m.key === 'publish' ? writeTo : m.href, m.glyph, i18n[m.labelKey] || m.key, m.key === 'inbox' ? inboxN : 0
+      m.key === 'publish' ? writeTo : m.href, m.glyph, i18n[m.labelKey] || m.key, m.key === 'inbox' ? inboxN : 0, i18n[`bbShort_${m.key}`]
    ));
    // quinta pestaña fija: Menu abre desde abajo una hoja con todos los modulos (el
    // lanzador). Sin JS (la CSP de la 1.3.5 no deja ninguno): un ancla #oasis-menu y