From 117fe87282646a1cff1bc182f6236f668b79f189 Mon Sep 17 00:00:00 2001 From: Booteille Date: Tue, 26 Nov 2024 23:37:28 +0100 Subject: [PATCH] Fix download progress display --- themes/default/public/css/lufi.css | 10 +++++++++- themes/default/public/js/lufi-download.js | 11 +++++++---- 2 files changed, 16 insertions(+), 5 deletions(-) diff --git a/themes/default/public/css/lufi.css b/themes/default/public/css/lufi.css index c1939f1..c332c0a 100644 --- a/themes/default/public/css/lufi.css +++ b/themes/default/public/css/lufi.css @@ -842,7 +842,7 @@ main form select { height: 4px; } -.file-card .progress-bar { +.progress-bar { height: 100%; background-color: var(--progress-fg-color); transition: width 0.5s linear; @@ -1056,6 +1056,14 @@ dialog .actions { margin-right: auto; } +.download-card .progress-container { + width: 100%; + margin: 0 4px; + background-color: var(--progress-bg-color); + border-radius: 4px; + height: 4px; +} + /** Download Card --- End */ /** Download --- End */ diff --git a/themes/default/public/js/lufi-download.js b/themes/default/public/js/lufi-download.js index b9d59c4..5f95b76 100644 --- a/themes/default/public/js/lufi-download.js +++ b/themes/default/public/js/lufi-download.js @@ -102,11 +102,14 @@ document.addEventListener("DOMContentLoaded", () => { warnOnReload(); job.onProgress(() => { - const percent = Math.round( - (job.lufiFile.chunksReady * 100) / job.lufiFile.totalChunks - ); + const percent = + Math.round( + (job.lufiFile.chunksReady * 100) / job.lufiFile.totalChunks + ) + "%"; - cardDOM.querySelector(".progress-bar").style.width = `${percent}%`; + cardDOM.querySelector(".progress-bar").style.width = percent; + cardDOM.querySelector(".loading-message").innerText = + i18n.loading.replace("XX1", job.lufiFile.chunksReady); }); document.querySelector(".action-abort").onclick = () => {