feat(mobile): paginador CSS-only con flechas para activity filters
- activity_view.js: render adicional .actpager con N radios + cells (2 botones por celda) + arrow labels por página. Hidden inline en desktop (display:none). - mobile.css: .activity-filter-grid display:none, .actpager block. Reglas .actpager-rN:checked ~ .actpager-frame ... aplican translateX por porcentaje y muestran solo el set de flechas correspondiente. 18 páginas para 36 botones; reglas hasta página 30 por holgura. CSS puro: sin JS, sin scroll del dedo, sin caché. Las flechas < y > son labels que togglean radios escondidos via for=. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
SITO
parent
75bb97b204
commit
c6acdbb692
2 changed files with 330 additions and 12 deletions
|
|
@ -399,15 +399,19 @@ textarea, input, select {
|
|||
font-size: 16px !important;
|
||||
}
|
||||
|
||||
/* ---- Filtros: wrap multilinea, todos los botones visibles ---- */
|
||||
/* En móvil ocultamos el grid antiguo; usa el paginador (.actpager) */
|
||||
.activity-filter-grid {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* ---- Filtros (mode-buttons): wrap multilinea ---- */
|
||||
.mode-buttons,
|
||||
.mode-buttons-cols,
|
||||
.mode-buttons-row,
|
||||
.filter-group,
|
||||
.filters,
|
||||
.inhabitant-action,
|
||||
.tribe-mode-buttons,
|
||||
.activity-filter-grid {
|
||||
.tribe-mode-buttons {
|
||||
display: flex !important;
|
||||
flex-direction: row !important;
|
||||
flex-wrap: wrap !important;
|
||||
|
|
@ -416,25 +420,18 @@ textarea, input, select {
|
|||
overflow: visible !important;
|
||||
}
|
||||
|
||||
/* En el activity-filter-grid las columnas (.activity-filter-col) se aplanan */
|
||||
.activity-filter-grid .activity-filter-col {
|
||||
display: contents !important;
|
||||
}
|
||||
|
||||
.mode-buttons form,
|
||||
.mode-buttons-cols form,
|
||||
.mode-buttons-row form,
|
||||
.filter-group form,
|
||||
.filters form,
|
||||
.activity-filter-grid form {
|
||||
.filters form {
|
||||
flex: 0 0 auto !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.mode-buttons .filter-btn,
|
||||
.mode-buttons button,
|
||||
.filter-group .filter-btn,
|
||||
.activity-filter-grid .filter-btn {
|
||||
.filter-group .filter-btn {
|
||||
width: auto !important;
|
||||
white-space: nowrap !important;
|
||||
padding: 8px 14px !important;
|
||||
|
|
@ -732,3 +729,282 @@ pre, code {
|
|||
overflow-x: hidden !important;
|
||||
}
|
||||
|
||||
|
||||
/* ============================================================
|
||||
ACTPAGER — paginador móvil CSS-only para activity_view
|
||||
============================================================ */
|
||||
.actpager {
|
||||
display: block !important;
|
||||
width: 100% !important;
|
||||
margin-top: 12px !important;
|
||||
position: relative !important;
|
||||
}
|
||||
.actpager-radio {
|
||||
position: absolute !important;
|
||||
opacity: 0 !important;
|
||||
pointer-events: none !important;
|
||||
width: 0 !important;
|
||||
height: 0 !important;
|
||||
}
|
||||
.actpager-frame {
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
gap: 10px !important;
|
||||
}
|
||||
.actpager-clip {
|
||||
overflow: hidden !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
.actpager-row {
|
||||
display: flex !important;
|
||||
flex-direction: row !important;
|
||||
flex-wrap: nowrap !important;
|
||||
width: 100% !important;
|
||||
transition: transform 0.3s ease !important;
|
||||
transform: translateX(0) !important;
|
||||
}
|
||||
.actpager-cell {
|
||||
flex: 0 0 100% !important;
|
||||
display: flex !important;
|
||||
flex-direction: row !important;
|
||||
gap: 8px !important;
|
||||
width: 100% !important;
|
||||
box-sizing: border-box !important;
|
||||
}
|
||||
.actpager-form {
|
||||
flex: 1 1 0 !important;
|
||||
margin: 0 !important;
|
||||
min-width: 0 !important;
|
||||
}
|
||||
.actpager-cell .filter-btn {
|
||||
width: 100% !important;
|
||||
padding: 12px 10px !important;
|
||||
font-size: 0.9rem !important;
|
||||
font-weight: 700 !important;
|
||||
white-space: nowrap !important;
|
||||
overflow: hidden !important;
|
||||
text-overflow: ellipsis !important;
|
||||
border-radius: 8px !important;
|
||||
}
|
||||
.actpager-controls {
|
||||
display: flex !important;
|
||||
flex-direction: row !important;
|
||||
justify-content: center !important;
|
||||
align-items: center !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
.actpager-arrows {
|
||||
display: none !important;
|
||||
flex-direction: row !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
gap: 18px !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
.actpager-arrow {
|
||||
width: 44px !important;
|
||||
height: 44px !important;
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
font-size: 1.7rem !important;
|
||||
font-weight: 700 !important;
|
||||
border-radius: 50% !important;
|
||||
cursor: pointer !important;
|
||||
user-select: none !important;
|
||||
line-height: 1 !important;
|
||||
}
|
||||
.actpager-arrow.disabled {
|
||||
opacity: 0.25 !important;
|
||||
cursor: default !important;
|
||||
pointer-events: none !important;
|
||||
}
|
||||
.actpager-counter {
|
||||
font-size: 0.9rem !important;
|
||||
font-weight: 700 !important;
|
||||
min-width: 60px !important;
|
||||
text-align: center !important;
|
||||
letter-spacing: 0.05em !important;
|
||||
}
|
||||
|
||||
/* Reglas por página: traslación + arrows visibles */
|
||||
.actpager-r0:checked ~ .actpager-frame .actpager-row {
|
||||
transform: translateX(-0%) !important;
|
||||
}
|
||||
.actpager-r0:checked ~ .actpager-frame .actpager-a0 {
|
||||
display: flex !important;
|
||||
}
|
||||
.actpager-r1:checked ~ .actpager-frame .actpager-row {
|
||||
transform: translateX(-100%) !important;
|
||||
}
|
||||
.actpager-r1:checked ~ .actpager-frame .actpager-a1 {
|
||||
display: flex !important;
|
||||
}
|
||||
.actpager-r2:checked ~ .actpager-frame .actpager-row {
|
||||
transform: translateX(-200%) !important;
|
||||
}
|
||||
.actpager-r2:checked ~ .actpager-frame .actpager-a2 {
|
||||
display: flex !important;
|
||||
}
|
||||
.actpager-r3:checked ~ .actpager-frame .actpager-row {
|
||||
transform: translateX(-300%) !important;
|
||||
}
|
||||
.actpager-r3:checked ~ .actpager-frame .actpager-a3 {
|
||||
display: flex !important;
|
||||
}
|
||||
.actpager-r4:checked ~ .actpager-frame .actpager-row {
|
||||
transform: translateX(-400%) !important;
|
||||
}
|
||||
.actpager-r4:checked ~ .actpager-frame .actpager-a4 {
|
||||
display: flex !important;
|
||||
}
|
||||
.actpager-r5:checked ~ .actpager-frame .actpager-row {
|
||||
transform: translateX(-500%) !important;
|
||||
}
|
||||
.actpager-r5:checked ~ .actpager-frame .actpager-a5 {
|
||||
display: flex !important;
|
||||
}
|
||||
.actpager-r6:checked ~ .actpager-frame .actpager-row {
|
||||
transform: translateX(-600%) !important;
|
||||
}
|
||||
.actpager-r6:checked ~ .actpager-frame .actpager-a6 {
|
||||
display: flex !important;
|
||||
}
|
||||
.actpager-r7:checked ~ .actpager-frame .actpager-row {
|
||||
transform: translateX(-700%) !important;
|
||||
}
|
||||
.actpager-r7:checked ~ .actpager-frame .actpager-a7 {
|
||||
display: flex !important;
|
||||
}
|
||||
.actpager-r8:checked ~ .actpager-frame .actpager-row {
|
||||
transform: translateX(-800%) !important;
|
||||
}
|
||||
.actpager-r8:checked ~ .actpager-frame .actpager-a8 {
|
||||
display: flex !important;
|
||||
}
|
||||
.actpager-r9:checked ~ .actpager-frame .actpager-row {
|
||||
transform: translateX(-900%) !important;
|
||||
}
|
||||
.actpager-r9:checked ~ .actpager-frame .actpager-a9 {
|
||||
display: flex !important;
|
||||
}
|
||||
.actpager-r10:checked ~ .actpager-frame .actpager-row {
|
||||
transform: translateX(-1000%) !important;
|
||||
}
|
||||
.actpager-r10:checked ~ .actpager-frame .actpager-a10 {
|
||||
display: flex !important;
|
||||
}
|
||||
.actpager-r11:checked ~ .actpager-frame .actpager-row {
|
||||
transform: translateX(-1100%) !important;
|
||||
}
|
||||
.actpager-r11:checked ~ .actpager-frame .actpager-a11 {
|
||||
display: flex !important;
|
||||
}
|
||||
.actpager-r12:checked ~ .actpager-frame .actpager-row {
|
||||
transform: translateX(-1200%) !important;
|
||||
}
|
||||
.actpager-r12:checked ~ .actpager-frame .actpager-a12 {
|
||||
display: flex !important;
|
||||
}
|
||||
.actpager-r13:checked ~ .actpager-frame .actpager-row {
|
||||
transform: translateX(-1300%) !important;
|
||||
}
|
||||
.actpager-r13:checked ~ .actpager-frame .actpager-a13 {
|
||||
display: flex !important;
|
||||
}
|
||||
.actpager-r14:checked ~ .actpager-frame .actpager-row {
|
||||
transform: translateX(-1400%) !important;
|
||||
}
|
||||
.actpager-r14:checked ~ .actpager-frame .actpager-a14 {
|
||||
display: flex !important;
|
||||
}
|
||||
.actpager-r15:checked ~ .actpager-frame .actpager-row {
|
||||
transform: translateX(-1500%) !important;
|
||||
}
|
||||
.actpager-r15:checked ~ .actpager-frame .actpager-a15 {
|
||||
display: flex !important;
|
||||
}
|
||||
.actpager-r16:checked ~ .actpager-frame .actpager-row {
|
||||
transform: translateX(-1600%) !important;
|
||||
}
|
||||
.actpager-r16:checked ~ .actpager-frame .actpager-a16 {
|
||||
display: flex !important;
|
||||
}
|
||||
.actpager-r17:checked ~ .actpager-frame .actpager-row {
|
||||
transform: translateX(-1700%) !important;
|
||||
}
|
||||
.actpager-r17:checked ~ .actpager-frame .actpager-a17 {
|
||||
display: flex !important;
|
||||
}
|
||||
.actpager-r18:checked ~ .actpager-frame .actpager-row {
|
||||
transform: translateX(-1800%) !important;
|
||||
}
|
||||
.actpager-r18:checked ~ .actpager-frame .actpager-a18 {
|
||||
display: flex !important;
|
||||
}
|
||||
.actpager-r19:checked ~ .actpager-frame .actpager-row {
|
||||
transform: translateX(-1900%) !important;
|
||||
}
|
||||
.actpager-r19:checked ~ .actpager-frame .actpager-a19 {
|
||||
display: flex !important;
|
||||
}
|
||||
.actpager-r20:checked ~ .actpager-frame .actpager-row {
|
||||
transform: translateX(-2000%) !important;
|
||||
}
|
||||
.actpager-r20:checked ~ .actpager-frame .actpager-a20 {
|
||||
display: flex !important;
|
||||
}
|
||||
.actpager-r21:checked ~ .actpager-frame .actpager-row {
|
||||
transform: translateX(-2100%) !important;
|
||||
}
|
||||
.actpager-r21:checked ~ .actpager-frame .actpager-a21 {
|
||||
display: flex !important;
|
||||
}
|
||||
.actpager-r22:checked ~ .actpager-frame .actpager-row {
|
||||
transform: translateX(-2200%) !important;
|
||||
}
|
||||
.actpager-r22:checked ~ .actpager-frame .actpager-a22 {
|
||||
display: flex !important;
|
||||
}
|
||||
.actpager-r23:checked ~ .actpager-frame .actpager-row {
|
||||
transform: translateX(-2300%) !important;
|
||||
}
|
||||
.actpager-r23:checked ~ .actpager-frame .actpager-a23 {
|
||||
display: flex !important;
|
||||
}
|
||||
.actpager-r24:checked ~ .actpager-frame .actpager-row {
|
||||
transform: translateX(-2400%) !important;
|
||||
}
|
||||
.actpager-r24:checked ~ .actpager-frame .actpager-a24 {
|
||||
display: flex !important;
|
||||
}
|
||||
.actpager-r25:checked ~ .actpager-frame .actpager-row {
|
||||
transform: translateX(-2500%) !important;
|
||||
}
|
||||
.actpager-r25:checked ~ .actpager-frame .actpager-a25 {
|
||||
display: flex !important;
|
||||
}
|
||||
.actpager-r26:checked ~ .actpager-frame .actpager-row {
|
||||
transform: translateX(-2600%) !important;
|
||||
}
|
||||
.actpager-r26:checked ~ .actpager-frame .actpager-a26 {
|
||||
display: flex !important;
|
||||
}
|
||||
.actpager-r27:checked ~ .actpager-frame .actpager-row {
|
||||
transform: translateX(-2700%) !important;
|
||||
}
|
||||
.actpager-r27:checked ~ .actpager-frame .actpager-a27 {
|
||||
display: flex !important;
|
||||
}
|
||||
.actpager-r28:checked ~ .actpager-frame .actpager-row {
|
||||
transform: translateX(-2800%) !important;
|
||||
}
|
||||
.actpager-r28:checked ~ .actpager-frame .actpager-a28 {
|
||||
display: flex !important;
|
||||
}
|
||||
.actpager-r29:checked ~ .actpager-frame .actpager-row {
|
||||
transform: translateX(-2900%) !important;
|
||||
}
|
||||
.actpager-r29:checked ~ .actpager-frame .actpager-a29 {
|
||||
display: flex !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1701,6 +1701,47 @@ exports.activityView = (actions, filter, userId, q = '') => {
|
|||
});
|
||||
}
|
||||
|
||||
// Mobile paginator (CSS-only, no JS): 2 buttons per page with arrow labels
|
||||
const buildBtn = (cls, t, lab) => form({ method: 'GET', action: '/activity', class: cls },
|
||||
input({ type: 'hidden', name: 'filter', value: t }),
|
||||
button({ type: 'submit', class: filter === t ? 'filter-btn active' : 'filter-btn' }, lab)
|
||||
);
|
||||
const PAGE_SIZE = 2;
|
||||
const totalPages = Math.ceil(activityTypes.length / PAGE_SIZE);
|
||||
const pageCells = [];
|
||||
for (let i = 0; i < totalPages; i++) {
|
||||
const slice = activityTypes.slice(i * PAGE_SIZE, (i + 1) * PAGE_SIZE);
|
||||
pageCells.push(div({ class: 'actpager-cell' },
|
||||
slice.map(({ type, label }) => buildBtn('actpager-form', type, label))
|
||||
));
|
||||
}
|
||||
const radios = [];
|
||||
for (let i = 0; i < totalPages; i++) {
|
||||
const attrs = { type: 'radio', name: 'actp', id: `actp${i}`, class: `actpager-radio actpager-r${i}` };
|
||||
if (i === 0) attrs.checked = 'checked';
|
||||
radios.push(input(attrs));
|
||||
}
|
||||
const arrowSets = [];
|
||||
for (let i = 0; i < totalPages; i++) {
|
||||
const prev = i > 0
|
||||
? require('../server/node_modules/hyperaxe').label({ for: `actp${i - 1}`, class: 'actpager-arrow' }, '‹')
|
||||
: require('../server/node_modules/hyperaxe').span({ class: 'actpager-arrow disabled' }, '‹');
|
||||
const next = i < totalPages - 1
|
||||
? require('../server/node_modules/hyperaxe').label({ for: `actp${i + 1}`, class: 'actpager-arrow' }, '›')
|
||||
: require('../server/node_modules/hyperaxe').span({ class: 'actpager-arrow disabled' }, '›');
|
||||
const counter = require('../server/node_modules/hyperaxe').span({ class: 'actpager-counter' }, `${i + 1} / ${totalPages}`);
|
||||
arrowSets.push(div({ class: `actpager-arrows actpager-a${i}` }, prev, counter, next));
|
||||
}
|
||||
const mobilePager = section({ class: 'actpager', style: 'display:none' },
|
||||
...radios,
|
||||
div({ class: 'actpager-frame' },
|
||||
div({ class: 'actpager-clip' },
|
||||
div({ class: 'actpager-row' }, ...pageCells)
|
||||
),
|
||||
div({ class: 'actpager-controls' }, ...arrowSets)
|
||||
)
|
||||
);
|
||||
|
||||
let html = template(
|
||||
title,
|
||||
section(
|
||||
|
|
@ -1708,6 +1749,7 @@ exports.activityView = (actions, filter, userId, q = '') => {
|
|||
h2(i18n.activityList),
|
||||
p(desc)
|
||||
),
|
||||
mobilePager,
|
||||
div({ class: 'activity-filter-grid' },
|
||||
...[
|
||||
activityTypes.slice(0, 4),
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue