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 2026-10-19 13:08:46 +02:00
parent d04d99ece2
commit 087b86a184
3 changed files with 111 additions and 4 deletions

View 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

View file

@ -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; }