sidebar toggle + css
This commit is contained in:
+1
-1
@@ -4,7 +4,7 @@
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Telegram Scraper Control Panel</title>
|
||||
<link rel="stylesheet" href="/static/style.css" />
|
||||
<link rel="stylesheet" href="/static/style.css?v=2" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="app-shell">
|
||||
|
||||
+115
-5
@@ -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 {
|
||||
|
||||
+2
-1
@@ -4,7 +4,7 @@
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Telegram Scraper Viewer</title>
|
||||
<link rel="stylesheet" href="/static/style.css" />
|
||||
<link rel="stylesheet" href="/static/style.css?v=2" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="viewer-shell">
|
||||
@@ -14,6 +14,7 @@
|
||||
<div class="eyebrow">Export Viewer</div>
|
||||
<h1>Messages</h1>
|
||||
</div>
|
||||
<button id="sidebar-toggle" class="button button-small sidebar-toggle">☰</button>
|
||||
<a class="button button-small" href="/">Dashboard</a>
|
||||
</div>
|
||||
<div id="viewer-channel-list" class="viewer-channel-list"></div>
|
||||
|
||||
@@ -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) => {
|
||||
|
||||
Reference in New Issue
Block a user