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

fix: flatten filter buttons layout for mobile in activity, stats and trending

Browse source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
SITO 2026-05-01 01:43:26 +02:00
parent 07403d18c4
commit 9ee8fd60cd
13 changed files with 1707 additions and 65 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -469,11 +469,17 @@ footer div {
gap: 8px !important;
}
/* ---- Overrides de grid inline ---- */
/* ---- Trending container: columna en movil ---- */
.trending-container {
grid-template-columns: 1fr !important;
}
/* ---- Overrides de grid inline (fallback para estilos inline que queden) ---- */
[style*="grid-template-columns: repeat(6"] { grid-template-columns: 1fr !important; }
[style*="grid-template-columns: repeat(3"] { grid-template-columns: 1fr !important; }
[style*="grid-template-columns:repeat(6"] { grid-template-columns: 1fr !important; }
[style*="grid-template-columns:repeat(3"] { grid-template-columns: 1fr !important; }
[style*="grid-template-columns: repeat(auto-fit"] { grid-template-columns: 1fr !important; }
[style*="grid-template-columns:repeat(auto-fit"] { grid-template-columns: 1fr !important; }
[style*="grid-template-columns:repeat(auto-fill"] { grid-template-columns: 1fr !important; }
[style*="width:50%"] { width: 100% !important; }

7
nodejs-project/nodejs-project/src/client/assets/styles/style.css
View file

@ -4308,3 +4308,10 @@ button, input[type="submit"], input[type="button"], .filter-btn {
text-overflow: ellipsis;
white-space: nowrap;
}
/* trending-container: grid responsive en desktop, columna en movil */
.trending-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 20px;
}

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

@ -1541,55 +1541,11 @@ exports.activityView = (actions, filter, userId, q = '') => {
h2(i18n.activityList),
p(desc)
),
form({ method: 'GET', action: '/activity' },
div({ class: 'mode-buttons', style: 'display:grid; grid-template-columns: repeat(6, 1fr); gap: 16px; margin-bottom: 24px;' },
div({ style: 'display: flex; flex-direction: column; gap: 8px;' },
activityTypes.slice(0, 3).map(({ type, label }) =>
form({ method: 'GET', action: '/activity' },
input({ type: 'hidden', name: 'filter', value: type }),
button({ type: 'submit', class: filter === type ? 'filter-btn active' : 'filter-btn' }, label)
)
)
),
div({ style: 'display: flex; flex-direction: column; gap: 8px;' },
activityTypes.slice(3, 8).map(({ type, label }) =>
form({ method: 'GET', action: '/activity' },
input({ type: 'hidden', name: 'filter', value: type }),
button({ type: 'submit', class: filter === type ? 'filter-btn active' : 'filter-btn' }, label)
)
)
),
div({ style: 'display: flex; flex-direction: column; gap: 8px;' },
activityTypes.slice(8, 12).map(({ type, label }) =>
form({ method: 'GET', action: '/activity' },
input({ type: 'hidden', name: 'filter', value: type }),
button({ type: 'submit', class: filter === type ? 'filter-btn active' : 'filter-btn' }, label)
)
)
),
div({ style: 'display: flex; flex-direction: column; gap: 8px;' },
activityTypes.slice(12, 17).map(({ type, label }) =>
form({ method: 'GET', action: '/activity' },
input({ type: 'hidden', name: 'filter', value: type }),
button({ type: 'submit', class: filter === type ? 'filter-btn active' : 'filter-btn' }, label)
)
)
),
div({ style: 'display: flex; flex-direction: column; gap: 8px;' },
activityTypes.slice(17, 22).map(({ type, label }) =>
form({ method: 'GET', action: '/activity' },
input({ type: 'hidden', name: 'filter', value: type }),
button({ type: 'submit', class: filter === type ? 'filter-btn active' : 'filter-btn' }, label)
)
)
),
div({ style: 'display: flex; flex-direction: column; gap: 8px;' },
activityTypes.slice(22, 27).map(({ type, label }) =>
form({ method: 'GET', action: '/activity' },
input({ type: 'hidden', name: 'filter', value: type }),
button({ type: 'submit', class: filter === type ? 'filter-btn active' : 'filter-btn' }, label)
)
)
div({ class: 'mode-buttons' },
...activityTypes.map(({ type, label }) =>
form({ method: 'GET', action: '/activity' },
input({ type: 'hidden', name: 'filter', value: type }),
button({ type: 'submit', class: filter === type ? 'filter-btn active' : 'filter-btn' }, label)
)
)
),

2
nodejs-project/nodejs-project/src/views/stats_view.js
View file

@ -77,7 +77,7 @@ exports.statsView = (stats, filter) => {
h2(title),
p(description)
),
div({ class: 'mode-buttons', style: 'display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:16px;margin-bottom:24px;' },
div({ class: 'mode-buttons' },
modes.map(m =>
form({ method: 'GET', action: '/stats' },
input({ type: 'hidden', name: 'filter', value: m }),

22
nodejs-project/nodejs-project/src/views/trending_view.js
View file

@ -261,26 +261,20 @@ exports.trendingView = (items, filter, categories = opinionCategories) => {
title,
section(
header,
div(
{ class: 'mode-buttons', style: 'display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:16px;margin-bottom:24px;' },
generateFilterButtons(baseFilters, filter, '/trending'),
...contentFilters.map(row =>
div({ style: 'display:flex;flex-direction:column;gap:8px;' },
row.map(mode =>
form({ method: 'GET', action: '/trending' },
input({ type: 'hidden', name: 'filter', value: mode }),
button(
{ type: 'submit', class: filter === mode ? 'filter-btn active' : 'filter-btn' },
i18n[mode + 'Button'] || mode
)
)
div({ class: 'mode-buttons' },
...[...baseFilters, ...contentFilters.flat()].map(mode =>
form({ method: 'GET', action: '/trending' },
input({ type: 'hidden', name: 'filter', value: mode }),
button(
{ type: 'submit', class: filter === mode ? 'filter-btn active' : 'filter-btn' },
i18n[mode + 'Button'] || mode
)
)
)
),
section(
cards.length
? div({ class: 'trending-container', style: 'display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;' }, ...cards)
? div({ class: 'trending-container' }, ...cards)
: div({ class: 'no-results' }, p(i18n.trendingNoContentMessage))
)
)