fix(mobile): paginador compacto, solo flechas, sin bg cards
- Eliminado el contador "N / N" del activity_view, sólo flechas < - mobile.css: rules display:none/flex para mostrar 1 celda activa (más fiable que translateX con flexbox y cells flex 0 0 100%) - Override del background/border global de divs en theme dentro del actpager — ya no se ve cada div como tarjeta separada - Tamaños reducidos: arrows 32x32, padding-cell 0, gap 40px Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
SITO
parent
c6acdbb692
commit
bb04d4cb64
2 changed files with 137 additions and 90 deletions
|
|
@ -732,6 +732,7 @@ pre, code {
|
|||
|
||||
/* ============================================================
|
||||
ACTPAGER — paginador móvil CSS-only para activity_view
|
||||
Enfoque: display:none por defecto, una celda visible a la vez
|
||||
============================================================ */
|
||||
.actpager {
|
||||
display: block !important;
|
||||
|
|
@ -752,20 +753,16 @@ pre, code {
|
|||
gap: 10px !important;
|
||||
}
|
||||
.actpager-clip {
|
||||
overflow: hidden !important;
|
||||
width: 100% !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
.actpager-row {
|
||||
display: flex !important;
|
||||
flex-direction: row !important;
|
||||
flex-wrap: nowrap !important;
|
||||
display: block !important;
|
||||
width: 100% !important;
|
||||
transition: transform 0.3s ease !important;
|
||||
transform: translateX(0) !important;
|
||||
}
|
||||
/* Por defecto todas las celdas ocultas */
|
||||
.actpager-cell {
|
||||
flex: 0 0 100% !important;
|
||||
display: flex !important;
|
||||
display: none !important;
|
||||
flex-direction: row !important;
|
||||
gap: 8px !important;
|
||||
width: 100% !important;
|
||||
|
|
@ -778,13 +775,15 @@ pre, code {
|
|||
}
|
||||
.actpager-cell .filter-btn {
|
||||
width: 100% !important;
|
||||
padding: 12px 10px !important;
|
||||
font-size: 0.9rem !important;
|
||||
padding: 8px 6px !important;
|
||||
min-height: 36px !important;
|
||||
font-size: 0.82rem !important;
|
||||
font-weight: 700 !important;
|
||||
white-space: nowrap !important;
|
||||
overflow: hidden !important;
|
||||
text-overflow: ellipsis !important;
|
||||
border-radius: 8px !important;
|
||||
border-radius: 6px !important;
|
||||
line-height: 1.1 !important;
|
||||
}
|
||||
.actpager-controls {
|
||||
display: flex !important;
|
||||
|
|
@ -793,218 +792,266 @@ pre, code {
|
|||
align-items: center !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
/* Por defecto todos los sets de flechas ocultos */
|
||||
.actpager-arrows {
|
||||
display: none !important;
|
||||
flex-direction: row !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
gap: 18px !important;
|
||||
gap: 28px !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
.actpager-arrow {
|
||||
width: 44px !important;
|
||||
height: 44px !important;
|
||||
width: 40px !important;
|
||||
height: 40px !important;
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
font-size: 1.7rem !important;
|
||||
font-size: 1.5rem !important;
|
||||
font-weight: 700 !important;
|
||||
border-radius: 50% !important;
|
||||
cursor: pointer !important;
|
||||
user-select: none !important;
|
||||
line-height: 1 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
.actpager-arrow.disabled {
|
||||
opacity: 0.25 !important;
|
||||
opacity: 0.2 !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;
|
||||
/* Reglas por página: muestra solo la celda y las flechas correspondientes */
|
||||
.actpager-r0:checked ~ .actpager-frame .actpager-cell:nth-child(1) {
|
||||
display: flex !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-cell:nth-child(2) {
|
||||
display: flex !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-cell:nth-child(3) {
|
||||
display: flex !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-cell:nth-child(4) {
|
||||
display: flex !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-cell:nth-child(5) {
|
||||
display: flex !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-cell:nth-child(6) {
|
||||
display: flex !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-cell:nth-child(7) {
|
||||
display: flex !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-cell:nth-child(8) {
|
||||
display: flex !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-cell:nth-child(9) {
|
||||
display: flex !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-cell:nth-child(10) {
|
||||
display: flex !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-cell:nth-child(11) {
|
||||
display: flex !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-cell:nth-child(12) {
|
||||
display: flex !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-cell:nth-child(13) {
|
||||
display: flex !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-cell:nth-child(14) {
|
||||
display: flex !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-cell:nth-child(15) {
|
||||
display: flex !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-cell:nth-child(16) {
|
||||
display: flex !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-cell:nth-child(17) {
|
||||
display: flex !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-cell:nth-child(18) {
|
||||
display: flex !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-cell:nth-child(19) {
|
||||
display: flex !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-cell:nth-child(20) {
|
||||
display: flex !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-cell:nth-child(21) {
|
||||
display: flex !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-cell:nth-child(22) {
|
||||
display: flex !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-cell:nth-child(23) {
|
||||
display: flex !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-cell:nth-child(24) {
|
||||
display: flex !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-cell:nth-child(25) {
|
||||
display: flex !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-cell:nth-child(26) {
|
||||
display: flex !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-cell:nth-child(27) {
|
||||
display: flex !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-cell:nth-child(28) {
|
||||
display: flex !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-cell:nth-child(29) {
|
||||
display: flex !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-cell:nth-child(30) {
|
||||
display: flex !important;
|
||||
}
|
||||
.actpager-r29:checked ~ .actpager-frame .actpager-a29 {
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
ACTPAGER: ajustes finales — sin bg/border en divs internos,
|
||||
compacto, pegado arriba
|
||||
============================================================ */
|
||||
.actpager,
|
||||
.actpager-frame,
|
||||
.actpager-clip,
|
||||
.actpager-row,
|
||||
.actpager-cell,
|
||||
.actpager-controls,
|
||||
.actpager-arrows {
|
||||
background: transparent !important;
|
||||
border: none !important;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.actpager {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
.actpager-frame {
|
||||
gap: 8px !important;
|
||||
padding: 6px 0 !important;
|
||||
}
|
||||
|
||||
.actpager-cell {
|
||||
gap: 10px !important;
|
||||
}
|
||||
|
||||
.actpager-controls {
|
||||
margin-top: 4px !important;
|
||||
}
|
||||
|
||||
.actpager-arrows {
|
||||
gap: 40px !important;
|
||||
}
|
||||
|
||||
.actpager-arrow {
|
||||
width: 32px !important;
|
||||
height: 32px !important;
|
||||
font-size: 1.3rem !important;
|
||||
background: transparent !important;
|
||||
border: 1px solid #555 !important;
|
||||
}
|
||||
|
||||
.actpager-form {
|
||||
background: transparent !important;
|
||||
border: none !important;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1721,16 +1721,16 @@ exports.activityView = (actions, filter, userId, q = '') => {
|
|||
if (i === 0) attrs.checked = 'checked';
|
||||
radios.push(input(attrs));
|
||||
}
|
||||
const haxe = require('../server/node_modules/hyperaxe');
|
||||
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' }, '‹');
|
||||
? haxe.label({ for: `actp${i - 1}`, class: 'actpager-arrow' }, '‹')
|
||||
: haxe.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));
|
||||
? haxe.label({ for: `actp${i + 1}`, class: 'actpager-arrow' }, '›')
|
||||
: haxe.span({ class: 'actpager-arrow disabled' }, '›');
|
||||
arrowSets.push(div({ class: `actpager-arrows actpager-a${i}` }, prev, next));
|
||||
}
|
||||
const mobilePager = section({ class: 'actpager', style: 'display:none' },
|
||||
...radios,
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue