diff --git a/nodejs-project/nodejs-project/src/client/assets/styles/mobile.css b/nodejs-project/nodejs-project/src/client/assets/styles/mobile.css index 33cbdefd..4a8867c2 100644 --- a/nodejs-project/nodejs-project/src/client/assets/styles/mobile.css +++ b/nodejs-project/nodejs-project/src/client/assets/styles/mobile.css @@ -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 { diff --git a/nodejs-project/nodejs-project/src/views/main_views.js b/nodejs-project/nodejs-project/src/views/main_views.js index f3d7e52a..dc8d8745 100644 --- a/nodejs-project/nodejs-project/src/views/main_views.js +++ b/nodejs-project/nodejs-project/src/views/main_views.js @@ -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(