forust/telegram-scraper
1
0
Fork 0
Code Issues Pull Requests Actions Packages Activity

sidebar toggle + css

Browse Source
This commit is contained in:
mr-forust
2026-06-11 18:19:09 +02:00
parent c5361f2271
commit 7af597b800
4 changed files with 132 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webui/index.html
+1 -1
View File
@@ -4,7 +4,7 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Telegram Scraper Control Panel</title> <title>Telegram Scraper Control Panel</title>
<link rel="stylesheet" href="/static/style.css" /> <link rel="stylesheet" href="/static/style.css?v=2" />
</head> </head>
<body> <body>
<div class="app-shell"> <div class="app-shell">
webui/style.css
+115 -5
View File
@@ -47,7 +47,8 @@ button {
} }
.app-shell { .app-shell {
min-height: 100vh; height: 100vh;
overflow: hidden;
display: grid; display: grid;
grid-template-columns: 300px minmax(0, 1fr); grid-template-columns: 300px minmax(0, 1fr);
} }
@@ -59,6 +60,7 @@ button {
} }
.content { .content {
overflow-y: auto;
padding: 28px; padding: 28px;
max-width: 1320px; max-width: 1320px;
width: 100%; width: 100%;
@@ -494,6 +496,10 @@ tbody tr:hover {
overflow-y: auto; overflow-y: auto;
} }
.sidebar-toggle {
display: none;
}
.viewer-sidebar-head { .viewer-sidebar-head {
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
@@ -814,6 +820,10 @@ tbody tr:hover {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
.app-shell {
grid-template-rows: auto 1fr;
}
.sidebar, .sidebar,
.viewer-sidebar { .viewer-sidebar {
border-right: 0; border-right: 0;
@@ -825,14 +835,114 @@ tbody tr:hover {
} }
} }
@media (max-width: 720px) { /* ---------- Mobile: tablet & phone ---------- */
.content,
.viewer-main, @media (max-width: 768px) {
.sidebar, .sidebar-toggle {
display: inline-flex;
}
.viewer-sidebar { .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; 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, .panel-header,
.viewer-header, .viewer-header,
.dialog-header { .dialog-header {
webui/viewer.html
+2 -1
View File
@@ -4,7 +4,7 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Telegram Scraper Viewer</title> <title>Telegram Scraper Viewer</title>
<link rel="stylesheet" href="/static/style.css" /> <link rel="stylesheet" href="/static/style.css?v=2" />
</head> </head>
<body> <body>
<div class="viewer-shell"> <div class="viewer-shell">
@@ -14,6 +14,7 @@
<div class="eyebrow">Export Viewer</div> <div class="eyebrow">Export Viewer</div>
<h1>Messages</h1> <h1>Messages</h1>
</div> </div>
<button id="sidebar-toggle" class="button button-small sidebar-toggle">☰</button>
<a class="button button-small" href="/">Dashboard</a> <a class="button button-small" href="/">Dashboard</a>
</div> </div>
<div id="viewer-channel-list" class="viewer-channel-list"></div> <div id="viewer-channel-list" class="viewer-channel-list"></div>
webui/viewer.js
+14
View File
@@ -81,6 +81,7 @@ function renderChannelList() {
node.classList.add("active"); node.classList.add("active");
} }
node.addEventListener("click", () => { node.addEventListener("click", () => {
document.querySelector(".viewer-sidebar")?.classList.remove("open");
viewerState.oldestMessageId = null; viewerState.oldestMessageId = null;
viewerState.newestMessageId = null; viewerState.newestMessageId = null;
loadChannel(channel.channel_id); loadChannel(channel.channel_id);
@@ -304,6 +305,19 @@ async function main() {
} }
setupInfiniteScroll(); 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) => { main().catch((error) => {