From a85aa24b8244ebd7f3a66551a4ec911b1617419b Mon Sep 17 00:00:00 2001 From: hacklab Date: Fri, 23 Oct 2026 20:39:33 +0200 Subject: [PATCH] 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 --- GUIA_DE_DESARROLLO.md | 10 +- src/client/assets/styles/mobile_ux.css | 52 ++++++++++ src/client/assets/translations/i18n_fork.js | 106 ++++++++++++++++++++ src/views/hive_views.js | 10 +- 4 files changed, 173 insertions(+), 5 deletions(-) diff --git a/GUIA_DE_DESARROLLO.md b/GUIA_DE_DESARROLLO.md index 01e60e3..fba6442 100644 --- 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_` 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 diff --git a/src/client/assets/styles/mobile_ux.css b/src/client/assets/styles/mobile_ux.css index 9741ef4..c202beb 100644 --- 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; } diff --git a/src/client/assets/translations/i18n_fork.js b/src/client/assets/translations/i18n_fork.js index f8e4c1d..fd5b9dc 100644 --- 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})…", diff --git a/src/views/hive_views.js b/src/views/hive_views.js index 8d8bdc6..dc8f464 100644 --- 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