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

UX/UI redesign for the mobile WebView

Browse source 
- Compact top bar (logo, OASIS, user avatar with default fallback).
- Fixed bottom navigation (Search, Inbox, Write, Activity + Peers/Invites) with active state.
- Removed duplicated header nav buttons on mobile.
- Personal/Community submenus: single-open accordion.
- Activity filters grouped into quick modes + collapsible thematic groups.
- Private messages rendered as chat bubbles on mobile.
- Text fixes, full-width stacked tables, touch feedback; Activity group labels in 11 locales.
Mobile-scoped (mobile.css + views); desktop unaffected.
This commit is contained in:
s1to 2026-07-09 09:56:30 +02:00
parent e563b86ede
commit ea5f5cbcc2
16 changed files with 847 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

56
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, img, textarea, br, span, video: videoHyperaxe, audio: audioHyperaxe, table, tr, td, th, details, summary, ul, li, label } = require("../server/node_modules/hyperaxe");
const { template, i18n, userLink, userLinkLabel, renderSpreadButton, renderContentActions } = require('./main_views');
const opinionCategories = require('../backend/opinion_categories');
@ -1841,25 +1841,43 @@ exports.activityView = (actions, filter, userId, q = '', extras = {}) => {
h2(i18n.activityList),
p(desc)
),
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)
)
)
(() => {
const labelOf = {};
activityTypes.forEach(t => { labelOf[t.type] = t.label; });
const mkBtn = (type) => form({ method: 'GET', action: '/activity' },
input({ type: 'hidden', name: 'filter', value: type }),
button({ type: 'submit', class: filter === type ? 'filter-btn active' : 'filter-btn' }, labelOf[type] || type)
);
const QUICK = ['recent', 'all', 'mine'];
const GROUPS = [
{ id: 'act-comunidad', emoji: '👥', title: i18n.activityGroupCommunity || 'Community & Governance', types: ['inhabitants', 'tribe', 'larp', 'parliament', 'courts', 'votes', 'report'] },
{ id: 'act-organizacion', emoji: '🗓', title: i18n.activityGroupOrg || 'Organization', types: ['event', 'calendar', 'task', 'project', 'job'] },
{ id: 'act-comunicacion', emoji: '💬', title: i18n.activityGroupComm || 'Communication', types: ['post', 'feed', 'chat', 'pad', 'forum'] },
{ id: 'act-economia', emoji: '💰', title: i18n.activityGroupEconomy || 'Economy', types: ['banking', 'market', 'shop', 'transfer'] },
{ id: 'act-media', emoji: '🎬', title: i18n.activityGroupMedia || 'Content & Media', types: ['audio', 'bookmark', 'document', 'image', 'torrent', 'video'] },
{ id: 'act-otros', emoji: '⋯', title: i18n.activityGroupOther || 'Others', types: ['map', 'curriculum'] },
];
return div({ class: 'activity-filter-acc' },
div({ class: 'activity-quick-modes' }, QUICK.map(mkBtn)),
ul({ class: 'oasis-nav-groups activity-groups' },
GROUPS.map(g => {
const openByFilter = g.types.includes(filter);
return li({ class: 'oasis-nav-group' },
input({ type: 'checkbox', id: `oasis-nav-group-${g.id}`, class: 'oasis-nav-toggle', ...(openByFilter ? { checked: true } : {}) }),
label({ for: `oasis-nav-group-${g.id}`, class: 'oasis-nav-header' },
span({ class: 'emoji' }, g.emoji),
span({ class: 'nav-text' }, g.title),
span({ class: 'act-count' }, String(g.types.length)),
span({ class: 'oasis-nav-arrow' }, '▾')
),
ul({ class: 'oasis-nav-list' },
g.types.map(t => li(mkBtn(t)))
)
);
})
)
)
),
);
})(),
sub
? div({ class: 'activity-sub-filter' },
sub.filters.map(f => a({ href: `${sub.url}?filter=${encodeURIComponent(f)}`, class: 'filter-btn' }, String(f).toUpperCase()))