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

[0.9.1] Mobile usability: filter hexagons by tab, collapse activity filters

Browse source 
- Personal/Community/All header tabs now filter the home hexagon nav (default
  All shows the 10; Personal/Community show their 5) via the CSS radio-hack.
  Removed the square-accordion sidebars (.sidebar-left/.sidebar-right) they
  replaced.
- Wrap the dense activity filter strip (RECENT/ALL/MINE/…) in a collapsible
  FILTER dropdown, hidden by default, keeping the hexagons visible above.
- Add the missing English i18n keys (menuCommunity, menuAll, filter, bb*).
This commit is contained in:
s1to 2026-08-04 11:07:48 +02:00
parent 871cccbe17
commit c088d176c1
4 changed files with 79 additions and 218 deletions
Download patch file Download diff file Expand all files Collapse all files

47
src/views/activity_view.js
View file

@ -1,4 +1,4 @@
const { div, h2, p, section, button, form, a, input, img, textarea, br, span, video: videoHyperaxe, audio: audioHyperaxe, table, tr, td, th, details, summary } = require("../server/node_modules/hyperaxe");
const { div, h2, p, section, button, form, a, input, label, img, textarea, br, span, video: videoHyperaxe, audio: audioHyperaxe, table, tr, td, th, details, summary } = require("../server/node_modules/hyperaxe");
const { template, i18n, userLink, userLinkLabel, renderSpreadButton, renderContentActions, renderHiveNav } = require('./main_views');
const opinionCategories = require('../backend/opinion_categories');
@ -1994,30 +1994,35 @@ exports.activityView = (actions, filter, userId, q = '', extras = {}) => {
p(desc)
),
renderHiveNav(),
div({ class: 'activity-filter-grid' },
...[
activityTypes.slice(0, 3),
activityTypes.slice(3, 8),
activityTypes.slice(8, 13),
activityTypes.slice(13, 19),
activityTypes.slice(19, 26),
activityTypes.slice(26)
].map(col =>
div({ class: 'activity-filter-col' },
col.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)
input({ type: 'checkbox', id: 'activity-filter-toggle', class: 'hive-filter-radio' }),
label({ for: 'activity-filter-toggle', class: 'activity-filter-btn' },
span(i18n.filter || 'Filter'), span({ class: 'activity-filter-caret' }, '▾')),
div({ class: 'activity-filter-panel' },
div({ class: 'activity-filter-grid' },
...[
activityTypes.slice(0, 3),
activityTypes.slice(3, 8),
activityTypes.slice(8, 13),
activityTypes.slice(13, 19),
activityTypes.slice(19, 26),
activityTypes.slice(26)
].map(col =>
div({ class: 'activity-filter-col' },
col.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)
)
)
)
)
)
),
sub
? div({ class: 'activity-sub-filter' },
sub.filters.map(f => a({ href: `${sub.url}?filter=${encodeURIComponent(f)}`, class: 'filter-btn' }, String(f).toUpperCase()))
)
: null
),
sub
? div({ class: 'activity-sub-filter' },
sub.filters.map(f => a({ href: `${sub.url}?filter=${encodeURIComponent(f)}`, class: 'filter-btn' }, String(f).toUpperCase()))
)
: null,
section({ class: 'feed-container' }, renderActionCards(filteredActions, userId, actions, spreadMap))
)
);