diff --git a/Jellyfin.Plugin.MediaCleaner/Pages/global.css b/Jellyfin.Plugin.MediaCleaner/Pages/global.css index bd837c6..455486a 100644 --- a/Jellyfin.Plugin.MediaCleaner/Pages/global.css +++ b/Jellyfin.Plugin.MediaCleaner/Pages/global.css @@ -24,6 +24,25 @@ td, th { text-align: left; } +.table-text { + font-size: large; + text-align: center; +} + +/* Custom emby checkbox for table */ +.table-checkbox { + padding-left: 1.05rem; +} + +.table-checkbox .checkboxContainer .emby-checkbox-label .checkboxOutline { + height: 1.5em; + width: 1.5em; +} + +.table-checkbox .checkboxContainer .emby-checkbox-label { + height: 1.8em +} + .links { background-color: #0f0f0f; border: 1px solid #00a4dc; diff --git a/Jellyfin.Plugin.MediaCleaner/Pages/home.html b/Jellyfin.Plugin.MediaCleaner/Pages/home.html index 3553396..f2fea7c 100644 --- a/Jellyfin.Plugin.MediaCleaner/Pages/home.html +++ b/Jellyfin.Plugin.MediaCleaner/Pages/home.html @@ -13,7 +13,7 @@ Name - Actions + @@ -26,7 +26,7 @@ Name Seasons - Actions + diff --git a/Jellyfin.Plugin.MediaCleaner/Pages/home.js b/Jellyfin.Plugin.MediaCleaner/Pages/home.js index 8ab79f6..c32919f 100644 --- a/Jellyfin.Plugin.MediaCleaner/Pages/home.js +++ b/Jellyfin.Plugin.MediaCleaner/Pages/home.js @@ -66,22 +66,39 @@ const selectedMovies = new Set(); const selectedTvShows = new Set(); const createCheckbox = (mediaInfo = {}, state = []) => { - const checkbox = document.createElement('input'); - checkbox.type = 'checkbox'; - checkbox.dataset.mediaInfo = JSON.stringify(mediaInfo) || ''; + const container = document.createElement('div'); + container.className = 'checkboxContainer'; + container.style.marginBottom = 0; - checkbox.addEventListener('change', (e) => { - const mediaInfo = checkbox.dataset.mediaInfo || '(no info)'; - if (checkbox.checked) { - state.add(mediaInfo); - } else { - state.delete(mediaInfo); - } - // Update UI or state — use console.log for debugging - console.log('selected:', Array.from(state)); - }); + const label = document.createElement('label'); + label.className = 'emby-checkbox-label'; + label.style.textAlign = 'center'; + label.style.paddingLeft = '1.8em'; - return checkbox; + const checkbox = document.createElement('input'); + checkbox.type = 'checkbox'; + checkbox.setAttribute('is', 'emby-checkbox'); + checkbox.dataset.mediaInfo = JSON.stringify(mediaInfo) || ''; + + const span = document.createElement('span'); + span.textContent = ''; + + label.appendChild(checkbox); + label.appendChild(span); + container.appendChild(label); + + checkbox.addEventListener('change', (e) => { + const mediaInfo = checkbox.dataset.mediaInfo || '(no info)'; + if (checkbox.checked) { + state.add(mediaInfo); + } else { + state.delete(mediaInfo); + } + // Update UI or state — use console.log for debugging + console.log('selected:', Array.from(state)); + }); + + return container; }; const populateTables = async () => { @@ -100,8 +117,9 @@ const populateTables = async () => { var cell1 = row.insertCell(0); var cell2 = row.insertCell(1); cell1.innerHTML = moviesInfo[i].Name; + cell1.className = "table-text"; cell2.appendChild(createCheckbox(moviesInfo[i], selectedMovies)); - cell2.className = "actions-cell"; + cell2.className = "table-checkbox" } } else{ @@ -110,6 +128,7 @@ const populateTables = async () => { var cell1 = row.insertCell(0); cell1.colSpan = columnCount; cell1.innerHTML = "No stale movies found."; + cell1.className = "table-text"; } if(seriesInfo.length > 0){ @@ -119,9 +138,11 @@ const populateTables = async () => { var cell2 = row.insertCell(1); var cell3 = row.insertCell(2); cell1.innerHTML = seriesInfo[i].Name; + cell1.className = "table-text"; cell2.innerHTML = seriesInfo[i].Seasons.map(season => season.replace("Season ", "")).join(", "); + cell2.className = "table-text"; cell3.appendChild(createCheckbox(seriesInfo[i], selectedTvShows)); - cell3.className = "actions-cell"; + cell3.className = "table-checkbox" } } else{ @@ -130,6 +151,7 @@ const populateTables = async () => { var cell1 = row.insertCell(0); cell1.colSpan = columnCount; cell1.innerHTML = "No stale series found."; + cell1.className = "table-text"; } };