diff --git a/app/public/assets/css/main.css b/app/public/assets/css/main.css index f591490..e386498 100644 --- a/app/public/assets/css/main.css +++ b/app/public/assets/css/main.css @@ -862,3 +862,25 @@ button { color: var(--muted); font-size: .88rem; } + +.timeline-zoom { + display: flex; + gap: 8px; + flex-wrap: wrap; +} + +.timeline-zoom button { + background: var(--panel-2); + border: 1px solid var(--border); + color: var(--text); + padding: 9px 12px; +} + +.timeline-zoom button.active { + background: var(--accent); + border-color: var(--accent); +} + +.timeline-wrap { + --minute-width: 2px; +} diff --git a/app/public/assets/js/app.js b/app/public/assets/js/app.js index 7b46f0c..c68f03c 100644 --- a/app/public/assets/js/app.js +++ b/app/public/assets/js/app.js @@ -135,4 +135,33 @@ document.addEventListener("DOMContentLoaded", () => { }); }); +document.addEventListener("DOMContentLoaded", () => { + const timelineWrap = document.querySelector(".timeline-wrap"); + const zoomButtons = document.querySelectorAll("[data-zoom]"); + + if (!timelineWrap || !zoomButtons.length) { + return; + } + + const savedZoom = localStorage.getItem("tvguideTimelineZoom") || "2"; + + const applyZoom = (zoom) => { + timelineWrap.style.setProperty("--minute-width", `${zoom}px`); + + zoomButtons.forEach((button) => { + button.classList.toggle("active", button.dataset.zoom === zoom); + }); + + localStorage.setItem("tvguideTimelineZoom", zoom); + }; + + zoomButtons.forEach((button) => { + button.addEventListener("click", () => { + applyZoom(button.dataset.zoom); + }); + }); + + applyZoom(savedZoom); +}); + console.log('TVGuide loaded'); diff --git a/app/templates/day.php b/app/templates/day.php index f3b4d1e..4983685 100644 --- a/app/templates/day.php +++ b/app/templates/day.php @@ -84,6 +84,13 @@ foreach ($dayProgrammes as $channel) { +