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

40
src/client/assets/themes/OasisMobile.css
View file

@ -83,14 +83,12 @@ body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
font-weight: bold; letter-spacing: 1px; cursor: pointer;
}
#nav-left-toggle:checked ~ .header .oasis-menu-btn[for="nav-left-toggle"] {
#hive-filter-all:checked ~ .header .oasis-menu-btn[for="hive-filter-all"],
#hive-filter-personal:checked ~ .header .oasis-menu-btn[for="hive-filter-personal"],
#hive-filter-community:checked ~ .header .oasis-menu-btn[for="hive-filter-community"] {
background: #FFA500; color: #121212; border-color: #FFA500;
}
#nav-right-toggle:checked ~ .header .oasis-menu-btn[for="nav-right-toggle"] {
background: #FFD700; color: #121212; border-color: #FFD700;
}
:root {
--space-1: 4px; --space-2: 8px; --space-3: 16px; --space-4: 24px; --space-5: 32px;
--fs-caption: 12px; --fs-body: 14px; --fs-body-lg: 16px; --fs-title: 20px;
@ -192,12 +190,34 @@ a, button, label, .tap, .oasis-menu-btn, .bb-item, .oasis-nav-header, .oasis-nav
}
body { overscroll-behavior: none; }
.main-content, .main-column, .header,
.sidebar-left, .sidebar-right { overflow: visible; }
.main-content, .main-column, .header { overflow: visible; }
.sidebar-left, .sidebar-right { display: none; }
#nav-left-toggle:checked ~ .main-content .sidebar-left { display: block; }
#nav-right-toggle:checked ~ .main-content .sidebar-right { display: block; }
/* === Usabilidad 0.9.1: los tabs All/Personal/Community filtran el hive + desplegable FILTER === */
.hive-filter-radio { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; margin: 0; }
/* filtro por mitades: Personal oculta la mitad community, Community oculta la personal (All = todo) */
#hive-filter-personal:checked ~ .main-content .hive-nav .hex-cat.hive-half-c { display: none; }
#hive-filter-community:checked ~ .main-content .hive-nav .hex-cat.hive-half-p { display: none; }
/* también el panel de la mitad oculta si venía abierto (#content sube la especificidad para ganar al reveal de 2 IDs, sin !important) */
#hive-filter-personal:checked ~ .main-content #content .hive-panel.hive-half-c { display: none; }
#hive-filter-community:checked ~ .main-content #content .hive-panel.hive-half-p { display: none; }
/* desplegable FILTER de la ristra de filtros de Activity (oculto por defecto) */
.activity-filter-btn {
display: flex; align-items: center; justify-content: center; gap: 8px;
width: 100%; min-height: 44px; margin: 4px 0 8px; padding: 10px 12px;
border: 1.5px solid #333; border-radius: 10px;
background: #121212; color: #ccc;
font-weight: bold; letter-spacing: 1px; text-transform: uppercase; cursor: pointer;
}
.activity-filter-caret { transition: transform 150ms ease; }
#activity-filter-toggle:checked ~ .activity-filter-btn { background: #FFA500; color: #121212; border-color: #FFA500; }
#activity-filter-toggle:checked ~ .activity-filter-btn .activity-filter-caret { transform: rotate(180deg); }
.activity-filter-panel { display: none; }
#activity-filter-toggle:checked ~ .activity-filter-panel { display: block; }
.activity-filter-panel .activity-filter-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 8px; }
.activity-filter-panel .activity-filter-col { display: contents; }
.activity-filter-panel form { margin: 0; }
.bb-manage { margin: 8px 0 16px; }
.bb-manage h3, .bb-manage-add h3 {