From 2b8b0cd5e958c3575d0878314a949a7417894a21 Mon Sep 17 00:00:00 2001 From: nessi Date: Sat, 15 Aug 2026 12:35:13 +0200 Subject: [PATCH] feat: move navigation tabs from main content to header with responsive mobile layout and icon-only display on small screens Add header-nav class to mainNav and move it before headerActions in header. Add dynamic stylesheet hiding .head-title/.head-sub, styling .header-nav with flex layout, 4px gap, 22px left margin, transparent background, and 8px/11px button padding. Add responsive breakpoints at 850px (scrollable nav with hidden scrollbar, max-width calc(100vw - 250px)) and 560px (icon-only buttons --- templates/index.html | 1 + 1 file changed, 1 insertion(+) diff --git a/templates/index.html b/templates/index.html index 9d5543a..968d81d 100644 --- a/templates/index.html +++ b/templates/index.html @@ -162,6 +162,7 @@ function loadPreferences(){const audioPreference=localStorage.getItem('preferred translateLayout(currentUiLanguage);loadPreferences(); const serviceIconSvg={radarr:'',sonarr:'',sabnzbd:'',jellyfin:'',seerr:'',prowlarr:'',easynews:'',qbittorrent:'',bazarr:'',lingarr:'',libretranslate:'',sonarr_prowlarr_proxy:'',radarr_prowlarr_proxy:'',dashboard:''};function upgradeServiceIcons(){document.querySelectorAll('.service-logo[class*="service-icon-"]').forEach(icon=>{const key=[...icon.classList].find(name=>name.startsWith('service-icon-'))?.slice(13);if(serviceIconSvg[key]&&icon.dataset.iconKey!==key){icon.innerHTML=serviceIconSvg[key];icon.dataset.iconKey=key}})}const serviceIconObserver=new MutationObserver(upgradeServiceIcons);const serviceIconList=document.querySelector('.service-list');if(serviceIconList)serviceIconObserver.observe(serviceIconList,{childList:true,subtree:true});upgradeServiceIcons(); document.querySelector('#languageToggle').addEventListener('click',()=>translateLayout(currentUiLanguage==='de'?'en':'de')); +const header=document.querySelector('header'),headerActions=document.querySelector('.actions'),mainNav=document.querySelector('.nav');if(header&&headerActions&&mainNav){mainNav.classList.add('header-nav');header.insertBefore(mainNav,headerActions);const headerStyle=document.createElement('style');headerStyle.textContent='.head-title,.head-sub{display:none}.header-nav{display:flex;align-items:center;gap:4px;margin:0 0 0 22px!important;padding:3px!important;border:0!important;background:transparent!important;box-shadow:none!important;overflow:visible}.header-nav button{padding:8px 11px;font-size:12px}.header-nav .nav-count{font-size:10px}header{gap:0}.brand{flex:0 0 auto}@media(max-width:850px){.header-nav{margin-left:10px!important;overflow-x:auto;max-width:calc(100vw - 250px);scrollbar-width:none}.header-nav::-webkit-scrollbar{display:none}.header-nav button{white-space:nowrap;padding:7px 9px;font-size:11px}}@media(max-width:560px){.header-nav{max-width:calc(100vw - 135px)}.header-nav button{font-size:0;padding:8px}.header-nav button[data-view="dashboard"]{font-size:0}.header-nav button[data-view="dashboard"]::before{content:"▦";font-size:16px}.header-nav button[data-view="radarr"]::before{content:"R";font-size:14px;font-weight:800}.header-nav button[data-view="sonarr"]::before{content:"S";font-size:14px;font-weight:800}.header-nav button[data-view="missing"]::before{content:"⚠";font-size:14px}.header-nav button[data-view="downloads"]::before{content:"↓";font-size:16px}}';document.head.appendChild(headerStyle)} const officialServiceIcons={radarr:'https://cdn.simpleicons.org/radarr/CC7B19',sonarr:'https://cdn.simpleicons.org/sonarr/35C5F4',sabnzbd:'https://cdn.simpleicons.org/sabnzbd/F5A623',jellyfin:'https://cdn.simpleicons.org/jellyfin/AA5CC3',seerr:'https://cdn.simpleicons.org/seerr/73CFF8',prowlarr:'https://cdn.simpleicons.org/prowlarr/5B6BBF',easynews:'https://cdn.simpleicons.org/easynews/F28C28',qbittorrent:'https://cdn.simpleicons.org/qbittorrent/2F81C7',bazarr:'https://cdn.simpleicons.org/bazarr/44A5B5',lingarr:'https://cdn.simpleicons.org/lingarr/8B5CF6',libretranslate:'https://cdn.simpleicons.org/libretranslate/22C55E'};Object.entries(officialServiceIcons).forEach(([key,url])=>{serviceIconSvg[key]=``});upgradeServiceIcons(); document.querySelectorAll('.service-logo svg').forEach(svg=>{svg.style.width='19px';svg.style.height='19px';svg.style.fill='none';svg.style.stroke='currentColor';svg.style.strokeWidth='1.8';svg.style.strokeLinecap='round';svg.style.strokeLinejoin='round'}); document.querySelectorAll('.service-logo img').forEach(img=>{img.style.width='20px';img.style.height='20px';img.style.objectFit='contain'});