diff --git a/docs/USABILIDAD_PAD.txt b/docs/USABILIDAD_PAD.txt index 2874f84..108e9f6 100644 --- a/docs/USABILIDAD_PAD.txt +++ b/docs/USABILIDAD_PAD.txt @@ -154,3 +154,33 @@ Sigue pendiente - Quien crea una votacion sigue sin poder votar (regla de upstream: cambiarla haria que los nodos contaran distinto). - Probar un primer arranque en limpio y dos moviles en la misma sala. + +================================= +Segunda ronda (19/10/2026, tarde) +================================= + +Desde ahora cada arreglo respeta docs/FRONTERA_UPSTREAM.md: primero CSS propio; +si hace falta HTML, una funcion propia y una linea en la vista del dev; nada en +backend, middleware ni modelos del dev. + +- Boton principal de cada modulo (Crear chat, foro, pad, feed, evento...): el + mismo en todos. Antes unos a todo lo ancho, otros estrechos, otros con otra + letra. [CSS] +- Listas vacias: icono, texto centrado y recuadro discontinuo, en vez de una + linea suelta ("No se encontraron chats."). [CSS] +- El pie se queda abajo aunque la pagina sea corta. [CSS] +- Buzon: cada mensaje en pocas lineas (remitente y fecha arriba, el aviso, el + titulo y tres lineas de texto). Fuera Para (eres tu), Tasa ECO y Cifrado, que + eran iguales en todos. Antes un aviso ocupaba una pantalla. [CSS] +- Busqueda: primero el campo de buscar; las fechas y el ID despues. [CSS] +- Nodos: Refrescar, Quitar inactivos y Exportar en rejilla. [CSS] +- Workflow propio "Acampada" (chats, Karvan, pads, foros, wiki, tribus, + parlamento, votaciones, eventos...) en Ajustes y en la bienvenida, sin tocar + el "Activismo" del dev. [fichero propio] + +Visto y pendiente de esta ronda: +- Buzon: Marcar como leido / Archivar / Borrar siguen uno debajo de otro. +- Buzon: los avisos del PoliticalBot de las tribus propias siguen llegando + (es upstream; se puede agrupar en la vista, no quitar). +- Los ID @...ed25519 siguen a la vista en perfil, buzon y nodos: falta mostrar + el nombre y dejar el ID para "copiar". diff --git a/src/client/assets/images/ux-empty.svg b/src/client/assets/images/ux-empty.svg new file mode 100644 index 0000000..3237726 --- /dev/null +++ b/src/client/assets/images/ux-empty.svg @@ -0,0 +1 @@ + diff --git a/src/client/assets/styles/mobile_ux.css b/src/client/assets/styles/mobile_ux.css index d33a79e..ad7fec2 100644 --- a/src/client/assets/styles/mobile_ux.css +++ b/src/client/assets/styles/mobile_ux.css @@ -60,7 +60,7 @@ /* el boton de enviar de los formularios: a todo lo ancho, abajo, que se vea que es el final. Antes unos centrados, otros a la izquierda y otros enteros */ -.main-column :is(.vote-form, .tribe-form, .karvan-create, .karvan-compose, .karvan-invite) form > button[type="submit"], +.main-column :is(.vote-form, .karvan-create, .karvan-compose, .karvan-invite) form > button[type="submit"], .main-column :is(.vote-form, .karvan-create, .karvan-compose, .karvan-invite) > form > button[type="submit"], .main-column form[action$="/tribes/create"][method="post"] > button[type="submit"], .main-column form[action*="/tribes/update/"] > button[type="submit"] { @@ -304,7 +304,7 @@ a:focus-visible, button:focus-visible, summary:focus-visible, label.module-switc .main-column form.filter-box .filter-box__button { min-height: 48px !important; margin: 0 !important; } /* el recuento (TOTAL: 12 ยท PUBLICA: 12) como una linea discreta, no un bloque */ .main-column .activity-toolbar-row { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 6px !important; } -.main-column .module-stats, .main-column [class*="module-stats"] { font-size: 13px !important; color: var(--ux-muted) !important; text-align: left !important; margin: 0 !important; } +.main-column [class*="module-stats"] { font-size: 13px !important; color: var(--ux-muted) !important; text-align: left !important; margin: 0 !important; } /* el boton de crear de cada modulo a todo lo ancho, tambien cuando va solo en su formulario (en Votaciones salia estrecho y en Tribus entero) */ @@ -342,7 +342,7 @@ a:focus-visible, button:focus-visible, summary:focus-visible, label.module-switc por lado) y el texto de una votacion o una tribu se quedaba en 264 de 412px */ body .main-content { padding-left: 14px !important; padding-right: 14px !important; } body .main-content > .main-column { padding-left: 0 !important; padding-right: 0 !important; } -.main-column :is(.tribe-details, .tribe-side, .tribe-main, .job-section, .vote-form, .tribe-section, .tribe-content) { +.main-column :is(.tribe-details, .tribe-side, .tribe-main, .job-section, .vote-form, .tribe-content) { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box; } @@ -394,7 +394,7 @@ body .main-content > .main-column { padding-left: 0 !important; padding-right: 0 } /* buzon y otros: los botones de filtro sueltos (Mas recientes, Marcar como leido) en la letra de texto, como el resto de fichas */ -.main-column .inbox-filters button, .main-column [class*="inbox"] .filter-btn:not(.create-button), +.main-column [class*="inbox"] .filter-btn:not(.create-button), .main-column form[action^="/inbox"] button:not(.create-button) { font-family: var(--ux-text) !important; font-weight: 700 !important; font-size: 15px !important; letter-spacing: .02em !important; } @@ -419,3 +419,79 @@ body .main-content > .main-column { padding-left: 0 !important; padding-right: 0 /* la barra de confirmar borrado con su marco rojo (Acampada quita el borde a los div) */ .main-column div.confirm-bar { border: 2px solid var(--ux-danger) !important; } .main-column .content-action-confirm[open] > summary { opacity: 1 !important; } + +/* ---------- boton principal de cada modulo: el mismo en todos ---------- */ +/* en Chats y Pads salia entero, en Foros estrecho y en Feed con otra letra (lleva + tambien .filter-btn y le tocaban las reglas de las fichas) */ +.main-column :is(.tribe-mode-buttons, .mode-buttons, .mode-buttons-row, .filters, .forum-create-col) :is(form, div):has(> .create-button), +.main-column .forum-create-col { width: 100% !important; flex: 1 1 100% !important; } +.main-column :is(.tribe-mode-buttons, .mode-buttons, .mode-buttons-row, .filters, .forum-create-col) .create-button.create-button { + width: 100% !important; min-height: 52px !important; margin: 4px 0 0 !important; padding: 8px 16px !important; + font-family: var(--ux-title) !important; font-weight: 400 !important; font-size: 20px !important; + letter-spacing: .02em !important; text-transform: uppercase; +} + +/* ---------- estados vacios: icono, texto centrado, sin cajas ---------- */ +.main-column :is(.no-content, .no-results, .no-content-box), +.main-column .tribe-grid > p:only-child { + display: flex !important; flex-direction: column; align-items: center; gap: 12px; + margin: 24px 0 !important; padding: 28px 16px !important; text-align: center !important; + border: 2px dashed var(--ux-muted) !important; border-radius: var(--ux-radius) !important; + color: var(--ux-muted) !important; font-size: 16px !important; font-weight: 700; background: transparent !important; +} +.main-column :is(.no-content, .no-results, .no-content-box)::before, +.main-column .tribe-grid > p:only-child::before { + content: ""; width: 44px; height: 44px; background: var(--ux-muted); + -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; } + +/* ---------- el pie abajo del todo aunque la pagina sea corta ---------- */ +body .main-content { min-height: calc(100dvh - 300px); } +.main-column .tribe-grid:has(> p:only-child), .main-column .filters, .main-column .tribe-mode-buttons { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; } +.main-column :is(.tribe-mode-buttons, .mode-buttons, .mode-buttons-row, .filters, .forum-create-col) .create-button.create-button { box-shadow: 0 5px 0 var(--ux-accent) !important; } + +/* ---------- buzon: cada mensaje en pocas lineas ---------- */ +/* era una tabla de seis filas (De, Fecha, Para, Asunto, Tasa ECO, Cifrado) dentro de + dos cajas: un aviso ocupaba una pantalla. Para es siempre una misma, el asunto ya + es el titulo, la tasa ECO no se entiende y el cifrado es igual en todos */ +.main-column .pm-thread { border: 0 !important; padding: 0 !important; margin: 0 0 10px !important; background: transparent !important; } +.main-column div.pm-card { padding: 12px !important; margin: 0 !important; border: 2px solid var(--ux-line) !important; border-radius: var(--ux-radius) !important; } +.main-column .pm-card .pm-info-table { display: flex !important; flex-wrap: wrap; align-items: center; gap: 4px 10px; border: 0 !important; margin: 0 0 6px !important; width: 100%; } +.main-column .pm-card .pm-info-table tbody { display: contents !important; } +.main-column .pm-card .pm-info-table tr { display: none !important; } +.main-column .pm-card .pm-info-table tr:nth-child(1), .main-column .pm-card .pm-info-table tr:nth-child(2), +.main-column .pm-card .pm-info-table tr:has(.pm-unread-chip) { display: flex !important; align-items: center; border: 0 !important; } +.main-column .pm-card .pm-info-table td { display: block !important; padding: 0 !important; border: 0 !important; background: transparent !important; } +.main-column .pm-card .pm-info-table td.card-label { display: none !important; } +.main-column .pm-card .pm-info-table tr:nth-child(1) { flex: 1 1 60%; min-width: 0; } +.main-column .pm-card .pm-info-table tr:nth-child(1) a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px !important; } +.main-column .pm-card .pm-info-table tr:nth-child(2) td { font-size: 13px !important; color: var(--ux-muted) !important; } +.main-column .pm-card .pm-subject-cell > span:not(.pm-unread-chip) { display: none !important; } +.main-column .pm-card h2.pm-title { font-family: var(--ux-text) !important; font-weight: 700 !important; font-size: 17px !important; text-transform: none !important; line-height: 1.3 !important; margin: 0 0 6px !important; } +.main-column .pm-card .message-text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 15px; } + +/* ---------- busqueda: primero el campo de buscar, los filtros despues ---------- */ +.main-column .search-filters-row { display: flex !important; flex-direction: column-reverse !important; gap: 12px; } +.main-column table.search-filters-table, .main-column table.search-filters-table tbody { display: block !important; border: 0 !important; width: 100% !important; } +.main-column table.search-filters-table tr { display: block !important; border: 0 !important; margin: 0 0 10px; } +.main-column table.search-filters-table td { display: block !important; padding: 0 !important; border: 0 !important; background: transparent !important; } +.main-column table.search-filters-table td.card-label { margin-bottom: 4px; } +.main-column .search-submit-row button { width: 100% !important; } + +/* ---------- nodos: acciones en rejilla ---------- */ +.main-column .peers-conn-actions.filter-box { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px !important; } +.main-column .peers-conn-actions form { margin: 0 !important; width: 100% !important; } +.main-column .peers-conn-actions button { width: 100% !important; margin: 0 !important; font-size: 15px !important; } +.main-column .message-list { padding: 0 !important; } +.main-column .pm-card .pm-info-table tr { width: auto !important; flex: 0 1 auto; } +.main-column .pm-card .pm-info-table tr:nth-child(1) { flex: 1 1 0 !important; } +.main-column .pm-card .pm-info-table tr:has(.pm-unread-chip) { order: 3; flex-basis: 100% !important; } +.main-column .pm-card .pm-actions { display: inline-flex !important; width: auto !important; margin: 8px 8px 0 0 !important; } +.main-column .pm-card .pm-actions button { min-height: 40px !important; padding: 4px 14px !important; font-size: 14px !important; box-shadow: none !important; width: auto !important; } +.main-column table.search-filters-table { height: auto !important; min-height: 0 !important; margin: 0 !important; } +.main-column .peers-conn-actions > form:last-child:nth-child(odd) { grid-column: 1 / -1; } +.main-column .search-filters-row { height: auto !important; } +.main-column .search-filters-row > table.search-filters-table { flex: 0 0 auto !important; } +.main-column .pm-card div.pm-actions.pm-actions { width: auto !important; max-width: max-content; display: inline-flex !important; vertical-align: top; } +.main-column .pm-card .pm-info-table tr:nth-child(1) td, .main-column .pm-card .pm-info-table tr:nth-child(1) a { white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis; min-width: 0; max-width: 100%; text-align: left !important; }