T-Gander/jellyfin-plugin-mediacleaner
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases 11 Wiki Activity

Managed to move js styling to css file and inject it during load.

Browse Source
This commit is contained in:
Thomas Gander
2026-01-26 08:15:53 -07:00
parent a69f9df4e1
commit 669f59db15
4 changed files with 62 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
Jellyfin.Plugin.MediaCleaner/Pages/home.css Normal file
View File

@@ -0,0 +1,27 @@
table {
border: 1px solid;
border-collapse: collapse;
}
td, th {
border: 1px solid;
padding: 0.5rem 0.75rem;
text-align: left;
}
.links {
background-color: #0f0f0f;
border: 1px solid;
padding: 0.8rem 1.8rem;
font-size: 1.2rem;
color: #ffffff;
text-decoration: none;
cursor: pointer;
line-height: inherit;
vertical-align: baseline;
transition: background-color 0.3s ease;
}
.links:hover {
background-color: #2a2a2a;
}

2
Jellyfin.Plugin.MediaCleaner/Pages/home.html
View File

@@ -4,7 +4,7 @@
<div class="content-primary">
<div id="loading">Loading...</div>
<div id="page" style="visibility: hidden;">
<button class="links" data-target="#configurationpage?name=Settings">Settings</button>
<button class="links" data-target="configurationpage?name=Settings">Settings</button>
<h2>Media Cleaner</h2>
<h3 id="moviesTitle"></h3>

67
Jellyfin.Plugin.MediaCleaner/Pages/media_cleaner_table.js
View File

@@ -88,52 +88,30 @@ document.addEventListener('pageshow', async () => {
}
};
const styleTables = () => {
const tables = document.querySelectorAll("table");
const cells = document.querySelectorAll("th, td");
// const styleTables = () => {
// const tables = document.querySelectorAll("table");
// const cells = document.querySelectorAll("th, td");
tables.forEach(table => {
table.style.border = "1px solid";
table.style.borderCollapse = "collapse";
})
// tables.forEach(table => {
// table.style.border = "1px solid";
// table.style.borderCollapse = "collapse";
// })
cells.forEach(cell => {
cell.style.border = "1px solid";
cell.style.padding = "0.5rem 0.75rem";
cell.style.textAlign = "left"
});
};
// cells.forEach(cell => {
// cell.style.border = "1px solid";
// cell.style.padding = "0.5rem 0.75rem";
// cell.style.textAlign = "left"
// });
// };
const styleLinks = () => {
const addClickHandlersToLinks = () => {
const linkbtns = document.querySelectorAll("button.links")
linkbtns.forEach(btn => {
btn.style.background = "#0f0f0f";
btn.style.border = '1px solid';
btn.style.padding = '0.8rem 1.8rem';
btn.style.fontSize = "1.2rem"
btn.style.color = "white";
btn.style.textDecoration = 'none';
btn.style.cursor = 'pointer';
btn.style.lineHeight = 'inherit';
btn.style.verticalAlign = 'baseline';
btn.style.transition = 'background 0.3s ease';
const hoverBg = '#2a2a2a';
const normalBg = btn.style.background;
btn.addEventListener("click", () => {
const target = btn.dataset.target;
if (!target) return;
window.location.hash = target;
})
btn.addEventListener('mouseenter', () => {
btn.style.background = hoverBg;
});
btn.addEventListener('mouseleave', () => {
btn.style.background = normalBg;
});
})
}
@@ -146,6 +124,19 @@ document.addEventListener('pageshow', async () => {
loadingElement.style.visibility = "hidden";
}
const fetchCss = async () => {
const response = await fetch('/web/configurationpage?name=home.css')
if(!response.ok){
throw new Error(`Response status: ${response.status}`);
}
const css = await response.text();
const styles = document.createElement('style');
styles.textContent = css;
document.head.appendChild(styles);
}
moviesTitle.innerHTML = await getMediaCleanerMoviesTitle();
seriesTitle.innerHTML = await getMediaCleanerSeriesTitle();
@@ -153,7 +144,7 @@ document.addEventListener('pageshow', async () => {
var moviesInfo = await getMediaCleanerMovieInfo();
var seriesInfo = await getMediaCleanerSeriesInfo();
populateTables();
styleTables();
styleLinks();
addClickHandlersToLinks();
showElements();
fetchCss();
});