feat: Refactor download queue UI with real-time updates, add queue management buttons, and streamline socket event handling.

This commit is contained in:
2026-01-01 00:32:59 +09:00
parent 681fc0790c
commit 9e25f1f02e
13 changed files with 1431 additions and 845 deletions

View File

@@ -359,11 +359,11 @@
// tmp +=
// '<img class="card-img-top lazyload" src="./static/img_loader_x200.svg" data-original="' + data.episode[i].image_link + '" />';
tmp +=
'<img class="card-img-top lazy" src="{{ url_for('.static', filename='img_loader_x200.svg') }}" data-lazy-src="' +
`<img class="card-img-top lazy" src="{{ url_for('.static', filename='img_loader_x200.svg') }}" data-lazy-src="` +
data.data[i].postthum +
'" style="cursor: pointer" onclick="location.href=\'./request?code=' +
`" style="cursor: pointer" onclick="location.href='./request?code=` +
data.data[i].postid +
"'\"/>";
`'"/>`;
if (current_cate === "ing") {
tmp +=
'<span class="badge badge-danger badge-on-image">' +
@@ -476,7 +476,7 @@
case "ing":
// console.log("ing.....")
{#spinner_loading.style.display = "block";#}
// spinner_loading.style.display = "block";
current_cate = "ing";
get_anime_list(1, "ing");
break;
@@ -680,7 +680,7 @@
console.dir(e.target.scrollingElement.scrollHeight);
const {scrollTop, scrollHeight, clientHeight} = e.target.scrollingElement;
if (Math.round(scrollHeight - scrollTop) <= clientHeight + 170) {
{#document.getElementById("spinner").style.display = "block";#}
// document.getElementById("spinner").style.display = "block";
// console.log("loading");
// console.log("now page::> ", page);
// console.log("next_page::> ", String(next_page));
@@ -796,22 +796,22 @@
<style>
:root {
--bg-primary: #0f172a;
--bg-secondary: #1e293b;
--bg-card: rgba(30, 41, 59, 0.85);
--text-primary: #f1f5f9;
--text-secondary: #94a3b8;
--accent-primary: #60a5fa;
--accent-secondary: #818cf8;
--bg-primary: #022c22;
--bg-secondary: #064e3b;
--bg-card: rgba(6, 78, 59, 0.4);
--text-primary: #ecfdf5;
--text-secondary: #6ee7b7;
--accent-primary: #10b981;
--accent-secondary: #059669;
--accent-success: #34d399;
--accent-warning: #fbbf24;
--accent-danger: #f87171;
--border-color: rgba(148, 163, 184, 0.2);
--accent-danger: #ef4444;
--border-color: rgba(16, 185, 129, 0.2);
--shadow-color: rgba(0, 0, 0, 0.3);
}
body {
background: linear-gradient(135deg, var(--bg-primary) 0%, #1a2744 50%, var(--bg-secondary) 100%) !important;
background: linear-gradient(135deg, var(--bg-primary) 0%, #064e3b 50%, var(--bg-secondary) 100%) !important;
min-height: 100vh;
font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif;
}
@@ -827,10 +827,42 @@
padding: 0 20px;
}
.container, .container-fluid {
max-width: 100% !important;
padding: 0 !important;
}
.container, .container-fluid, #anime_downloader_wrapper, #yommi_wrapper {
max-width: 100% !important;
padding-left: 5px !important;
padding-right: 5px !important;
}
/* Navigation (Tabs) Optimization */
.nav-pills {
background: rgba(6, 78, 59, 0.4) !important;
padding: 6px !important;
border-radius: 12px !important;
border: 1px solid rgba(16, 185, 129, 0.1) !important;
margin-bottom: 20px !important;
display: inline-flex !important;
gap: 4px !important;
box-shadow: 0 4px 15px rgba(0,0,0,0.2) !important;
}
.nav-pills .nav-link {
color: #d1fae5 !important;
font-weight: 600 !important;
padding: 8px 20px !important;
border-radius: 8px !important;
transition: all 0.3s ease !important;
border: 1px solid transparent !important;
}
.nav-pills .nav-link:hover {
background: rgba(16, 185, 129, 0.1) !important;
color: #fff !important;
transform: translateY(-1px);
}
.nav-pills .nav-link.active {
background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
color: #fff !important;
box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3) !important;
border: 1px solid rgba(255,255,255,0.1) !important;
}
.input-group {
max-width: 600px;
@@ -1146,9 +1178,9 @@
/* Navigation Menu Override (Top Sub-menu) */
ul.nav.nav-pills.bg-light {
background-color: rgba(30, 41, 59, 0.6) !important;
background-color: rgba(6, 78, 59, 0.6) !important;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.08);
border: 1px solid rgba(16, 185, 129, 0.08);
border-radius: 50rem !important;
padding: 6px !important;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
@@ -1163,19 +1195,19 @@
ul.nav.nav-pills .nav-link {
border-radius: 50rem !important;
padding: 8px 20px !important;
color: #94a3b8 !important;
color: #6ee7b7 !important;
font-weight: 600;
transition: all 0.3s ease;
}
ul.nav.nav-pills .nav-link:hover {
background-color: rgba(255, 255, 255, 0.1);
background-color: rgba(16, 185, 129, 0.1);
color: #fff !important;
transform: translateY(-1px);
}
ul.nav.nav-pills .nav-link.active {
background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
color: #fff !important;
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4);
box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}
</style>