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

fix: hamburger panel groups collapsed by default, styled as rounded buttons

Browse source 
- Remove force-expand CSS: groups now start collapsed (tap to open)
- .oasis-nav-header in panel: border-radius 12px, larger padding (11px 14px),
  bold font, no uppercase — looks like a proper tappable button
- Arrow rotates on expand (CSS accordion native behavior, no JS)
- Nav items indented with left border accent, 9px padding, 8px radius
- OasisMobile.css: #252500 background + FFD700 text for group buttons
- Separator line between sidebar-left and sidebar-right sections in panel
- Economy group absent: all economy modules (banking/market/jobs) are
  disabled in current config — this is expected behavior by design

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
SITO 2026-05-01 02:29:02 +02:00
parent 17de5109d7
commit 16f9189e61
2 changed files with 83 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -254,20 +254,79 @@ a.logo-icon img.logo-icon {
flex-shrink: 0 !important;
}
.sidebar-panel nav ul {
.sidebar-panel nav > ul {
display: flex !important;
flex-direction: column !important;
gap: 4px !important;
padding: 0 !important;
margin: 0 !important;
list-style: none !important;
}
/* Forzar grupos de nav abiertos cuando el panel está visible */
#mobile-menu-toggle:checked ~ .main-content .sidebar-panel .oasis-nav-list {
max-height: 2000px !important;
overflow: visible !important;
/* Grupos del panel: botón redondeado tipo píldora */
.sidebar-panel .oasis-nav-group {
margin-bottom: 2px !important;
}
#mobile-menu-toggle:checked ~ .main-content .sidebar-panel .oasis-nav-arrow {
.sidebar-panel .oasis-nav-header {
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
width: 100% !important;
padding: 11px 14px !important;
border-radius: 12px !important;
font-size: 0.92rem !important;
font-weight: 700 !important;
letter-spacing: 0.03em !important;
text-transform: none !important; /* sin mayúsculas forzadas en móvil */
cursor: pointer !important;
user-select: none !important;
box-sizing: border-box !important;
margin: 0 !important;
border-width: 1px !important;
gap: 6px !important;
}
.sidebar-panel .oasis-nav-arrow {
margin-left: auto !important;
font-size: 0.85rem !important;
transition: transform 0.2s ease !important;
}
/* Cuando el grupo está abierto, rotar la flecha */
.sidebar-panel .oasis-nav-toggle:checked + .oasis-nav-header .oasis-nav-arrow {
transform: rotate(180deg) !important;
}
/* Lista de items dentro del grupo */
.sidebar-panel .oasis-nav-list {
margin: 2px 0 4px 8px !important;
border-left: 2px solid rgba(255,180,0,0.3) !important;
padding-left: 8px !important;
}
.sidebar-panel .oasis-nav-list li a {
padding: 9px 12px !important;
font-size: 0.88rem !important;
display: flex !important;
align-items: center !important;
gap: 6px !important;
border-radius: 8px !important;
opacity: 0.9 !important;
}
.sidebar-panel .oasis-nav-list li a:active {
opacity: 1 !important;
background: rgba(255,180,0,0.1) !important;
}
/* Separador visual entre sidebar-left y sidebar-right en el panel */
.sidebar-panel .sidebar-right {
border-top: 1px solid #444 !important;
margin-top: 8px !important;
padding-top: 8px !important;
}
/* ---- Tipografía ---- */
h1 { font-size: 1.25em !important; }
h2 { font-size: 1.1em !important; }

18
nodejs-project/nodejs-project/src/client/assets/themes/OasisMobile.css
View file

@ -340,6 +340,24 @@ a.user-link:focus {
border-color: #FFD700;
}
/* Botones de grupo en el panel hamburger */
.sidebar-panel .oasis-nav-header {
background-color: #252500;
color: #FFD700;
border-color: rgba(255,180,0,0.35);
}
.sidebar-panel .oasis-nav-header:active {
background-color: #333300;
}
/* Links dentro del grupo */
.sidebar-panel .oasis-nav-list li a {
color: #FFD700;
}
.sidebar-panel .oasis-nav-list li a:hover {
background-color: rgba(255,215,0,0.08);
}
.qr-share-btn {
background-color: #2a2a00;
color: #FFD700;