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

This commit is contained in:
2026-01-26 08:15:53 -07:00
parent a69f9df4e1
commit 669f59db15
4 changed files with 62 additions and 39 deletions

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();
});