Image viewer now sucke less

2 files changed, 25 insertions, 11 deletions

diff --git a/css/style.css b/css/style.css
index 619c4d8..bc625a6 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,3 +1,4 @@
+
 html, body {
 	margin: 0;
 	height: 100%;
@@ -306,6 +307,17 @@ input[type=submit]:hover {
 	background: white;
 }
 
+.filecontents.imgview {
+    background-color: black;
+    background-repeat: no-repeat;
+    background-position: center; 
+}
+
+.filecontentsroot, .foldercontents {
+    display: flex;
+    flex-direction: column;
+}
+
 .filecontents {
     padding: 0.8rem;
     font-size: 1.1rem;
@@ -465,3 +477,4 @@ input[type=submit]:hover {
 .close_button:hover {
     background: white;
 }
+
diff --git a/loggedin.js b/loggedin.js
index da894dd..33721e7 100644
--- a/loggedin.js
+++ b/loggedin.js
@@ -311,23 +311,24 @@ function openfile_nondir() {
     xhr.open('POST', '/php/readfile.php', true);
 
     focus.filecontents.innerText = "";
-    focus.filecontentsroot.style.display = 'block';
+    focus.filecontentsroot.style.display = 'flex';
     focus.foldercontents.style.display   = 'none';
 
     if (mimetype.split("/")[0] == "image") {
         xhr.responseType = 'arraybuffer';
         xhr.onload = function () {
-            var b = base64ArrayBuffer(xhr.response);
-            var image = new Image();
-            image.src = `data:image/png;base64,${b}`;
-            image.style.minWidth = "0px";
-            image.style.minHeight = "0px";
-
-            focus.filecontents.appendChild(image);
-            focus.filecontents.display = "flex";
+            let b = `data:image/png;base64,${base64ArrayBuffer(xhr.response)}`;
+
+
+            focus.filecontents.style.backgroundImage = `url('${b}')`;
+            focus.filecontents.classList.add('imgview');
+            focus.filecontents.innerText = "asdf";
         }
     }
     else {
+        focus.filecontents.classList.remove('imgview');
+        focus.filecontents.style.backgroundImage = "unset";
+
         xhr.onload = function () {
             focus.filecontents.innerText = xhr.responseText;
         };
@@ -402,7 +403,7 @@ function opendir() {
     xhr.send(data);
 
     focus.filecontentsroot.style.display = 'none';
-    focus.foldercontents.style.display   = 'block';
+    focus.foldercontents.style.display   = 'flex';
 }
 
 
@@ -1020,4 +1021,4 @@ document.body.oncontextmenu = (e) => {
 
 the_file.onchange = on_file_added;
 
-main();
\ No newline at end of file
+main();