Cleanup preview styles

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;

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}>

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

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

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