feat: Refactor download queue UI with real-time updates, add queue management buttons, and streamline socket event handling.
This commit is contained in:
@@ -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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user