From 6f813b22309fb4ac1e7a02c8363ba16ba9ed3264 Mon Sep 17 00:00:00 2001 From: SITO Date: Fri, 1 May 2026 02:22:07 +0200 Subject: [PATCH] fix: clean one-row mobile header, full nav panel with quick links MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Header mobile: single row — logo (flex:1) + hamburger only. Top-bar nav (inbox/PM/publish) and top-bar-right (tags/search) hidden. - Add panel-quicklinks section at top of hamburger panel: Inbox, PM, Publicar, Búsqueda as pill buttons (accessible from panel, not header). - sidebar-left and sidebar-right inside panel: no background/border, flat layout with only a separator line between sections. - panel-quicklinks hidden on desktop (style.css), visible only in panel. - OasisMobile.css: panel-quicklink theme colors added. Co-Authored-By: Claude Sonnet 4.6 --- .../src/client/assets/styles/mobile.css | 122 ++++++++---------- .../src/client/assets/styles/style.css | 3 + .../src/client/assets/themes/OasisMobile.css | 10 ++ .../nodejs-project/src/views/main_views.js | 13 ++ 4 files changed, 79 insertions(+), 69 deletions(-) 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 ef360461..33cbdefd 100644 --- a/nodejs-project/nodejs-project/src/client/assets/styles/mobile.css +++ b/nodejs-project/nodejs-project/src/client/assets/styles/mobile.css @@ -55,102 +55,54 @@ pre, code { margin: 6px auto; } -/* ---- Header ---- */ +/* ---- Header: una sola fila (logo izquierda, hamburger derecha) ---- */ .header { display: flex !important; flex-direction: row !important; - flex-wrap: wrap !important; + flex-wrap: nowrap !important; align-items: center !important; width: 100% !important; - padding: 2px 4px !important; - gap: 0 !important; + padding: 4px 8px !important; + gap: 4px !important; + min-height: 48px !important; } -/* top-bar-left ocupa toda la fila y envuelve internamente */ .top-bar-left { display: flex !important; flex-direction: row !important; align-items: center !important; - flex: 0 0 100% !important; /* fila completa en el header */ - flex-wrap: wrap !important; - gap: 2px !important; - padding: 0 !important; + flex: 1 !important; + flex-wrap: nowrap !important; + gap: 4px !important; + min-width: 0 !important; } -/* Logo + hamburger en la misma fila: logo crece, hamburger se queda a la derecha */ +/* Logo: crece para llenar el espacio sobrante */ a.logo-icon { - flex: 1 !important; /* crece para llenar espacio, NO 100% */ + flex: 1 !important; display: flex !important; align-items: center !important; -} - -/* Nav (inbox, PM, publish): fila propia debajo del logo+hamburger */ -.top-bar-left nav { - flex: 0 0 100% !important; - overflow-x: auto !important; - scrollbar-width: none !important; -} -.top-bar-left nav::-webkit-scrollbar { display: none !important; } - -/* top-bar-right (tags, search): fila completa debajo */ -.top-bar-right { - display: flex !important; - flex-direction: row !important; - align-items: center !important; - flex: 0 0 100% !important; - flex-wrap: nowrap !important; - gap: 2px !important; - padding: 0 !important; - overflow-x: auto !important; - scrollbar-width: none !important; -} -.top-bar-right::-webkit-scrollbar { display: none !important; } - -.top-bar-left nav, -.top-bar-right nav { - display: flex !important; -} - -.top-bar-left nav ul, -.top-bar-right nav ul { - display: flex !important; - flex-direction: row !important; - flex-wrap: nowrap !important; - gap: 2px !important; - padding: 0 !important; - margin: 0 !important; - list-style: none !important; + min-width: 0 !important; } a.logo-icon img.logo-icon { width: 38px !important; height: 38px !important; display: block !important; - margin-right: 4px !important; + flex-shrink: 0 !important; } -.header nav ul li a, -.top-bar-left nav ul li a, -.top-bar-right nav ul li a { - padding: 3px 4px !important; - font-size: 0.72rem !important; - min-height: auto !important; - border: none !important; - white-space: nowrap !important; - display: inline-block !important; - line-height: 1.2 !important; -} - -/* Ocultar el emoji en los links del header para ahorrar espacio */ -.header nav ul li a .emoji { - font-size: 0.85em !important; - margin-right: 1px !important; +/* Ocultar nav del header en móvil — están en el panel hamburger */ +.top-bar-left nav, +.top-bar-right { + display: none !important; } .oasis-nav-header { font-size: 0.85rem !important; } .oasis-nav-list li a { font-size: 0.9rem !important; - padding: 8px 12px !important; + padding: 10px 12px !important; + display: block !important; } /* ============================================================ @@ -214,10 +166,12 @@ a.logo-icon img.logo-icon { gap: 0 !important; } -/* sidebar-panel oculto por defecto; sidebar-left/right visibles DENTRO del panel */ +/* sidebar-panel oculto por defecto */ .sidebar-panel { display: none !important; } + +/* Dentro del panel: sidebars como bloques planos sin bordes/fondos propios */ .sidebar-panel .sidebar-left, .sidebar-panel .sidebar-right { display: block !important; @@ -225,10 +179,16 @@ a.logo-icon img.logo-icon { min-width: unset !important; max-width: unset !important; width: 100% !important; + background: none !important; border: none !important; - border-bottom: 1px solid #444 !important; + padding: 0 !important; box-sizing: border-box !important; } +.sidebar-panel .sidebar-right { + border-top: 1px solid #444 !important; + margin-top: 4px !important; + padding-top: 4px !important; +} .main-column { width: 100% !important; @@ -266,6 +226,30 @@ a.logo-icon img.logo-icon { user-select: none !important; } +/* Quick links (inbox, PM, publicar, search) en el panel móvil */ +.panel-quicklinks { + display: flex !important; + flex-direction: row !important; + flex-wrap: wrap !important; + gap: 6px !important; + padding: 10px 0 12px 0 !important; + border-bottom: 1px solid #444 !important; + margin-bottom: 8px !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; + font-weight: 600 !important; + text-decoration: none !important; + border: 1px solid #555 !important; + white-space: nowrap !important; + min-height: 36px !important; +} + .sidebar-panel nav ul { display: flex !important; flex-direction: column !important; diff --git a/nodejs-project/nodejs-project/src/client/assets/styles/style.css b/nodejs-project/nodejs-project/src/client/assets/styles/style.css index a81e243e..baba6b2d 100644 --- a/nodejs-project/nodejs-project/src/client/assets/styles/style.css +++ b/nodejs-project/nodejs-project/src/client/assets/styles/style.css @@ -359,6 +359,9 @@ nav ul li a:hover { .main-column { order: 2; } .sidebar-right { order: 3; } +/* Quick links only shown in mobile panel */ +.panel-quicklinks { display: none; } + .sidebar-left, .sidebar-right { background-color: #222; diff --git a/nodejs-project/nodejs-project/src/client/assets/themes/OasisMobile.css b/nodejs-project/nodejs-project/src/client/assets/themes/OasisMobile.css index a10cf450..be964264 100644 --- a/nodejs-project/nodejs-project/src/client/assets/themes/OasisMobile.css +++ b/nodejs-project/nodejs-project/src/client/assets/themes/OasisMobile.css @@ -330,6 +330,16 @@ a.user-link:focus { fill: #FFD700; } +.panel-quicklink { + background-color: #2a2a2a; + color: #FFD700; + border-color: #444; +} +.panel-quicklink:hover { + background-color: #3a3a00; + border-color: #FFD700; +} + .qr-share-btn { background-color: #2a2a00; color: #FFD700; diff --git a/nodejs-project/nodejs-project/src/views/main_views.js b/nodejs-project/nodejs-project/src/views/main_views.js index 42851971..f3d7e52a 100644 --- a/nodejs-project/nodejs-project/src/views/main_views.js +++ b/nodejs-project/nodejs-project/src/views/main_views.js @@ -758,6 +758,19 @@ 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(