nessi/language-dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: replace mobile navigation drawer implementation with cloned drawer approach and enhanced styling

Browse Source 
Replace mobile-nav-backdrop/mobile-nav-close drawer with mobile-drawer-clone/mobile-drawer-shade implementation using cloned navigation content. Add DOMContentLoaded script to create aside.mobile-drawer-clone with cloned .nav innerHTML, prepended close button (×), and mobile-drawer-shade backdrop. Add @media(max-width:700px) styles for drawer with fixed positioning, min(84vw,320px) width, translate
This commit is contained in:
nessi
2026-08-16 13:00:05 +02:00
parent e84bc9c695
commit c2df06dda8
1 changed files with 2 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/index.html
+2
View File
@@ -1,4 +1,6 @@
<!doctype html>
<script>document.addEventListener('DOMContentLoaded',()=>{const source=document.querySelector('.nav'),brand=document.querySelector('.brand');if(!source||!brand)return;const drawer=document.createElement('aside');drawer.className='mobile-drawer-clone';drawer.innerHTML=source.innerHTML;drawer.querySelector('.mobile-nav-close')?.remove();const close=document.createElement('button');close.className='mobile-drawer-close';close.type='button';close.textContent='×';close.setAttribute('aria-label','Navigation schließen');drawer.prepend(close);const shade=document.createElement('div');shade.className='mobile-drawer-shade';document.body.append(shade,drawer);const closeDrawer=()=>{drawer.classList.remove('open');shade.classList.remove('open');document.body.classList.remove('mobile-nav-open')};const openDrawer=()=>{if(window.matchMedia('(max-width:700px)').matches){drawer.classList.add('open');shade.classList.add('open');document.body.classList.add('mobile-nav-open')}};brand.addEventListener('click',openDrawer);shade.addEventListener('click',closeDrawer);close.addEventListener('click',closeDrawer);drawer.addEventListener('click',event=>{const button=event.target.closest('button[data-view]');if(!button)return;source.querySelector(`button[data-view="${button.dataset.view}"]`)?.click();closeDrawer()})});</script>
<style>@media(max-width:700px){.mobile-drawer-shade{display:none;position:fixed!important;inset:0!important;z-index:1900!important;background:rgba(0,0,0,.62)!important;backdrop-filter:blur(3px)}.mobile-drawer-shade.open{display:block!important}.mobile-drawer-clone{display:flex!important;position:fixed!important;visibility:visible!important;opacity:1!important;top:0!important;left:0!important;bottom:0!important;width:min(84vw,320px)!important;z-index:2000!important;flex-direction:column!important;gap:5px!important;padding:62px 12px 18px!important;margin:0!important;overflow-y:auto!important;overflow-x:hidden!important;background:#1c2027!important;border-right:1px solid #465160!important;box-shadow:16px 0 45px rgba(0,0,0,.5)!important;transform:translate3d(-110%,0,0)!important;transition:transform .24s ease!important}.mobile-drawer-clone.open{transform:translate3d(0,0,0)!important}.mobile-drawer-clone button{display:block!important;flex:0 0 auto!important;width:100%!important;min-height:42px!important;padding:12px 13px!important;text-align:left!important;border:0!important;border-radius:8px!important;background:transparent!important;color:#c7d0dc!important;font-size:13px!important;white-space:nowrap!important}.mobile-drawer-clone button.active{background:#303b49!important;color:#fff!important}.mobile-drawer-clone .mobile-drawer-close{position:absolute!important;top:14px!important;right:12px!important;width:34px!important;min-height:34px!important;height:34px!important;padding:0!important;border:1px solid #4a5563!important;background:#292f38!important;color:#dce8f3!important;text-align:center!important;font-size:23px!important;line-height:1!important}.mobile-drawer-clone img{width:15px!important;height:15px!important;margin-right:6px!important;vertical-align:-3px!important;object-fit:contain!important}}</style>
<script>document.addEventListener('DOMContentLoaded',()=>{const close=document.querySelector('.mobile-nav-close');if(close){close.style.fontSize='23px';close.style.padding='0'}});</script>
<script>document.addEventListener('DOMContentLoaded',()=>{const brand=document.querySelector('.brand'),nav=document.querySelector('.nav');if(!brand||!nav)return;const backdrop=document.createElement('div');backdrop.className='mobile-nav-backdrop';const close=document.createElement('button');close.className='mobile-nav-close';close.type='button';close.setAttribute('aria-label','Navigation schließen');close.textContent='×';nav.prepend(close);document.body.appendChild(backdrop);const drawerStyle=document.createElement('style');drawerStyle.textContent='@media(max-width:700px){.nav.mobile-drawer-open{position:fixed!important;display:flex!important;visibility:visible!important;opacity:1!important;top:0!important;left:0!important;bottom:0!important;width:min(82vw,310px)!important;max-width:none!important;overflow-y:auto!important;overflow-x:hidden!important;transform:translate3d(0,0,0)!important;z-index:1000!important}.nav:not(.mobile-drawer-open){transform:translate3d(-105%,0,0)!important}}';document.head.appendChild(drawerStyle);const closeNav=()=>{document.body.classList.remove('mobile-nav-open');nav.classList.remove('mobile-drawer-open')};const openNav=()=>{if(window.matchMedia('(max-width: 700px)').matches){document.body.classList.add('mobile-nav-open');nav.classList.add('mobile-drawer-open')}};brand.addEventListener('click',openNav);backdrop.addEventListener('click',closeNav);close.addEventListener('click',closeNav);nav.addEventListener('click',event=>{if(event.target.closest('button[data-view]'))closeNav()})});</script>
<style>.mobile-nav-close,.mobile-nav-backdrop{display:none}@media(max-width:700px){.brand{cursor:pointer}.mobile-nav-backdrop{position:fixed;inset:0;z-index:130;background:rgba(0,0,0,.58);backdrop-filter:blur(2px)}body.mobile-nav-open .mobile-nav-backdrop{display:block}.nav{position:fixed;top:0;bottom:0;left:0;z-index:140;width:min(82vw,310px);margin:0!important;padding:62px 12px 18px!important;display:flex;flex-direction:column;align-items:stretch;gap:5px;overflow-y:auto;border:0!important;border-right:1px solid #3c4653!important;border-radius:0!important;background:rgba(28,32,39,.98)!important;box-shadow:14px 0 40px rgba(0,0,0,.35);transform:translateX(-105%);transition:transform .24s ease}.nav button{flex:0 0 auto!important;text-align:left;padding:12px 13px!important;border-radius:8px!important;font-size:13px!important}.nav button.active{background:#303b49}.mobile-nav-close{display:block;position:absolute;top:14px;right:12px;width:34px;height:34px;padding:0;border:1px solid #4a5563;border-radius:8px;background:#292f38;color:#dce8f3;font-size:23px;line-height:1}.mobile-nav-open .nav{transform:translateX(0)}body.mobile-nav-open{overflow:hidden}#movies,#sonarr table,#missing table{min-width:0;width:100%;table-layout:fixed}#movies th:nth-child(3),#movies td:nth-child(3),#movies th:nth-child(6),#movies td:nth-child(6),#movies th:nth-child(7),#movies td:nth-child(7),#sonarr th:nth-child(3),#sonarr td:nth-child(3),#sonarr th:nth-child(6),#sonarr td:nth-child(6),#sonarr th:nth-child(7),#sonarr td:nth-child(7),#missing th:nth-child(3),#missing td:nth-child(3),#missing th:nth-child(6),#missing td:nth-child(6),#missing th:nth-child(7),#missing td:nth-child(7){display:none}#movies th:nth-child(1),#sonarr th:nth-child(1),#missing th:nth-child(1){width:46%}#movies th:nth-child(2),#sonarr th:nth-child(2),#missing th:nth-child(2){width:18%}#movies th:nth-child(4),#movies th:nth-child(5),#sonarr th:nth-child(4),#sonarr th:nth-child(5),#missing th:nth-child(4),#missing th:nth-child(5){width:18%}#movies td,#sonarr td,#missing td{padding:8px 6px;font-size:11px}.badges{gap:3px}.badge{padding:2px 5px;font-size:10px}.title{max-width:100%}.tablewrap{overflow-x:hidden}.series-category>.series table{min-width:0!important}}</style>