movil: botones de crear iguales, listas vacias, buzon y busqueda compactos
Todo en mobile_ux.css (mas un SVG propio para las listas vacias), sin tocar vistas ni backend del dev: - el boton principal de cada modulo, igual en todos - listas vacias con icono y recuadro - el pie abajo en paginas cortas - buzon: remitente y fecha en una linea; fuera Para, Tasa ECO y Cifrado - busqueda: el campo primero, los filtros despues - nodos: acciones en rejilla - fuera los selectores a clases que no existen
This commit is contained in:
SITO
parent
d04d99ece2
commit
087b86a184
3 changed files with 111 additions and 4 deletions
|
|
@ -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".
|
||||
|
|
|
|||
1
src/client/assets/images/ux-empty.svg
Normal file
1
src/client/assets/images/ux-empty.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M3 13l3-8h12l3 8v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1z"/><path d="M3 13h5l1 3h6l1-3h5"/></svg>
|
||||
|
After Width: | Height: | Size: 251 B |
|
|
@ -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; }
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue