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

fix(mobile): mostrar flechas correctamente y scroll de 2 botones

Browse source 
- mobile.css: width:auto + min-width:0 en grid dentro del wrap para
  que las flechas no queden empujadas fuera del viewport
- mobile-ui.js: el step de scroll ahora se calcula dinámicamente
  como ~2 botones en lugar de 180px fijos

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
SITO 2026-05-09 00:21:55 +02:00
parent e6601b19a9
commit 25283c9b1a
2 changed files with 17 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -840,7 +840,9 @@ pre, code {
/* Wrapper aplica también al activity-filter-grid */
.mode-buttons-wrap .activity-filter-grid {
flex: 1 !important;
flex: 1 1 0 !important;
width: auto !important;
min-width: 0 !important;
overflow-x: auto !important;
flex-wrap: nowrap !important;
scrollbar-width: none !important;
@ -854,3 +856,9 @@ pre, code {
overflow-x: visible !important;
flex-wrap: wrap !important;
}
/* Asegurar que .mode-buttons dentro del wrap también suelte el width 100% */
.mode-buttons-wrap .mode-buttons {
width: auto !important;
min-width: 0 !important;
}

10
nodejs-project/nodejs-project/src/client/public/js/mobile-ui.js
View file

@ -30,13 +30,19 @@
wrap.insertBefore(la, cnt);
wrap.appendChild(ra);
function getStep() {
var btn = cnt.querySelector('button.filter-btn, a.filter-btn, form');
var w = btn ? btn.getBoundingClientRect().width : 90;
if (!w || w < 40) w = 90;
return Math.round((w + 6) * 2);
}
la.addEventListener('click', function (e) {
e.preventDefault();
cnt.scrollBy({ left: -180, behavior: 'smooth' });
cnt.scrollBy({ left: -getStep(), behavior: 'smooth' });
});
ra.addEventListener('click', function (e) {
e.preventDefault();
cnt.scrollBy({ left: 180, behavior: 'smooth' });
cnt.scrollBy({ left: getStep(), behavior: 'smooth' });
});
function syncArrows() {