diff --git a/files/static/assets/css/main.css b/files/static/assets/css/main.css index d2bfb5d..ab06338 100644 --- a/files/static/assets/css/main.css +++ b/files/static/assets/css/main.css @@ -104,7 +104,8 @@ section { margin-top: 1rem; } #view { align-items: center; background-color: var(--view-background-color); - display: none; + display: flex; + visibility: hidden; height: 100%; left: 0; position: fixed; diff --git a/files/static/assets/js/main.js b/files/static/assets/js/main.js index 356b60a..a668885 100644 --- a/files/static/assets/js/main.js +++ b/files/static/assets/js/main.js @@ -1,7 +1,6 @@ const video_formats = ["webm", "mp4"]; const audio_formats = ["mp3", "flac", "opus", "ogg", "m4a"]; const image_formats = ["jpg", "jpeg", "gif", "png", "bmp", "webp"]; -const view_display_style = "flex"; let scale = 1; @@ -14,7 +13,7 @@ function mousescroll(e) { document.getElementById("view").addEventListener("click", e => { e.target.firstChild.remove(); - e.target.style.display = "none"; + e.target.style.visibility = "hidden"; }); const file_links = Array.from(document.getElementsByTagName('tr')).slice(2).filter((e) => e.lastChild.innerHTML != "DIR").map(v => v.firstChild.firstChild); @@ -28,7 +27,7 @@ file_links.forEach(f => f.addEventListener('click', e => { video.controls = true; video.src = e.target.pathname; document.getElementById("view").appendChild(video); - document.getElementById("view").style.display = view_display_style; + document.getElementById("view").style.visibility = "visible"; } else if (audio_formats.some(ext => e.target.pathname.endsWith(ext))) { e.preventDefault(); const audio = document.createElement("audio"); @@ -36,14 +35,14 @@ file_links.forEach(f => f.addEventListener('click', e => { audio.controls = true; audio.src = e.target.pathname; document.getElementById("view").appendChild(audio); - document.getElementById("view").style.display = view_display_style; + document.getElementById("view").style.visibility = "visible"; } else if (image_formats.some(ext => e.target.pathname.endsWith(ext))) { e.preventDefault(); const image = document.createElement("img"); image.addEventListener('wheel', mousescroll); image.src = e.target.pathname; document.getElementById("view").appendChild(image); - document.getElementById("view").style.display = view_display_style; + document.getElementById("view").style.visibility = "visible"; } }));