john-okeefe
486c16172b
Fix multiple issues with wood paneling background image display affecting overscroll area and page-specific rendering. CSS changes in web/static/input.css: - Add background-attachment: fixed to all wood paneling classes - Prevents wood paneling from moving during page scroll - Ensures wood paneling extends into overscroll area - Applied to bg-wood-dark, bg-wood-light, bg-wood-mahogany - Fix body and container selectors for wood paneling - Ensure proper selector targeting for wood paneling application - Use background-position: center for better alignment - Use background-size: cover for full coverage TypeScript changes in web/src/woodPanelingInit.ts: - Add page detection to prevent wood paneling on collections page - Check if #collections-container exists in DOM - Only apply wood paneling on dashboard, not collections page - Prevents ID collision between dashboard and collections containers Template changes in templates/header.templ: - No functional changes, only reformatting These fixes ensure that: 1. Wood paneling displays consistently across the entire viewport 2. Wood paneling extends into the overscroll area when scrolling past content 3. Wood paneling is properly aligned and centered 4. Wood paneling doesn't interfere with collections page rendering 5. Both dashboard and collections pages can coexist without visual conflicts
101 lines
2.9 KiB
TypeScript
101 lines
2.9 KiB
TypeScript
// Wood paneling management functionality
|
|
|
|
type WoodPanelingType = "none" | "wood-light" | "wood-dark" | "wood-mahogany";
|
|
|
|
const WOOD_STORAGE_KEY = "wood-paneling";
|
|
|
|
// Apply wood paneling to collections container
|
|
const applyWoodPaneling = (paneling: WoodPanelingType): void => {
|
|
const container = document.getElementById("collections-container");
|
|
const body = document.body;
|
|
if (!container || !body) return;
|
|
|
|
// Remove all wood background classes from container
|
|
container.classList.remove(
|
|
"bg-wood-light",
|
|
"bg-wood-dark",
|
|
"bg-wood-mahogany",
|
|
);
|
|
container.removeAttribute("data-wood");
|
|
|
|
// Remove from body
|
|
body.classList.remove("bg-wood-light", "bg-wood-dark", "bg-wood-mahogany");
|
|
|
|
if (paneling !== "none") {
|
|
// Add selected wood background class to both container and body
|
|
const woodClass = `bg-${paneling}`;
|
|
container.classList.add(woodClass);
|
|
container.setAttribute("data-wood", paneling);
|
|
|
|
// Add to body for overscroll area
|
|
body.classList.add(woodClass);
|
|
}
|
|
|
|
// Save to localStorage
|
|
localStorage.setItem(WOOD_STORAGE_KEY, paneling);
|
|
};
|
|
|
|
// Load wood paneling from localStorage on page load
|
|
const loadWoodPaneling = (): void => {
|
|
const stored = localStorage.getItem(
|
|
WOOD_STORAGE_KEY,
|
|
) as WoodPanelingType | null;
|
|
if (stored) {
|
|
applyWoodPaneling(stored);
|
|
} else {
|
|
// Default to none
|
|
applyWoodPaneling("none");
|
|
}
|
|
};
|
|
|
|
// Change wood paneling (called from theme dropdown)
|
|
const changeWoodPaneling = (paneling: WoodPanelingType): void => {
|
|
applyWoodPaneling(paneling);
|
|
|
|
// Update active indicators
|
|
updateWoodPanelingIndicators();
|
|
|
|
// Close dropdown
|
|
const dropdown = document.getElementById("theme-dropdown");
|
|
if (dropdown) {
|
|
dropdown.classList.add("hidden");
|
|
}
|
|
};
|
|
|
|
// Update visual indicators for wood paneling buttons
|
|
const updateWoodPanelingIndicators = (): void => {
|
|
const currentWood = localStorage.getItem(WOOD_STORAGE_KEY) || "none";
|
|
|
|
// Update wood paneling buttons
|
|
document.querySelectorAll(".wood-paneling-btn").forEach((btn) => {
|
|
const wood = btn.getAttribute("data-wood");
|
|
if (wood === currentWood) {
|
|
// Active state - use CSS class instead of inline style
|
|
btn.classList.add("bg-wood-active");
|
|
btn.classList.remove("bg-wood-inactive");
|
|
} else {
|
|
// Inactive state
|
|
btn.classList.remove("bg-wood-active");
|
|
btn.classList.add("bg-wood-inactive");
|
|
}
|
|
});
|
|
};
|
|
|
|
// Make functions available globally
|
|
(window as any).changeWoodPaneling = changeWoodPaneling;
|
|
(window as any).loadWoodPaneling = loadWoodPaneling;
|
|
(window as any).updateWoodPanelingIndicators = updateWoodPanelingIndicators;
|
|
|
|
// Auto-initialize when DOM is ready
|
|
if (typeof document !== "undefined") {
|
|
if (document.readyState === "loading") {
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
loadWoodPaneling();
|
|
updateWoodPanelingIndicators();
|
|
});
|
|
} else {
|
|
loadWoodPaneling();
|
|
updateWoodPanelingIndicators();
|
|
}
|
|
}
|