From ba3033c0b5e7caf9ff607a0970748c0a749dd22d Mon Sep 17 00:00:00 2001
From: "Alexander \"Arav\" Andreev" <me@arav.top>
Date: Thu, 9 Sep 2021 20:46:21 +0400
Subject: [PATCH] Let's use a visibility property instead of changing a display
 option.

---
 files/static/assets/css/main.css | 3 ++-
 files/static/assets/js/main.js   | 9 ++++-----
 2 files changed, 6 insertions(+), 6 deletions(-)

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";
     }
 }));