diff --git a/webui/index.html b/webui/index.html index f5a2f49..faea273 100644 --- a/webui/index.html +++ b/webui/index.html @@ -4,7 +4,7 @@ Telegram Scraper Control Panel - +
diff --git a/webui/style.css b/webui/style.css index 492b881..3898a00 100644 --- a/webui/style.css +++ b/webui/style.css @@ -47,7 +47,8 @@ button { } .app-shell { - min-height: 100vh; + height: 100vh; + overflow: hidden; display: grid; grid-template-columns: 300px minmax(0, 1fr); } @@ -59,6 +60,7 @@ button { } .content { + overflow-y: auto; padding: 28px; max-width: 1320px; width: 100%; @@ -494,6 +496,10 @@ tbody tr:hover { overflow-y: auto; } +.sidebar-toggle { + display: none; +} + .viewer-sidebar-head { display: flex; align-items: flex-start; @@ -814,6 +820,10 @@ tbody tr:hover { grid-template-columns: 1fr; } + .app-shell { + grid-template-rows: auto 1fr; + } + .sidebar, .viewer-sidebar { border-right: 0; @@ -825,14 +835,114 @@ tbody tr:hover { } } -@media (max-width: 720px) { - .content, - .viewer-main, - .sidebar, +/* ---------- Mobile: tablet & phone ---------- */ + +@media (max-width: 768px) { + .sidebar-toggle { + display: inline-flex; + } + .viewer-sidebar { + position: fixed; + left: -300px; + top: 0; + bottom: 0; + width: 280px; + z-index: 100; + transition: left 0.2s ease; + border-right: 1px dashed var(--line); + border-bottom: 0; + } + + .viewer-sidebar.open { + left: 0; + } + + .viewer-sidebar.open::before { + content: ""; + position: fixed; + inset: 0; + background: rgba(0, 0, 0, 0.5); + z-index: -1; + } + + .viewer-header { + padding: 12px 14px; + } + + .messages-list { + padding: 8px 12px 16px; + } + + .chat-bubble { + max-width: 92%; + } + + .chat-bubble::before { + display: none; + } + + .content { padding: 18px; } + .viewer-sidebar-head h1 { + font-size: 1.2rem; + } +} + +@media (max-width: 480px) { + .content { + padding: 12px; + } + + .viewer-main { + padding: 0; + } + + .viewer-header { + padding: 10px 10px; + } + + .viewer-header h2 { + font-size: 1.1rem; + } + + .messages-list { + padding: 6px 8px 12px; + } + + .chat-bubble { + max-width: 96%; + padding: 6px 9px; + font-size: 0.92rem; + } + + .chat-footer { + font-size: 0.65rem; + } + + .chat-sender { + font-size: 0.75rem; + } + + .chat-reply-author { + font-size: 0.72rem; + } + + .chat-reply-text { + font-size: 0.75rem; + } + + .sidebar { + padding: 16px; + } + + .viewer-sidebar { + width: 260px; + padding: 16px; + } + .panel-header, .viewer-header, .dialog-header { diff --git a/webui/viewer.html b/webui/viewer.html index 718e9cf..1dfe75e 100644 --- a/webui/viewer.html +++ b/webui/viewer.html @@ -4,7 +4,7 @@ Telegram Scraper Viewer - +
@@ -14,6 +14,7 @@
Export Viewer

Messages

+ Dashboard
diff --git a/webui/viewer.js b/webui/viewer.js index deb7f83..4e211b0 100644 --- a/webui/viewer.js +++ b/webui/viewer.js @@ -81,6 +81,7 @@ function renderChannelList() { node.classList.add("active"); } node.addEventListener("click", () => { + document.querySelector(".viewer-sidebar")?.classList.remove("open"); viewerState.oldestMessageId = null; viewerState.newestMessageId = null; loadChannel(channel.channel_id); @@ -304,6 +305,19 @@ async function main() { } setupInfiniteScroll(); + + const toggle = document.getElementById("sidebar-toggle"); + const sidebar = document.querySelector(".viewer-sidebar"); + if (toggle && sidebar) { + toggle.addEventListener("click", () => { + sidebar.classList.toggle("open"); + }); + sidebar.addEventListener("click", (e) => { + if (e.target === sidebar) { + sidebar.classList.remove("open"); + } + }); + } } main().catch((error) => {