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

feat: move quick links to header second row (inbox/PM/publish/search)

Browse source 
- panel-quicklinks div moved from sidebar-panel into the header,
  after top-bar-right, so it always visible on mobile without opening menu
- Displays as a horizontal scrollable pill-button strip below logo+hamburger
- header: flex-wrap:wrap so second row renders cleanly
- top-bar-left: flex:1 nowrap for logo+hamburger first row
- panel-quicklinks: flex:0 0 100% forces it to its own row, overflow-x:auto

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

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

@ -55,16 +55,15 @@ pre, code {
margin: 6px auto;
}
/* ---- Header: una sola fila (logo izquierda, hamburger derecha) ---- */
/* ---- Header: fila 1 (logo + ☰), fila 2 (quick links) ---- */
.header {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
flex-wrap: wrap !important; /* permite la segunda fila */
align-items: center !important;
width: 100% !important;
padding: 4px 8px !important;
gap: 4px !important;
min-height: 48px !important;
padding: 4px 8px 0 8px !important;
gap: 0 !important;
}
.top-bar-left {
@ -75,6 +74,7 @@ pre, code {
flex-wrap: nowrap !important;
gap: 4px !important;
min-width: 0 !important;
padding-bottom: 4px !important;
}
/* Logo: crece para llenar el espacio sobrante */
@ -226,28 +226,32 @@ a.logo-icon img.logo-icon {
user-select: none !important;
}
/* Quick links (inbox, PM, publicar, search) en el panel móvil */
/* Quick links: segunda fila del header (inbox, PM, publicar, buscar) */
.panel-quicklinks {
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
flex-wrap: nowrap !important;
flex: 0 0 100% !important; /* ocupa su propia fila en el header */
overflow-x: auto !important;
scrollbar-width: none !important;
gap: 6px !important;
padding: 10px 0 12px 0 !important;
border-bottom: 1px solid #444 !important;
margin-bottom: 8px !important;
padding: 6px 0 6px 0 !important;
align-items: center !important;
}
.panel-quicklinks::-webkit-scrollbar { display: none !important; }
.panel-quicklink {
display: inline-flex !important;
align-items: center !important;
gap: 4px !important;
padding: 8px 12px !important;
border-radius: 8px !important;
font-size: 0.85rem !important;
padding: 7px 12px !important;
border-radius: 20px !important; /* píldoras redondeadas */
font-size: 0.8rem !important;
font-weight: 600 !important;
text-decoration: none !important;
border: 1px solid #555 !important;
white-space: nowrap !important;
min-height: 36px !important;
flex-shrink: 0 !important;
}
.sidebar-panel nav ul {

26
nodejs-project/nodejs-project/src/views/main_views.js
View file

@ -737,6 +737,19 @@ const template = (titlePrefix, ...elements) => {
navLink({ href: "/search", emoji: "ꔅ", text: i18n.searchTitle })
)
)
),
div(
{ class: 'panel-quicklinks' },
(() => {
const inboxCount = sharedState.getInboxCount();
const badge = inboxCount > 0 ? span({ class: 'inbox-badge' }, String(inboxCount)) : '';
return a({ href: '/inbox', class: 'panel-quicklink' },
span({ class: 'emoji' }, '☂'), ' ', i18n.inbox, badge
);
})(),
a({ href: '/pm', class: 'panel-quicklink' }, span({ class: 'emoji' }, 'ꕕ'), ' ', i18n.privateMessage),
a({ href: '/publish', class: 'panel-quicklink' }, span({ class: 'emoji' }, '❂'), ' ', i18n.publish),
a({ href: '/search', class: 'panel-quicklink' }, span({ class: 'emoji' }, 'ꔅ'), ' ', i18n.searchTitle)
)
),
(() => {
@ -758,19 +771,6 @@ const template = (titlePrefix, ...elements) => {
label({ for: 'mobile-menu-toggle', class: 'mobile-menu-close' },
span({ class: 'menu-icon-close' }, '✕'), ' Cerrar'
),
div(
{ class: 'panel-quicklinks' },
(() => {
const inboxCount = sharedState.getInboxCount();
const badge = inboxCount > 0 ? span({ class: 'inbox-badge' }, String(inboxCount)) : '';
return a({ href: '/inbox', class: 'panel-quicklink' },
span({ class: 'emoji' }, '☂'), ' ', i18n.inbox, badge
);
})(),
a({ href: '/pm', class: 'panel-quicklink' }, span({ class: 'emoji' }, 'ꕕ'), ' ', i18n.privateMessage),
a({ href: '/publish', class: 'panel-quicklink' }, span({ class: 'emoji' }, '❂'), ' ', i18n.publish),
a({ href: '/search', class: 'panel-quicklink' }, span({ class: 'emoji' }, 'ꔅ'), ' ', i18n.searchTitle)
),
div(
{ class: "sidebar-left" },
nav(