hacklab/OASIS_MOBILE
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(mobile): paginador compacto, solo flechas, sin bg cards

Browse source 
- 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 2026-05-09 01:19:17 +02:00
parent c6acdbb692
commit bb04d4cb64
2 changed files with 137 additions and 90 deletions
Download patch file Download diff file Expand all files Collapse all files

215
nodejs-project/nodejs-project/src/client/assets/styles/mobile.css
View file

@ -732,6 +732,7 @@ pre, code {
/* ============================================================ /* ============================================================
ACTPAGER — paginador móvil CSS-only para activity_view ACTPAGER — paginador móvil CSS-only para activity_view
Enfoque: display:none por defecto, una celda visible a la vez
============================================================ */ ============================================================ */
.actpager { .actpager {
display: block !important; display: block !important;
@ -752,20 +753,16 @@ pre, code {
gap: 10px !important; gap: 10px !important;
} }
.actpager-clip { .actpager-clip {
overflow: hidden !important;
width: 100% !important; width: 100% !important;
overflow: hidden !important;
} }
.actpager-row { .actpager-row {
display: flex !important; display: block !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
width: 100% !important; width: 100% !important;
transition: transform 0.3s ease !important;
transform: translateX(0) !important;
} }
/* Por defecto todas las celdas ocultas */
.actpager-cell { .actpager-cell {
flex: 0 0 100% !important; display: none !important;
display: flex !important;
flex-direction: row !important; flex-direction: row !important;
gap: 8px !important; gap: 8px !important;
width: 100% !important; width: 100% !important;
@ -778,13 +775,15 @@ pre, code {
} }
.actpager-cell .filter-btn { .actpager-cell .filter-btn {
width: 100% !important; width: 100% !important;
padding: 12px 10px !important; padding: 8px 6px !important;
font-size: 0.9rem !important; min-height: 36px !important;
font-size: 0.82rem !important;
font-weight: 700 !important; font-weight: 700 !important;
white-space: nowrap !important; white-space: nowrap !important;
overflow: hidden !important; overflow: hidden !important;
text-overflow: ellipsis !important; text-overflow: ellipsis !important;
border-radius: 8px !important; border-radius: 6px !important;
line-height: 1.1 !important;
} }
.actpager-controls { .actpager-controls {
display: flex !important; display: flex !important;
@ -793,218 +792,266 @@ pre, code {
align-items: center !important; align-items: center !important;
width: 100% !important; width: 100% !important;
} }
/* Por defecto todos los sets de flechas ocultos */
.actpager-arrows { .actpager-arrows {
display: none !important; display: none !important;
flex-direction: row !important; flex-direction: row !important;
align-items: center !important; align-items: center !important;
justify-content: center !important; justify-content: center !important;
gap: 18px !important; gap: 28px !important;
width: 100% !important; width: 100% !important;
} }
.actpager-arrow { .actpager-arrow {
width: 44px !important; width: 40px !important;
height: 44px !important; height: 40px !important;
display: flex !important; display: flex !important;
align-items: center !important; align-items: center !important;
justify-content: center !important; justify-content: center !important;
font-size: 1.7rem !important; font-size: 1.5rem !important;
font-weight: 700 !important; font-weight: 700 !important;
border-radius: 50% !important; border-radius: 50% !important;
cursor: pointer !important; cursor: pointer !important;
user-select: none !important; user-select: none !important;
line-height: 1 !important; line-height: 1 !important;
margin: 0 !important;
} }
.actpager-arrow.disabled { .actpager-arrow.disabled {
opacity: 0.25 !important; opacity: 0.2 !important;
cursor: default !important; cursor: default !important;
pointer-events: none !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 */ /* Reglas por página: muestra solo la celda y las flechas correspondientes */
.actpager-r0:checked ~ .actpager-frame .actpager-row { .actpager-r0:checked ~ .actpager-frame .actpager-cell:nth-child(1) {
transform: translateX(-0%) !important; display: flex !important;
} }
.actpager-r0:checked ~ .actpager-frame .actpager-a0 { .actpager-r0:checked ~ .actpager-frame .actpager-a0 {
display: flex !important; display: flex !important;
} }
.actpager-r1:checked ~ .actpager-frame .actpager-row { .actpager-r1:checked ~ .actpager-frame .actpager-cell:nth-child(2) {
transform: translateX(-100%) !important; display: flex !important;
} }
.actpager-r1:checked ~ .actpager-frame .actpager-a1 { .actpager-r1:checked ~ .actpager-frame .actpager-a1 {
display: flex !important; display: flex !important;
} }
.actpager-r2:checked ~ .actpager-frame .actpager-row { .actpager-r2:checked ~ .actpager-frame .actpager-cell:nth-child(3) {
transform: translateX(-200%) !important; display: flex !important;
} }
.actpager-r2:checked ~ .actpager-frame .actpager-a2 { .actpager-r2:checked ~ .actpager-frame .actpager-a2 {
display: flex !important; display: flex !important;
} }
.actpager-r3:checked ~ .actpager-frame .actpager-row { .actpager-r3:checked ~ .actpager-frame .actpager-cell:nth-child(4) {
transform: translateX(-300%) !important; display: flex !important;
} }
.actpager-r3:checked ~ .actpager-frame .actpager-a3 { .actpager-r3:checked ~ .actpager-frame .actpager-a3 {
display: flex !important; display: flex !important;
} }
.actpager-r4:checked ~ .actpager-frame .actpager-row { .actpager-r4:checked ~ .actpager-frame .actpager-cell:nth-child(5) {
transform: translateX(-400%) !important; display: flex !important;
} }
.actpager-r4:checked ~ .actpager-frame .actpager-a4 { .actpager-r4:checked ~ .actpager-frame .actpager-a4 {
display: flex !important; display: flex !important;
} }
.actpager-r5:checked ~ .actpager-frame .actpager-row { .actpager-r5:checked ~ .actpager-frame .actpager-cell:nth-child(6) {
transform: translateX(-500%) !important; display: flex !important;
} }
.actpager-r5:checked ~ .actpager-frame .actpager-a5 { .actpager-r5:checked ~ .actpager-frame .actpager-a5 {
display: flex !important; display: flex !important;
} }
.actpager-r6:checked ~ .actpager-frame .actpager-row { .actpager-r6:checked ~ .actpager-frame .actpager-cell:nth-child(7) {
transform: translateX(-600%) !important; display: flex !important;
} }
.actpager-r6:checked ~ .actpager-frame .actpager-a6 { .actpager-r6:checked ~ .actpager-frame .actpager-a6 {
display: flex !important; display: flex !important;
} }
.actpager-r7:checked ~ .actpager-frame .actpager-row { .actpager-r7:checked ~ .actpager-frame .actpager-cell:nth-child(8) {
transform: translateX(-700%) !important; display: flex !important;
} }
.actpager-r7:checked ~ .actpager-frame .actpager-a7 { .actpager-r7:checked ~ .actpager-frame .actpager-a7 {
display: flex !important; display: flex !important;
} }
.actpager-r8:checked ~ .actpager-frame .actpager-row { .actpager-r8:checked ~ .actpager-frame .actpager-cell:nth-child(9) {
transform: translateX(-800%) !important; display: flex !important;
} }
.actpager-r8:checked ~ .actpager-frame .actpager-a8 { .actpager-r8:checked ~ .actpager-frame .actpager-a8 {
display: flex !important; display: flex !important;
} }
.actpager-r9:checked ~ .actpager-frame .actpager-row { .actpager-r9:checked ~ .actpager-frame .actpager-cell:nth-child(10) {
transform: translateX(-900%) !important; display: flex !important;
} }
.actpager-r9:checked ~ .actpager-frame .actpager-a9 { .actpager-r9:checked ~ .actpager-frame .actpager-a9 {
display: flex !important; display: flex !important;
} }
.actpager-r10:checked ~ .actpager-frame .actpager-row { .actpager-r10:checked ~ .actpager-frame .actpager-cell:nth-child(11) {
transform: translateX(-1000%) !important; display: flex !important;
} }
.actpager-r10:checked ~ .actpager-frame .actpager-a10 { .actpager-r10:checked ~ .actpager-frame .actpager-a10 {
display: flex !important; display: flex !important;
} }
.actpager-r11:checked ~ .actpager-frame .actpager-row { .actpager-r11:checked ~ .actpager-frame .actpager-cell:nth-child(12) {
transform: translateX(-1100%) !important; display: flex !important;
} }
.actpager-r11:checked ~ .actpager-frame .actpager-a11 { .actpager-r11:checked ~ .actpager-frame .actpager-a11 {
display: flex !important; display: flex !important;
} }
.actpager-r12:checked ~ .actpager-frame .actpager-row { .actpager-r12:checked ~ .actpager-frame .actpager-cell:nth-child(13) {
transform: translateX(-1200%) !important; display: flex !important;
} }
.actpager-r12:checked ~ .actpager-frame .actpager-a12 { .actpager-r12:checked ~ .actpager-frame .actpager-a12 {
display: flex !important; display: flex !important;
} }
.actpager-r13:checked ~ .actpager-frame .actpager-row { .actpager-r13:checked ~ .actpager-frame .actpager-cell:nth-child(14) {
transform: translateX(-1300%) !important; display: flex !important;
} }
.actpager-r13:checked ~ .actpager-frame .actpager-a13 { .actpager-r13:checked ~ .actpager-frame .actpager-a13 {
display: flex !important; display: flex !important;
} }
.actpager-r14:checked ~ .actpager-frame .actpager-row { .actpager-r14:checked ~ .actpager-frame .actpager-cell:nth-child(15) {
transform: translateX(-1400%) !important; display: flex !important;
} }
.actpager-r14:checked ~ .actpager-frame .actpager-a14 { .actpager-r14:checked ~ .actpager-frame .actpager-a14 {
display: flex !important; display: flex !important;
} }
.actpager-r15:checked ~ .actpager-frame .actpager-row { .actpager-r15:checked ~ .actpager-frame .actpager-cell:nth-child(16) {
transform: translateX(-1500%) !important; display: flex !important;
} }
.actpager-r15:checked ~ .actpager-frame .actpager-a15 { .actpager-r15:checked ~ .actpager-frame .actpager-a15 {
display: flex !important; display: flex !important;
} }
.actpager-r16:checked ~ .actpager-frame .actpager-row { .actpager-r16:checked ~ .actpager-frame .actpager-cell:nth-child(17) {
transform: translateX(-1600%) !important; display: flex !important;
} }
.actpager-r16:checked ~ .actpager-frame .actpager-a16 { .actpager-r16:checked ~ .actpager-frame .actpager-a16 {
display: flex !important; display: flex !important;
} }
.actpager-r17:checked ~ .actpager-frame .actpager-row { .actpager-r17:checked ~ .actpager-frame .actpager-cell:nth-child(18) {
transform: translateX(-1700%) !important; display: flex !important;
} }
.actpager-r17:checked ~ .actpager-frame .actpager-a17 { .actpager-r17:checked ~ .actpager-frame .actpager-a17 {
display: flex !important; display: flex !important;
} }
.actpager-r18:checked ~ .actpager-frame .actpager-row { .actpager-r18:checked ~ .actpager-frame .actpager-cell:nth-child(19) {
transform: translateX(-1800%) !important; display: flex !important;
} }
.actpager-r18:checked ~ .actpager-frame .actpager-a18 { .actpager-r18:checked ~ .actpager-frame .actpager-a18 {
display: flex !important; display: flex !important;
} }
.actpager-r19:checked ~ .actpager-frame .actpager-row { .actpager-r19:checked ~ .actpager-frame .actpager-cell:nth-child(20) {
transform: translateX(-1900%) !important; display: flex !important;
} }
.actpager-r19:checked ~ .actpager-frame .actpager-a19 { .actpager-r19:checked ~ .actpager-frame .actpager-a19 {
display: flex !important; display: flex !important;
} }
.actpager-r20:checked ~ .actpager-frame .actpager-row { .actpager-r20:checked ~ .actpager-frame .actpager-cell:nth-child(21) {
transform: translateX(-2000%) !important; display: flex !important;
} }
.actpager-r20:checked ~ .actpager-frame .actpager-a20 { .actpager-r20:checked ~ .actpager-frame .actpager-a20 {
display: flex !important; display: flex !important;
} }
.actpager-r21:checked ~ .actpager-frame .actpager-row { .actpager-r21:checked ~ .actpager-frame .actpager-cell:nth-child(22) {
transform: translateX(-2100%) !important; display: flex !important;
} }
.actpager-r21:checked ~ .actpager-frame .actpager-a21 { .actpager-r21:checked ~ .actpager-frame .actpager-a21 {
display: flex !important; display: flex !important;
} }
.actpager-r22:checked ~ .actpager-frame .actpager-row { .actpager-r22:checked ~ .actpager-frame .actpager-cell:nth-child(23) {
transform: translateX(-2200%) !important; display: flex !important;
} }
.actpager-r22:checked ~ .actpager-frame .actpager-a22 { .actpager-r22:checked ~ .actpager-frame .actpager-a22 {
display: flex !important; display: flex !important;
} }
.actpager-r23:checked ~ .actpager-frame .actpager-row { .actpager-r23:checked ~ .actpager-frame .actpager-cell:nth-child(24) {
transform: translateX(-2300%) !important; display: flex !important;
} }
.actpager-r23:checked ~ .actpager-frame .actpager-a23 { .actpager-r23:checked ~ .actpager-frame .actpager-a23 {
display: flex !important; display: flex !important;
} }
.actpager-r24:checked ~ .actpager-frame .actpager-row { .actpager-r24:checked ~ .actpager-frame .actpager-cell:nth-child(25) {
transform: translateX(-2400%) !important; display: flex !important;
} }
.actpager-r24:checked ~ .actpager-frame .actpager-a24 { .actpager-r24:checked ~ .actpager-frame .actpager-a24 {
display: flex !important; display: flex !important;
} }
.actpager-r25:checked ~ .actpager-frame .actpager-row { .actpager-r25:checked ~ .actpager-frame .actpager-cell:nth-child(26) {
transform: translateX(-2500%) !important; display: flex !important;
} }
.actpager-r25:checked ~ .actpager-frame .actpager-a25 { .actpager-r25:checked ~ .actpager-frame .actpager-a25 {
display: flex !important; display: flex !important;
} }
.actpager-r26:checked ~ .actpager-frame .actpager-row { .actpager-r26:checked ~ .actpager-frame .actpager-cell:nth-child(27) {
transform: translateX(-2600%) !important; display: flex !important;
} }
.actpager-r26:checked ~ .actpager-frame .actpager-a26 { .actpager-r26:checked ~ .actpager-frame .actpager-a26 {
display: flex !important; display: flex !important;
} }
.actpager-r27:checked ~ .actpager-frame .actpager-row { .actpager-r27:checked ~ .actpager-frame .actpager-cell:nth-child(28) {
transform: translateX(-2700%) !important; display: flex !important;
} }
.actpager-r27:checked ~ .actpager-frame .actpager-a27 { .actpager-r27:checked ~ .actpager-frame .actpager-a27 {
display: flex !important; display: flex !important;
} }
.actpager-r28:checked ~ .actpager-frame .actpager-row { .actpager-r28:checked ~ .actpager-frame .actpager-cell:nth-child(29) {
transform: translateX(-2800%) !important; display: flex !important;
} }
.actpager-r28:checked ~ .actpager-frame .actpager-a28 { .actpager-r28:checked ~ .actpager-frame .actpager-a28 {
display: flex !important; display: flex !important;
} }
.actpager-r29:checked ~ .actpager-frame .actpager-row { .actpager-r29:checked ~ .actpager-frame .actpager-cell:nth-child(30) {
transform: translateX(-2900%) !important; display: flex !important;
} }
.actpager-r29:checked ~ .actpager-frame .actpager-a29 { .actpager-r29:checked ~ .actpager-frame .actpager-a29 {
display: flex !important; 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;
}

12
nodejs-project/nodejs-project/src/views/activity_view.js
View file

@ -1721,16 +1721,16 @@ exports.activityView = (actions, filter, userId, q = '') => {
if (i === 0) attrs.checked = 'checked'; if (i === 0) attrs.checked = 'checked';
radios.push(input(attrs)); radios.push(input(attrs));
} }
const haxe = require('../server/node_modules/hyperaxe');
const arrowSets = []; const arrowSets = [];
for (let i = 0; i < totalPages; i++) { for (let i = 0; i < totalPages; i++) {
const prev = i > 0 const prev = i > 0
? require('../server/node_modules/hyperaxe').label({ for: `actp${i - 1}`, class: 'actpager-arrow' }, '‹') ? haxe.label({ for: `actp${i - 1}`, class: 'actpager-arrow' }, '‹')
: require('../server/node_modules/hyperaxe').span({ class: 'actpager-arrow disabled' }, '‹'); : haxe.span({ class: 'actpager-arrow disabled' }, '‹');
const next = i < totalPages - 1 const next = i < totalPages - 1
? require('../server/node_modules/hyperaxe').label({ for: `actp${i + 1}`, class: 'actpager-arrow' }, '›') ? haxe.label({ for: `actp${i + 1}`, class: 'actpager-arrow' }, '›')
: require('../server/node_modules/hyperaxe').span({ class: 'actpager-arrow disabled' }, '›'); : haxe.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, next));
arrowSets.push(div({ class: `actpager-arrows actpager-a${i}` }, prev, counter, next));
} }
const mobilePager = section({ class: 'actpager', style: 'display:none' }, const mobilePager = section({ class: 'actpager', style: 'display:none' },
...radios, ...radios,