From a8541ec70070b642616f995465b4559f8ab655e0 Mon Sep 17 00:00:00 2001
From: Kieran <kieran@harkin.me>
Date: Sun, 27 Feb 2022 21:37:16 +0000
Subject: [PATCH] Cleanup preview styles

---
 VoidCat/spa/src/FileEdit.css    |  6 ------
 VoidCat/spa/src/FileEdit.js     |  6 +++---
 VoidCat/spa/src/FilePreview.css | 19 ++++---------------
 VoidCat/spa/src/FilePreview.js  | 15 ++++++++++++---
 VoidCat/spa/src/index.css       |  8 ++++++++
 5 files changed, 27 insertions(+), 27 deletions(-)

diff --git a/VoidCat/spa/src/FileEdit.css b/VoidCat/spa/src/FileEdit.css
index 0f0c258..a6dafc0 100644
--- a/VoidCat/spa/src/FileEdit.css
+++ b/VoidCat/spa/src/FileEdit.css
@@ -1,13 +1,7 @@
 .file-edit {
-    display: flex;
-    flex-direction: row;
     text-align: start;
 }
 
-.file-edit > div {
-    flex: 1;
-}
-
 .file-edit svg {
     vertical-align: middle;
     margin-left: 10px;
diff --git a/VoidCat/spa/src/FileEdit.js b/VoidCat/spa/src/FileEdit.js
index 52ae953..6b11577 100644
--- a/VoidCat/spa/src/FileEdit.js
+++ b/VoidCat/spa/src/FileEdit.js
@@ -34,8 +34,8 @@ export function FileEdit(props) {
 
     const meta = file.metadata;
     return (
-        <div className="file-edit">
-            <div>
+        <div className="file-edit flex">
+            <div className="flx-1">
                 <h3>File info</h3>
                 <dl>
                     <dt>Filename:</dt>
@@ -45,7 +45,7 @@ export function FileEdit(props) {
                 </dl>
 
             </div>
-            <div>
+            <div className="flx-1">
                 <h3>Paywall Config</h3>
                 Type:
                 <select onChange={(e) => setPaywall(parseInt(e.target.value))} value={paywall}>
diff --git a/VoidCat/spa/src/FilePreview.css b/VoidCat/spa/src/FilePreview.css
index 2d2dd9a..bc81554 100644
--- a/VoidCat/spa/src/FilePreview.css
+++ b/VoidCat/spa/src/FilePreview.css
@@ -1,30 +1,19 @@
 .preview {
     margin-top: 2vh;
-    width: 720px;
-    margin-left: auto;
-    margin-right: auto;
-    text-align: center;
 }
 
-.preview > a {
-    margin-bottom: 1vh;
-}
-
-.preview img {
+.preview img, .preview video, .preview object {
     width: 100%;
 }
 
-.preview video {
-    width: 100%;
-}
-
-.file-stats {
+.preview .file-stats {
     line-height: 32px;
     display: grid;
     grid-auto-flow: column;
+    text-align: center;
 }
 
-.file-stats svg {
+.preview .file-stats svg {
     vertical-align: middle;
     margin-right: 10px;
 }
\ No newline at end of file
diff --git a/VoidCat/spa/src/FilePreview.js b/VoidCat/spa/src/FilePreview.js
index 963eaaa..a31a460 100644
--- a/VoidCat/spa/src/FilePreview.js
+++ b/VoidCat/spa/src/FilePreview.js
@@ -56,6 +56,9 @@ export function FilePreview() {
                 case "application/pdf": {
                     return <object data={link}/>;
                 }
+                default: {
+                    return <h3>{info.metadata?.name ?? info.id}</h3>
+                }
             }
         }
         return null;
@@ -102,7 +105,7 @@ export function FilePreview() {
     }, [info]);
 
     return (
-        <div className="preview">
+        <div className="preview page">
             {info ? (
                 <Fragment>
                     <Helmet>
@@ -110,7 +113,14 @@ export function FilePreview() {
                         <meta name="description" content={info.metadata?.description}/>
                         {renderOpenGraphTags()}
                     </Helmet>
-                    <a className="btn" href={link}>{info.metadata?.name ?? info.id}</a>
+                    <div className="flex flex-center">
+                        <div className="flx-grow">
+                            {info.uploader ? <InlineProfile profile={info.uploader}/> : null}
+                        </div>
+                        <div>
+                            <a className="btn" href={link} download={info.metadata?.name ?? info.id}>Download</a>
+                        </div>
+                    </div>
                     {renderTypes()}
                     <div className="file-stats">
                         <div>
@@ -122,7 +132,6 @@ export function FilePreview() {
                             {FormatBytes(info?.metadata?.size ?? 0, 2)}
                         </div>
                     </div>
-                    {info.uploader ? <InlineProfile profile={info.uploader}/> : null}
                     <FileEdit file={info}/>
                 </Fragment>
             ) : "Not Found"}
diff --git a/VoidCat/spa/src/index.css b/VoidCat/spa/src/index.css
index a3d36cd..b711eb1 100644
--- a/VoidCat/spa/src/index.css
+++ b/VoidCat/spa/src/index.css
@@ -40,6 +40,14 @@ a:hover {
     flex: 1;
 }
 
+.flx-2 {
+    flex: 2;
+}
+
+.flx-grow {
+    flex-grow: 1;
+}
+
 .flex-center {
     align-items: center;
 }
\ No newline at end of file