feat: add section headings for movies and series in missing view with language-aware labels and styled indicators
Add addMissingSections() function to inject "Filme ohne Deutsch"/"Movies without German" heading before #missingMovies table and "Serien ohne Deutsch"/"Series without German" before first .missing-series element. Style .missing-section-heading with 9px border-radius, uppercase 12px/800 text, 10px/13px padding, and glowing dot indicator. Apply blue gradient/border for .movies section
This commit is contained in:
@@ -51,6 +51,7 @@ function applySeasonZeroPreference(){const show=localStorage.getItem('show-seaso
|
||||
function syncDashboardMissingCounter(){const visibleMissing=document.querySelectorAll('#missingMovies tbody tr:not(.hidden),#missing .missing-series tbody tr:not(.season-zero-hidden):not(.season-divider)').length;const dashboardMissing=document.querySelector('#dashboardMissing');if(dashboardMissing)dashboardMissing.textContent=visibleMissing}syncDashboardMissingCounter();document.querySelector('#showSeasonZero')?.addEventListener('change',()=>setTimeout(syncDashboardMissingCounter,0));
|
||||
if('serviceWorker' in navigator)window.addEventListener('load',()=>navigator.serviceWorker.register('/static/sw.js').catch(()=>{}));
|
||||
function updateMissingHeading(){const heading=document.querySelector('#missingMovies thead th:first-child');if(heading)heading.textContent=document.documentElement.lang==='en'?'Media':'Medien'}updateMissingHeading();document.querySelector('#languageToggle')?.addEventListener('click',()=>setTimeout(updateMissingHeading,0));
|
||||
function addMissingSections(){const view=document.querySelector('#missing'),movieTable=document.querySelector('#missingMovies'),seriesItems=[...document.querySelectorAll('#missing .missing-series')];if(!view)return;const makeHeading=(type,de,en)=>{const heading=document.createElement('div');heading.className=`missing-section-heading ${type}`;heading.dataset.de=de;heading.dataset.en=en;heading.textContent=document.documentElement.lang==='en'?en:de;return heading};if(movieTable&&movieTable.querySelector('tbody tr'))movieTable.before(makeHeading('movies','Filme ohne Deutsch','Movies without German'));if(seriesItems.length)seriesItems[0].before(makeHeading('series','Serien ohne Deutsch','Series without German'))}addMissingSections();
|
||||
</script>
|
||||
<style>
|
||||
#dashboard.view.active{display:flex}.view.dashboard-view:not(.active){display:none}.meter:first-child .meter-top span::before{content:'◔';display:inline-grid;place-items:center;width:20px;height:20px;margin-right:7px;border-radius:6px;background:rgba(96,169,230,.18);color:#8bc9f2;font-size:13px}.meter:nth-child(2) .meter-top span::before{content:'▤';display:inline-grid;place-items:center;width:20px;height:20px;margin-right:7px;border-radius:6px;background:rgba(146,87,194,.2);color:#d7adf3;font-size:13px}.disk-name::before{content:'▰';display:grid;grid-column:1;grid-row:1 / span 2;place-items:center;width:20px;height:20px;margin:0;border-radius:6px;background:rgba(244,196,48,.16);color:#f4c430;font-size:11px}.meter-top span,.disk-name{display:flex;align-items:center}.disk-name{display:grid;grid-template-columns:20px minmax(0,1fr);grid-template-rows:auto auto;column-gap:7px;align-items:center;min-width:92px;line-height:1.1}.disk-name:not(:has(.disk-path)){grid-template-rows:auto}.disk-name .disk-path{grid-column:2;grid-row:2;white-space:nowrap}.disk-name .disk-path:empty{display:none}
|
||||
@@ -66,6 +67,7 @@ details.series:last-child{margin-bottom:0}
|
||||
.season-zero-hidden,.season-zero-empty{display:none!important}.setting-toggle{display:flex!important;align-items:center;gap:10px;margin:18px 0 6px!important;cursor:pointer}.setting-toggle input{appearance:none;width:42px;height:23px;margin:0;border:1px solid #505967;border-radius:999px;background:#30343b;position:relative;cursor:pointer;transition:.2s}.setting-toggle input::after{content:"";position:absolute;width:17px;height:17px;left:2px;top:2px;border-radius:50%;background:#9da5b2;transition:.2s}.setting-toggle input:checked{background:#176f40;border-color:#23965b}.setting-toggle input:checked::after{transform:translateX(19px);background:#e4ffef}.setting-toggle span{font-weight:700;color:#cbd1db}
|
||||
.missing-table table{table-layout:fixed}.missing-table tbody tr{transform:none!important;animation:none!important}.missing-table .missing-series tbody tr:hover{transform:none!important}
|
||||
.missing-table{padding:10px}.missing-table>table{width:100%;margin:0 0 8px;border:1px solid rgba(255,255,255,.09);border-radius:10px;overflow:hidden}.missing-table .missing-series{margin:8px 0 0!important}.missing-table thead th{height:38px;padding:0 12px;vertical-align:middle;background:#2d3540;border-right:1px solid rgba(255,255,255,.06)}.missing-table thead th:last-child{border-right:0}.missing-table .missing-series summary{min-height:42px;display:flex;align-items:center}
|
||||
.missing-section-heading{display:flex;align-items:center;gap:10px;margin:14px 0 8px;padding:10px 13px;border-radius:9px;font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}.missing-section-heading:first-child{margin-top:0}.missing-section-heading::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 10px currentColor}.missing-section-heading.movies{color:#8fc9f2;background:linear-gradient(90deg,rgba(96,169,230,.16),rgba(96,169,230,.04));border:1px solid rgba(96,169,230,.2)}.missing-section-heading.series{color:#e2a9aa;background:linear-gradient(90deg,rgba(190,83,83,.16),rgba(190,83,83,.04));border:1px solid rgba(190,83,83,.2)}
|
||||
</style>
|
||||
<script>document.querySelectorAll('details.series').forEach(series => { series.open = false; });</script>
|
||||
<style>
|
||||
|
||||
Reference in New Issue
Block a user