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

fix(mobile): activity-filter-grid scrollable horizontal con flechas

Browse source 
- mobile.css: añadidas reglas para .activity-filter-grid en móvil
  (display:contents para activity-filter-col, flex row scrollable)
- mobile-ui.js: extendido selector para procesar también
  .activity-filter-grid con flechas y expand/collapse

Antes los 6 columnas de filtros se renderizaban como barras
naranjas verticales. Ahora se aplanan a una sola fila con
scroll horizontal y flechas < > para navegar.

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

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

@ -800,3 +800,57 @@ pre, code {
cursor: pointer !important;
letter-spacing: 0.02em !important;
}
/* ============================================================
ACTIVITY FILTER GRID (activity_view.js)
En móvil: aplanar las 6 columnas a una fila scrollable
============================================================ */
.activity-filter-grid {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
overflow-y: hidden !important;
-webkit-overflow-scrolling: touch !important;
gap: 6px !important;
padding-bottom: 4px !important;
scrollbar-width: none !important;
width: 100% !important;
margin-top: 0 !important;
}
.activity-filter-grid::-webkit-scrollbar { display: none !important; }
.activity-filter-grid .activity-filter-col {
display: contents !important;
}
.activity-filter-grid form {
flex-shrink: 0 !important;
width: auto !important;
margin: 0 !important;
}
.activity-filter-grid .filter-btn {
width: auto !important;
white-space: nowrap !important;
padding: 8px 14px !important;
min-height: 40px !important;
font-size: 0.85rem !important;
}
/* Wrapper aplica también al activity-filter-grid */
.mode-buttons-wrap .activity-filter-grid {
flex: 1 !important;
overflow-x: auto !important;
flex-wrap: nowrap !important;
scrollbar-width: none !important;
scroll-behavior: smooth !important;
padding-bottom: 4px !important;
}
.mode-buttons-wrap .activity-filter-grid::-webkit-scrollbar {
display: none !important;
}
.mode-buttons-wrap.mode-buttons-expanded .activity-filter-grid {
overflow-x: visible !important;
flex-wrap: wrap !important;
}

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

@ -2,7 +2,7 @@
function setup() {
if (window.innerWidth > 768) return;
document.querySelectorAll('.mode-buttons:not([data-ms])').forEach(function (cnt) {
document.querySelectorAll('.mode-buttons:not([data-ms]), .activity-filter-grid:not([data-ms])').forEach(function (cnt) {
cnt.dataset.ms = '1';
var items = cnt.querySelectorAll('form, button.filter-btn, a.filter-btn');